linkmore-design/lib/transfer/index.js

🌈 🚀lm组件库。🚀

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var React = _interopRequireWildcard(require("react"));
var _configProvider = require("../config-provider");
var _defaultRenderEmpty = _interopRequireDefault(require("../config-provider/defaultRenderEmpty"));
var _context = require("../form/context");
var _LocaleReceiver = _interopRequireDefault(require("../locale-provider/LocaleReceiver"));
var _default2 = _interopRequireDefault(require("../locale/default"));
var _statusUtils = require("../_util/statusUtils");
var _warning = _interopRequireDefault(require("../_util/warning"));
var _list = _interopRequireDefault(require("./list"));
var _operation = _interopRequireDefault(require("./operation"));
var _search = _interopRequireDefault(require("./search"));
class Transfer extends React.Component {
  // For high-level customized Transfer @dqaria
  static List = _list.default;
  static Operation = _operation.default;
  static Search = _search.default;
  static getDerivedStateFromProps({
    selectedKeys,
    targetKeys,
    pagination,
    children
  }) {
    if (selectedKeys) {
      const mergedTargetKeys = targetKeys || [];
      return {
        sourceSelectedKeys: selectedKeys.filter(key => !mergedTargetKeys.includes(key)),
        targetSelectedKeys: selectedKeys.filter(key => mergedTargetKeys.includes(key))
      };
    }
    (0, _warning.default)(!pagination || !children, 'Transfer', '`pagination` not support customize render list.');
    return null;
  }
  separatedDataSource = null;
  constructor(props) {
    super(props);
    const {
      selectedKeys = [],
      targetKeys = []
    } = props;
    this.state = {
      sourceSelectedKeys: selectedKeys.filter(key => !targetKeys.includes(key)),
      targetSelectedKeys: selectedKeys.filter(key => targetKeys.includes(key))
    };
  }
  setStateKeys = (direction, keys) => {
    if (direction === 'left') {
      this.setState(({
        sourceSelectedKeys
      }) => ({
        sourceSelectedKeys: typeof keys === 'function' ? keys(sourceSelectedKeys || []) : keys
      }));
    } else {
      this.setState(({
        targetSelectedKeys
      }) => ({
        targetSelectedKeys: typeof keys === 'function' ? keys(targetSelectedKeys || []) : keys
      }));
    }
  };
  getTitles(transferLocale) {
    return this.props.titles ?? transferLocale.titles ?? [];
  }
  getLocale = (transferLocale, renderEmpty) => {
    const {
      locale = {}
    } = this.props;
    return {
      ...transferLocale,
      notFoundContent: renderEmpty('Transfer'),
      ...locale
    };
  };
  moveTo = direction => {
    const {
      targetKeys = [],
      dataSource = [],
      onChange
    } = this.props;
    const {
      sourceSelectedKeys,
      targetSelectedKeys
    } = this.state;
    const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys;
    // filter the disabled options
    const newMoveKeys = moveKeys.filter(key => !dataSource.some(data => !!(key === data.key && data.disabled)));
    // move items to target box
    const newTargetKeys = direction === 'right' ? newMoveKeys.concat(targetKeys) : targetKeys.filter(targetKey => !newMoveKeys.includes(targetKey));

    // empty checked keys
    const oppositeDirection = direction === 'right' ? 'left' : 'right';
    this.setStateKeys(oppositeDirection, []);
    this.handleSelectChange(oppositeDirection, []);
    onChange?.(newTargetKeys, direction, newMoveKeys);
  };
  moveToLeft = () => this.moveTo('left');
  moveToRight = () => this.moveTo('right');
  onItemSelectAll = (direction, selectedKeys, checkAll) => {
    this.setStateKeys(direction, prevKeys => {
      let mergedCheckedKeys = [];
      if (checkAll) {
        // Merge current keys with origin key
        mergedCheckedKeys = Array.from(new Set([...prevKeys, ...selectedKeys]));
      } else {
        // Remove current keys from origin keys
        mergedCheckedKeys = prevKeys.filter(key => !selectedKeys.includes(key));
      }
      this.handleSelectChange(direction, mergedCheckedKeys);
      return mergedCheckedKeys;
    });
  };
  onLeftItemSelectAll = (selectedKeys, checkAll) => this.onItemSelectAll('left', selectedKeys, checkAll);
  onRightItemSelectAll = (selectedKeys, checkAll) => this.onItemSelectAll('right', selectedKeys, checkAll);
  handleFilter = (direction, e) => {
    const {
      onSearch
    } = this.props;
    const {
      value
    } = e.target;
    onSearch?.(direction, value);
  };
  handleLeftFilter = e => this.handleFilter('left', e);
  handleRightFilter = e => this.handleFilter('right', e);
  handleClear = direction => {
    const {
      onSearch
    } = this.props;
    onSearch?.(direction, '');
  };
  handleLeftClear = () => this.handleClear('left');
  handleRightClear = () => this.handleClear('right');
  onItemSelect = (direction, selectedKey, checked) => {
    const {
      sourceSelectedKeys,
      targetSelectedKeys
    } = this.state;
    const holder = direction === 'left' ? [...sourceSelectedKeys] : [...targetSelectedKeys];
    const index = holder.indexOf(selectedKey);
    if (index > -1) {
      holder.splice(index, 1);
    }
    if (checked) {
      holder.push(selectedKey);
    }
    this.handleSelectChange(direction, holder);
    if (!this.props.selectedKeys) {
      this.setStateKeys(direction, holder);
    }
  };
  onLeftItemSelect = (selectedKey, checked) => this.onItemSelect('left', selectedKey, checked);
  onRightItemSelect = (selectedKey, checked) => this.onItemSelect('right', selectedKey, checked);
  onRightItemRemove = selectedKeys => {
    const {
      targetKeys = [],
      onChange
    } = this.props;
    this.setStateKeys('right', []);
    onChange?.(targetKeys.filter(key => !selectedKeys.includes(key)), 'left', [...selectedKeys]);
  };
  handleScroll = (direction, e) => {
    const {
      onScroll
    } = this.props;
    onScroll?.(direction, e);
  };
  handleLeftScroll = e => this.handleScroll('left', e);
  handleRightScroll = e => this.handleScroll('right', e);
  handleSelectChange(direction, holder) {
    const {
      sourceSelectedKeys,
      targetSelectedKeys
    } = this.state;
    const {
      onSelectChange
    } = this.props;
    if (!onSelectChange) {
      return;
    }
    if (direction === 'left') {
      onSelectChange(holder, targetSelectedKeys);
    } else {
      onSelectChange(sourceSelectedKeys, holder);
    }
  }

