async loading support

[jbrodriguez]

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?

[jbrodriguez]

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

but i'm getting an error

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