add tree component

packages/components/src/components/config-provider/index.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 export interface ConfigConsumerProps {
   getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
   autoInsertSpaceInButton?: boolean;
+  virtual?: boolean;
 }
 
 export const ConfigContext = React.createContext<ConfigConsumerProps>({

packages/components/src/components/tree/Tree.tsx

@@ -0,0 +1,127 @@
+import * as React from 'react';
+import RcTree, { TreeNode, TreeProps as RcTreeProps } from 'rc-tree';
+import classNames from 'classnames';
+import { DataNode, Key } from 'rc-tree/lib/interface';
+import { ConfigContext } from '../config-provider';
+import renderSwitcherIcon from './iconUtil';
+
+export interface GioTreeNodeAttribute {
+  eventKey: string;
+  prefixCls: string;
+  className: string;
+  expanded: boolean;
+  selected: boolean;
+  children: React.ReactNode;
+  title: React.ReactNode;
+  pos: string;
+  isLeaf: boolean;
+  selectable: boolean;
+  disabled: boolean;
+}
+
+export interface GioTreeNodeProps {
+  className?: string;
+  disabled?: boolean;
+  title?: string | React.ReactNode;
+  key?: Key;
+  eventKey?: string;
+  isLeaf?: boolean;
+  checked?: boolean;
+  expanded?: boolean;
+  selected?: boolean;
+  selectable?: boolean;
+  icon?: ((treeNode: GioTreeNodeAttribute) => React.ReactNode) | React.ReactNode;
+  children?: React.ReactNode;
+  [customProp: string]: any;
+}
+
+export type GioTreeNode = React.Component<GioTreeNodeProps, {}>;
+
+export interface GioTreeNodeBaseEvent {
+  node: GioTreeNode;
+  nativeEvent: MouseEvent;
+}
+
+export interface GioTreeNodeSelectedEvent extends GioTreeNodeBaseEvent {
+  event: 'select';
+  selected?: boolean;
+  selectedNodes?: DataNode[];
+}
+
+export interface GioTreeNodeExpandedEvent extends GioTreeNodeBaseEvent {
+  expanded?: boolean;
+}
+
+export interface GioTreeNodeMouseEvent {
+  node: GioTreeNode;
+  event: React.DragEvent<HTMLElement>;
+}
+
+export interface GioTreeNodeDragEnterEvent extends GioTreeNodeMouseEvent {
+  expandedKeys: Key[];
+}
+
+export type TreeNodeNormal = DataNode;
+
+export interface TreeProps extends Omit<RcTreeProps, 'prefixCls'> {
+  className?: string;
+  /** 是否自动展开父节点 */
+  autoExpandParent?: boolean;
+  /** 是否禁用树 */
+  disabled?: boolean;
+  /** 默认展开所有树节点 */
+  defaultExpandAll?: boolean;
+  /** 默认展开对应树节点 */
+  defaultExpandParent?: boolean;
+  /** 默认展开指定的树节点 */
+  defaultExpandedKeys?: Key[];
+  /** （受控）展开指定的树节点 */
+  expandedKeys?: Key[];
+  /** （受控）设置选中的树节点 */
+  selectedKeys?: Key[];
+  /** 默认选中的树节点 */
+  defaultSelectedKeys?: Key[];
+  selectable?: boolean;
+  loadedKeys?: Key[];
+  style?: React.CSSProperties;
+  showIcon?: boolean;
+  icon?: ((nodeProps: GioTreeNodeAttribute) => React.ReactNode) | React.ReactNode;
+  switcherIcon?: React.ReactElement<any>;
+  prefixCls?: string;
+  children?: React.ReactNode;
+}
+
+interface CompoundedComponent extends React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<RcTree>> {
+  TreeNode: typeof TreeNode;
+}
+
+const Tree = React.forwardRef<RcTree, TreeProps>((props, ref) => {
+  const { getPrefixCls, virtual } = React.useContext(ConfigContext);
+  const { prefixCls: customizePrefixCls, className, showIcon, children, switcherIcon } = props;
+
+  const newProps = { ...props };
+  const prefixCls = getPrefixCls('tree', customizePrefixCls);
+
+  return (
+    <RcTree
+      ref={ref}
+      virtual={virtual}
+      {...newProps}
+      prefixCls={prefixCls}
+      className={classNames(className, {
+        [`${prefixCls}-icon-hide`]: !showIcon,
+      })}
+      switcherIcon={(nodeProps: GioTreeNodeProps) => renderSwitcherIcon(prefixCls, switcherIcon, nodeProps)}
+    >
+      {children}
+    </RcTree>
+  );
+}) as CompoundedComponent;
+
+Tree.TreeNode = TreeNode;
+
+Tree.defaultProps = {
+  showIcon: false,
+};
+
+export default Tree;

packages/components/src/components/tree/iconUtil.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { CaretDownFilled } from '@gio-design/icons';
+import { GioTreeNodeProps } from './Tree';
+
+export default function renderSwitcherIcon(
+  prefixCls: string,
+  switcherIcon: React.ReactNode | null | undefined,
+  { isLeaf }: GioTreeNodeProps
+) {
+  if (isLeaf) {
+    return null;
+  }
+  const switcherCls = `${prefixCls}-switcher-icon`;
+  if (React.isValidElement(switcherIcon)) {
+    return React.cloneElement(switcherIcon, {
+      className: classNames(switcherIcon?.props.className || '', switcherCls),
+    });
+  }
+
+  if (switcherIcon) {
+    return switcherIcon;
+  }
+
+  return <CaretDownFilled className={switcherCls} />;
+}

packages/components/src/components/tree/index.tsx

@@ -0,0 +1,15 @@
+import Tree from './Tree';
+
+export { EventDataNode } from 'rc-tree/lib/interface';
+
+export {
+  TreeProps,
+  TreeNodeNormal,
+  GioTreeNode,
+  GioTreeNodeMouseEvent,
+  GioTreeNodeExpandedEvent,
+  GioTreeNodeSelectedEvent,
+  GioTreeNodeProps,
+} from './Tree';
+
+export default Tree;

packages/components/src/components/tree/style/index.less

@@ -0,0 +1,140 @@
+@import '../../../stylesheet/theme.less';
+@import '../../../stylesheet/mixin/index.less';
+@import '~@gio-design/tokens/dist/variables.less';
+
+@tree-prefix-cls: ~'@{component-prefix}-tree';
+@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
+
+.antTreeFn(@tree-prefix-cls);
+
+.antTreeFn(@custom-tree-prefix-cls) {
+  @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
+  .@{custom-tree-prefix-cls} {
+    .reset-component;
+    background: @color-background-tree-normal;
+    border-radius: @radius-border-tree;
+    transition: background-color 0.3s;
+
+    // =================== Virtual List ===================
+    &-list-holder-inner {
+      align-items: flex-start;
+    }
+
+    // ===================== TreeNode =====================
+    .@{custom-tree-node-prefix-cls} {
+      display: flex;
+      align-items: flex-start;
+      padding: 0;
+      outline: none;
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      border-radius: @radius-border-tree;
+      margin: 2px 0;
+      font-size: 14px;
+      color: @color-text-tree-normal;
+      font-weight: 400;
+      &:hover {
+        background-color: @color-background-tree-hover;
+      }
+      // Disabled
+      &-disabled {
+        .@{custom-tree-prefix-cls}-node-content-wrapper {
+          color: @color-text-tree-disable;
+          cursor: not-allowed;
+          .@{custom-tree-prefix-cls}-iconEle {
+            svg {
+              color: @color-text-tree-disable;
+              path {
+                fill: @color-text-tree-disable;
+              }
+            }
+          }
+        }
+      }
+      // Selected
+      &-selected {
+        background-color: @color-background-tree-active;
+        .@{custom-tree-prefix-cls}-node-content-wrapper {
+          color: @color-text-tree-selected;
+          .@{custom-tree-prefix-cls}-iconEle {
+            svg {
+              color: @color-text-tree-selected;
+              path {
+                fill: @color-text-tree-selected;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    // >>> Indent
+    &-indent {
+      align-self: stretch;
+      white-space: nowrap;
+      user-select: none;
+
+      &-unit {
+        display: inline-block;
+        width: 24px;
+      }
+    }
+
+    // >>> Switcher
+    & &-switcher {
+      flex: none;
+      width: 14px;
+      height: 14px;
+      margin: 0;
+      line-height: 40px;
+      text-align: center;
+      margin: 2px 8px 0;
+      color: @color-text-tree-switcher;
+      cursor: pointer;
+
+      &-noop {
+        cursor: default;
+      }
+
+      svg.@{custom-tree-prefix-cls}-switcher-icon {
+        color: @color-text-tree-switcher;
+        path {
+          fill: @color-text-tree-switcher;
+        }
+      }
+
+      &_close {
+        svg.@{custom-tree-prefix-cls}-switcher-icon {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+
+    // >>> Title
+    & &-node-content-wrapper {
+      width: 100%;
+      cursor: pointer;
+
+      .@{custom-tree-prefix-cls}-title {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      // Icon
+      .@{custom-tree-prefix-cls}-iconEle {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        line-height: 16px;
+        margin: 2px 8px 0 0;
+        text-align: center;
+        vertical-align: middle;
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+}

packages/components/src/components/tree/style/index.ts

@@ -0,0 +1 @@
+import './index.less';

packages/icons/src/CaretDownFilled.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+function SvgCaretDownFilled(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox='0 0 14 14' width='1em' height='1em' {...props}>
+      <defs>
+        <style />
+      </defs>
+      <g id='caret-down-filled_svg__\u56FE\u5C42_2' data-name='\u56FE\u5C42 2'>
+        <g id='caret-down-filled_svg__\u56FE\u5C42_1-2' data-name='\u56FE\u5C42 1'>
+          <path
+            d='M7.39 9.51a.5.5 0 01-.78 0l-3-3.7a.51.51 0 01-.06-.53A.5.5 0 014 5h6a.5.5 0 01.45.28.51.51 0 01-.06.53z'
+            fill='#323333'
+            fillRule='evenodd'
+            id='caret-down-filled_svg__down-2'
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+const MemoSvgCaretDownFilled = React.memo(SvgCaretDownFilled);
+export default MemoSvgCaretDownFilled;

packages/icons/src/index.tsx

@@ -1,9 +1,10 @@
-export { default as AppFilled } from './AppFilled'
-export { default as App } from './App'
-export { default as AppsFilled } from './AppsFilled'
-export { default as Calendar } from './Calendar'
-export { default as CheckCircleFilled } from './CheckCircleFilled'
-export { default as CheckSquareFilled } from './CheckSquareFilled'
-export { default as Check } from './Check'
-export { default as SettingFilled } from './SettingFilled'
-export { default as Setting } from './Setting'
+export { default as AppFilled } from './AppFilled';
+export { default as App } from './App';
+export { default as AppsFilled } from './AppsFilled';
+export { default as Calendar } from './Calendar';
+export { default as CaretDownFilled } from './CaretDownFilled';
+export { default as CheckCircleFilled } from './CheckCircleFilled';
+export { default as CheckSquareFilled } from './CheckSquareFilled';
+export { default as Check } from './Check';
+export { default as SettingFilled } from './SettingFilled';
+export { default as Setting } from './Setting';

packages/tokens/properties/color/background.json

@@ -69,6 +69,20 @@
         "disable": {
           "value": "{palette.gray.1.value}"
         }
+      },
+      "tree": {
+        "normal": {
+          "value": "{palette.white.value}"
+        },
+        "hover": {
+          "value": "{palette.gray.1.value}"
+        },
+        "active": {
+          "value": "{palette.gray.1.value}"
+        },
+        "disable": {
+          "value": "{palette.gray.1.value}"
+        }
       }
     }
   }