acud
Version:
acg react 组件库
305 lines (303 loc) • 13.5 kB
JavaScript
;
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 _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 _createWorker = require("../_util/createWorker");
var _loading = _interopRequireDefault(require("../loading"));
var _checkbox = _interopRequireDefault(require("../checkbox"));
var _table = _interopRequireDefault(require("../table"));
var _search = _interopRequireDefault(require("../search"));
var _SourceList = _interopRequireDefault(require("./SourceList"));
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 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 = (0, _slicedToArray2["default"])(_React$useState, 2),
searchValue = _React$useState2[0],
setSearchValue = _React$useState2[1];
var _React$useState3 = React.useState([]),
_React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
totalSelectedUndisabledKeys = _React$useState4[0],
setTotalSelectedUndisabledKeys = _React$useState4[1];
var _React$useState5 = React.useState([]),
_React$useState6 = (0, _slicedToArray2["default"])(_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 (0, _extends2["default"])({}, 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 = (0, _createWorker.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 = (0, _createWorker.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 = (0, _toConsumableArray2["default"])(new Set([].concat((0, _toConsumableArray2["default"])(tKeys), (0, _toConsumableArray2["default"])(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((0, _toConsumableArray2["default"])(noneFilterKeys), (0, _toConsumableArray2["default"])(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["default"], {
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["default"], {
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["default"], (0, _extends2["default"])({
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["default"], (0, _extends2["default"])({
pagination: pagination || false,
dataSource: filterSource,
columns: columns,
rowSelection: rowSelection
}, tableLeftProps))), !!filterSource.length && displayType === 'single' && /*#__PURE__*/React.createElement(_SourceList["default"], (0, _extends2["default"])({}, props, {
filterSource: filterSource
})), filterSource.length === 0 && displayType === 'single' && /*#__PURE__*/React.createElement("p", {
className: "".concat(dataSourceCls, "-nodata")
}, /*#__PURE__*/React.createElement("span", null, searchValue === '' ? sourceNoData : sourceNoSearchData)))));
};
var _default = exports["default"] = DataSource;