Antd Tree, : how to Disable checking child by default

user_18058025 0
Viewed 197

I working on a react project using Antd and I want to be able to disable cheking childs of my Tree component, so I can check only parent.This is my code

I found that I can add checkable : false to my child but I must create a function that render me a new TreeData that I can use instead of my normal data so I've tried this :

const TreeData = (data) => {
        data.map((category) => {
            category.children.map((family) => {
                family.children.map((table) => {
                    table.checkable = false;
                });
            });
        });
    };

But it return undefined when i'm console.log the data received.. So my question is : how to switch from this :

const treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        title: "0-0-0",
        key: "0-0-0",
        children: [
          {
            title: "0-0-0-0",
            key: "0-0-0-0"
          },
          {
            title: "0-0-0-1",
            key: "0-0-0-1"
          },
          {
            title: "0-0-0-2",
            key: "0-0-0-2"
          }
        ]
      },
      {
        title: "0-0-1",
        key: "0-0-1",
        children: [
          {
            title: "0-0-1-0",
            key: "0-0-1-0"
          },
          {
            title: "0-0-1-1",
            key: "0-0-1-1"
          },
          {
            title: "0-0-1-2",
            key: "0-0-1-2"
          }
        ]
      },
      {
        title: "0-0-2",
        key: "0-0-2"
      }
    ]
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      {
        title: "0-1-0-0",
        key: "0-1-0-0"
      },
      {
        title: "0-1-0-1",
        key: "0-1-0-1"
      },
      {
        title: "0-1-0-2",
        key: "0-1-0-2"
      }
    ]
  },
  {
    title: "0-2",
    key: "0-2"
  }
];

To this :

const treeData = [
  {
    title: "0-0",
    key: "0-0",
    children: [
      {
        checkable: false,
        title: "0-0-0",
        key: "0-0-0",
        children: [
          {
            title: "0-0-0-0",
            key: "0-0-0-0"
          },
          {
            title: "0-0-0-1",
            key: "0-0-0-1"
          },
          {
            title: "0-0-0-2",
            key: "0-0-0-2"
          }
        ]
      },
      {
        checkable: false,
        title: "0-0-1",
        key: "0-0-1",
        children: [
          {
            title: "0-0-1-0",
            key: "0-0-1-0"
          },
          {
            title: "0-0-1-1",
            key: "0-0-1-1"
          },
          {
            title: "0-0-1-2",
            key: "0-0-1-2"
          }
        ]
      },
      {
        checkable: false,
        title: "0-0-2",
        key: "0-0-2"
      }
    ]
  },
  {
    title: "0-1",
    key: "0-1",
    children: [
      {
        checkable: false,
        title: "0-1-0-0",
        key: "0-1-0-0"
      },
      {
        checkable: false,
        title: "0-1-0-1",
        key: "0-1-0-1"
      },
      {
        checkable: false,
        title: "0-1-0-2",
        key: "0-1-0-2"
      }
    ]
  },
  {
    title: "0-2",
    key: "0-2"
  }
];

Without hardchanging the first data of my Tree. Thank you

antd reactjs multidimensional-array arrays javascript
1 Answers

This may be one possible implementation to set checkable as false for the specific nodes described in this question:

  const makeUnCheckable = dataArr => (
    dataArr.map(
      obj => ({
        ...obj,
        children: obj?.children?.map(cObj => ({
          ...cObj,
          checkable: false
        }))
      })
    )
  );

  return (
    <Tree
      checkable
      onExpand={onExpand}
      expandedKeys={expandedKeys}
      autoExpandParent={autoExpandParent}
      onCheck={onCheck}
      checkedKeys={checkedKeys}
      onSelect={onSelect}
      selectedKeys={selectedKeys}
      treeData={makeUnCheckable(treeData)}
    />
  );

This is the result displayed on Codesandbox:

Sample Results

NOTES:

  1. The elements showing as checked are clicked manually.
  2. There is no check option for nodes 0-0-0, 0-0-1, 0-0-2, 0-1-0-0, 0-1-0-1, 0-1-0-2 - which is the expected objective defined in the question under To this

EDITED:

On perusing this previous question it seems like OP requires something like this:

Possible actually-desired objective

(A tree where leaf nodes are uncheckable)

This may be achieved by a recursive method - something like this:

Changes to code

(Changes are present in: Lines 100 to 106. And line 118.)

EDITED - 2 Update based on comments below. In order to identify the children for any given parent/key, something like the below may be useful:

findKey and getChildren

Two methods are here. One is findKey which is recursive and gets the object which has a particular key (say 0-0-1). The other is to check if the object with the key has any children and if yes, return the children array.

user_136588160
Related