@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

package/lib/es/tree/index.js

@@ -2,7 +2,6 @@ import _isFunction from "lodash/isFunction";
 import _get from "lodash/get";
 import _isEqual from "lodash/isEqual";
 import _isEmpty from "lodash/isEmpty";
-
 /* eslint-disable max-lines-per-function */
 import React from 'react';
 import cls from 'classnames';
@@ -25,18 +24,14 @@ import { IconSearch } from '@douyinfe/semi-icons';
 import CheckboxGroup from '../checkbox/checkboxGroup';
 export * from './interface';
 const prefixcls = cssClasses.PREFIX;
-
 class Tree extends BaseComponent {
   constructor(props) {
     super(props);
-
     this.search = value => {
       this.foundation.handleInputChange(value);
     };
-
     this.scrollTo = scrollData => {
       var _a;
-
       const {
         key,
         align = 'center'
@@ -44,7 +39,6 @@ class Tree extends BaseComponent {
       const {
         flattenNodes
       } = this.state;
-
       if (key) {
         const index = flattenNodes === null || flattenNodes === void 0 ? void 0 : flattenNodes.findIndex(node => {
           return node.key === key;
@@ -52,12 +46,10 @@ class Tree extends BaseComponent {
         index >= 0 && ((_a = this.virtualizedListRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index, align));
       }
     };
-
     this.renderEmpty = () => {
       const {
         emptyContent
       } = this.props;
-
       if (emptyContent) {
         return /*#__PURE__*/React.createElement(TreeNode, {
           empty: true,
@@ -72,11 +64,9 @@ class Tree extends BaseComponent {
         }));
       }
     };
-
     this.onNodeSelect = (e, treeNode) => {
       this.foundation.handleNodeSelect(e, treeNode);
     };
-
     this.onNodeLoad = data => new Promise(resolve => {
       // We need to get the latest state of loading/loaded keys
       this.setState(_ref => {
@@ -87,47 +77,36 @@ class Tree extends BaseComponent {
         return this.foundation.handleNodeLoad(loadedKeys, loadingKeys, data, resolve);
       });
     });
-
     this.onNodeCheck = (e, treeNode) => {
       this.foundation.handleNodeSelect(e, treeNode);
     };
-
     this.onNodeExpand = (e, treeNode) => {
       this.foundation.handleNodeExpand(e, treeNode);
     };
-
     this.onNodeRightClick = (e, treeNode) => {
       this.foundation.handleNodeRightClick(e, treeNode);
     };
-
     this.onNodeDoubleClick = (e, treeNode) => {
       this.foundation.handleNodeDoubleClick(e, treeNode);
     };
-
     this.onNodeDragStart = (e, treeNode) => {
       this.foundation.handleNodeDragStart(e, treeNode);
     };
-
     this.onNodeDragEnter = (e, treeNode) => {
       this.foundation.handleNodeDragEnter(e, treeNode, this.dragNode);
     };
-
     this.onNodeDragOver = (e, treeNode) => {
       this.foundation.handleNodeDragOver(e, treeNode, this.dragNode);
     };
-
     this.onNodeDragLeave = (e, treeNode) => {
       this.foundation.handleNodeDragLeave(e, treeNode);
     };
-
     this.onNodeDragEnd = (e, treeNode) => {
       this.foundation.handleNodeDragEnd(e, treeNode);
     };
-
     this.onNodeDrop = (e, treeNode) => {
       this.foundation.handleNodeDrop(e, treeNode, this.dragNode);
     };
-
     this.getTreeNodeRequiredProps = () => {
       const {
         expandedKeys,
@@ -146,7 +125,6 @@ class Tree extends BaseComponent {
         keyEntities
       };
     };
-
     this.getTreeNodeKey = treeNode => {
       const {
         data
@@ -156,7 +134,6 @@ class Tree extends BaseComponent {
       } = data;
       return key;
     };
-
     this.renderTreeNode = (treeNode, ind, style) => {
       const {
         data
@@ -165,25 +142,21 @@ class Tree extends BaseComponent {
         key
       } = data;
       const treeNodeProps = this.foundation.getTreeNodeProps(key);
-
       if (!treeNodeProps) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(TreeNode, Object.assign({}, treeNodeProps, data, {
         key: key,
         data: data,
         style: _isEmpty(style) ? {} : style
       }));
     };
-
     this.itemKey = (index, data) => {
       // Find the item at the specified index.
-      const item = data[index]; // Return a value that uniquely identifies this item.
-
+      const item = data[index];
+      // Return a value that uniquely identifies this item.
       return item.key;
     };
-
     this.state = {
       inputValue: '',
       keyEntities: {},
@@ -220,11 +193,8 @@ class Tree extends BaseComponent {
    * Process of getDerivedStateFromProps was inspired by rc-tree
    * https://github.com/react-component/tree
    */
-
-
   static getDerivedStateFromProps(props, prevState) {
     var _a;
-
     const {
       prevProps
     } = prevState;
@@ -235,22 +205,20 @@ class Tree extends BaseComponent {
     const newState = {
       prevProps: props
     };
-    const isExpandControlled = ('expandedKeys' in props); // Accept a props field as a parameter to determine whether to update the field
-
+    const isExpandControlled = ('expandedKeys' in props);
+    // Accept a props field as a parameter to determine whether to update the field
     const needUpdate = name => {
       const firstInProps = !prevProps && name in props;
       const nameHasChange = prevProps && !_isEqual(prevProps[name], props[name]);
       return firstInProps || nameHasChange;
-    }; // Determine whether treeData has changed
-
-
+    };
+    // Determine whether treeData has changed
     const needUpdateData = () => {
       const firstInProps = !prevProps && 'treeData' in props;
       const treeDataHasChange = prevProps && prevProps.treeData !== props.treeData;
       return firstInProps || treeDataHasChange;
-    }; // Update the data of tree in state
-
-
+    };
+    // Update the data of tree in state
     if (needUpdate('treeData') || props.draggable && needUpdateData()) {
       // eslint-disable-next-line prefer-destructuring
       treeData = props.treeData;
@@ -269,24 +237,21 @@ class Tree extends BaseComponent {
       keyEntities = newState.keyEntities;
       newState.cachedKeyValuePairs = Object.assign({}, entitiesMap.valueEntities);
       valueEntities = newState.cachedKeyValuePairs;
-    } // If treeData keys changes, we won't show animation
-
-
+    }
+    // If treeData keys changes, we won't show animation
     if (treeData && props.motion) {
       if (prevProps && props.motion) {
         newState.motionKeys = new Set([]);
         newState.motionType = null;
       }
     }
-
     const dataUpdated = needUpdate('treeDataSimpleJson') || needUpdate('treeData');
     const expandAllWhenDataChange = dataUpdated && props.expandAll;
-
     if (!isSeaching) {
       // Update expandedKeys
       if (needUpdate('expandedKeys') || prevProps && needUpdate('autoExpandParent')) {
-        newState.expandedKeys = calcExpandedKeys(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps); // only show animation when treeData does not change
-
+        newState.expandedKeys = calcExpandedKeys(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
+        // only show animation when treeData does not change
         if (prevProps && props.motion && !treeData) {
           const {
             motionKeys,
@@ -294,7 +259,6 @@ class Tree extends BaseComponent {
           } = calcMotionKeys(prevState.expandedKeys, newState.expandedKeys, keyEntities);
           newState.motionKeys = new Set(motionKeys);
           newState.motionType = motionType;
-
           if (motionType === 'hide') {
             // cache flatten nodes: expandedKeys changed may not be triggered by interaction
             newState.cachedFlattenNodes = cloneDeep(prevState.flattenNodes);
@@ -319,19 +283,17 @@ class Tree extends BaseComponent {
           newState.expandedKeys = calcExpandedKeysForValues(props.value, keyEntities, props.multiple, valueEntities);
         }
       }
-
       if (!newState.expandedKeys) {
         delete newState.expandedKeys;
-      } // Update flattenNodes
-
-
+      }
+      // Update flattenNodes
       if (treeData || newState.expandedKeys) {
         const flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.expandedKeys || prevState.expandedKeys);
         newState.flattenNodes = flattenNodes;
       }
     } else {
-      let filteredState; // treeData changed while searching
-
+      let filteredState;
+      // treeData changed while searching
       if (treeData) {
         // Get filter data
         filteredState = filterTreeData({
@@ -348,15 +310,13 @@ class Tree extends BaseComponent {
         newState.filteredKeys = filteredState.filteredKeys;
         newState.filteredShownKeys = filteredState.filteredShownKeys;
         newState.filteredExpandedKeys = filteredState.filteredExpandedKeys;
-      } // expandedKeys changed while searching
-
-
+      }
+      // expandedKeys changed while searching
       if (props.expandedKeys) {
         newState.filteredExpandedKeys = calcExpandedKeys(props.expandedKeys, keyEntities, props.autoExpandParent || !prevProps);
-
         if (prevProps && props.motion) {
-          const prevKeys = prevState ? prevState.filteredExpandedKeys : new Set([]); // only show animation when treeData does not change
-
+          const prevKeys = prevState ? prevState.filteredExpandedKeys : new Set([]);
+          // only show animation when treeData does not change
           if (!treeData) {
             const motionResult = calcMotionKeys(prevKeys, newState.filteredExpandedKeys, keyEntities);
             let {
@@ -365,33 +325,28 @@ class Tree extends BaseComponent {
             const {
               motionType
             } = motionResult;
-
             if (props.showFilteredOnly) {
               motionKeys = motionKeys.filter(key => prevState.filteredShownKeys.has(key));
             }
-
             if (motionType === 'hide') {
               // cache flatten nodes: expandedKeys changed may not be triggered by interaction
               newState.cachedFlattenNodes = cloneDeep(prevState.flattenNodes);
             }
-
             newState.motionKeys = new Set(motionKeys);
             newState.motionType = motionType;
           }
         }
-
         newState.flattenNodes = flattenTreeData(treeData || prevState.treeData, newState.filteredExpandedKeys || prevState.filteredExpandedKeys, props.showFilteredOnly && prevState.filteredShownKeys);
       }
-    } // Handle single selection and multiple selection in controlled mode
-
-
+    }
+    // Handle single selection and multiple selection in controlled mode
     const withObject = props.onChangeWithObject;
     const isMultiple = props.multiple;
-
     if (!isMultiple) {
       // When getting single selection, the selected node
       if (needUpdate('value')) {
-        newState.selectedKeys = findKeysForValues( // In both cases whether withObject is turned on, the value is standardized to string
+        newState.selectedKeys = findKeysForValues(
+        // In both cases whether withObject is turned on, the value is standardized to string
         normalizeValue(props.value, withObject), valueEntities, isMultiple);
       } else if (!prevProps && props.defaultValue) {
         newState.selectedKeys = findKeysForValues(normalizeValue(props.defaultValue, withObject), valueEntities, isMultiple);
@@ -402,8 +357,8 @@ class Tree extends BaseComponent {
         }
       }
     } else {
-      let checkedKeyValues; // Get the selected node during multiple selection
-
+      let checkedKeyValues;
+      // Get the selected node during multiple selection
       if (needUpdate('value')) {
         checkedKeyValues = findKeysForValues(normalizeValue(props.value, withObject), valueEntities, isMultiple);
       } else if (!prevProps && props.defaultValue) {
@@ -416,7 +371,6 @@ class Tree extends BaseComponent {
           checkedKeyValues = updateKeys(prevState.checkedKeys, keyEntities);
         }
       }
-
       if (checkedKeyValues) {
         if (props.checkRelation === 'unRelated') {
           newState.realCheckedKeys = new Set(checkedKeyValues);
@@ -429,21 +383,17 @@ class Tree extends BaseComponent {
           newState.halfCheckedKeys = halfCheckedKeys;
         }
       }
-    } // update loadedKeys
-
-
+    }
+    // update loadedKeys
     if (needUpdate('loadedKeys')) {
       newState.loadedKeys = new Set(props.loadedKeys);
-    } // update disableStrictly
-
-
+    }
+    // update disableStrictly
     if (treeData && props.disableStrictly && props.checkRelation === 'related') {
       newState.disabledKeys = calcDisabledKeys(keyEntities);
     }
-
     return newState;
   }
-
   get adapter() {
     const filterAdapter = {
       updateInputValue: value => {
@@ -455,7 +405,6 @@ class Tree extends BaseComponent {
         const {
           preventScroll
         } = this.props;
-
         if (this.inputRef && this.inputRef.current) {
           this.inputRef.current.focus({
             preventScroll
@@ -476,7 +425,6 @@ class Tree extends BaseComponent {
           expanded: bool,
           node
         });
-
         if (bool && this.props.loadData) {
           this.onNodeLoad(node);
         }
@@ -506,7 +454,6 @@ class Tree extends BaseComponent {
       }
     });
   }
-
   renderInput() {
     const {
       searchClassName,
@@ -535,22 +482,18 @@ class Tree extends BaseComponent {
       componentName: "Tree"
     }, locale => {
       inputProps.placeholder = searchPlaceholder || _get(locale, 'searchPlaceholder');
-
       if (_isFunction(searchRender)) {
         return searchRender(Object.assign({}, inputProps));
       }
-
       if (searchRender === false) {
         return null;
       }
-
       return /*#__PURE__*/React.createElement(Input, Object.assign({
         "aria-label": 'Filter Tree',
         ref: this.inputRef
       }, inputProps));
     }));
   }
-
   renderNodeList() {
     const {
       flattenNodes,
@@ -565,11 +508,9 @@ class Tree extends BaseComponent {
     const {
       direction
     } = this.context;
-
     if (_isEmpty(flattenNodes)) {
       return undefined;
     }
-
     if (!virtualize || _isEmpty(virtualize)) {
       return /*#__PURE__*/React.createElement(NodeList, {
         flattenNodes: flattenNodes,
@@ -580,7 +521,6 @@ class Tree extends BaseComponent {
         renderTreeNode: this.renderTreeNode
       });
     }
-
     const option = _ref3 => {
       let {
         index,
@@ -589,7 +529,6 @@ class Tree extends BaseComponent {
       } = _ref3;
       return this.renderTreeNode(data[index], index, style);
     };
-
     return /*#__PURE__*/React.createElement(AutoSizer, {
       defaultHeight: virtualize.height,
       defaultWidth: virtualize.width
@@ -613,7 +552,6 @@ class Tree extends BaseComponent {
       }, option);
     });
   }
-
   render() {
     const {
       keyEntities,
@@ -655,11 +593,9 @@ class Tree extends BaseComponent {
     const ariaAttr = {
       role: noData ? 'none' : 'tree'
     };
-
     if (ariaAttr.role === 'tree') {
       ariaAttr['aria-multiselectable'] = multiple ? true : false;
     }
-
     return /*#__PURE__*/React.createElement(TreeContext.Provider, {
       value: {
         treeDisabled: disabled,
@@ -706,9 +642,7 @@ class Tree extends BaseComponent {
       value: Array.from(checkRelation === 'related' ? checkedKeys : realCheckedKeys)
     }, this.renderNodeList()) : this.renderNodeList())));
   }
-
 }
-
 Tree.contextType = ConfigContext;
 Tree.propTypes = {
   blockNode: PropTypes.bool,

package/lib/es/tree/interface.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode, MouseEvent } from 'react';
 import { BasicTreeProps, BasicExpandedOtherProps, BasicRenderFullLabelProps, BasicSearchRenderProps, BasicTreeInnerData, BasicKeyEntities, BasicKeyEntity, BasicTreeNodeProps, BasicFlattenNode, BasicTreeNodeData, BasicOnDragProps } from '@douyinfe/semi-foundation/lib/es/tree/foundation';
-export declare type Value = string | number | TreeNodeData | Array<TreeNodeData | number | string>;
+export type Value = string | number | TreeNodeData | Array<TreeNodeData | number | string>;
 export interface DragTreeNode extends TreeNodeData {
     expanded: boolean;
     /**
@@ -113,7 +113,7 @@ export interface NodeListProps {
     searchTargetIsDeep?: boolean;
     renderTreeNode: (treeNode: FlattenNode, ind?: number, style?: React.CSSProperties) => ReactNode;
 }
-export declare type TransitionNodes<T> = Array<T | Array<T>>;
+export type TransitionNodes<T> = Array<T | Array<T>>;
 export interface NodeListState {
     transitionNodes: TransitionNodes<FlattenNode>;
     cachedMotionKeys?: Set<string>;

package/lib/es/tree/nodeCollapsible.js

@@ -1,24 +1,19 @@
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 import React, { useState, useEffect } from 'react';
 import Collapsible from '../collapsible';
-
 function NodeCollapsible(props) {
   const {
-    open,
-    children
-  } = props,
-        rest = __rest(props, ["open", "children"]);
-
+      open,
+      children
+    } = props,
+    rest = __rest(props, ["open", "children"]);
   const [isOpen, setIsOpen] = useState(props.open);
   useEffect(() => {
     // Why do we need to change isOPen value in setTimeout？
@@ -31,5 +26,4 @@ function NodeCollapsible(props) {
     isOpen: isOpen
   }), children);
 }
-
 export default NodeCollapsible;

package/lib/es/tree/nodeList.js

@@ -2,7 +2,6 @@ import _isEqual from "lodash/isEqual";
 import React, { PureComponent } from 'react';
 import TreeContext from './treeContext';
 import NodeCollapsible from './nodeCollapsible';
-
 const getTreeNodeKey = treeNode => {
   const {
     data
@@ -12,23 +11,19 @@ const getTreeNodeKey = treeNode => {
   } = data;
   return key;
 };
-
 export default class NodeList extends PureComponent {
   constructor(props) {
     super(props);
-
     this.onMotionEnd = () => {
       typeof this.props.onMotionEnd === 'function' && this.props.onMotionEnd();
       this.setState({
         transitionNodes: []
       });
     };
-
     this.state = {
       transitionNodes: []
     };
   }
-
   static getDerivedStateFromProps(props, prevState) {
     const {
       flattenNodes = [],
@@ -38,11 +33,9 @@ export default class NodeList extends PureComponent {
     } = props;
     const hasChanged = !_isEqual(prevState.cachedMotionKeys, motionKeys) || !_isEqual(prevState.cachedData.map(i => i.key), flattenNodes.map(i => i.key));
     const motionArr = [...motionKeys];
-
     if (!hasChanged || !motionArr.length) {
       return null;
     }
-
     const transitionNodes = [];
     const transitionRange = [];
     let rangeStart = 0;
@@ -50,10 +43,8 @@ export default class NodeList extends PureComponent {
     const lookUpTarget = motionType === 'hide' && flattenList ? flattenList : flattenNodes;
     lookUpTarget.forEach((treeNode, ind) => {
       const nodeKey = getTreeNodeKey(treeNode);
-
       if (motionKeys.has(nodeKey)) {
         transitionRange.push(treeNode);
-
         if (nodeKey === motionArr[0]) {
           rangeStart = ind;
         }
@@ -70,7 +61,6 @@ export default class NodeList extends PureComponent {
     };
     return newState;
   }
-
   render() {
     const {
       flattenNodes,
@@ -84,11 +74,9 @@ export default class NodeList extends PureComponent {
     const mapData = transitionNodes.length && !searchTargetIsDeep ? transitionNodes : flattenNodes;
     const options = mapData.map(treeNode => {
       const isMotionNode = Array.isArray(treeNode);
-
       if (isMotionNode && !treeNode.length) {
         return null;
       }
-
       if (isMotionNode && treeNode.length) {
         const nodeKey = getTreeNodeKey(treeNode[0]);
         return /*#__PURE__*/React.createElement(NodeCollapsible, {
@@ -99,11 +87,9 @@ export default class NodeList extends PureComponent {
           onMotionEnd: this.onMotionEnd
         }, treeNode.map(node => renderTreeNode(node)));
       }
-
       return renderTreeNode(treeNode);
     });
     return options;
   }
-
 }
 NodeList.contextType = TreeContext;