acud/es/transfer/index.js

acg react 组件库

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/*
 * transfer 穿梭框
 * author zhousheng
 */
import * as React from 'react';
import classnames from 'classnames';
import { ConfigContext } from '../config-provider';
import { useLocaleReceiver } from '../locale-provider/LocaleReceiver';
import DataSource from './DataSource';
import Target from './Target';
var Transfer = function Transfer(props) {
  var customizePrefixCls = props.prefixCls,
    className = props.className,
    _props$displayType = props.displayType,
    displayType = _props$displayType === void 0 ? 'single' : _props$displayType,
    targetKeys = props.targetKeys,
    onChange = props.onChange,
    _props$locale = props.locale,
    locale = _props$locale === void 0 ? {} : _props$locale,
    dataSource = props.dataSource,
    columns = props.columns,
    leftColumns = props.leftColumns,
    rightColumns = props.rightColumns,
    leftPagination = props.leftPagination,
    rightPagination = props.rightPagination,
    targetDataSelf = props.targetDataSelf,
    _props$targetData = props.targetData,
    outTargetData = _props$targetData === void 0 ? [] : _props$targetData,
    onTargetDataChange = props.onTargetDataChange,
    dataSourceCustom = props.dataSourceCustom,
    labelRender = props.labelRender;
  var _useLocaleReceiver = useLocaleReceiver('Transfer'),
    _useLocaleReceiver2 = _slicedToArray(_useLocaleReceiver, 1),
    transferLocale = _useLocaleReceiver2[0];
  var userLocale = _extends(_extends({}, transferLocale), locale);
  var _React$useState = React.useState(false),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    loading = _React$useState2[0],
    setLoading = _React$useState2[1];
  var _React$useState3 = React.useState(targetKeys || []),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    tKeys = _React$useState4[0],
    setTKeys = _React$useState4[1];
  var mergedKeys = 'targetKeys' in props ? targetKeys : tKeys;
  // targetData
  var _React$useState5 = React.useState(outTargetData),
    _React$useState6 = _slicedToArray(_React$useState5, 2),
    targetData = _React$useState6[0],
    setTargetData = _React$useState6[1];
  var mergedTargetData = 'targetData' in props ? outTargetData : targetData;
  // table左右两侧columns 配置
  var innerLeftColumns = leftColumns || columns;
  var innerRightColumns = rightColumns || columns;
  // table左右两侧pagination 配置
  var innerLeftPagination = leftPagination;
  var innerRightPagination = rightPagination;
  // 是否是初始化执行
  var isInit = React.useRef(true);
  // 二级数据展开成一级数据
  var expansionSource = React.useMemo(function () {
    var expansionArr = [];
    dataSource.forEach(function (data) {
      if (!data.children || !data.children.length) {
        expansionArr.push(data);
        return;
      }
      var childrenKeys = [];
      expansionArr.push(_extends(_extends({}, data), {
        childrenKeys: childrenKeys,
        group: true,
        disabled: data.disabled || data.children.every(function (child) {
          return child.disabled;
        })
      }));
      data.children.forEach(function (child) {
        expansionArr.push(_extends(_extends({}, child), {
          groupKey: data.key,
          groupOption: true,
          disabled: data.disabled || child.disabled
        }));
        childrenKeys.push(child.key);
      });
    });
    return expansionArr;
  }, [dataSource]);
  React.useEffect(function () {
    if (isInit.current) {
      isInit.current = false;
      // 初始化不触发onChange
      return;
    }
    changeTargetData(tKeys);
    onChange && onChange(tKeys);
  }, [tKeys]);
  var changeTargetData = React.useCallback(function (tKeys) {
    // 如果左右数据分离，需要遍历key，从左侧数据找到完整的data
    if (targetDataSelf && displayType === 'table') {
      // 如果tKeys为空，说明清空了已选项，需要清空targetData
      // 不直接赋予空值的话一次性清空右侧数据时，targetData会剩一半数据
      var tempTargetData = (tKeys === null || tKeys === void 0 ? void 0 : tKeys.length) === 0 ? [] : _toConsumableArray(mergedTargetData);
      tKeys.forEach(function (tk) {
        var sourceItem = expansionSource.find(function (s) {
          return s.key === tk;
        });
        if (sourceItem) {
          // 还需要看当前targetdata里存不存在
          var targetItem = mergedTargetData.find(function (td) {
            return td.key === tk;
          });
          if (!targetItem) {
            tempTargetData.push(sourceItem);
          }
        }
      });
      // 移除tempTargetData中不存在于tKeys的数据
      tempTargetData.forEach(function (td) {
        if (!tKeys.includes(td.key)) {
          var index = tempTargetData.findIndex(function (t) {
            return t.key === td.key;
          });
          index !== -1 && tempTargetData.splice(index, 1);
        }
      });
      setTargetData(tempTargetData);
      onTargetDataChange === null || onTargetDataChange === void 0 ? void 0 : onTargetDataChange(tempTargetData);
    }
  }, [targetDataSelf, displayType, expansionSource, mergedTargetData]);
  var _React$useContext = React.useContext(ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('transfer', customizePrefixCls);
  var classNames = classnames(_defineProperty(_defineProperty(_defineProperty({}, prefixCls, true), className, className), "".concat(prefixCls, "-table"), displayType === 'table'));
  var rightExpansionSource = targetDataSelf && displayType === 'table' ? mergedTargetData : expansionSource;
  return /*#__PURE__*/React.createElement("div", {
    className: classNames
  }, /*#__PURE__*/React.createElement(DataSource, _extends({}, props, {
    displayType: displayType,
    locale: userLocale,
    prefixCls: prefixCls,
    tKeys: mergedKeys,
    setTKeys: setTKeys,
    loading: loading,
    setLoading: setLoading,
    expansionSource: expansionSource,
    columns: innerLeftColumns,
    pagination: innerLeftPagination,
    labelRender: labelRender
  })), /*#__PURE__*/React.createElement(Target, _extends({}, props, {
    displayType: displayType,
    locale: userLocale,
    prefixCls: prefixCls,
    tKeys: mergedKeys,
    setTKeys: setTKeys,
    loading: loading,
    setLoading: setLoading,
    expansionSource: typeof dataSourceCustom === 'function' ? dataSourceCustom(rightExpansionSource) : rightExpansionSource,
    columns: innerRightColumns,
    pagination: innerRightPagination
  })));
};
export default Transfer;