acud/lib/transfer/Target.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var React = _interopRequireWildcard(require("react"));
var _dedupe = _interopRequireDefault(require("classnames/dedupe"));
var _OutlinedClose = _interopRequireDefault(require("acud-icon/lib/icons/OutlinedClose"));
var _createWorker = require("../_util/createWorker");
var _loading = _interopRequireDefault(require("../loading"));
var _table = _interopRequireDefault(require("../table"));
var _TargetList = _interopRequireDefault(require("./TargetList"));
var _search = _interopRequireDefault(require("../search"));
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 defaultFilterOption = function defaultFilterOption(inputValue, option) {
  return option.title.indexOf(inputValue) > -1;
};
var Target = function Target(props) {
  var prefixCls = props.prefixCls,
    displayType = props.displayType,
    _props$showClearAll = props.showClearAll,
    showClearAll = _props$showClearAll === void 0 ? true : _props$showClearAll,
    _props$filterOption = props.filterOption,
    filterOption = _props$filterOption === void 0 ? defaultFilterOption : _props$filterOption,
    showSearch = props.showSearch,
    _props$showSearchClea = props.showSearchClear,
    showSearchClear = _props$showSearchClea === void 0 ? true : _props$showSearchClea,
    tKeys = props.tKeys,
    setTKeys = props.setTKeys,
    loading = props.loading,
    setLoading = props.setLoading,
    useWorker = props.useWorker,
    _props$workerLimit = props.workerLimit,
    workerLimit = _props$workerLimit === void 0 ? 100000 : _props$workerLimit,
    _props$workerLoading = props.workerLoading,
    workerLoading = _props$workerLoading === void 0 ? true : _props$workerLoading,
    rightStyle = props.rightStyle,
    locale = props.locale,
    expansionSource = props.expansionSource,
    columns = props.columns,
    pagination = props.pagination,
    onSearch = props.onSearch,
    _props$tableRightProp = props.tableRightProps,
    tableRightProps = _props$tableRightProp === void 0 ? {} : _props$tableRightProp,
    _props$searchRightPro = props.searchRightProps,
    searchRightProps = _props$searchRightPro === void 0 ? {} : _props$searchRightPro;
  var targetCls = "".concat(prefixCls, "-target");
  var targetTitle = locale.targetTitle,
    searchPlaceholder = locale.searchPlaceholder,
    targetNoData = locale.targetNoData,
    targetNoSearchData = locale.targetNoSearchData,
    clearAll = locale.clearAll,
    workerLoadingTip = locale.workerLoadingTip;
  var _React$useState = React.useState([]),
    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
    targetSource = _React$useState2[0],
    setTargetSource = _React$useState2[1];
  React.useEffect(function () {
    var tkSet = new Set(tKeys);
    if (useWorker && expansionSource.length > workerLimit && tKeys.length > workerLimit) {
      workerLoading && setLoading(true);
      var tsWorker = (0, _createWorker.createWorker)(function (e) {
        var _e$data = e.data,
          expansionSource = _e$data.expansionSource,
          tkSet = _e$data.tkSet;
        var tsArr = expansionSource.filter(function (data) {
          return tkSet.has(data.key)
          // eslint-disable-next-line max-nested-callbacks
          || data.group && data.childrenKeys.some(function (childKey) {
            return tkSet.has(childKey);
          });
        });
        self.postMessage(tsArr);
      });
      tsWorker.addEventListener('message', function (event) {
        setTargetSource(event.data);
        tsWorker.terminate();
        workerLoading && setLoading(false);
      });
      tsWorker.postMessage({
        expansionSource: expansionSource,
        tkSet: tkSet
      });
    } else {
      var tsArr = expansionSource.filter(function (data) {
        return tkSet.has(data.key) || data.group && data.childrenKeys.some(function (childKey) {
          return tkSet.has(childKey);
        });
      });
      setTargetSource(tsArr);
    }
  }, [expansionSource, tKeys]);
  // 搜索关键字
  var _React$useState3 = React.useState(''),
    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
    searchValue = _React$useState4[0],
    setSearchValue = _React$useState4[1];
  var filterSource = React.useMemo(function () {
    if (searchValue === '') {
      return targetSource;
    }
    var tfs = targetSource.filter(function (data) {
      if (data.group) {
        return filterOption(searchValue, data) || data.children.some(function (child) {
          return tKeys.includes(child.key) && filterOption(searchValue, child);
        });
      }
      if (data.groupOption) {
        var parentData = targetSource.find(function (cData) {
          return cData.key === data.groupKey;
        });
        return filterOption(searchValue, data) || filterOption(searchValue, parentData);
      }
      return filterOption(searchValue, data);
    });
    return tfs;
  }, [searchValue, targetSource, filterOption]);
  // 已选项
  var optionSource = React.useMemo(function () {
    return filterSource.filter(function (data) {
      return !data.group;
    });
  }, [filterSource]);
  // 已选中的可操作的key
  var totalUndisabledKeys = React.useMemo(function () {
    var unDisabledTargetSource = optionSource.filter(function (data) {
      return !data.disabled;
    });
    return unDisabledTargetSource.map(function (data) {
      return data.key;
    });
  }, [optionSource]);
  // 已选中的不可操作的key
  var totalDisabledKeys = React.useMemo(function () {
    var unDisabledTargetSource = optionSource.filter(function (data) {
      return data.disabled;
    });
    return unDisabledTargetSource.map(function (data) {
      return data.key;
    });
  }, [optionSource]);
  var handleClearAll = React.useCallback(function () {
    var tukSet = new Set(totalUndisabledKeys);
    if (useWorker && tKeys.length > workerLimit && totalUndisabledKeys.length > workerLimit) {
      workerLoading && setLoading(true);
      var tkWorker = (0, _createWorker.createWorker)(function (e) {
        var _e$data2 = e.data,
          tukSet = _e$data2.tukSet,
          tKeys = _e$data2.tKeys;
        var newTKeys = tKeys.filter(function (key) {
          return !tukSet.has(key);
        });
        self.postMessage(newTKeys);
      });
      tkWorker.addEventListener('message', function (event) {
        setTKeys(event.data);
        tkWorker.terminate();
        workerLoading && setLoading(false);
      });
      tkWorker.postMessage({
        tukSet: tukSet,
        tKeys: tKeys
      });
    } else {
      // const newTKeys = tKeys.filter(key => !totalUndisabledKeys.includes(key));
      var newTKeys = tKeys.filter(function (key) {
        return !tukSet.has(key);
      });
      setTKeys(newTKeys);
    }
  }, [totalUndisabledKeys, tKeys, useWorker, workerLimit, workerLoading]);
  var searchChange = React.useCallback(function (e) {
    var searchValue = e.target.value;
    setSearchValue(searchValue);
    onSearch === null || onSearch === void 0 ? void 0 : onSearch('right', searchValue);
  }, [onSearch]);
  var targetColumns = React.useMemo(function () {
    if (!columns) {
      return;
    }
    var cancelItem = function cancelItem(data) {
      if (data.disabled) {
        return;
      }
      var curTKeys = (0, _toConsumableArray2["default"])(tKeys);
      if (data.group) {
        var deleteKeys = data.childrenKeys;
        curTKeys = curTKeys.filter(function (tKey) {
          return !deleteKeys.includes(tKey);
        });
      } else if (curTKeys.includes(data.key)) {
        curTKeys.splice(curTKeys.indexOf(data.key), 1);
      }
      setTKeys(curTKeys);
    };
    var tColumns = (0, _toConsumableArray2["default"])(columns);
    tColumns.push({
      title: '',
      key: 'action',
      width: 40,
      render: function render(_text, data) {
        if (!data.disabled) {
          return /*#__PURE__*/React.createElement(_OutlinedClose["default"], {
            className: "".concat(prefixCls, "-target-item-cancel"),
            onClick: function onClick() {
              return cancelItem(data);
            }
          });
        }
        return null;
      }
    });
    return tColumns;
  }, [columns, tKeys]);
  var clearCls = (0, _dedupe["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(targetCls, "-clear-all"), true), "".concat(targetCls, "-clear-all-disabled"), filterSource.length === totalDisabledKeys.length));
  return /*#__PURE__*/React.createElement(_loading["default"], {
    loading: loading,
    tip: workerLoadingTip,
    size: "small"
  }, /*#__PURE__*/React.createElement("div", {
    className: targetCls,
    style: rightStyle
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(targetCls, "-header")
  }, /*#__PURE__*/React.createElement("span", {
    className: "".concat(targetCls, "-label")
  }, targetTitle, "\uFF08", optionSource.length, "\uFF09"), showClearAll && /*#__PURE__*/React.createElement("span", {
    className: clearCls,
    "aria-disabled": optionSource.length === totalDisabledKeys.length,
    onClick: handleClearAll
  }, clearAll)), /*#__PURE__*/React.createElement("div", {
    className: "".concat(targetCls, "-body")
  }, (showSearch === true || showSearch === 'right') && /*#__PURE__*/React.createElement(_search["default"], (0, _extends2["default"])({
    placeholder: searchPlaceholder,
    className: "".concat(targetCls, "-search"),
    allowClear: showSearchClear,
    size: "small",
    onChange: searchChange
  }, searchRightProps)), displayType === 'table' && /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-table-box")
  }, /*#__PURE__*/React.createElement(_table["default"], (0, _extends2["default"])({
    pagination: pagination ? (0, _extends2["default"])({
      total: optionSource.length
    }, pagination) : false,
    dataSource: filterSource,
    columns: targetColumns
  }, tableRightProps))), !!filterSource.length && displayType === 'single' && /*#__PURE__*/React.createElement(_TargetList["default"], (0, _extends2["default"])({}, props, {
    filterSource: filterSource
  })), filterSource.length === 0 && displayType === 'single' && /*#__PURE__*/React.createElement("p", {
    className: "".concat(prefixCls, "-target-nodata")
  }, /*#__PURE__*/React.createElement("span", null, searchValue === '' ? targetNoData : targetNoSearchData)))));
};
var _default = exports["default"] = Target;