acud/lib/transfer/index.js

acg react 组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var React = _interopRequireWildcard(require("react"));
var _classnames2 = _interopRequireDefault(require("classnames"));
var _configProvider = require("../config-provider");
var _LocaleReceiver = require("../locale-provider/LocaleReceiver");
var _DataSource = _interopRequireDefault(require("./DataSource"));
var _Target = _interopRequireDefault(require("./Target"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/*
 * transfer 穿梭框
 * author zhousheng
 */

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 = (0, _LocaleReceiver.useLocaleReceiver)('Transfer'),
    _useLocaleReceiver2 = (0, _slicedToArray2["default"])(_useLocaleReceiver, 1),
    transferLocale = _useLocaleReceiver2[0];
  var userLocale = (0, _extends2["default"])((0, _extends2["default"])({}, transferLocale), locale);
  var _React$useState = React.useState(false),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    loading = _React$useState2[0],
    setLoading = _React$useState2[1];
  var _React$useState3 = React.useState(targetKeys || []),
    _React$useState4 = (0, _slicedToArray2["default"])(_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 = (0, _slicedToArray2["default"])(_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((0, _extends2["default"])((0, _extends2["default"])({}, data), {
        childrenKeys: childrenKeys,
        group: true,
        disabled: data.disabled || data.children.every(function (child) {
          return child.disabled;
        })
      }));
      data.children.forEach(function (child) {
        expansionArr.push((0, _extends2["default"])((0, _extends2["default"])({}, 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 ? [] : (0, _toConsumableArray2["default"])(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(_configProvider.ConfigContext),
    getPrefixCls = _React$useContext.getPrefixCls;
  var prefixCls = getPrefixCls('transfer', customizePrefixCls);
  var classNames = (0, _classnames2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, 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["default"], (0, _extends2["default"])({}, 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["default"], (0, _extends2["default"])({}, 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
  })));
};
var _default = exports["default"] = Transfer;