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

package/lib/es/transfer/index.js

@@ -19,8 +19,8 @@ import Spin from '../spin';
 import Button from '../button';
 import Tree from '../tree';
 import { IconClose, IconSearch, IconHandle } from '@douyinfe/semi-icons';
-const prefixCls = cssClasses.PREFIX; // SortableItem & SortableList should not be assigned inside of the render function
-
+const prefixCls = cssClasses.PREFIX;
+// SortableItem & SortableList should not be assigned inside of the render function
 const SortableItem = SortableElement(props => props.item.node);
 const SortableList = SortableContainer(_ref => {
   let {
@@ -37,13 +37,13 @@ const SortableList = SortableContainer(_ref => {
     key: item.key,
     index: index,
     item: item
-  }))) // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  })))
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore see reasons: https://github.com/clauderic/react-sortable-hoc/issues/206
   ;
 }, {
   distance: 10
 });
-
 class Transfer extends BaseComponent {
   constructor(props) {
     super(props);
@@ -60,24 +60,20 @@ class Transfer extends BaseComponent {
       searchResult: new Set(),
       inputValue: ''
     };
-
     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)) {
       // 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);
     }
-
     this.onSelectOrRemove = this.onSelectOrRemove.bind(this);
     this.onInputChange = this.onInputChange.bind(this);
     this.onSortEnd = this.onSortEnd.bind(this);
   }
