renamed folder database to xoonips.

src/xoonips/blocks/IndexTree.tsx

@@ -0,0 +1,134 @@
+import React from 'react';
+
+import Tree from 'rc-tree';
+import { DataNode, EventDataNode } from 'rc-tree/lib/interface';
+import { useNavigate } from 'react-router';
+import Loading from '../../common/lib/Loading';
+import { BrainAtlasType, MultiLang } from '../../config';
+import Functions from '../../functions';
+import IndexUtil, { INDEX_ID_PUBLIC, Index } from '../lib/IndexUtil';
+
+import styles from './IndexTree.module.css';
+
+interface Props {
+  lang: MultiLang;
+  type: BrainAtlasType;
+}
+
+const IndexTree: React.FC<Props> = (props) => {
+  const { lang, type } = props;
+  const navigate = useNavigate();
+
+  const [tree, setTree] = React.useState<DataNode[]>([]);
+  const [keys, setKeys] = React.useState<string[]>([]);
+  const [expandedKeys, setExpandedKeys] = React.useState<string[]>([]);
+  const [selectedKeys, setSelectedKeys] = React.useState<number[]>([]);
+
+  React.useEffect(() => {
+    const tree: DataNode[] = [];
+    const keys: string[] = [];
+    const eKeys: string[] = [];
+    const makeTreeNode = (index: Index, depth: number, func: (node: DataNode) => void): void => {
+      const title =
+        Functions.mlang(index.title, lang) +
+        (index.numOfItems > 0 ? ' (' + index.numOfItems + ')' : '');
+      IndexUtil.getChildren(type, index.id, (children) => {
+        if (children.length === 0) {
+          func({ key: String(index.id), title: title });
+        } else {
+          if (depth < 1) {
+            eKeys.push(String(index.id));
+          }
+          keys.push(String(index.id));
+          const childTreeNodes: DataNode[] = [];
+          let called = 0;
+          children.forEach((value: Index) => {
+            makeTreeNode(value, depth + 1, (cNode) => {
+              called++;
+              childTreeNodes.push(cNode);
+              if (called === children.length) {
+                func({ key: String(index.id), title: title, children: childTreeNodes });
+              }
+            });
+          });
+        }
+      });
+    };
+    IndexUtil.get(type, INDEX_ID_PUBLIC, (index) => {
+      if (index != null) {
+        makeTreeNode(index, 0, (node) => {
+          tree.push(node);
+          setTree(tree);
+          setKeys(keys);
+          setExpandedKeys(eKeys);
+          setSelectedKeys([]);
+        });
+      }
+    });
+  }, [lang, type]);
+
+  const handleClickOpenAll = () => {
+    setExpandedKeys(keys);
+  };
+
+  const handleClickCloseAll = () => {
+    setExpandedKeys([]);
+  };
+
+  const handleExpand: (
+    expandedKeys: React.Key[],
+    info: {
+      node: EventDataNode<DataNode>;
+      expanded: boolean;
+      nativeEvent: MouseEvent;
+    },
+  ) => void = (expandedKeys) => {
+    const keys: string[] = expandedKeys.map((key) => {
+      return typeof key === 'string' ? key : String(key);
+    });
+    setExpandedKeys(keys);
+  };
+
+  const handleSelect: (
+    selectedKeys: React.Key[],
+    info: {
+      event: 'select';
+      selected: boolean;
+      node: EventDataNode<DataNode>;
+      selectedNodes: DataNode[];
+      nativeEvent: MouseEvent;
+    },
+  ) => void = (selectedKeys) => {
+    const selectedKey = selectedKeys.shift() ?? 0;
+    const key = typeof selectedKey === 'string' ? parseInt(selectedKey, 10) : selectedKey;
+    const url = IndexUtil.getUrl(type, key);
+    navigate(url);
+    setSelectedKeys([]);
+  };
+
+  if (tree.length === 0) {
+    return <Loading />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <button className={styles.formButton} onClick={handleClickOpenAll}>
+        open all
+      </button>
+      <button className={styles.formButton} onClick={handleClickCloseAll}>
+        close all
+      </button>
+      <Tree
+        className={styles.indexTree}
+        expandedKeys={expandedKeys}
+        selectedKeys={selectedKeys}
+        onExpand={handleExpand}
+        onSelect={handleSelect}
+        showIcon={false}
+        treeData={tree}
+      />
+    </div>
+  );
+};
+
+export default IndexTree;