import React, { us
eState } from 'react';
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
import { List } from 'react-virtualized';
import 'react-virtualized/styles.css';
import {
MdCheckBox,
MdCheckBoxOutlineBlank,
MdChevronRight,
MdKeyboardArrowDown,
MdAddBox,
MdIndeterminateCheckBox,
} from "react-icons/md";
const VirtualizedCheckboxTree = () => {
const [treeData, setTreeData] = useState([
{
value: 'node1',
label: 'Node 1',
children: [], // Initially empty
},
{
value: 'node2',
label: 'Node 2',
children: [], // Initially empty
},
{
value: 'node3',
label: 'Node 3',
children: [], // Initially empty
},
]);
const orgNodeIcons = {
check: <MdCheckBox className="rct-icon rct-icon-check" />,
uncheck: <MdCheckBoxOutlineBlank className="rct-icon rct-icon-uncheck" />,
halfCheck: (
<MdIndeterminateCheckBox className="rct-icon rct-icon-half-check" />
),
expandClose: <MdChevronRight className="rct-icon rct-icon-expand-close" />,
expandOpen: <MdKeyboardArrowDown className="rct-icon rct-icon-expand-open" />,
expandAll: <MdAddBox className="rct-icon rct-icon-expand-all" />,
collapseAll: (
<MdIndeterminateCheckBox className="rct-icon rct-icon-collapse-all" />
),
parentClose: <></>,
parentOpen: <></>,
leaf: <></>,
};
const handleLoadMore = (parentNode) => {
// Simulate loading data from an API
setTimeout(() => {
const updatedTreeData = [...treeData];
const parentIndex = updatedTreeData.findIndex(
(node) => node.value === parentNode[0]
);
if (parentIndex !== -1) {
// Dynamically add children nodes
const children = [
{ value: 'newNode1', label: 'New Node 1' },
{ value: 'newNode2', label: 'New Node 2' },
];
updatedTreeData[parentIndex].children = children;
setTreeData(updatedTreeData);
}
}, 1000);
};
const rowRenderer = ({ key, index, style }) => (
<div key={key} style={style}>
<CheckboxTree
nodes={treeData}
checked={[]}
expanded={[]}
onExpand={handleLoadMore}
showExpandAll
icons={orgNodeIcons}
/>
</div>
);
return (
<div style=>
<List
width={300}
height={400}
rowCount={1}
rowHeight={400}
rowRenderer={rowRenderer}
/>
</div>
);
};
export default VirtualizedCheckboxTree;
` In the above example i tried to add the children when user click on the expand icon but iam getting the below error
Help me with a working example to load the children on demand and also achieve the virtual scrolling
Help me with a working example to load the children on demand and also achieve the virtual scrolling
`
Aucun commentaire:
Enregistrer un commentaire