es-grid-template
Version:
es-grid-template
340 lines (331 loc) • 11.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _pipeline = require("./pipeline");
var fusion = _interopRequireWildcard(require("@alifd/next"));
var _locale = require("rc-master-ui/es/locale");
var _faker = require("@faker-js/faker");
var _react = _interopRequireDefault(require("react"));
require("./base-table/styles.scss");
var _utils = require("../table-component/hook/utils");
var _rcMasterUi = require("rc-master-ui");
var _antd = require("antd");
var _useLocale = require("../locale/useLocale");
var _useContext = require("./useContext");
var _Grid = _interopRequireDefault(require("./Grid"));
var _selected = require("./utils/selected");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const InternalTable = props => {
const {
t,
columns: propColumns,
dataSource,
allowFiltering,
allowSortering,
allowResizing,
groupAble,
groupColumns,
groupSetting,
lang,
pagination,
locale,
fullScreenTitle,
wrapSettings,
ignoreAccents,
rowSelected,
selectionSettings,
expandable,
sortMultiple,
onFilter,
defaultFilter,
onSorter,
defaultSorter,
footerDataSource,
summary,
useVirtual,
...rest
} = props;
const prefix = 'ui-rc';
const rowKey = 'rowId';
const childrenKey = 'children';
const [tableLocal] = (0, _locale.useLocale)('Table');
const id = _react.default.useMemo(() => {
return _faker.faker.string.alpha(20);
}, []);
const language = _react.default.useMemo(() => {
return (0, _useLocale.getLocale)(lang);
}, [lang]);
const languages = _react.default.useMemo(() => {
return (0, _useLocale.getLocales)(lang);
}, [lang]);
const getWindowSize = () => {
const {
innerWidth,
innerHeight
} = window;
return {
innerWidth,
innerHeight
};
};
const [windowSize, setWindowSize] = _react.default.useState(getWindowSize());
_react.default.useEffect(() => {
const handleWindowResize = () => {
setWindowSize(getWindowSize());
};
document.addEventListener('resize', handleWindowResize);
return () => {
document.removeEventListener('resize', handleWindowResize);
};
}, []);
const [visibleKeys, setVisibleKeys] = _react.default.useState(undefined);
const [filterState, setFilterState] = _react.default.useState(undefined);
const [sortState, setSortState] = _react.default.useState(undefined);
const columns = _react.default.useMemo(() => {
return (0, _utils.sortByType)(propColumns);
}, [propColumns]);
const convertData = _react.default.useMemo(() => {
if (groupAble && groupSetting && groupSetting.client !== false) {
return (0, _utils.groupArrayByColumns)(dataSource, groupColumns);
}
return (0, _utils.addRowIdArray)(dataSource);
}, [dataSource, groupAble, groupColumns, groupSetting]);
const isDataTree = _react.default.useMemo(() => {
return (0, _utils.isTreeArray)(convertData);
}, [convertData]);
const mergedData = _react.default.useMemo(() => {
const shouldSkip = onFilter && onSorter;
if (shouldSkip) {
return convertData;
}
return (0, _utils.filterDataByColumns)(convertData, onFilter ? undefined : filterState ?? defaultFilter, onSorter ? undefined : sortState ?? defaultSorter, [], ignoreAccents);
}, [convertData, filterState, ignoreAccents, sortState, onFilter, onSorter, defaultFilter, defaultSorter]);
const footerData = _react.default.useMemo(() => {
if (!summary) {
return undefined;
}
if (footerDataSource) {
return footerDataSource;
}
const flatColumns = (0, _utils.flatColumns2)(columns);
const a = (0, _utils.sumFields)(flatColumns, dataSource, childrenKey);
return [a];
}, [columns, dataSource, footerDataSource, summary]);
const expandAllKeys = _react.default.useMemo(() => {
if (expandable?.defaultExpandAllRows && isDataTree) {
return (0, _selected.getParentKeysLarge)(convertData, rowKey, childrenKey);
}
return undefined;
}, [expandable?.defaultExpandAllRows, convertData, isDataTree]);
const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
const defaultFilterConvert = _react.default.useMemo(() => {
if (defaultFilter) {
return (0, _utils.revertConvertFilters)(defaultFilter);
}
return undefined;
}, [defaultFilter]);
// const columnInVisibility = React.useMemo(() => {
// return getInvisibleColumns(columns)
// }, [columns])
const columnVisibility = _react.default.useMemo(() => {
return (0, _utils.getVisibleFields)(columns);
}, [columns]);
const pipeline = (0, _pipeline.useTablePipeline)({
components: fusion
}).input({
dataSource: mergedData,
columns
}).primaryKey(rowKey)
// .mapDataSource((dta) => collectNodes(dta, 'pre'))
// .snapshot('flat')
.use(_pipeline.features.hiddenColumns({
columns,
visibleKeys: visibleKeys ?? columnVisibility
// visibleKeys: ['name']
// visibleKeys
})).use(_pipeline.features.treeSelect({
tree: mergedData,
value: selectionSettings?.selectedRowKeys,
defaultValue: selectionSettings?.defaultSelectedRowKeys,
// rootKey: selectionSettings?.hideSelectAll,
rootKey: selectionSettings?.hideSelectAll || selectionSettings?.type === 'single' ? undefined : 'root',
// rootKey: 'root',
checkStrictly: selectionSettings?.checkStrictly,
// checkStrictly: true,
checkedStrategy: isDataTree ? selectionSettings?.checkedStrategy : 'all',
// checkedStrategy: 'parent',
mode: selectionSettings?.mode,
type: selectionSettings?.type,
highlightRowWhenSelected: true,
isDisabled(row) {
return !!selectionSettings?.getCheckboxProps?.(row)?.disabled;
},
checkboxColumn: {
lock: true
},
clickArea: selectionSettings?.checkboxOnly ? 'checkbox' : 'row',
// clickArea: 'row',
onChange: (nextValue, rowData, type) => {
const rs = (0, _selected.getRowsByKeysKeepTreeOrder)(nextValue, mergedData ?? [], rowKey);
rowSelected?.({
type,
rowData,
selected: rs
});
}
// clickArea: 'checkbox'
})).use(_pipeline.features.treeMode({
clickArea: 'icon',
stopClickEventPropagation: true,
expandIconColumnIndex: expandable?.expandIconColumnIndex,
defaultOpenKeys: expandAllKeys ?? expandable?.defaultExpandedRowKeys,
isTreeArray: !!isDataTree
})).use(_pipeline.features.columnCustom({
id,
t,
columns,
mode: sortMultiple !== false ? 'multiple' : 'single',
dataSource: mergedData,
columnResizeMode: 'onChange',
disableUserSelectWhenResizing: true,
allowFiltering,
allowSortering,
allowResizing,
tableLocal,
locale,
prefix,
wrapSettings,
ignoreAccents,
currentPage: pagination ? pagination?.currentPage : undefined,
pageSize: pagination ? pagination?.pageSize : undefined,
isDataTree,
defaultFilter: defaultFilterConvert,
defaultSorter,
onFilter(val) {
// const rs =
if (onFilter) {
onFilter(val);
} else {
setFilterState(val);
}
},
onSorter(val) {
if (onSorter) {
onSorter(val);
} else {
setSortState(val);
}
}
})).use(_pipeline.features.paginationFeature({
pagination
}));
// const onResizeEnd = (args: any[]) => {
// }
return /*#__PURE__*/_react.default.createElement(_rcMasterUi.ConfigProvider, {
locale: language,
theme: {
token: {
// colorPrimary: '#eb4619',
// colorLink: '#eb4619',
},
components: {
Dropdown: {
zIndexPopup: 1158
},
Popover: {
zIndexPopup: 1158
}
}
}
}, /*#__PURE__*/_react.default.createElement(_rcMasterUi.CustomProvider, {
locale: languages
}, /*#__PURE__*/_react.default.createElement(_useContext.TableContext.Provider, {
value: {
prefix,
id,
rowKey,
dataSource: mergedData,
originData: convertData,
windowSize,
lang,
locale
}
}, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
id: id,
useVirtual: {
header: false,
horizontal: useVirtual?.horizontal ?? true,
vertical: useVirtual?.vertical ?? true
},
isFullScreen: isFullScreen,
pagination: pagination,
setIsFullScreen: setIsFullScreen,
pipeline: pipeline
}, pipeline.getProps(), {
originData: convertData,
originColumns: columns,
groupColumns: groupColumns,
setVisibleKeys: setVisibleKeys,
footerDataSource: footerData,
onFilter: onFilter,
onSorter: onSorter,
defaultFilter: defaultFilter,
defaultSorter: defaultSorter
})), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
open: isFullScreen,
footer: null,
centered: true,
closable: true,
width: '100%',
style: {
maxWidth: '100%',
height: '100%'
},
onCancel: () => setIsFullScreen(false),
styles: {
content: {
height: '100vh',
borderRadius: 0,
padding: '15px 10px'
},
wrapper: {
zIndex: 1050
}
},
title: /*#__PURE__*/_react.default.createElement("div", {
style: {
minHeight: 24
}
}, " ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
destroyOnClose: true
}, /*#__PURE__*/_react.default.createElement("div", {
style: {}
}, /*#__PURE__*/_react.default.createElement(_Grid.default, (0, _extends2.default)({}, rest, {
id: id,
useVirtual: {
header: false,
horizontal: useVirtual?.horizontal ?? true,
vertical: useVirtual?.vertical ?? true
},
isFullScreen: isFullScreen,
setIsFullScreen: setIsFullScreen,
pipeline: pipeline,
pagination: pagination
}, pipeline.getProps(), {
originData: convertData,
originColumns: columns,
groupColumns: groupColumns,
setVisibleKeys: setVisibleKeys,
footerDataSource: footerData,
onFilter: onFilter,
onSorter: onSorter,
defaultFilter: defaultFilter,
defaultSorter: defaultSorter
})))))));
};
var _default = exports.default = InternalTable;