first commit

common/resources/client/ui/tree/tree-label.tsx

@@ -0,0 +1,73 @@
+import React, {
+  forwardRef,
+  MouseEventHandler,
+  ReactNode,
+  useContext,
+} from 'react';
+import {TreeContext} from './tree-context';
+import clsx from 'clsx';
+import {ArrowRightIcon} from '../../icons/material/ArrowRight';
+
+interface TreeLabelProps {
+  level?: number;
+  node: any;
+  icon?: ReactNode;
+  label?: ReactNode;
+  className?: string;
+}
+export const TreeLabel = forwardRef<HTMLDivElement, TreeLabelProps>(
+  ({icon, label, level = 0, node, className, ...domProps}, ref) => {
+    const {expandedKeys, setExpandedKeys, selectedKeys, setSelectedKeys} =
+      useContext(TreeContext);
+    const isExpanded = expandedKeys.includes(node.id);
+    const isSelected = selectedKeys.includes(node.id);
+
+    const handleExpandIconClick: MouseEventHandler = e => {
+      e.stopPropagation();
+      const index = expandedKeys.indexOf(node.id);
+      const newExpandedKeys = [...expandedKeys];
+      if (index > -1) {
+        newExpandedKeys.splice(index, 1);
+      } else {
+        newExpandedKeys.push(node.id);
+      }
+      setExpandedKeys(newExpandedKeys);
+    };
+
+    return (
+      <div
+        {...domProps}
+        ref={ref}
+        onClick={e => {
+          e.stopPropagation();
+          setSelectedKeys([node.id]);
+        }}
+        className={clsx(
+          'flex flex-nowrap whitespace-nowrap items-center gap-4 py-6 rounded header cursor-pointer overflow-hidden text-ellipsis tree-label',
+          className,
+          isSelected && 'bg-primary/selected text-primary font-bold',
+          !isSelected && 'hover:bg-hover'
+        )}
+      >
+        {level > 0 && (
+          <div className="flex">
+            {Array.from({length: level}).map((_, i) => {
+              return <div key={i} className="w-24 h-24" />;
+            })}
+          </div>
+        )}
+        <div onClick={handleExpandIconClick}>
+          <ArrowRightIcon
+            className={clsx(
+              'icon-sm cursor-default transition-transform',
+              isExpanded && 'rotate-90'
+            )}
+          />
+        </div>
+        {icon}
+        <div className="overflow-hidden text-ellipsis pr-6">{label}</div>
+      </div>
+    );
+  }
+);
+TreeLabel.displayName = 'TreeLabel';