-
   static getDerivedStateFromProps(props, state) {
     const {
       value,
@@ -88,17 +84,14 @@ class Transfer extends BaseComponent {
     const mergedState = {};
     let newData = state.data;
     let newSelectedItems = state.selectedItems;
-
     if (Boolean(dataSource) && Array.isArray(dataSource)) {
       newData = _generateDataByType(dataSource, type);
       mergedState.data = newData;
     }
-
     if (Boolean(value) && Array.isArray(value)) {
       newSelectedItems = _generateSelectedItems(value, newData);
       mergedState.selectedItems = newSelectedItems;
     }
-
     if (!_isEqual(state.data, newData)) {
       if (typeof state.inputValue === 'string' && state.inputValue !== '') {
         const filterFunc = typeof filter === 'function' ? item => filter(state.inputValue, item) : item => typeof item.label === 'string' && item.label.includes(state.inputValue);
@@ -107,10 +100,8 @@ class Transfer extends BaseComponent {
         mergedState.searchResult = searchResult;
       }
     }
-
     return _isEmpty(mergedState) ? null : mergedState;
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       getSelected: () => new Map(this.state.selectedItems),
@@ -150,32 +141,26 @@ class Transfer extends BaseComponent {
   onInputChange(value) {
     this.foundation.handleInputChange(value, true);
   }
-
   search(value) {
     // The search method is used to provide the user with a manually triggered search
     // Since the method is manually called by the user, setting the second parameter to false does not trigger the onSearch callback to notify the user
     this.foundation.handleInputChange(value, false);
   }
-
   onSelectOrRemove(item) {
     this.foundation.handleSelectOrRemove(item);
   }
-
   onSortEnd(callbackProps) {
     this.foundation.handleSortEnd(callbackProps);
   }
-
   renderFilter(locale) {
     const {
       inputProps,
       filter,
       disabled
     } = this.props;
-
     if (typeof filter === 'boolean' && !filter) {
       return null;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       role: "search",
       "aria-label": "Transfer filter",
@@ -189,7 +174,6 @@ class Transfer extends BaseComponent {
       onChange: this.onInputChange
     }, inputProps)));
   }
-
   renderHeader(headerConfig) {
     const {
       disabled,
@@ -208,7 +192,6 @@ class Transfer extends BaseComponent {
       [`${prefixCls}-right-header`]: type === 'right',
       [`${prefixCls}-left-header`]: type === 'left'
     });
-
     if (type === 'left' && typeof renderSourceHeader === 'function') {
       const {
         num,
@@ -223,7 +206,6 @@ class Transfer extends BaseComponent {
         onAllClick
       });
     }
-
     if (type === 'right' && typeof renderSelectedHeader === 'function') {
       const {
         num,
@@ -236,7 +218,6 @@ class Transfer extends BaseComponent {
         onClear
       });
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: headerCls
     }, /*#__PURE__*/React.createElement("span", {
@@ -250,7 +231,6 @@ class Transfer extends BaseComponent {
       onClick: onAllClick
     }, allContent) : null);
   }
-
   renderLeftItem(item, index) {
     const {
       renderSourceItem,
@@ -260,14 +240,12 @@ class Transfer extends BaseComponent {
       selectedItems
     } = this.state;
     const checked = selectedItems.has(item.key);
-
     if (renderSourceItem) {
       return renderSourceItem(Object.assign(Object.assign({}, item), {
         checked,
         onChange: () => this.onSelectOrRemove(item)
       }));
     }
-
     const leftItemCls = cls({
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-disabled`]: item.disabled
@@ -282,7 +260,6 @@ class Transfer extends BaseComponent {
       "x-semi-children-alias": `dataSource[${index}].label`
     }, item.label);
   }
-
   renderLeft(locale) {
     const {
       data,
@@ -300,11 +277,11 @@ class Transfer extends BaseComponent {
     const totalToken = locale.total;
     const inSearchMode = inputValue !== '';
     const showNumber = inSearchMode ? searchResult.size : data.length;
-    const filterData = inSearchMode ? data.filter(item => searchResult.has(item.key)) : data; // Whether to select all should be a judgment, whether the filtered data on the left is a subset of the selected items
+    const filterData = inSearchMode ? data.filter(item => searchResult.has(item.key)) : data;
+    // Whether to select all should be a judgment, whether the filtered data on the left is a subset of the selected items
     // For example, the filtered data on the left is 1, 3, 4;
     // The selected option is 1,2,3,4, it is true
     // The selected option is 2,3,4, then it is false
-
     const leftContainesNotInSelected = Boolean(filterData.find(f => !selectedItems.has(f.key)));
     const totalText = totalToken.replace('${total}', `${showNumber}`);
     const headerConfig = {
@@ -325,33 +302,26 @@ class Transfer extends BaseComponent {
     const emptySearchCom = this.renderEmpty('left', emptySearch);
     const loadingCom = /*#__PURE__*/React.createElement(Spin, null);
     let content = null;
-
     switch (true) {
       case loading:
         content = loadingCom;
         break;
-
       case noMatch:
         content = emptySearchCom;
         break;
-
       case data.length === 0:
         content = emptyDataCom;
         break;
-
       case type === strings.TYPE_TREE_TO_LIST:
         content = /*#__PURE__*/React.createElement(React.Fragment, null, headerCom, this.renderLeftTree());
         break;
-
       case !noMatch && (type === strings.TYPE_LIST || type === strings.TYPE_GROUP_LIST):
         content = /*#__PURE__*/React.createElement(React.Fragment, null, headerCom, this.renderLeftList(filterData));
         break;
-
       default:
         content = null;
         break;
     }
-
     const {
       values
     } = this.foundation.getValuesAndItemsFromMap(selectedItems);
@@ -371,16 +341,13 @@ class Transfer extends BaseComponent {
       onSearch: this.onInputChange,
       onSelectOrRemove: item => this.onSelectOrRemove(item)
     };
-
     if (renderSourcePanel) {
       return renderSourcePanel(renderProps);
     }
-
     return /*#__PURE__*/React.createElement("section", {
       className: `${prefixCls}-left`
     }, inputCom, content);
   }
-
   renderGroupTitle(group, index) {
     const groupCls = cls(`${prefixCls}-group-title`);
     return /*#__PURE__*/React.createElement("div", {
@@ -388,7 +355,6 @@ class Transfer extends BaseComponent {
       key: `title-${index}`
     }, group.title);
   }
-
   renderLeftTree() {
     const {
       selectedItems
@@ -401,13 +367,10 @@ class Transfer extends BaseComponent {
     const {
       values
     } = this.foundation.getValuesAndItemsFromMap(selectedItems);
-
     const onChange = value => {
       this.foundation.handleSelect(value);
     };
-
     const restTreeProps = _omit(treeProps, ['value', 'ref', 'onChange']);
-
     return /*#__PURE__*/React.createElement(Tree, Object.assign({
       disabled: disabled,
       treeData: dataSource,
@@ -429,14 +392,12 @@ class Transfer extends BaseComponent {
       onChange: onChange
     }, restTreeProps));
   }
-
   renderLeftList(visibileItems) {
     const content = [];
     const groupStatus = new Map();
     visibileItems.forEach((item, index) => {
       const parentGroup = item._parent;
       const optionContent = this.renderLeftItem(item, index);
-
       if (parentGroup && groupStatus.has(parentGroup.title)) {
         // group content already insert
         content.push(optionContent);
@@ -455,7 +416,6 @@ class Transfer extends BaseComponent {
       "aria-label": "Option list"
     }, content);
   }
-
   renderRightItem(item) {
     const {
       renderSelectedItem,
@@ -463,9 +423,7 @@ class Transfer extends BaseComponent {
       type,
       showPath
     } = this.props;
-
     const onRemove = () => this.foundation.handleSelectOrRemove(item);
-
     const rightItemCls = cls({
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-right-item`]: true,
@@ -473,14 +431,12 @@ class Transfer extends BaseComponent {
     });
     const shouldShowPath = type === strings.TYPE_TREE_TO_LIST && showPath === true;
     const label = shouldShowPath ? this.foundation._generatePath(item) : item.label;
-
     if (renderSelectedItem) {
       return renderSelectedItem(Object.assign(Object.assign({}, item), {
         onRemove,
         sortableHandle: SortableHandle
       }));
     }
-
     const DragHandle = SortableHandle(() => /*#__PURE__*/React.createElement(IconHandle, {
       role: "button",
       "aria-label": "Drag and sort",
@@ -504,7 +460,6 @@ class Transfer extends BaseComponent {
       }))
     );
   }
-
   renderEmpty(type, emptyText) {
     const emptyCls = cls({
       [`${prefixCls}-empty`]: true,
@@ -516,13 +471,12 @@ class Transfer extends BaseComponent {
       className: emptyCls
     }, emptyText);
   }
-
   renderRightSortableList(selectedData) {
     const sortableListItems = selectedData.map(item => Object.assign(Object.assign({}, item), {
       node: this.renderRightItem(item)
-    })); // helperClass：add styles to the helper(item being dragged) https://github.com/clauderic/react-sortable-hoc/issues/87
+    }));
+    // helperClass：add styles to the helper(item being dragged) https://github.com/clauderic/react-sortable-hoc/issues/87
     // @ts-ignore skip SortableItem type check
-
     const sortList = /*#__PURE__*/React.createElement(SortableList, {
       useDragHandle: true,
       helperClass: `${prefixCls}-right-item-drag-item-move`,
@@ -531,7 +485,6 @@ class Transfer extends BaseComponent {
     });
     return sortList;
   }
-
   renderRight(locale) {
     const {
       selectedItems
@@ -541,8 +494,8 @@ class Transfer extends BaseComponent {
       renderSelectedPanel,
       draggable
     } = this.props;
-    const selectedData = [...selectedItems.values()]; // when custom render panel
-
+    const selectedData = [...selectedItems.values()];
+    // when custom render panel
     const renderProps = {
       length: selectedData.length,
       selectedData,
@@ -550,11 +503,9 @@ class Transfer extends BaseComponent {
       onRemove: item => this.foundation.handleSelectOrRemove(item),
       onSortEnd: props => this.onSortEnd(props)
     };
-
     if (renderSelectedPanel) {
       return renderSelectedPanel(renderProps);
     }
-
     const selectedToken = locale.selected;
     const selectedText = selectedToken.replace('${total}', `${selectedData.length}`);
     const headerConfig = {
@@ -569,13 +520,11 @@ class Transfer extends BaseComponent {
     const emptyCom = this.renderEmpty('right', emptyContent.right ? emptyContent.right : locale.emptyRight);
     const panelCls = `${prefixCls}-right`;
     let content = null;
-
     switch (true) {
       // when empty
       case !selectedData.length:
         content = emptyCom;
         break;
-
       case selectedData.length && !draggable:
         const list = /*#__PURE__*/React.createElement("div", {
           className: `${prefixCls}-right-list`,
@@ -584,20 +533,16 @@ class Transfer extends BaseComponent {
         }, selectedData.map(item => this.renderRightItem(Object.assign({}, item))));
         content = list;
         break;
-
       case selectedData.length && draggable:
         content = this.renderRightSortableList(selectedData);
         break;
-
       default:
         break;
     }
-
     return /*#__PURE__*/React.createElement("section", {
       className: panelCls
     }, headerCom, content);
   }
-
   render() {
     const {
       className,
@@ -617,9 +562,7 @@ class Transfer extends BaseComponent {
       style: style
     }, this.renderLeft(locale), this.renderRight(locale)));
   }
-
 }
-
 Transfer.propTypes = {
   style: PropTypes.object,
   className: PropTypes.string,

package/lib/es/tree/autoSizer.js

@@ -7,18 +7,15 @@ const prefixcls = cssClasses.PREFIX;
 export default class AutoSizer extends PureComponent {
   constructor(props) {
     super(props);
-
     this._onResize = entries => {
       // observe parent node height
       const target = entries && entries[1] && entries[1].target;
-
       if (target) {
         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 newHeight = height - paddingTop - paddingBottom;
-
         if (this.state.height !== newHeight) {
           this.setState({
             height: height - paddingTop - paddingBottom
@@ -26,22 +23,19 @@ export default class AutoSizer extends PureComponent {
         }
       }
     };
-
     this.state = {
       height: this.props.defaultHeight || 0
     };
   }
-
   componentDidMount() {
     const {
       height
-    } = this.state; // if height is a number, pass it directly to virtual-list
-
+    } = this.state;
+    // if height is a number, pass it directly to virtual-list
     if (typeof height === 'number') {
       return;
     }
   }
-
   render() {
     const {
       children,
@@ -50,15 +44,13 @@ export default class AutoSizer extends PureComponent {
     } = this.props;
     const {
       height
-    } = this.state; // Avoid rendering children before the initial measurements have been collected.
+    } = this.state;
+    // Avoid rendering children before the initial measurements have been collected.
     // At best this would just be wasting cycles. Refer to https://github.com/bvaughn/react-virtualized-auto-sizer/
-
     let bailoutOnChildren = false;
-
     if (height === 0 || typeof height !== 'number') {
       bailoutOnChildren = true;
     }
-
     return /*#__PURE__*/React.createElement(ResizeObserver, {
       observeParent: true,
       onResize: this._onResize
@@ -73,7 +65,6 @@ export default class AutoSizer extends PureComponent {
       width: defaultWidth
     })));
   }
-
 }
 AutoSizer.propTypes = {
   defaultHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),