es-grid-template
Version:
es-grid-template
284 lines (275 loc) • 9.71 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 _antd = require("antd");
var _faker = require("@faker-js/faker");
var _core = require("@dnd-kit/core");
var _modifiers = require("@dnd-kit/modifiers");
var _sortable = require("@dnd-kit/sortable");
var _react = _interopRequireWildcard(require("react"));
var _utils = require("../hook/utils");
var _classnames = _interopRequireDefault(require("classnames"));
var _TableContainer = _interopRequireDefault(require("./TableContainer"));
var _style = require("../style");
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 Grid = props => {
const {
theme,
t,
id,
prefix,
dataSource,
originData,
columns,
propsColumns,
setColumns,
pagination,
expanded,
setExpanded,
columnHidden,
columnPinning,
selectionSettings,
rowSelected,
sortMultiple,
triggerSorter,
triggerFilter,
setMergedFilterKeys,
onSorter,
onFilter,
allowFiltering,
allowSortering,
// groupColumns,
// height= 700,
height,
minHeight,
editAble,
triggerChangeColumns,
infiniteScroll,
mergedSelectedKeys,
allowResizing,
windowSize,
table,
columnSizing,
columnSizingInfo,
setColumnSizing,
columnFilters,
setColumnOrder,
rowSelection,
className: tableClassNames,
...rest
} = props;
const [isSelectionChange, setIsSelectionChange] = _react.default.useState({
isChange: false,
type: '',
rowData: {},
rowsData: []
});
const [sorterChange, setSorterChange] = _react.default.useState(false);
const [filterChange, setFilterChange] = _react.default.useState(false);
const [isFullScreen, setIsFullScreen] = _react.default.useState(false);
// React.useEffect(() => {
// const isEqual = isObjEqual(convertToObjTrue(mergedSelectedKeys), rowSelection)
// if (!isEqual) {
// setRowSelection(convertToObjTrue(mergedSelectedKeys))
// }
// }, [mergedSelectedKeys])
_react.default.useEffect(() => {
if (isSelectionChange.isChange) {
const aa = table.getState().rowSelection;
const ids = Object.keys(aa);
const ssss = (0, _utils.filterByIds)(ids, isSelectionChange.rowsData ?? []); // lấy rowsData của trang hiện tại
const rs = ssss.map(it => it.original);
rowSelected?.({
type: isSelectionChange.type,
rowData: isSelectionChange.rowData,
selected: rs
});
}
}, [isSelectionChange, rowSelection, table.getState().rowSelection]);
_react.default.useEffect(() => {
if (sorterChange) {
const aa = table.getState().sorting;
const rs = aa.map(it => {
return {
columnKey: it.id,
field: it.id,
order: it.desc ? 'descend' : 'ascend'
};
});
if (onSorter) {
onSorter?.(rs);
} else {
triggerSorter(rs);
}
setSorterChange(false);
}
}, [onSorter, sorterChange, table, triggerSorter]);
_react.default.useEffect(() => {
if (filterChange) {
const operatorState = table.getState().operator;
const merged = columnFilters.map(filter => {
const match = operatorState.find(op => op.id === filter.id);
const col = table.getVisibleFlatColumns().find(it => it.id === filter.id)?.columnDef.meta;
return {
field: filter.id,
key: filter.id,
column: col,
filteredKeys: filter.value,
operator: match ? match.operator : undefined
};
});
if (onFilter) {
onFilter?.((0, _utils.convertFilters)(merged));
} else {
triggerFilter((0, _utils.convertFilters)(merged));
const b = (0, _utils.filterDataByColumns)(originData, (0, _utils.convertFilters)(merged), [], []);
setMergedFilterKeys((0, _utils.getAllRowKey)(b));
}
}
}, [filterChange, onFilter, originData, setMergedFilterKeys, table, triggerFilter, columnFilters]);
// reorder columns after drag & drop
function handleDragEnd(event) {
const {
active,
over
} = event;
if (active && over && active.id !== over.id) {
setColumnOrder?.(cols => {
const oldIndex = cols.indexOf(active.id);
const newIndex = cols.indexOf(over.id);
return (0, _sortable.arrayMove)(cols, oldIndex, newIndex); //this is just a splice util
});
}
}
const sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.MouseSensor, {}), (0, _core.useSensor)(_core.TouchSensor, {}), (0, _core.useSensor)(_core.KeyboardSensor, {}));
const ContainerComponent = _TableContainer.default;
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_style.GridStyle, {
$prefix: prefix,
$theme: {
theme: theme?.theme,
...theme
},
className: (0, _classnames.default)(`${prefix}-grid ${tableClassNames}`, {
[`${prefix}-grid-light`]: !theme || theme.theme === 'light',
[`${prefix}-grid-dark`]: theme?.theme === 'dark'
}),
style: {
minHeight: minHeight ?? undefined,
maxHeight: height ?? undefined,
backgroundColor: theme?.backgroundColor ?? undefined
}
}, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
collisionDetection: _core.closestCenter,
modifiers: [_modifiers.restrictToHorizontalAxis],
onDragEnd: handleDragEnd,
sensors: sensors
}, /*#__PURE__*/_react.default.createElement(ContainerComponent, (0, _extends2.default)({}, rest, {
id: id,
t: t,
windowSize: windowSize,
table: table,
editAble: false,
dataSource: dataSource,
originData: originData,
prefix: prefix,
selectionSettings: selectionSettings,
isSelectionChange: isSelectionChange,
setIsSelectionChange: setIsSelectionChange,
setSorterChange: setSorterChange,
setFilterChange: setFilterChange,
height: height ?? minHeight ?? 700,
minHeight: minHeight,
pagination: pagination,
columns: columns,
propsColumns: propsColumns,
triggerChangeColumns: triggerChangeColumns,
columnHidden: columnHidden,
setExpanded: setExpanded,
expanded: expanded,
infiniteScroll: infiniteScroll,
setMergedFilterKeys: setMergedFilterKeys,
setColumnSizing: setColumnSizing,
setColumns: setColumns,
columnSizing: columnSizing,
columnSizingInfo: columnSizingInfo,
isFullScreen: isFullScreen,
setIsFullScreen: setIsFullScreen
})))), /*#__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
}
},
destroyOnClose: true
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
paddingTop: 40
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(`${prefix}-grid`, {
[`${prefix}-grid-light`]: !theme || theme.theme === 'light',
[`${prefix}-grid-dark`]: theme?.theme === 'dark'
}),
style: {
// minHeight: minHeight ?? undefined,
maxHeight: windowSize.innerHeight - 70
}
}, /*#__PURE__*/_react.default.createElement(_core.DndContext, {
collisionDetection: _core.closestCenter,
modifiers: [_modifiers.restrictToHorizontalAxis],
onDragEnd: handleDragEnd,
sensors: sensors
}, /*#__PURE__*/_react.default.createElement(ContainerComponent, (0, _extends2.default)({}, rest, {
id: _faker.faker.string.alpha(20),
t: t,
table: table,
editAble: false,
dataSource: dataSource,
originData: originData,
prefix: prefix,
selectionSettings: selectionSettings,
isSelectionChange: isSelectionChange,
setIsSelectionChange: setIsSelectionChange,
setSorterChange: setSorterChange,
setFilterChange: setFilterChange,
height: windowSize.innerHeight - 70,
minHeight: minHeight,
pagination: pagination,
columns: columns,
windowSize: windowSize,
propsColumns: propsColumns,
triggerChangeColumns: triggerChangeColumns,
columnHidden: columnHidden,
setExpanded: setExpanded,
expanded: expanded,
infiniteScroll: infiniteScroll,
setMergedFilterKeys: setMergedFilterKeys,
setColumns: setColumns,
isFullScreen: isFullScreen,
setIsFullScreen: setIsFullScreen,
setColumnSizing: setColumnSizing,
columnSizing: columnSizing,
columnSizingInfo: columnSizingInfo
})))))));
};
var _default = exports.default = Grid;