  // eslint-disable-next-line class-methods-use-this
  handleListStyle = (listStyle, direction) => {
    if (typeof listStyle === 'function') {
      return listStyle({
        direction
      });
    }
    return listStyle;
  };
  separateDataSource() {
    const {
      dataSource = [],
      rowKey,
      targetKeys = []
    } = this.props;
    const leftDataSource = [];
    const rightDataSource = new Array(targetKeys.length);
    dataSource.forEach(record => {
      if (rowKey) {
        record = {
          ...record,
          key: rowKey(record)
        };
      }

      // rightDataSource should be ordered by targetKeys
      // leftDataSource should be ordered by dataSource
      const indexOfKey = targetKeys.indexOf(record.key);
      if (indexOfKey !== -1) {
        rightDataSource[indexOfKey] = record;
      } else {
        leftDataSource.push(record);
      }
    });
    return {
      leftDataSource,
      rightDataSource
    };
  }
  render() {
    return /*#__PURE__*/React.createElement(_LocaleReceiver.default, {
      componentName: "Transfer",
      defaultLocale: _default2.default.Transfer
    }, contextLocale => /*#__PURE__*/React.createElement(_configProvider.ConfigConsumer, null, ({
      getPrefixCls,
      renderEmpty,
      direction
    }) => /*#__PURE__*/React.createElement(_context.FormItemInputContext.Consumer, null, ({
      hasFeedback,
      status: contextStatus
    }) => {
      const {
        prefixCls: customizePrefixCls,
        className,
        disabled,
        operations = [],
        showSearch = false,
        footer,
        style,
        listStyle = {},
        operationStyle,
        filterOption,
        render,
        children,
        showSelectAll,
        oneWay,
        pagination,
        status: customStatus
      } = this.props;
      const prefixCls = getPrefixCls('transfer', customizePrefixCls);
      const locale = this.getLocale(contextLocale, renderEmpty || _defaultRenderEmpty.default);
      const {
        sourceSelectedKeys,
        targetSelectedKeys
      } = this.state;
      const mergedStatus = (0, _statusUtils.getMergedStatus)(contextStatus, customStatus);
      const mergedPagination = !children && pagination;
      const {
        leftDataSource,
        rightDataSource
      } = this.separateDataSource();
      const leftActive = targetSelectedKeys.length > 0;
      const rightActive = sourceSelectedKeys.length > 0;
      const cls = (0, _classnames.default)(prefixCls, {
        [`${prefixCls}-disabled`]: disabled,
        [`${prefixCls}-customize-list`]: !!children,
        [`${prefixCls}-rtl`]: direction === 'rtl'
      }, (0, _statusUtils.getStatusClassNames)(prefixCls, mergedStatus, hasFeedback), className);
      const titles = this.getTitles(locale);
      const selectAllLabels = this.props.selectAllLabels || [];
      return /*#__PURE__*/React.createElement("div", {
        className: cls,
        style: style
      }, /*#__PURE__*/React.createElement(_list.default, (0, _extends2.default)({
        prefixCls: `${prefixCls}-list`,
        titleText: titles?.[0],
        dataSource: leftDataSource,
        filterOption: filterOption,
        style: this.handleListStyle(listStyle, 'left'),
        checkedKeys: sourceSelectedKeys,
        handleFilter: this.handleLeftFilter,
        handleClear: this.handleLeftClear,
        onItemSelect: this.onLeftItemSelect,
        onItemSelectAll: this.onLeftItemSelectAll,
        render: render,
        showSearch: showSearch,
        renderList: children,
        footer: footer,
        onScroll: this.handleLeftScroll,
        disabled: disabled,
        direction: direction === 'rtl' ? 'right' : 'left',
        showSelectAll: showSelectAll,
        selectAllLabel: selectAllLabels[0],
        pagination: mergedPagination
      }, locale)), /*#__PURE__*/React.createElement(_operation.default, {
        className: `${prefixCls}-operation`,
        rightActive: rightActive,
        rightArrowText: operations[0],
        moveToRight: this.moveToRight,
        leftActive: leftActive,
        leftArrowText: operations[1],
        moveToLeft: this.moveToLeft,
        style: operationStyle,
        disabled: disabled,
        direction: direction,
        oneWay: oneWay
      }), /*#__PURE__*/React.createElement(_list.default, (0, _extends2.default)({
        prefixCls: `${prefixCls}-list`,
        titleText: titles?.[1],
        dataSource: rightDataSource,
        filterOption: filterOption,
        style: this.handleListStyle(listStyle, 'right'),
        checkedKeys: targetSelectedKeys,
        handleFilter: this.handleRightFilter,
        handleClear: this.handleRightClear,
        onItemSelect: this.onRightItemSelect,
        onItemSelectAll: this.onRightItemSelectAll,
        onItemRemove: this.onRightItemRemove,
        render: render,
        showSearch: showSearch,
        renderList: children,
        footer: footer,
        onScroll: this.handleRightScroll,
        disabled: disabled,
        direction: direction === 'rtl' ? 'left' : 'right',
        showSelectAll: showSelectAll,
        selectAllLabel: selectAllLabels[1],
        showRemove: oneWay,
        pagination: mergedPagination
      }, locale)));
    })));
  }
}
var _default = Transfer;
exports.default = _default;