async loading support
jbrodriguez opened this issue · comments
any thoughts on how to implement async loading ?
onExpand could be used to load data but no loading animation while the user waits, unless icons are overriden ?
has anyone come across this requirement?
i tried this kind of workaround
the idea is to have a placeholder loading node as children and update the nodes array as needed, declaring it as a function state var
seems like it's not calling the static getDerivedFromProps (and thus flattenNode), but can't check it because the lib is already bundled
import React from 'react';
import CheckboxTree from 'react-checkbox-tree';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
faCheckSquare,
faSquareMinus,
faChevronRight,
faChevronDown,
faPlusSquare,
faMinusSquare,
faFolder,
faFolderOpen,
faFile,
faSpinner,
} from '@fortawesome/free-solid-svg-icons';
import { faSquare } from '@fortawesome/free-regular-svg-icons';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
interface Node {
value: string;
label: string;
children?: Node[];
showCheckbox?: boolean;
icon?: JSX.Element;
}
export const FileSystem: React.FunctionComponent = () => {
const [nodes, setNodes] = React.useState<Node[]>([
{
value: '/mnt',
label: '/mnt',
children: [
{
value: 'loading',
label: 'loading',
// children: [],
showCheckbox: false,
icon: (
<FontAwesomeIcon
className="fill-red-400 text-yellow-600"
icon={faSpinner}
/>
),
},
],
},
]);
const [checked, setChecked] = React.useState<string[]>([]);
const [expanded, setExpanded] = React.useState<string[]>([]);
const onCheck = (value: string[]) => {
console.log('onCheck ', value);
setChecked(value);
};
const onExpand = (value: string[]) => {
console.log('onExpand ', value);
// setIsLoading(true);
// const loaded =
const newNodes = [...nodes];
newNodes[0].children = [
{
value: 'films',
label: 'films',
children: [
{
value: 'loading',
label: 'loading',
children: [],
showCheckbox: false,
icon: (
<FontAwesomeIcon
className="fill-red-400 text-yellow-600"
icon={faSpinner}
/>
),
},
],
},
];
console.log('newNodes ', newNodes);
setNodes(newNodes);
setExpanded(value);
};
return (
<div className="flex flex-1 bg-neutral-200 dark:bg-gray-950">
<div className={`overflow-y-auto`} style={{ height: 500 }}>
<FontAwesomeIcon
className="rct-icon rct-icon-check"
icon="check-square"
/>
<CheckboxTree
checked={checked}
expanded={expanded}
nodes={nodes}
onCheck={onCheck}
onExpand={onExpand}
noCascade
optimisticToggle={false}
icons={{
check: (
<FontAwesomeIcon
className="fill-red-400 text-yellow-600"
icon={faCheckSquare}
/>
),
uncheck: (
<FontAwesomeIcon className="text-slate-700" icon={faSquare} />
),
halfCheck: (
<FontAwesomeIcon
className="rct-icon rct-icon-half-check"
icon={faSquareMinus}
/>
),
expandClose: (
<FontAwesomeIcon
className="rct-icon rct-icon-expand-close"
icon={faChevronRight}
/>
),
expandOpen: (
<FontAwesomeIcon
className="rct-icon rct-icon-expand-close"
icon={faChevronDown}
/>
),
expandAll: (
<FontAwesomeIcon className="fill-red-600" icon={faPlusSquare} />
),
collapseAll: (
<FontAwesomeIcon
className="rct-icon rct-icon-collapse-all"
icon={faMinusSquare}
/>
),
parentClose: (
<FontAwesomeIcon
className="rct-icon rct-icon-parent-close"
icon={faFolder}
/>
),
parentOpen: (
<FontAwesomeIcon
className="rct-icon rct-icon-parent-open"
icon={faFolderOpen}
/>
),
leaf: (
<FontAwesomeIcon
className="rct-icon rct-icon-leaf-close"
icon={faFile}
/>
),
}}
/>
</div>
</div>
);
};