onekijs-ui 0.9.2 → 0.15.2

package/src/components/tree/components/TreeListComponent.tsx

@@ -0,0 +1,198 @@
+import { AnonymousObject } from 'onekijs-framework';
+import React, { useEffect, useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { useTreeConfig } from '../hooks/useTreeConfig';
+import useTreeService from '../hooks/useTreeService';
+import { TreeController, TreeItem, TreeItemHandler, TreeItemProps, TreeListProps, TreeState } from '../typings';
+import TreeItemComponent from './TreeItemComponent';
+
+const getChildrenSize = (
+  item: TreeItem<any> | undefined,
+  service: TreeController<any, TreeItem<any>, TreeState<any, TreeItem<any>>>,
+): number => {
+  if (item === undefined || item.children === undefined) return 0;
+  return item.children.reduce((accumulator, childUid) => {
+    const child = service.getItem(childUid);
+    const expanded = !!(child && child.expanded && !child.collapsing);
+    return accumulator + 1 + (expanded ? getChildrenSize(child, service) : 0);
+  }, 0);
+};
+
+type TreeListItemProps<T = any, I extends TreeItem<T> = TreeItem<T>> = {
+  item: I;
+  index: number;
+  itemClassName?: string | ((item: I) => string);
+  ItemComponent: React.FC<TreeItemProps<T, I>>;
+  onClick?: TreeItemHandler<T, I>;
+  onMouseEnter?: TreeItemHandler<T, I>;
+  onMouseLeave?: TreeItemHandler<T, I>;
+  defer?: () => void;
+};
+
+const TreeListItemComponent: React.FC<TreeListItemProps> = ({
+  index,
+  item,
+  itemClassName,
+  ItemComponent,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
+  const className = typeof itemClassName !== 'function' ? itemClassName : item ? itemClassName(item) : undefined;
+  const service = useTreeService();
+  const { animate } = useTreeConfig();
+
+  const childrenAnimateRef = useRef<HTMLDivElement>(null);
+  const childrenRef = useRef<HTMLDivElement>(null);
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  const expand: TreeItemHandler<any, TreeItem<any>> = (item, index) => {
+    if (animate) {
+      service.expanding(item, index);
+    } else {
+      service.expand(item, index);
+    }
+  };
+
+  const collapse: TreeItemHandler<any, TreeItem<any>> = (item, index) => {
+    if (animate) {
+      service.collapsing(item, index);
+    } else {
+      service.collapse(item, index);
+    }
+  };
+
+  const timeout = animate ? Math.min(500, 100 + getChildrenSize(item, service) * 4) : 0;
+
+  useEffect(() => {
+    if (animate) {
+      if (childrenRef.current && childrenAnimateRef.current && item.expanding) {
+        const currentHeight = childrenRef.current.getBoundingClientRect().height;
+        childrenAnimateRef.current.style.height = '0px';
+        setTimeout(() => {
+          if (childrenAnimateRef.current) childrenAnimateRef.current.style.height = `${currentHeight}px`;
+        }, 0);
+        setTimeout(() => {
+          if (item) {
+            service.expanded(item, index);
+          }
+        }, timeout);
+      }
+      if (childrenRef.current && childrenAnimateRef.current && !item.expanding && item.expanded && !item.collapsing) {
+        childrenAnimateRef.current.style.height = '';
+      }
+    }
+  });
+
+  const onExiting = (node: HTMLElement) => {
+    if (animate) {
+      node.style.height = `${node.getBoundingClientRect().height}px`;
+      node.style.transitionDuration = `${timeout}ms`;
+      node.style.transitionTimingFunction = 'ease-out';
+      setTimeout(() => {
+        node.style.height = '0px';
+      }, 0);
+    }
+  };
+
+  const onExited = () => {
+    if (item) {
+      service.collpased(item, index);
+    }
+  };
+
+  const expanded = !!(item && item.expanded && !item.collapsing);
+
+  const onEntering = (node: HTMLElement) => {
+    if (animate) {
+      node.style.transitionDuration = `${timeout}ms`;
+      node.style.transitionTimingFunction = 'ease-in';
+    }
+  };
+
+  const children = item?.children || [];
+
+  return (
+    <div ref={itemRef}>
+      <div className="o-tree-item-container" key={`tree-item-container-${item?.uid || index}`}>
+        <ItemComponent
+          key={`item-${item?.uid || index}`}
+          className={className}
+          index={index}
+          item={item}
+          data={item.data}
+          onClick={onClick}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onExpand={expand}
+          onCollapse={collapse}
+        />
+      </div>
+      <CSSTransition
+        in={expanded}
+        classNames="o-tree-item-animate"
+        timeout={timeout}
+        mountOnEnter={true}
+        appear={false}
+        unmountOnExit={true}
+        onEntering={onEntering}
+        onExiting={onExiting}
+        onExited={onExited}
+      >
+        <div
+          ref={childrenAnimateRef}
+          className={`o-tree-item-animate${item?.expanding ? ' o-tree-item-animate-expanding' : ''}${
+            item?.collapsing ? ' o-tree-item-animate-collapsing' : ''
+          }`}
+        >
+          <div className="o-tree-item-children" ref={childrenRef}>
+            {children.map((child, childIndex) => {
+              const childItem = service.getItem(child);
+              return (
+                <TreeListItemComponent
+                  key={`virtual-item-${childItem?.uid || childIndex}`}
+                  index={childIndex}
+                  item={childItem as TreeItem}
+                  ItemComponent={ItemComponent}
+                  onClick={onClick}
+                  onMouseEnter={onMouseEnter}
+                  onMouseLeave={onMouseLeave}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </CSSTransition>
+    </div>
+  );
+};
+
+const TreeListComponent: React.FC<TreeListProps> = ({ items, onItemClick, onItemMouseEnter, onItemMouseLeave }) => {
+  // we keep a reference of the expanded status of items
+  const expandedStatusRef = useRef<AnonymousObject<boolean>>({});
+  const nextExpandedStatus: AnonymousObject<boolean> = {};
+
+  expandedStatusRef.current = nextExpandedStatus;
+
+  const rootItems = items.filter((item) => item && item.level === 0) as TreeItem[];
+
+  return (
+    <div>
+      {rootItems.map((rooItem, index) => {
+        return (
+          <TreeListItemComponent
+            key={`tree-item-${rooItem?.uid || index}`}
+            item={rooItem}
+            index={index}
+            ItemComponent={TreeItemComponent}
+            onClick={onItemClick}
+            onMouseEnter={onItemMouseEnter}
+            onMouseLeave={onItemMouseLeave}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default TreeListComponent;

package/src/components/tree/components/VirtualTreeBodyComponent.tsx

@@ -0,0 +1,34 @@
+import React, { useRef } from 'react';
+import { addClassname } from '../../../utils/style';
+import ListBodyComponent from '../../list/components/ListBodyComponent';
+import useListView from '../../list/hooks/useListView';
+import useTreeService from '../hooks/useTreeService';
+import { ControllerTreeProps } from '../typings';
+import VirtualTreeListComponent from './VirtualTreeListComponent';
+
+const VirtualTreeBodyComponent: React.FC<ControllerTreeProps> = ({ className, controller }) => {
+  const service = useTreeService();
+  const ref = useRef<HTMLDivElement>(null);
+  const { items, totalSize, virtualItems } = useListView({
+    controller,
+    ref,
+    overscan: 20,
+  });
+
+  return (
+    <ListBodyComponent
+      className={addClassname('o-tree-body', className)}
+      items={items}
+      parentRef={ref}
+      bodyRef={ref}
+      totalSize={totalSize}
+      virtualItems={virtualItems}
+      service={service}
+      state={service.state}
+      VirtualListComponent={VirtualTreeListComponent}
+    />
+  );
+};
+VirtualTreeBodyComponent.displayName = 'VirtualTreeBody';
+
+export default VirtualTreeBodyComponent;

package/src/components/tree/components/VirtualTreeListComponent.tsx

@@ -0,0 +1,287 @@
+import { AnonymousObject, LoadingStatus, useLogger } from 'onekijs-framework';
+import React, { useEffect, useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import useIsomorphicLayoutEffect from '../../../vendor/useIsomorphicLayoutEffect';
+import LoadingItem from '../../list/components/LoadingItem';
+import { VirtualItem } from '../../list/typings';
+import { useTreeConfig } from '../hooks/useTreeConfig';
+import useTreeService from '../hooks/useTreeService';
+import { TreeItem, TreeItemHandler, TreeItemProps, VirtualTreeListProps } from '../typings';
+import TreeItemComponent from './TreeItemComponent';
+
+const timeout = 200;
+
+type VirtualTreeItem<T = any, I extends TreeItem<T> = TreeItem<T>> = VirtualItem & {
+  item?: I;
+  children: VirtualTreeItem<T, I>[];
+};
+
+type VirtualTreeListItemProps<T = any, I extends TreeItem<T> = TreeItem<T>> = {
+  virtualItem: VirtualTreeItem;
+  itemClassName?: string | ((item: I) => string);
+  ItemComponent: React.FC<TreeItemProps<T, I>>;
+  onClick?: TreeItemHandler<T, I>;
+  onMouseEnter?: TreeItemHandler<T, I>;
+  onMouseLeave?: TreeItemHandler<T, I>;
+  defer?: () => void;
+};
+
+const VirtualTreeListItemComponent: React.FC<VirtualTreeListItemProps> = ({
+  itemClassName,
+  ItemComponent,
+  virtualItem,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  defer,
+}) => {
+  const { index, measureRef, children, item } = virtualItem;
+  const className = typeof itemClassName !== 'function' ? itemClassName : item ? itemClassName(item) : undefined;
+  const service = useTreeService();
+
+  const deferRenderRef = useRef(false);
+  deferRenderRef.current = false;
+
+  const deferRender = () => {
+    if (item?.expanding) {
+      deferRenderRef.current = true;
+    } else if (defer) {
+      defer();
+    }
+  };
+
+  const expand: TreeItemHandler<any, TreeItem<any>> = (item, index) => {
+    service.expanding(item, index);
+  };
+
+  const collapse: TreeItemHandler<any, TreeItem<any>> = (item, index) => {
+    service.collapsing(item, index);
+  };
+
+  const onExiting = (node: HTMLElement) => {
+    if (childrenAnimateRef.current) {
+      childrenAnimateRef.current.style.height = `${node.getBoundingClientRect().height}px`;
+    }
+    setTimeout(() => {
+      if (childrenAnimateRef.current) {
+        childrenAnimateRef.current.style.height = '0px';
+      }
+    }, 0);
+  };
+
+  const onExited = () => {
+    if (item) {
+      service.collpased(item, index);
+    }
+  };
+
+  const ref = !item?.collapsing ? measureRef : undefined;
+  const childrenAnimateRef = useRef<HTMLDivElement>(null);
+  const childrenRef = useRef<HTMLDivElement>(null);
+  const itemRef = useRef<HTMLDivElement>(null);
+
+  useIsomorphicLayoutEffect(() => {
+    if (itemRef.current && defer) {
+      const height = itemRef.current.getBoundingClientRect().height;
+      if (height !== virtualItem.size) {
+        defer();
+      }
+    }
+  });
+
+  const expanded = !!(item && item.expanded && !item.collapsing);
+
+  useEffect(() => {
+    if (!deferRenderRef.current && childrenRef.current && childrenAnimateRef.current && item?.expanding) {
+      const currentHeight = childrenRef.current.getBoundingClientRect().height;
+      childrenAnimateRef.current.style.height = '0px';
+      childrenAnimateRef.current.style.transitionDuration = `${timeout}ms`;
+      childrenAnimateRef.current.style.transitionTimingFunction = expanded ? 'ease-out' : 'ease-in';
+      setTimeout(() => {
+        if (childrenAnimateRef.current) childrenAnimateRef.current.style.height = `${currentHeight}px`;
+      }, 0);
+      setTimeout(() => {
+        if (item) {
+          service.expanded(item, index);
+        }
+      }, timeout);
+    }
+    if (childrenRef.current && childrenAnimateRef.current && !item?.expanding && item?.expanded && !item.collapsing) {
+      childrenAnimateRef.current.style.height = '';
+    }
+  });
+
+  return (
+    <div ref={itemRef}>
+      <div className="o-virtual-item" key={`virtual-item-${item?.uid || index}`} ref={ref}>
+        {item?.loadingStatus === LoadingStatus.Loading && <LoadingItem />}
+        {item?.loadingStatus !== LoadingStatus.Loading && item && item.data && (
+          <ItemComponent
+            key={`item-${item?.uid || index}`}
+            className={className}
+            index={index}
+            item={item}
+            data={item.data}
+            onClick={onClick}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+            onExpand={expand}
+            onCollapse={collapse}
+          />
+        )}
+      </div>
+      <CSSTransition
+        in={expanded}
+        classNames="o-tree-item-children"
+        timeout={timeout}
+        mountOnEnter={false}
+        appear={false}
+        unmountOnExit={true}
+        onExiting={onExiting}
+        onExited={onExited}
+      >
+        <div
+          ref={childrenAnimateRef}
+          className={`o-tree-item-children${item?.expanding ? ' o-tree-item-children-expanding' : ''}${
+            item?.collapsing ? ' o-tree-item-children-collapsing' : ''
+          }`}
+        >
+          <div ref={childrenRef}>
+            {children.map((child) => {
+              return (
+                <VirtualTreeListItemComponent
+                  key={`virtual-item-${child.item?.uid || child.index}`}
+                  virtualItem={child}
+                  ItemComponent={ItemComponent}
+                  onClick={onClick}
+                  onMouseEnter={onMouseEnter}
+                  onMouseLeave={onMouseLeave}
+                  defer={deferRender}
+                />
+              );
+            })}
+          </div>
+        </div>
+      </CSSTransition>
+    </div>
+  );
+};
+
+type NodeItem = {
+  parentNode?: NodeItem;
+  parentItem: { children: VirtualTreeItem[] };
+  childItem?: VirtualTreeItem;
+  level: number;
+};
+
+const VirtualTreeListComponent: React.FC<VirtualTreeListProps> = ({
+  items,
+  onItemClick,
+  onItemMouseEnter,
+  onItemMouseLeave,
+  virtualItems,
+}) => {
+  const logger = useLogger();
+  logger.debug('virtualItems', virtualItems);
+  // we keep a reference of the expanded status of virtualItems
+  const expandedStatusRef = useRef<AnonymousObject<boolean>>({});
+  const nextExpandedStatus: AnonymousObject<boolean> = {};
+  const { ItemComponent = TreeItemComponent } = useTreeConfig();
+
+  // we create a fake rootItem because we need a structure with one root item only
+  // the virtualTreeItems will be the children of this root item
+  const rootItem: { children: VirtualTreeItem[] } = {
+    children: [],
+  };
+
+  // a node is a context per tree level
+  // give us the link to the parent level and to the child level
+  // the offset is the position of the parent element in the tree because child elements will be placed relatively to this parent element
+  let node: NodeItem = {
+    parentItem: rootItem,
+    level: virtualItems && virtualItems.length > 0 ? items[virtualItems[0].index]?.level || 0 : 0,
+  };
+
+  // convert a flat list structure to a tree structure. Note that the first element is not necessarly at level=0 because of the "virtual" feature of the tree
+  // it's possible that the user has already scrolled down
+  virtualItems.forEach((virtualItem) => {
+    // the item is the actual data of the element
+    const item = items[virtualItem.index];
+    if (item) {
+      nextExpandedStatus[item.uid] = !!item.expanded;
+    }
+    // the horizontal position in the tree
+    const itemLevel = item?.level || 0;
+    // a treeitem is a virtual item with a relation to the item, children of the item and the vertical offset of the parent item
+    const treeItem = Object.assign(
+      {
+        children: [],
+        item,
+        animate:
+          !!item &&
+          (!item.expanded ||
+            (expandedStatusRef.current[item.uid] !== undefined &&
+              !!item.expanded !== !!expandedStatusRef.current[item.uid])),
+      },
+      virtualItem,
+    );
+
+    if (itemLevel === node.level) {
+      // this item is a sibling of the previous item
+      logger.debug('current node equal level', Object.assign({}, node), 'item', item);
+      node.parentItem.children.push(treeItem);
+      node.childItem = treeItem;
+      logger.debug('next node equal level', Object.assign({}, node), 'item', item);
+    } else if (itemLevel > node.level) {
+      logger.debug('current node greater level', Object.assign({}, node), 'item', item);
+      // this item is a child of the previous item (saved in node.child)
+      if (node.childItem) {
+        node.childItem.children.push(treeItem);
+        node = {
+          // change the current context
+          parentNode: node,
+          parentItem: node.childItem,
+          childItem: treeItem,
+          level: treeItem.item?.level || 0,
+        };
+      }
+      logger.debug('next node greater level', Object.assign({}, node), 'item', item);
+    } else {
+      logger.debug('current node lower level', Object.assign({}, node), 'item', item);
+      // this item is the uncle (or xGrand uncle) of the previous item
+      // try to find the correct context by finding an ancester nodecommon to the previous item and the current item
+      let nextParentNode = node.parentNode;
+      while (nextParentNode) {
+        if (nextParentNode.level === itemLevel) {
+          node = nextParentNode;
+          break;
+        }
+        nextParentNode = nextParentNode.parentNode;
+      }
+      node.parentItem.children.push(treeItem);
+      node.childItem = treeItem;
+      node.level = Math.min(itemLevel, node.level);
+      logger.debug('next node lower level', Object.assign({}, node), 'item', item);
+    }
+  });
+
+  expandedStatusRef.current = nextExpandedStatus;
+  return (
+    <div style={{ position: 'absolute', top: rootItem.children[0]?.start }}>
+      {rootItem.children.map((virtualTreeItem) => {
+        return (
+          <VirtualTreeListItemComponent
+            key={`virtual-item-${virtualTreeItem.item?.uid || virtualTreeItem.index}`}
+            virtualItem={virtualTreeItem}
+            ItemComponent={ItemComponent}
+            onClick={onItemClick}
+            onMouseEnter={onItemMouseEnter}
+            onMouseLeave={onItemMouseLeave}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default VirtualTreeListComponent;

package/src/components/tree/hooks/useTreeConfig.ts

@@ -0,0 +1,7 @@
+import React, { useContext } from 'react';
+import { TreeConfig, TreeItem } from '../typings';
+
+export const TreeConfigContext = React.createContext<TreeConfig<any, any>>(null!);
+export const useTreeConfig = <T = any, I extends TreeItem<T> = TreeItem<T>>(): TreeConfig<T, I> => {
+  return useContext(TreeConfigContext);
+};

package/src/components/tree/hooks/useTreeController.ts

@@ -0,0 +1,33 @@
+import { CollectionProxy, useCollectionProxy } from 'onekijs-framework';
+import TreeService from '../TreeService';
+import { TreeItem, TreeState, UseTreeOptions } from '../typings';
+import useTreeInitialState from './useTreeInitialState';
+
+const useTreeController = <T>(
+  dataSource?:
+    | string
+    | T[]
+    | CollectionProxy<
+        T,
+        TreeItem<T>,
+        TreeState<T, TreeItem<T>>,
+        TreeService<T, TreeItem<T>, TreeState<T, TreeItem<T>>>
+      >,
+  options: UseTreeOptions<T, TreeItem<T>> = {},
+): CollectionProxy<
+  T,
+  TreeItem<T>,
+  TreeState<T, TreeItem<T>>,
+  TreeService<T, TreeItem<T>, TreeState<T, TreeItem<T>>>
+> => {
+  const tableState = useTreeInitialState<T, TreeItem<T>>(dataSource, options);
+
+  return useCollectionProxy<
+    T,
+    TreeItem<T>,
+    TreeState<T, TreeItem<T>>,
+    TreeService<T, TreeItem<T>, TreeState<T, TreeItem<T>>>
+  >(dataSource, TreeService, tableState);
+};
+
+export default useTreeController;

package/src/components/tree/hooks/useTreeInitialState.ts

@@ -0,0 +1,12 @@
+import { CollectionProxy, useCollectionInitialState } from 'onekijs-framework';
+import TreeService from '../TreeService';
+import { TreeItem, TreeState, UseTreeOptions } from '../typings';
+
+const useTreeInitialState = <T, I extends TreeItem<T>>(
+  dataSource: string | T[] | undefined | CollectionProxy<T, I, TreeState<T, I>, TreeService<T, I, TreeState<T, I>>>,
+  options: UseTreeOptions<T, I>,
+): TreeState<T, I> => {
+  return useCollectionInitialState(dataSource, options);
+};
+
+export default useTreeInitialState;

package/src/components/tree/hooks/useTreeItems.ts

@@ -0,0 +1,9 @@
+import { TreeItem } from '../typings';
+import { useTreeState } from './useTreeState';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const useTreeItems = <T = any, I extends TreeItem<T> = TreeItem<T>>(): (I | undefined)[] => {
+  return useTreeState<T, I>().items || [];
+};
+
+export default useTreeItems;

package/src/components/tree/hooks/useTreeService.ts

@@ -0,0 +1,10 @@
+import React, { useContext } from 'react';
+import { TreeController, TreeItem } from '../typings';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+export const TreeServiceContext = React.createContext<TreeController<any, any>>(null!);
+const useTreeService = <T = any, I extends TreeItem<T> = TreeItem<T>>(): TreeController<T, I> => {
+  return useContext(TreeServiceContext);
+};
+
+export default useTreeService;

package/src/components/tree/hooks/useTreeState.ts

@@ -0,0 +1,7 @@
+import React, { useContext } from 'react';
+import { TreeItem, TreeState } from '../typings';
+
+export const TreeStateContext = React.createContext<TreeState<any, any>>(null!);
+export const useTreeState = <T = any, I extends TreeItem<T> = TreeItem<T>>(): TreeState<T, I> => {
+  return useContext(TreeStateContext);
+};

package/src/components/tree/index.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import TreeComponent from './components/TreeComponent';
+import { treeStyle } from './style';
+
+const Tree = styled(TreeComponent)`
+  ${treeStyle}
+`;
+
+export default Tree;

package/src/components/tree/style.ts

@@ -0,0 +1,57 @@
+import { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { display } from '../../styles/display';
+import { cursor } from '../../styles/interactivity';
+import { overflow } from '../../styles/overflow';
+import { height, width } from '../../styles/size';
+import { marginLeft } from '../../styles/spacing';
+import { transitionProperty } from '../../styles/transition';
+import { ComponentStyle } from '../../styles/typings';
+import { color } from '../../styles/typography';
+import { TreeProps } from './typings';
+
+export const treeStyle: ComponentStyle<TreeProps<any>> = () => {
+  return css`
+    .o-tree-item {
+      ${display('flex')}
+      ${alignItems('center')}
+      &.o-tree-item-hide {
+        ${display('none')}
+      }
+      .o-toggler-icon-container {
+        ${width(4, { hover: 4 })}
+        ${height(4, { hover: 4 })}
+        .o-toggler-icon {
+          ${cursor('pointer')}
+        }
+      }
+      .o-empty-icon-container {
+        ${width(4)}
+        ${height(4)}
+      }
+      .o-icon-loading-container {
+        ${width(4)}
+        ${height(4)}
+        .o-icon-loading-svg {
+          ${width(3)}
+          ${height(3)}
+        }
+      }
+      .o-icon-folder {
+        ${color('primary')}
+      }
+      .o-tree-item-text,
+      .o-tree-item-icon {
+        ${marginLeft('5px')}
+      }
+    }
+    .o-tree-item-animate-expanding,
+    .o-tree-item-animate-collapsing {
+      ${overflow('hidden')}
+      ${transitionProperty('height,opacity')}
+    }
+    .o-tree-item-animate-expanding {
+      ${height(0)}
+    }
+  `;
+};