acud/es/transfer/DataSource.js

acg react 组件库

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 { createWorker } from '../_util/createWorker';
import Loading from '../loading';
import Checkbox from '../checkbox';
import Table from '../table';
import Search from '../search';
import SourceList from './SourceList';
var defaultFilterOption = function defaultFilterOption(inputValue, option) {
  return option.title.indexOf(inputValue) > -1;
};
var defaultTableFilterOption = function defaultTableFilterOption(inputValue, option) {
  return option.key.indexOf(inputValue) > -1;
};
var DataSource = function DataSource(props) {
  var prefixCls = props.prefixCls,
    displayType = props.displayType,
    columns = props.columns,
    pagination = props.pagination,
    expansionSource = props.expansionSource,
    _props$showSelectAll = props.showSelectAll,
    showSelectAll = _props$showSelectAll === void 0 ? true : _props$showSelectAll,
    filterOptionProp = props.filterOption,
    showSearch = props.showSearch,
    _props$showSearchClea = props.showSearchClear,
    showSearchClear = _props$showSearchClea === void 0 ? true : _props$showSearchClea,
    _props$useWorker = props.useWorker,
    useWorker = _props$useWorker === void 0 ? false : _props$useWorker,
    tKeys = props.tKeys,
    setTKeys = props.setTKeys,
    loading = props.loading,
    setLoading = props.setLoading,
    _props$workerLimit = props.workerLimit,
    workerLimit = _props$workerLimit === void 0 ? 100000 : _props$workerLimit,
    _props$workerLoading = props.workerLoading,
    workerLoading = _props$workerLoading === void 0 ? true : _props$workerLoading,
    leftStyle = props.leftStyle,
    locale = props.locale,
    _props$searchMode = props.searchMode,
    searchMode = _props$searchMode === void 0 ? 'fe' : _props$searchMode,
    onSearch = props.onSearch,
    _props$tableLeftProps = props.tableLeftProps,
    tableLeftProps = _props$tableLeftProps === void 0 ? {} : _props$tableLeftProps,
    _props$searchLeftProp = props.searchLeftProps,
    searchLeftProps = _props$searchLeftProp === void 0 ? {} : _props$searchLeftProp,
    labelRender = props.labelRender;
  var filterOption = filterOptionProp || (displayType === 'table' ? defaultTableFilterOption : defaultFilterOption);
  var dataSourceCls = "".concat(prefixCls, "-datasource");
  var sourceTitle = locale.sourceTitle,
    searchPlaceholder = locale.searchPlaceholder,
    sourceNoData = locale.sourceNoData,
    sourceNoSearchData = locale.sourceNoSearchData,
    workerLoadingTip = locale.workerLoadingTip;
  // 搜索关键字
  var _React$useState = React.useState(''),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    searchValue = _React$useState2[0],
    setSearchValue = _React$useState2[1];
  var _React$useState3 = React.useState([]),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    totalSelectedUndisabledKeys = _React$useState4[0],
    setTotalSelectedUndisabledKeys = _React$useState4[1];
  var _React$useState5 = React.useState([]),
    _React$useState6 = _slicedToArray(_React$useState5, 2),
    totalSelectedDisabledKeys = _React$useState6[0],
    setTotalSelectedDisabledKeys = _React$useState6[1];
  var filterSource = React.useMemo(function () {
    if (searchValue === '' || searchMode === 'api') {
      return expansionSource;
    }
    // 需要双层clone
    var cloneSource = expansionSource.map(function (exs) {
      return _extends({}, exs);
    });
    var fileterCloneSource = cloneSource.filter(function (data) {
      if (data.group) {
        return filterOption(searchValue, data) || data.children.some(function (child) {
          return filterOption(searchValue, child);
        });
      }
      if (data.groupOption) {
        var parentData = cloneSource.find(function (cData) {
          return cData.key === data.groupKey;
        });
        return filterOption(searchValue, data) || filterOption(searchValue, parentData);
      }
      return filterOption(searchValue, data);
    });
    fileterCloneSource.forEach(function (data) {
      if (data.group) {
        // eslint-disable-next-line max-nested-callbacks
        var filterChildren = data.children.filter(function (child) {
          return fileterCloneSource.some(function (s) {
            return s.key === child.key;
          });
        });
        data.children = filterChildren;
        data.childrenKeys = filterChildren.map(function (c) {
          return c.key;
        });
        data.disabled = data.disabled || data.children.every(function (child) {
          return child.disabled;
        });
      }
    });
    return fileterCloneSource;
  }, [searchValue, expansionSource, displayType, filterOption]);
  var totalUndisabledKeys = React.useMemo(function () {
    var unDisabledDataSource = filterSource.filter(function (data) {
      return !data.group && !data.disabled;
    });
    var udd = unDisabledDataSource.map(function (data) {
      return data.key;
    });
    return udd;
  }, [filterSource]);
  var totalDisabledKeys = React.useMemo(function () {
    var disabledDataSource = filterSource.filter(function (data) {
      return !data.group && !!data.disabled;
    });
    var tdk = disabledDataSource.map(function (data) {
      return data.key;
    });
    return tdk;
  }, [filterSource]);
  React.useEffect(function () {
    var tukSet = new Set(totalUndisabledKeys);
    var tdkSet = new Set(totalDisabledKeys);
    if (useWorker && tKeys.length >= workerLimit && totalUndisabledKeys.length >= workerLimit) {
      workerLoading && setLoading(true);
      var tsuWorker = createWorker(function (e) {
        var _e$data = e.data,
          tKeys = _e$data.tKeys,
          tukSet = _e$data.tukSet;
        var tsu = [];
        var tsd = [];
        tKeys.forEach(function (key) {
          if (tukSet.has(key)) {
            tsu.push(key);
          } else if (tdkSet.has(key)) {
            tsd.push(key);
          }
        });
        self.postMessage({
          tsu: tsu,
          tsd: tsd
        });
      });
      tsuWorker.addEventListener('message', function (event) {
        var _event$data = event.data,
          tsu = _event$data.tsu,
          tsd = _event$data.tsd;
        setTotalSelectedUndisabledKeys(tsu);
        setTotalSelectedDisabledKeys(tsd);
        tsuWorker.terminate();
        workerLoading && setLoading(false);
      });
      tsuWorker.postMessage({
        tKeys: tKeys,
        tukSet: tukSet
      });
    } else {
      var tsu = [];
      var tsd = [];
      tKeys.forEach(function (key) {
        if (tukSet.has(key)) {
          tsu.push(key);
        } else if (tdkSet.has(key)) {
          tsd.push(key);
        }
      });
      setTotalSelectedUndisabledKeys(tsu);
      setTotalSelectedDisabledKeys(tsd);
    }
  }, [totalUndisabledKeys, tKeys, useWorker, workerLimit, workerLoading]);
  var allChecked
  // 兜底处理下 0 的情况
  = totalUndisabledKeys.length > 0 && totalUndisabledKeys.length === totalSelectedUndisabledKeys.length;
  var indeterminate = totalSelectedUndisabledKeys.length && totalUndisabledKeys.length > totalSelectedUndisabledKeys.length;
  var selectAll = React.useCallback(function () {
    var newTKeys = [];
    // 取消全选
    if (allChecked) {
      var tukSet = new Set(totalUndisabledKeys);
      if (useWorker && tKeys.length > workerLimit && totalUndisabledKeys.length >= workerLimit) {
        workerLoading && setLoading(true);
        var cancelAllWorker = createWorker(function (e) {
          var _e$data2 = e.data,
            tKeys = _e$data2.tKeys,
            tukSet = _e$data2.tukSet;
          var nKeys = tKeys.filter(function (key) {
            return !tukSet.has(key);
          });
          self.postMessage(nKeys);
        });
        cancelAllWorker.addEventListener('message', function (event) {
          setTKeys(event.data);
          cancelAllWorker.terminate();
          workerLoading && setLoading(false);
        });
        cancelAllWorker.postMessage({
          tKeys: tKeys,
          tukSet: tukSet
        });
      } else {
        // newTKeys = tKeys.filter(key => !totalUndisabledKeys.includes(key));
        newTKeys = tKeys.filter(function (key) {
          return !tukSet.has(key);
        });
        setTKeys(newTKeys);
      }
    } else {
      newTKeys = _toConsumableArray(new Set([].concat(_toConsumableArray(tKeys), _toConsumableArray(totalUndisabledKeys))));
      setTKeys(newTKeys);
    }
  }, [expansionSource, totalSelectedUndisabledKeys, totalUndisabledKeys, useWorker, workerLimit, workerLoading, allChecked, tKeys]);
  var searchChange = React.useCallback(function (e) {
    var searchValue = searchMode === 'fe' ? e.target.value : e;
    setSearchValue(searchValue);
    onSearch === null || onSearch === void 0 ? void 0 : onSearch('left', searchValue);
  }, [onSearch, searchMode]);
  var onSelectChange = function onSelectChange(v) {
    // 排除filter中包含的tKeys，记为noneFilterKeys
    // 联合noneFilterKeys与filter中的选择项，记为最终keys
    var noneFilterKeys = tKeys.filter(function (key) {
      return !filterSource.some(function (item) {
        return item.key === key;
      });
    });
    setTKeys([].concat(_toConsumableArray(noneFilterKeys), _toConsumableArray(v)));
  };
  var rowSelection = {
    onChange: onSelectChange,
    selectedRowKeys: tKeys,
    getCheckboxProps: function getCheckboxProps(record) {
      return {
        disabled: !!record.disabled
      };
    }
  };
  var searchProps = React.useMemo(function () {
    if (searchMode === 'fe') {
      return {
        onChange: searchChange
      };
    }
    return {
      onSearch: searchChange
    };
  }, [searchMode, searchChange]);
  var selectedCount = totalSelectedUndisabledKeys.length + totalSelectedDisabledKeys.length;
  var totalCount = totalUndisabledKeys.length + totalSelectedDisabledKeys.length;
  return /*#__PURE__*/React.createElement(Loading, {
    loading: loading,
    tip: workerLoadingTip,
    size: "small"
  }, /*#__PURE__*/React.createElement("div", {
    className: dataSourceCls,
    style: leftStyle
  }, /*#__PURE__*/React.createElement("div", {
    className: "".concat(dataSourceCls, "-header")
  }, showSelectAll && displayType === 'single' && /*#__PURE__*/React.createElement(Checkbox, {
    checked: allChecked,
    indeterminate: indeterminate,
    className: "".concat(dataSourceCls, "-header-checkall"),
    onClick: selectAll
  }), /*#__PURE__*/React.createElement("span", {
    className: "".concat(dataSourceCls, "-label")
  }, sourceTitle, " ", typeof labelRender === 'function' ? labelRender(selectedCount, totalCount) : labelRender || "".concat(selectedCount, "/").concat(totalCount))), /*#__PURE__*/React.createElement("div", {
    className: "".concat(dataSourceCls, "-body")
  }, (showSearch === true || showSearch === 'left') && /*#__PURE__*/React.createElement(Search, _extends({
    placeholder: searchPlaceholder,
    className: "".concat(dataSourceCls, "-search"),
    allowClear: showSearchClear,
    size: "small"
  }, searchProps, searchLeftProps)), displayType === 'table' && /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-table-box")
  }, /*#__PURE__*/React.createElement(Table, _extends({
    pagination: pagination || false,
    dataSource: filterSource,
    columns: columns,
    rowSelection: rowSelection
  }, tableLeftProps))), !!filterSource.length && displayType === 'single' && /*#__PURE__*/React.createElement(SourceList, _extends({}, props, {
    filterSource: filterSource
  })), filterSource.length === 0 && displayType === 'single' && /*#__PURE__*/React.createElement("p", {
    className: "".concat(dataSourceCls, "-nodata")
  }, /*#__PURE__*/React.createElement("span", null, searchValue === '' ? sourceNoData : sourceNoSearchData)))));
};
export default DataSource;