@douyinfe/semi-ui 2.0.7-alpha.0 → 2.0.9-alpha.2

package/lib/cjs/transfer/index.js

@@ -1,668 +0,0 @@
-"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 _isArray2 = _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 _isArray3 = _interopRequireDefault(require("lodash/isArray"));
-
-var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
-
-var _omit2 = _interopRequireDefault(require("lodash/omit"));
-
-var _noop2 = _interopRequireDefault(require("lodash/noop"));
-
-var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _reactSortableHoc = require("react-sortable-hoc");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-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, _isArray3.default)(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, _isArray3.default)(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, _isArray2.default)(dataSource)) {
-      newData = (0, _transferUtlls._generateDataByType)(dataSource, type);
-      mergedState.data = newData;
-    }
-
-    if (Boolean(value) && (0, _isArray2.default)(value)) {
-      newSelectedItems = (0, _transferUtlls._generateSelectedItems)(value, newData);
-      mergedState.selectedItems = newSelectedItems;
-    }
-
-    if (!(0, _isEqual2.default)(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, _isEmpty2.default)(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, _omit2.default)(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: _noop2.default,
-  onChange: _noop2.default,
-  onSelect: _noop2.default,
-  onDeselect: _noop2.default,
-  onClear: _noop2.default,
-  defaultValue: [],
-  emptyContent: {},
-  showPath: false
-};
-var _default = Transfer;
-exports.default = _default;

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

@@ -1,28 +0,0 @@
-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;
-}