fix: tree hooks重构

NSFI · Dec 30, 2021 · 6034a60 · 6034a60
1 parent b655402
commit 6034a60
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 57 deletions.
diff --git a/source/components/Tree/DirectoryTree.tsx b/source/components/Tree/DirectoryTree.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import omit from 'omit.js';
 import debounce from 'lodash/debounce';
 import { polyfill } from 'react-lifecycles-compat';
+import RcTree from '../TreeSelect/rcTree';
 import { conductExpandParent, convertTreeToEntities } from '../TreeSelect/rcTree/util';
 
 import Tree, {
@@ -43,7 +44,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
 
   state: DirectoryTreeState;
 
-  tree: Tree;
+  tree:  React.RefObject<RcTree>;
 
   onDebounceExpand: (event: React.MouseEvent<HTMLElement>, node: FishdTreeNode) => void;
 
@@ -65,7 +66,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
 
   constructor(props: DirectoryTreeProps) {
     super(props);
-
+    this.tree = React.createRef<RcTree>();
     const { defaultExpandAll, defaultExpandParent, expandedKeys, defaultExpandedKeys, children } =
       props;
     const { keyEntities } = convertTreeToEntities(children);
@@ -181,11 +182,10 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     }
 
     // Get internal rc-tree
-    const internalTree = this.tree.tree;
-
+    const internalTree = this.tree;
     // Call internal rc-tree expand function
     // https://github.com/ant-design/ant-design/issues/12567
-    internalTree.onNodeExpand(event, node);
+    internalTree.current.onNodeExpand(event, node);
   };
 
   setUncontrolledState = (state: DirectoryTreeState) => {
@@ -203,7 +203,7 @@ class DirectoryTree extends React.Component<DirectoryTreeProps, DirectoryTreeSta
     return (
       <Tree
         icon={getIcon}
-        ref={(node: Tree) => (this.tree = node)}
+        ref={this.tree}
         {...props}
         prefixCls={prefixCls}
         className={connectClassName}

diff --git a/source/components/Tree/Tree.tsx b/source/components/Tree/Tree.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import RcTree, { TreeNode } from '../TreeSelect/rcTree';
-import DirectoryTree from './DirectoryTree';
+import DirectoryTree, {DirectoryTreeProps} from './DirectoryTree';
 import classNames from 'classnames';
 import animation from '../../utils/openAnimation';
 import Icon from '../Icon';
@@ -113,6 +113,8 @@ export interface TreeProps {
   expandedKeys?: string[];
   /** （受控）选中复选框的树节点 */
   checkedKeys?: string[] | { checked: string[]; halfChecked: string[] };
+  /** 默认选中所有子节点，子节点全部选中时，不会选中父节点 */
+  checkType?: 'countDown';
   /** 默认选中复选框的树节点 */
   defaultCheckedKeys?: string[];
   /** （受控）设置选中的树节点 */
@@ -163,38 +165,12 @@ export interface TreeProps {
   /* 单选模式下是否为必选 */
   required?: boolean;
 }
+const InternalTree: React.ForwardRefRenderFunction<unknown, TreeProps> = (props, ref) => {
+  const { prefixCls, className, style, showIcon, required } = props;
+  let checkable = props.checkable;
+  const renderSwitcherIcon = ({ isLeaf, expanded, loading }: FishdTreeNodeProps) => {
+    const { prefixCls, showLine } = props;
 
-export default class Tree extends React.Component<TreeProps, any> {
-  static TreeNode: React.ComponentClass<FishdTreeNodeProps> = TreeNode;
-
-  static DirectoryTree = DirectoryTree;
-
-  static defaultProps = {
-    autoExpandParent: true,
-    checkable: false,
-    defaultExpandAll: false,
-    defaultExpandParent: true,
-    required: false,
-    openAnimation: {
-      ...animation,
-      appear: null,
-    },
-    prefixCls: 'fishd-tree',
-    showIcon: false,
-  };
-
-  tree: any;
-
-  renderSwitcherIcon = ({ isLeaf, expanded, loading }: FishdTreeNodeProps) => {
-    const { prefixCls, showLine } = this.props;
-    // if (loading) {
-    //   return (
-    //     <Icon
-    //       type="load-line" spin={true}
-    //       className={`${prefixCls}-switcher-loading-icon`}
-    //     />
-    //   );
-    // }
     if (showLine) {
       if (isLeaf) {
         return <Icon type="file-line" className={`${prefixCls}-switcher-line-icon`} />;
@@ -212,23 +188,47 @@ export default class Tree extends React.Component<TreeProps, any> {
       return <Icon type="down-fill" className={`${prefixCls}-switcher-icon`} />;
     }
   };
-
-  render() {
-    const props = this.props;
-    const { prefixCls, className, style, showIcon, required } = props;
-    let checkable = props.checkable;
-    return (
-      <RcTree
-        {...props}
-        ref={(node: Tree) => (this.tree = node)}
-        className={classNames(!showIcon && `${prefixCls}-icon-hide`, className)}
-        checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
-        switcherIcon={this.renderSwitcherIcon}
-        required={required}
-        style={style}
-      >
-        {this.props.children}
-      </RcTree>
-    );
-  }
+  return (
+    <RcTree
+      {...props}
+      openAnimation= {{
+        ...animation,
+        appear: null,
+      }}
+      ref={ref}
+      className={classNames(!showIcon && `${prefixCls}-icon-hide`, className)}
+      checkable={checkable ? <span className={`${prefixCls}-checkbox-inner`} /> : checkable}
+      switcherIcon={renderSwitcherIcon}
+      required={required}
+      style={style}
+    >
+      {props.children}
+    </RcTree>
+  );
+};
+const TreeRef = React.forwardRef<unknown, TreeProps>(InternalTree);
+type TreeRefInterface = typeof TreeRef;
+interface TreeInterface extends TreeRefInterface {
+  DirectoryTree: typeof DirectoryTree;
+  TreeNode: React.ComponentClass<FishdTreeNodeProps>;
+  __FISHD_TREE: boolean;
 }
+
+const Tree = TreeRef as TreeInterface;
+Tree.displayName = 'Button';
+
+Tree.defaultProps = {
+  autoExpandParent: true,
+  checkable: false,
+  defaultExpandAll: false,
+  defaultExpandParent: true,
+  required: false,
+  prefixCls: 'fishd-tree',
+  showIcon: false,
+};
+
+Tree.DirectoryTree = DirectoryTree;
+Tree.TreeNode = TreeNode;
+Tree.__FISHD_TREE = true;
+
+export default Tree;
diff --git a/source/components/TreeSelect/interface.tsx b/source/components/TreeSelect/interface.tsx
@@ -65,6 +65,7 @@ export interface TreeSelectProps extends AbstractSelectProps {
   treeCheckable?: boolean | React.ReactNode;
   treeCheckStrictly?: boolean;
   treeData?: Array<TreeData>;
+  treeCheckType?: 'countDown';
   treeDataSimpleMode?: boolean | Object;
   treeDefaultExpandAll?: boolean;
   treeDefaultExpandedKeys?: Array<string>;