zent
Version:
一套前端设计语言和基于React的实现
114 lines (113 loc) • 6.67 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useCallback, useEffect, useMemo } from 'react';
import cx from 'classnames';
import pick from '../../utils/pick';
import Grid from '../../grid';
import { I18nReceiver as Receiver } from '../../i18n';
import MiniPagination from '../../pagination/MiniPagination';
import { PassDownGridProps } from '../constants';
import { getDisabledKeys } from '../utils';
import Search from './Search';
import AllCheckBox from './AllCheckBox';
var TransferItem = function (_a) {
var prefix = _a.prefix, title = _a.title, dataSets = _a.dataSets, selectedKeys = _a.selectedKeys, handleSelectChange = _a.handleSelectChange, keyName = _a.keyName, filterOption = _a.filterOption, showSearch = _a.showSearch, searchPlaceholder = _a.searchPlaceholder, list = _a.list, pagination = _a.pagination, compontentDisabled = _a.disabled;
var classNamePrefix = prefix + "__item";
var pageSize = typeof pagination === 'object' ? pagination.pageSize : 10;
var columns = list.columns, selection = list.selection, gridRest = __rest(list, ["columns", "selection"]);
var _b = useState(''), inputVal = _b[0], setInputVal = _b[1];
var _c = useState(dataSets), listData = _c[0], setListData = _c[1];
var _d = useState(1), pageCurrent = _d[0], setPageCurrent = _d[1];
var disabledKeys = useMemo(function () { return getDisabledKeys(listData, keyName); }, [listData, keyName]);
var selectedKeysLength = useMemo(function () { return selectedKeys.filter(function (key) { return !disabledKeys.includes(key); }).length; }, [disabledKeys, selectedKeys]);
var isAllChecked = useMemo(function () {
return selectedKeysLength &&
selectedKeysLength ===
listData.filter(function (_a) {
var disabled = _a.disabled;
return !disabled;
}).length;
}, [listData, selectedKeysLength]);
var getCheckboxProps = useCallback(function (_a) {
var disabled = _a.disabled;
return ({
disabled: compontentDisabled || disabled,
});
}, [compontentDisabled]);
var handleCheckBoxChange = useCallback(function () {
var items = listData.map(function (_a) {
var _b = keyName, key = _a[_b];
return key;
});
handleSelectChange(items.filter(function (key) {
return isAllChecked
? disabledKeys.includes(key) && selectedKeys.includes(key)
: !disabledKeys.includes(key) || selectedKeys.includes(key);
}));
}, [
handleSelectChange,
listData,
selectedKeys,
keyName,
disabledKeys,
isAllChecked,
]);
var handleInputChange = useCallback(function (e) {
var val = e.target.value;
setInputVal(val);
}, []);
var handleRowClick = useCallback(function (data) {
var _a = data, _b = keyName, key = _a[_b], disabled = _a.disabled;
!disabled &&
!compontentDisabled &&
handleSelectChange(selectedKeys.includes(key)
? selectedKeys.filter(function (item) { return key !== item; })
: selectedKeys.concat(key));
}, [handleSelectChange, selectedKeys, keyName, compontentDisabled]);
var handlePageChange = useCallback(function (_a) {
var current = _a.current;
setPageCurrent(current);
}, []);
var currentPageData = useMemo(function () {
if (!pagination) {
return listData;
}
return listData.slice(pageCurrent * pageSize - pageSize, pageCurrent * pageSize);
}, [listData, pageCurrent, pagination, pageSize]);
var girdColumns = useMemo(function () {
var _a;
var res = ((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.title)
? columns
: columns.map(function (item) { return (__assign(__assign({}, item), { title: '' })); });
return res;
}, [columns]);
useEffect(function () {
setListData(showSearch && filterOption
? dataSets.filter(function (item) { return filterOption(inputVal, item); })
: dataSets);
}, [dataSets, filterOption, inputVal, showSearch]);
useEffect(function () {
if (pagination && listData.length) {
var maxPageCount = Math.ceil(listData.length / pageSize);
if (pageCurrent > maxPageCount) {
setPageCurrent(maxPageCount);
}
}
}, [listData, pageCurrent, pageSize, pagination]);
return (_jsx(Receiver, __assign({ componentName: "Transfer" }, { children: function (i18n) {
var _a, _b, _c;
var _d;
return (_jsxs("div", __assign({ className: cx(classNamePrefix, (_a = {},
_a[classNamePrefix + "--disabled"] = compontentDisabled,
_a)), "data-zv": '10.0.17' }, { children: [_jsx(AllCheckBox, { classNamePrefix: classNamePrefix, isAllChecked: isAllChecked, handleCheckBoxChange: handleCheckBoxChange, compontentDisabled: compontentDisabled, i18n: i18n, selectedKeysLength: selectedKeysLength, listDataLength: listData.length, title: title }, void 0), _jsx(Search, { showSearch: showSearch, searchPlaceholder: searchPlaceholder, handleInputChange: handleInputChange, inputVal: inputVal, classNamePrefix: classNamePrefix, i18n: i18n }, void 0), _jsx(Grid, __assign({ rowKey: keyName, className: cx(classNamePrefix + "__grid", (_b = {},
_b[classNamePrefix + "__header--hidden"] = false === !!((_d = columns[0]) === null || _d === void 0 ? void 0 : _d.title),
_b)), rowClassName: cx(classNamePrefix + "__grid__row", (_c = {},
_c[classNamePrefix + "__grid__row--disabled"] = compontentDisabled,
_c)), datasets: currentPageData, selection: {
selectedRowKeys: selectedKeys,
onSelect: handleSelectChange,
getCheckboxProps: (selection === null || selection === void 0 ? void 0 : selection.getCheckboxProps) || getCheckboxProps,
}, columns: girdColumns, onRowClick: handleRowClick, emptyLabel: i18n.emptyLabel, scroll: { y: 240 } }, pick(gridRest, PassDownGridProps)), void 0), pagination && listData.length ? (_jsx(MiniPagination, { className: classNamePrefix + "__pagination", current: pageCurrent, pageSize: pageSize, total: listData.length, onChange: handlePageChange }, void 0)) : null] }), void 0));
} }), void 0));
};
export default TransferItem;