acud/es/transfer/Target.js

acg react 组件库

import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
/*
 * transfer 穿梭框
 * author zhousheng
 */
import * as React from 'react';
import classnames from 'classnames/dedupe';
import OutlinedClose from "acud-icon/es/icons/OutlinedClose";
import { createWorker } from '../_util/createWorker';
import Loading from '../loading';
import Table from '../table';
import TargetList from './TargetList';
import Search from '../search';
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 = _slicedToArray(_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 = 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 = _slicedToArray(_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 = 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 = _toConsumableArray(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 = _toConsumableArray(columns);
    tColumns.push({
      title: '',
      key: 'action',
      width: 40,
      render: function render(_text, data) {
        if (!data.disabled) {
          return /*#__PURE__*/React.createElement(OutlinedClose, {
            className: "".concat(prefixCls, "-target-item-cancel"),
            onClick: function onClick() {
              return cancelItem(data);
            }
          });
        }
        return null;
      }
    });
    return tColumns;
  }, [columns, tKeys]);
  var clearCls = classnames(_defineProperty(_defineProperty({}, "".concat(targetCls, "-clear-all"), true), "".concat(targetCls, "-clear-all-disabled"), filterSource.length === totalDisabledKeys.length));
  return /*#__PURE__*/React.createElement(Loading, {
    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, _extends({
    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, _extends({
    pagination: pagination ? _extends({
      total: optionSource.length
    }, pagination) : false,
    dataSource: filterSource,
    columns: targetColumns
  }, tableRightProps))), !!filterSource.length && displayType === 'single' && /*#__PURE__*/React.createElement(TargetList, _extends({}, 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)))));
};
export default Target;