@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/transfer/index.js

@@ -0,0 +1,660 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _reactSortableHoc = require("react-sortable-hoc");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _lodashEs = require("lodash-es");
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/transfer/foundation"));
+
+var _transferUtlls = require("@douyinfe/semi-foundation/lib/cjs/transfer/transferUtlls");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/transfer/constants");
+
+require("@douyinfe/semi-foundation/lib/cjs/transfer/transfer.css");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _index = require("../checkbox/index");
+
+var _index2 = _interopRequireDefault(require("../input/index"));
+
+var _spin = _interopRequireDefault(require("../spin"));
+
+var _button = _interopRequireDefault(require("../button"));
+
+var _tree = _interopRequireDefault(require("../tree"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+const prefixcls = _constants.cssClasses.PREFIX;
+
+class Transfer extends _baseComponent.default {
+  constructor(props) {
+    var _context, _context2, _context3;
+
+    super(props);
+    this._treeRef = null;
+    const {
+      defaultValue = [],
+      dataSource,
+      type
+    } = props;
+    this.foundation = new _foundation.default(this.adapter);
+    this.state = {
+      data: [],
+      selectedItems: new _map.default(),
+      searchResult: new _set.default(),
+      inputValue: ''
+    };
+
+    if (Boolean(dataSource) && (0, _lodashEs.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 = (0, _transferUtlls._generateDataByType)(dataSource, type);
+    }
+
+    if (Boolean(defaultValue) && (0, _lodashEs.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 = (0, _transferUtlls._generateSelectedItems)(defaultValue, this.state.data);
+    }
+
+    this.onSelectOrRemove = (0, _bind.default)(_context = this.onSelectOrRemove).call(_context, this);
+    this.onInputChange = (0, _bind.default)(_context2 = this.onInputChange).call(_context2, this);
+    this.onSortEnd = (0, _bind.default)(_context3 = this.onSortEnd).call(_context3, this);
+  }
+
+  static getDerivedStateFromProps(props, state) {
+    const {
+      value,
+      dataSource,
+      type,
+      filter
+    } = props;
+    const mergedState = {};
+    let newData = state.data;
+    let newSelectedItems = state.selectedItems;
+
+    if (Boolean(dataSource) && (0, _isArray.default)(dataSource)) {
+      newData = (0, _transferUtlls._generateDataByType)(dataSource, type);
+      mergedState.data = newData;
+    }
+
+    if (Boolean(value) && (0, _isArray.default)(value)) {
+      newSelectedItems = (0, _transferUtlls._generateSelectedItems)(value, newData);
+      mergedState.selectedItems = newSelectedItems;
+    }
+
+    if (!(0, _lodashEs.isEqual)(state.data, newData)) {
+      if (typeof state.inputValue === 'string' && state.inputValue !== '') {
+        const filterFunc = typeof filter === 'function' ? item => filter(state.inputValue, item) : item => {
+          var _context4;
+
+          return typeof item.label === 'string' && (0, _includes.default)(_context4 = item.label).call(_context4, state.inputValue);
+        };
+        const searchData = (0, _filter.default)(newData).call(newData, filterFunc);
+        const searchResult = new _set.default((0, _map2.default)(searchData).call(searchData, item => item.key));
+        mergedState.searchResult = searchResult;
+      }
+    }
+
+    return (0, _lodashEs.isEmpty)(mergedState) ? null : mergedState;
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      getSelected: () => new _map.default(this.state.selectedItems),
+      updateSelected: selectedItems => {
+        this.setState({
+          selectedItems
+        });
+      },
+      notifyChange: (values, items) => {
+        this.props.onChange(values, items);
+      },
+      notifySearch: input => {
+        this.props.onSearch(input);
+      },
+      notifySelect: item => {
+        this.props.onSelect(item);
+      },
+      notifyDeselect: item => {
+        this.props.onDeselect(item);
+      },
+      updateInput: input => {
+        this.setState({
+          inputValue: input
+        });
+      },
+      updateSearchResult: searchResult => {
+        this.setState({
+          searchResult
+        });
+      },
+      searchTree: keyword => {
+        this._treeRef && this._treeRef.search(keyword); // TODO check this._treeRef.current?
+      }
+    });
+  }
+
+  onInputChange(value) {
+    this.foundation.handleInputChange(value);
+  }
+
+  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.default.createElement("div", {
+      className: "".concat(prefixcls, "-filter")
+    }, /*#__PURE__*/_react.default.createElement(_index2.default, (0, _assign.default)({
+      prefix: /*#__PURE__*/_react.default.createElement(_semiIcons.IconSearch, null),
+      placeholder: locale.placeholder,
+      showClear: true,
+      value: this.state.inputValue,
+      disabled: disabled,
+      onChange: this.onInputChange
+    }, inputProps)));
+  }
+
+  renderHeader(headerConfig) {
+    const {
+      disabled
+    } = this.props;
+    const {
+      totalContent,
+      allContent,
+      onAllClick,
+      type,
+      showButton
+    } = headerConfig;
+    const headerCls = (0, _classnames.default)({
+      ["".concat(prefixcls, "-header")]: true,
+      ["".concat(prefixcls, "-right-header")]: type === 'right',
+      ["".concat(prefixcls, "-left-header")]: type === 'left'
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: headerCls
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(prefixcls, "-header-total")
+    }, totalContent), showButton ? /*#__PURE__*/_react.default.createElement(_button.default, {
+      theme: "borderless",
+      disabled: disabled,
+      type: "tertiary",
+      size: "small",
+      className: "".concat(prefixcls, "-header-all"),
+      onClick: onAllClick
+    }, allContent) : null);
+  }
+
+  renderLeftItem(item, index) {
+    const {
+      renderSourceItem,
+      disabled
+    } = this.props;
+    const {
+      selectedItems
+    } = this.state;
+    const checked = selectedItems.has(item.key);
+
+    if (renderSourceItem) {
+      return renderSourceItem((0, _assign.default)((0, _assign.default)({}, item), {
+        checked,
+        onChange: () => this.onSelectOrRemove(item)
+      }));
+    }
+
+    const leftItemCls = (0, _classnames.default)({
+      ["".concat(prefixcls, "-item")]: true,
+      ["".concat(prefixcls, "-item-disabled")]: item.disabled
+    });
+    return /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
+      key: index,
+      disabled: item.disabled || disabled,
+      className: leftItemCls,
+      checked: checked,
+      onChange: () => this.onSelectOrRemove(item)
+    }, item.label);
+  }
+
+  renderLeft(locale) {
+    var _context5;
+
+    const {
+      data,
+      selectedItems,
+      inputValue,
+      searchResult
+    } = this.state;
+    const {
+      loading,
+      type,
+      emptyContent,
+      renderSourcePanel
+    } = this.props;
+    const totalToken = locale.total;
+    const inSearchMode = inputValue !== '';
+    const showNumber = inSearchMode ? searchResult.size : data.length;
+    const filterData = inSearchMode ? (0, _filter.default)(data).call(data, 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((0, _find.default)(filterData).call(filterData, f => !selectedItems.has(f.key)));
+    const totalText = totalToken.replace('${total}', "".concat(showNumber));
+    const headerConfig = {
+      totalContent: totalText,
+      allContent: leftContainesNotInSelected ? locale.selectAll : locale.clearSelectAll,
+      onAllClick: () => this.foundation.handleAll(leftContainesNotInSelected),
+      type: 'left',
+      showButton: type !== _constants.strings.TYPE_TREE_TO_LIST
+    };
+    const inputCom = this.renderFilter(locale);
+    const headerCom = this.renderHeader(headerConfig);
+    const noMatch = inSearchMode && searchResult.size === 0;
+    const emptySearch = emptyContent.search ? emptyContent.search : locale.emptySearch;
+    const emptyLeft = emptyContent.left ? emptyContent.left : locale.emptyLeft;
+    const emptyCom = this.renderEmpty('left', inputValue ? emptySearch : emptyLeft);
+
+    const loadingCom = /*#__PURE__*/_react.default.createElement(_spin.default, null);
+
+    let content = null;
+
+    switch (true) {
+      case loading:
+        content = loadingCom;
+        break;
+
+      case noMatch:
+        content = emptyCom;
+        break;
+
+      case type === _constants.strings.TYPE_TREE_TO_LIST:
+        content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerCom, this.renderLeftTree());
+        break;
+
+      case !noMatch && (type === _constants.strings.TYPE_LIST || type === _constants.strings.TYPE_GROUP_LIST):
+        content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, headerCom, this.renderLeftList(filterData));
+        break;
+
+      default:
+        content = null;
+        break;
+    }
+
+    const {
+      values
+    } = this.foundation.getValuesAndItemsFromMap(selectedItems);
+    const renderProps = {
+      loading,
+      noMatch,
+      filterData,
+      sourceData: data,
+      allChecked: !leftContainesNotInSelected,
+      showNumber,
+      inputValue,
+      selectedItems,
+      value: values,
+      onSelect: (0, _bind.default)(_context5 = this.foundation.handleSelect).call(_context5, this.foundation),
+      onAllClick: () => this.foundation.handleAll(leftContainesNotInSelected),
+      onSearch: this.onInputChange,
+      onSelectOrRemove: item => this.onSelectOrRemove(item)
+    };
+
+    if (renderSourcePanel) {
+      return renderSourcePanel(renderProps);
+    }
+
+    return /*#__PURE__*/_react.default.createElement("section", {
+      className: "".concat(prefixcls, "-left")
+    }, inputCom, content);
+  }
+
+  renderGroupTitle(group) {
+    const groupCls = (0, _classnames.default)("".concat(prefixcls, "-group-title"));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: groupCls,
+      key: group.title
+    }, group.title);
+  }
+
+  renderLeftTree() {
+    const {
+      selectedItems
+    } = this.state;
+    const {
+      disabled,
+      dataSource,
+      treeProps
+    } = this.props;
+    const {
+      values
+    } = this.foundation.getValuesAndItemsFromMap(selectedItems);
+
+    const onChange = value => {
+      this.foundation.handleSelect(value);
+    };
+
+    const restTreeProps = (0, _lodashEs.omit)(treeProps, ['value', 'ref', 'onChange']);
+    return /*#__PURE__*/_react.default.createElement(_tree.default, (0, _assign.default)({
+      disabled: disabled,
+      treeData: dataSource,
+      multiple: true,
+      disableStrictly: true,
+      value: values,
+      defaultExpandAll: true,
+      leafOnly: true,
+      ref: tree => this._treeRef = tree,
+      filterTreeNode: true,
+      searchRender: false,
+      searchStyle: {
+        padding: 0
+      },
+      style: {
+        flex: 1,
+        overflow: 'overlay'
+      },
+      onChange: onChange
+    }, restTreeProps));
+  }
+
+  renderLeftList(visibileItems) {
+    const content = [];
+    const groupStatus = new _map.default();
+    (0, _forEach.default)(visibileItems).call(visibileItems, (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);
+      } else if (parentGroup) {
+        const groupContent = this.renderGroupTitle(parentGroup);
+        groupStatus.set(parentGroup.title, true);
+        content.push(groupContent);
+        content.push(optionContent);
+      } else {
+        content.push(optionContent);
+      }
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixcls, "-left-list")
+    }, content);
+  }
+
+  renderRightItem(item) {
+    const {
+      renderSelectedItem,
+      draggable,
+      type,
+      showPath
+    } = this.props;
+    let newItem = item;
+
+    if (draggable) {
+      newItem = (0, _assign.default)((0, _assign.default)({}, item), {
+        key: item._optionKey
+      });
+      delete newItem._optionKey;
+    }
+
+    const onRemove = () => this.foundation.handleSelectOrRemove(newItem);
+
+    const rightItemCls = (0, _classnames.default)({
+      ["".concat(prefixcls, "-item")]: true,
+      ["".concat(prefixcls, "-right-item")]: true,
+      ["".concat(prefixcls, "-right-item-draggable")]: draggable
+    });
+    const shouldShowPath = type === _constants.strings.TYPE_TREE_TO_LIST && showPath === true;
+    const label = shouldShowPath ? this.foundation._generatePath(item) : item.label;
+
+    if (renderSelectedItem) {
+      return renderSelectedItem((0, _assign.default)((0, _assign.default)({}, item), {
+        onRemove,
+        sortableHandle: _reactSortableHoc.SortableHandle
+      }));
+    }
+
+    const DragHandle = (0, _reactSortableHoc.SortableHandle)(() => /*#__PURE__*/_react.default.createElement(_semiIcons.IconHandle, {
+      className: "".concat(prefixcls, "-right-item-drag-handler")
+    }));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: rightItemCls,
+      key: newItem.key
+    }, draggable ? /*#__PURE__*/_react.default.createElement(DragHandle, null) : null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixcls, "-right-item-text")
+    }, label), /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+      onClick: onRemove,
+      className: (0, _classnames.default)("".concat(prefixcls, "-item-close-icon"), {
+        ["".concat(prefixcls, "-item-close-icon-disabled")]: item.disabled
+      })
+    }));
+  }
+
+  renderEmpty(type, emptyText) {
+    const emptyCls = (0, _classnames.default)({
+      ["".concat(prefixcls, "-empty")]: true,
+      ["".concat(prefixcls, "-right-empty")]: type === 'right',
+      ["".concat(prefixcls, "-left-empty")]: type === 'left'
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: emptyCls
+    }, emptyText);
+  }
+
+  renderRightSortableList(selectedData) {
+    // when choose some items && draggable is true
+    const SortableItem = (0, _reactSortableHoc.SortableElement)(item => this.renderRightItem(item));
+    const SortableList = (0, _reactSortableHoc.SortableContainer)(_ref => {
+      let {
+        items
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixcls, "-right-list")
+      }, (0, _map2.default)(items).call(items, (item, index) =>
+      /*#__PURE__*/
+      // sortableElement will take over the property 'key', so use another '_optionKey' to pass
+      _react.default.createElement(SortableItem, (0, _assign.default)({
+        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.default.createElement(SortableList, {
+      useDragHandle: true,
+      onSortEnd: this.onSortEnd,
+      items: selectedData
+    });
+
+    return sortList;
+  }
+
+  renderRight(locale) {
+    const {
+      selectedItems
+    } = this.state;
+    const {
+      emptyContent,
+      renderSelectedPanel,
+      draggable
+    } = this.props;
+    const selectedData = [...(0, _values.default)(selectedItems).call(selectedItems)]; // when custom render panel
+
+    const renderProps = {
+      length: selectedData.length,
+      selectedData,
+      onClear: () => this.foundation.handleClear(),
+      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}', "".concat(selectedData.length));
+    const headerConfig = {
+      totalContent: selectedText,
+      allContent: locale.clear,
+      onAllClick: () => this.foundation.handleClear(),
+      type: 'right',
+      showButton: Boolean(selectedData.length)
+    };
+    const headerCom = this.renderHeader(headerConfig);
+    const emptyCom = this.renderEmpty('right', emptyContent.right ? emptyContent.right : locale.emptyRight);
+    const panelCls = "".concat(prefixcls, "-right");
+    let content = null;
+
+    switch (true) {
+      // when empty
+      case !selectedData.length:
+        content = emptyCom;
+        break;
+
+      case selectedData.length && !draggable:
+        const list = /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(prefixcls, "-right-list")
+        }, (0, _map2.default)(selectedData).call(selectedData, item => this.renderRightItem((0, _assign.default)({}, item))));
+
+        content = list;
+        break;
+
+      case selectedData.length && draggable:
+        content = this.renderRightSortableList(selectedData);
+        break;
+
+      default:
+        break;
+    }
+
+    return /*#__PURE__*/_react.default.createElement("section", {
+      className: panelCls
+    }, headerCom, content);
+  }
+
+  render() {
+    const {
+      className,
+      style,
+      disabled,
+      renderSelectedPanel,
+      renderSourcePanel
+    } = this.props;
+    const transferCls = (0, _classnames.default)(prefixcls, className, {
+      ["".concat(prefixcls, "-disabled")]: disabled,
+      ["".concat(prefixcls, "-custom-panel")]: renderSelectedPanel && renderSourcePanel
+    });
+    return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+      componentName: "Transfer"
+    }, locale => /*#__PURE__*/_react.default.createElement("div", {
+      className: transferCls,
+      style: style
+    }, this.renderLeft(locale), this.renderRight(locale)));
+  }
+
+}
+
+Transfer.propTypes = {
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  dataSource: _propTypes.default.array,
+  filter: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.bool]),
+  onSearch: _propTypes.default.func,
+  inputProps: _propTypes.default.object,
+  value: _propTypes.default.array,
+  defaultValue: _propTypes.default.array,
+  onChange: _propTypes.default.func,
+  onSelect: _propTypes.default.func,
+  onDeselect: _propTypes.default.func,
+  renderSourceItem: _propTypes.default.func,
+  renderSelectedItem: _propTypes.default.func,
+  loading: _propTypes.default.bool,
+  type: _propTypes.default.oneOf(['list', 'groupList', 'treeList']),
+  treeProps: _propTypes.default.object,
+  showPath: _propTypes.default.bool,
+  emptyContent: _propTypes.default.shape({
+    search: _propTypes.default.node,
+    left: _propTypes.default.node,
+    right: _propTypes.default.node
+  }),
+  renderSourcePanel: _propTypes.default.func,
+  renderSelectedPanel: _propTypes.default.func,
+  draggable: _propTypes.default.bool
+};
+Transfer.defaultProps = {
+  type: _constants.strings.TYPE_LIST,
+  dataSource: [],
+  onSearch: _lodashEs.noop,
+  onChange: _lodashEs.noop,
+  onSelect: _lodashEs.noop,
+  onDeselect: _lodashEs.noop,
+  onClear: _lodashEs.noop,
+  defaultValue: [],
+  emptyContent: {},
+  showPath: false
+};
+var _default = Transfer;
+exports.default = _default;

package/lib/cjs/tree/autoSizer.d.ts

@@ -0,0 +1,28 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { ResizeEntry } from '../resizeObserver';
+export interface AutoSizerProps {
+    defaultHeight?: number | string;
+    defaultWidth?: number | string;
+    children?: (info: {
+        width: string | number;
+        height: string | number;
+    }) => React.ReactNode;
+}
+export interface AutoSizerState {
+    height: number | string;
+}
+export default class AutoSizer extends PureComponent<AutoSizerProps, AutoSizerState> {
+    static propTypes: {
+        defaultHeight: PropTypes.Requireable<string | number>;
+        defaultWidth: PropTypes.Requireable<string | number>;
+    };
+    static defaultProps: {
+        defaultHeight: string;
+        defaultWidth: string;
+    };
+    constructor(props: AutoSizerProps);
+    componentDidMount(): void;
+    _onResize: (entries: ResizeEntry[]) => void;
+    render(): JSX.Element;
+}