@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-alpha.2

package/lib/es/transfer/index.js

@@ -1,8 +1,3 @@
-import _isArray from "lodash/isArray";
-import _isEmpty from "lodash/isEmpty";
-import _omit from "lodash/omit";
-import _noop from "lodash/noop";
-import _isEqual from "lodash/isEqual";
 import _Map from "@babel/runtime-corejs3/core-js-stable/map";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
@@ -18,6 +13,7 @@ import React from 'react';
 import cls from 'classnames';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import PropTypes from 'prop-types';
+import { isEqual, noop, omit, isEmpty, isArray } from 'lodash-es';
 import TransferFoundation from '@douyinfe/semi-foundation/lib/es/transfer/foundation';
 import { _generateDataByType, _generateSelectedItems } from '@douyinfe/semi-foundation/lib/es/transfer/transferUtlls';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/transfer/constants';
@@ -51,13 +47,13 @@ class Transfer extends BaseComponent {
       inputValue: ''
     };
 
-    if (Boolean(dataSource) && _isArray(dataSource)) {
+    if (Boolean(dataSource) && isArray(dataSource)) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore Avoid reporting errors this.state.xxx is read-only
       this.state.data = _generateDataByType(dataSource, type);
     }
 
-    if (Boolean(defaultValue) && _isArray(defaultValue)) {
+    if (Boolean(defaultValue) && isArray(defaultValue)) {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore Avoid reporting errors this.state.xxx is read-only
       this.state.selectedItems = _generateSelectedItems(defaultValue, this.state.data);
@@ -89,7 +85,7 @@ class Transfer extends BaseComponent {
       mergedState.selectedItems = newSelectedItems;
     }
 
-    if (!_isEqual(state.data, newData)) {
+    if (!isEqual(state.data, newData)) {
       if (typeof state.inputValue === 'string' && state.inputValue !== '') {
         const filterFunc = typeof filter === 'function' ? item => filter(state.inputValue, item) : item => {
           var _context4;
@@ -104,7 +100,7 @@ class Transfer extends BaseComponent {
       }
     }
 
-    return _isEmpty(mergedState) ? null : mergedState;
+    return isEmpty(mergedState) ? null : mergedState;
   }
 
   get adapter() {
@@ -354,8 +350,7 @@ class Transfer extends BaseComponent {
       this.foundation.handleSelect(value);
     };
 
-    const restTreeProps = _omit(treeProps, ['value', 'ref', 'onChange']);
-
+    const restTreeProps = omit(treeProps, ['value', 'ref', 'onChange']);
     return /*#__PURE__*/React.createElement(Tree, _Object$assign({
       disabled: disabled,
       treeData: dataSource,
@@ -467,24 +462,21 @@ class Transfer extends BaseComponent {
   renderRightSortableList(selectedData) {
     // when choose some items && draggable is true
     const SortableItem = SortableElement(item => this.renderRightItem(item));
-    const SortableList = SortableContainer(_ref => {
-      let {
-        items
-      } = _ref;
-      return /*#__PURE__*/React.createElement("div", {
-        className: "".concat(prefixcls, "-right-list")
-      }, _mapInstanceProperty(items).call(items, (item, index) =>
-      /*#__PURE__*/
-      // sortableElement will take over the property 'key', so use another '_optionKey' to pass
-      React.createElement(SortableItem, _Object$assign({
-        key: item.label,
-        index: index
-      }, item, {
-        _optionKey: item.key
-      })))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
-      ;
-    }, {
+    const SortableList = SortableContainer(({
+      items
+    }) => /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixcls, "-right-list")
+    }, _mapInstanceProperty(items).call(items, (item, index) =>
+    /*#__PURE__*/
+    // sortableElement will take over the property 'key', so use another '_optionKey' to pass
+    React.createElement(SortableItem, _Object$assign({
+      key: item.label,
+      index: index
+    }, item, {
+      _optionKey: item.key
+    })))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
+    , {
       distance: 10
     });
     const sortList = /*#__PURE__*/React.createElement(SortableList, {
@@ -611,11 +603,11 @@ Transfer.propTypes = {
 Transfer.defaultProps = {
   type: strings.TYPE_LIST,
   dataSource: [],
-  onSearch: _noop,
-  onChange: _noop,
-  onSelect: _noop,
-  onDeselect: _noop,
-  onClear: _noop,
+  onSearch: noop,
+  onChange: noop,
+  onSelect: noop,
+  onDeselect: noop,
+  onClear: noop,
   defaultValue: [],
   emptyContent: {},
   showPath: false

package/lib/es/tree/autoSizer.js

@@ -1,9 +1,9 @@
-import _get from "lodash/get";
 import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/tree/constants';
 import ResizeObserver from '../resizeObserver';
+import { get } from 'lodash-es';
 const prefixcls = cssClasses.PREFIX;
 export default class AutoSizer extends PureComponent {
   constructor(props) {
@@ -14,10 +14,10 @@ export default class AutoSizer extends PureComponent {
       const target = entries && entries[1] && entries[1].target;
 
       if (target) {
-        const height = _get(target, 'offsetHeight') || 0;
+        const height = get(target, 'offsetHeight') || 0;
         const style = window.getComputedStyle(target) || {};
-        const paddingTop = _parseInt(_get(style, 'paddingTop'), 10) || 0;
-        const paddingBottom = _parseInt(_get(style, 'paddingBottom'), 10) || 0;
+        const paddingTop = _parseInt(get(style, 'paddingTop'), 10) || 0;
+        const paddingBottom = _parseInt(get(style, 'paddingBottom'), 10) || 0;
         const newHeight = height - paddingTop - paddingBottom;
 
         if (this.state.height !== newHeight) {

package/lib/es/tree/collapse.js

@@ -1,10 +1,10 @@
-import _noop from "lodash/noop";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
 
 /* eslint-disable arrow-body-style */
 import React, { useRef, useState, useEffect, useCallback } from 'react';
 import { Transition } from '@douyinfe/semi-animation-react';
 import PropTypes from 'prop-types';
+import { noop } from 'lodash-es';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/collapsible/constants';
 import getMotionObjFromProps from '@douyinfe/semi-foundation/lib/es/utils/getMotionObjFromProps';
 const ease = 'cubicBezier(.25,.1,.25,1)';
@@ -134,6 +134,6 @@ Collapse.propType = {
 Collapse.defaultProps = {
   duration: 250,
   motion: true,
-  onMotionEnd: _noop
+  onMotionEnd: noop
 };
 export default Collapse;

package/lib/es/tree/index.js

@@ -1,7 +1,3 @@
-import _isFunction from "lodash/isFunction";
-import _get from "lodash/get";
-import _isEqual from "lodash/isEqual";
-import _isEmpty from "lodash/isEmpty";
 import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
 import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -17,6 +13,7 @@ import TreeFoundation from '@douyinfe/semi-foundation/lib/es/tree/foundation';
 import { convertDataToEntities, flattenTreeData, calcExpandedKeysForValues, calcMotionKeys, convertJsonToData, findKeysForValues, calcCheckedKeys, calcExpandedKeys, filterTreeData, normalizeValue, updateKeys, calcDisabledKeys } from '@douyinfe/semi-foundation/lib/es/tree/treeUtil';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/tree/constants';
 import BaseComponent from '../_base/baseComponent';
+import { isEmpty, isEqual, get, isFunction } from 'lodash-es';
 import { cloneDeep } from './treeUtil';
 import Input from '../input/index';
 import { FixedSizeList as VirtualList } from 'react-window';
@@ -53,7 +50,7 @@ class Tree extends BaseComponent {
           componentName: "Tree"
         }, locale => /*#__PURE__*/React.createElement(TreeNode, {
           empty: true,
-          emptyContent: _get(locale, 'emptyText')
+          emptyContent: get(locale, 'emptyText')
         }));
       }
     };
@@ -64,13 +61,10 @@ class Tree extends BaseComponent {
 
     this.onNodeLoad = data => new _Promise(resolve => {
       // We need to get the latest state of loading/loaded keys
-      this.setState(_ref => {
-        let {
-          loadedKeys = new _Set([]),
-          loadingKeys = new _Set([])
-        } = _ref;
-        return this.foundation.handleNodeLoad(loadedKeys, loadingKeys, data, resolve);
-      });
+      this.setState(({
+        loadedKeys = new _Set([]),
+        loadingKeys = new _Set([])
+      }) => this.foundation.handleNodeLoad(loadedKeys, loadingKeys, data, resolve));
     });
 
     this.onNodeCheck = (e, treeNode) => {
@@ -158,7 +152,7 @@ class Tree extends BaseComponent {
       return /*#__PURE__*/React.createElement(TreeNode, _Object$assign({}, treeNodeProps, data, {
         key: key,
         data: data,
-        style: _isEmpty(style) ? {} : style
+        style: isEmpty(style) ? {} : style
       }));
     };
 
@@ -219,7 +213,7 @@ class Tree extends BaseComponent {
 
     const needUpdate = name => {
       const firstInProps = !prevProps && name in props;
-      const nameHasChange = prevProps && !_isEqual(prevProps[name], props[name]);
+      const nameHasChange = prevProps && !isEqual(prevProps[name], props[name]);
       return firstInProps || nameHasChange;
     }; // Determine whether treeData has changed
 
@@ -426,11 +420,10 @@ class Tree extends BaseComponent {
       updateState: states => {
         this.setState(_Object$assign({}, states));
       },
-      notifyExpand: (expandedKeys, _ref2) => {
-        let {
-          expanded: bool,
-          node
-        } = _ref2;
+      notifyExpand: (expandedKeys, {
+        expanded: bool,
+        node
+      }) => {
         this.props.onExpand && this.props.onExpand([...expandedKeys], {
           expanded: bool,
           node
@@ -493,9 +486,9 @@ class Tree extends BaseComponent {
     }, /*#__PURE__*/React.createElement(LocaleConsumer, {
       componentName: "Tree"
     }, locale => {
-      inputProps.placeholder = searchPlaceholder || _get(locale, 'searchPlaceholder');
+      inputProps.placeholder = searchPlaceholder || get(locale, 'searchPlaceholder');
 
-      if (_isFunction(searchRender)) {
+      if (isFunction(searchRender)) {
         return searchRender(_Object$assign({}, inputProps));
       }
 
@@ -524,11 +517,11 @@ class Tree extends BaseComponent {
       direction
     } = this.context;
 
-    if (_isEmpty(flattenNodes)) {
+    if (isEmpty(flattenNodes)) {
       return undefined;
     }
 
-    if (!virtualize || _isEmpty(virtualize)) {
+    if (!virtualize || isEmpty(virtualize)) {
       return /*#__PURE__*/React.createElement(NodeList, {
         flattenNodes: flattenNodes,
         flattenList: cachedFlattenNodes,
@@ -539,36 +532,30 @@ class Tree extends BaseComponent {
       });
     }
 
-    const option = _ref3 => {
-      let {
-        index,
-        style,
-        data
-      } = _ref3;
-      return this.renderTreeNode(data[index], index, style);
-    };
+    const option = ({
+      index,
+      style,
+      data
+    }) => this.renderTreeNode(data[index], index, style);
 
     return /*#__PURE__*/React.createElement(AutoSizer, {
       defaultHeight: virtualize.height,
       defaultWidth: virtualize.width
-    }, _ref4 => {
-      let {
-        height,
-        width
-      } = _ref4;
-      return /*#__PURE__*/React.createElement(VirtualList, {
-        itemCount: flattenNodes.length,
-        itemSize: virtualize.itemSize,
-        height: height,
-        width: width,
-        itemKey: this.itemKey,
-        itemData: flattenNodes,
-        className: "".concat(prefixcls, "-virtual-list"),
-        style: {
-          direction
-        }
-      }, option);
-    });
+    }, ({
+      height,
+      width
+    }) => /*#__PURE__*/React.createElement(VirtualList, {
+      itemCount: flattenNodes.length,
+      itemSize: virtualize.itemSize,
+      height: height,
+      width: width,
+      itemKey: this.itemKey,
+      itemData: flattenNodes,
+      className: "".concat(prefixcls, "-virtual-list"),
+      style: {
+        direction
+      }
+    }, option));
   }
 
   render() {
@@ -605,7 +592,7 @@ class Tree extends BaseComponent {
       ["".concat(prefixcls, "-option-list-block")]: blockNode
     });
     const searchNoRes = Boolean(inputValue) && !filteredKeys.size;
-    const noData = _isEmpty(keyEntities) || showFilteredOnly && searchNoRes;
+    const noData = isEmpty(keyEntities) || showFilteredOnly && searchNoRes;
     return /*#__PURE__*/React.createElement(TreeContext.Provider, {
       value: {
         treeDisabled: disabled,

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

@@ -22,7 +22,7 @@ export interface OnDragProps extends BasicOnDragProps {
 export interface DragEnterProps extends DragProps {
     expandedKeys?: string[];
 }
-export interface ExpanedOtherProps extends BasicExpandedOtherProps {
+export interface ExpandedOtherProps extends BasicExpandedOtherProps {
     node: TreeNodeData;
 }
 export interface RenderFullLabelProps extends BasicRenderFullLabelProps {
@@ -57,7 +57,7 @@ export interface TreeProps extends BasicTreeProps {
     onDragStart?: (dragProps: DragProps) => void;
     onDragEnter?: (dragEnterProps: DragEnterProps) => void;
     onDrop?: (onDragProps: OnDragProps) => void;
-    onExpand?: (expandedKeys: string[], expanedOtherProps: ExpanedOtherProps) => void;
+    onExpand?: (expandedKeys: string[], expandedOtherProps: ExpandedOtherProps) => void;
     onLoad?: (loadedKeys?: Set<string>, treeNode?: TreeNodeData) => void;
     onContextMenu?: (e: MouseEvent, node: TreeNodeData) => void;
     onSelect?: (selectedKeys: string, selected: boolean, selectedNode: TreeNodeData) => void;

package/lib/es/tree/nodeList.js

@@ -1,9 +1,9 @@
-import _isEqual from "lodash/isEqual";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import React, { PureComponent } from 'react';
+import { isEqual } from 'lodash-es';
 import TreeContext from './treeContext';
 import Collapse from './collapse';
 
@@ -41,7 +41,7 @@ export default class NodeList extends PureComponent {
       motionType,
       flattenList = []
     } = props;
-    const hasChanged = !_isEqual(prevState.cachedMotionKeys, motionKeys) || !_isEqual(_mapInstanceProperty(_context = prevState.cachedData).call(_context, i => i.key), _mapInstanceProperty(flattenNodes).call(flattenNodes, i => i.key));
+    const hasChanged = !isEqual(prevState.cachedMotionKeys, motionKeys) || !isEqual(_mapInstanceProperty(_context = prevState.cachedData).call(_context, i => i.key), _mapInstanceProperty(flattenNodes).call(flattenNodes, i => i.key));
     const motionArr = [...motionKeys];
 
     if (!hasChanged || !motionArr.length) {

package/lib/es/tree/treeNode.js

@@ -1,6 +1,3 @@
-import _isString from "lodash/isString";
-import _isFunction from "lodash/isFunction";
-import _debounce from "lodash/debounce";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign";
@@ -22,6 +19,7 @@ import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
 import { cssClasses } from '@douyinfe/semi-foundation/lib/es/tree/constants';
+import { debounce, isFunction, isString } from 'lodash-es';
 import { IconTreeTriangleDown, IconFile, IconFolder, IconFolderOpen } from '@douyinfe/semi-icons';
 import { Checkbox } from '../checkbox';
 import TreeContext from './treeContext';
@@ -94,7 +92,7 @@ export default class TreeNode extends PureComponent {
       e.stopPropagation();
       e.nativeEvent.stopImmediatePropagation();
 
-      if (_isFunction(onNodeDoubleClick)) {
+      if (isFunction(onNodeDoubleClick)) {
         onNodeDoubleClick(e, this.props);
       }
 
@@ -224,9 +222,9 @@ export default class TreeNode extends PureComponent {
         treeNodeFilterProp
       } = this.props;
 
-      if (_isFunction(renderLabel)) {
+      if (isFunction(renderLabel)) {
         return renderLabel(label, data);
-      } else if (_isString(label) && filtered && keyword && treeNodeFilterProp === 'label') {
+      } else if (isString(label) && filtered && keyword && treeNodeFilterProp === 'label') {
         var _context;
 
         const content = [];
@@ -253,7 +251,7 @@ export default class TreeNode extends PureComponent {
     };
 
     this.state = {};
-    this.debounceSelect = _debounce(this.onSelect, 500, {
+    this.debounceSelect = debounce(this.onSelect, 500, {
       leading: true,
       trailing: false
     });

package/lib/es/tree/treeUtil.js

@@ -1,10 +1,9 @@
-import _isPlainObject from "lodash/isPlainObject";
-import _cloneDeepWith from "lodash/cloneDeepWith";
 import React from 'react';
+import { cloneDeepWith, isPlainObject } from 'lodash-es';
 export function cloneDeep(treeNodeList) {
-  return _cloneDeepWith(treeNodeList, val => {
+  return cloneDeepWith(treeNodeList, val => {
     // only clone treeNode inner data and skip user data
-    if (_isPlainObject(val) && !val._innerDataTag) {
+    if (isPlainObject(val) && !val._innerDataTag) {
       return val;
     }
 

package/lib/es/treeSelect/index.d.ts

@@ -27,16 +27,7 @@ export declare type RenderSelectedItemInMultiple = (treeNode: TreeNodeData, othe
     isRenderInTag: boolean;
     content: React.ReactNode;
 };
-export interface RenderSelectedItem {
-    (treeNode: TreeNodeData): React.ReactNode;
-    (treeNode: TreeNodeData, otherProps: {
-        index: number | string;
-        onClose: (tagContent: any, e: React.MouseEvent) => void;
-    }): {
-        isRenderInTag: boolean;
-        content: React.ReactNode;
-    };
-}
+export declare type RenderSelectedItem = RenderSelectedItemInSingle | RenderSelectedItemInMultiple;
 export declare type OverrideCommonProps = 'renderFullLabel' | 'renderLabel' | 'defaultValue' | 'emptyContent' | 'filterTreeNode' | 'style' | 'treeData' | 'value' | 'onExpand';
 /**
 * Type definition description:
@@ -205,7 +196,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
     renderArrow: () => JSX.Element;
     renderClearBtn: () => JSX.Element;
     renderSelection: () => JSX.Element;
-    renderTagItem: (key: string, idx: number) => any;
+    renderTagItem: (key: string, idx: number) => React.ReactNode;
     renderTagInput: () => JSX.Element;
     renderInput: () => JSX.Element;
     renderEmpty: () => JSX.Element;