async loading support about react-checkbox-tree HOT 1 OPEN

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>
  );
};