es-grid-template
Version:
es-grid-template
274 lines (262 loc) • 9.98 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 _react = _interopRequireWildcard(require("react"));
var _reactVirtuoso = require("react-virtuoso");
var _TableHeadCell = _interopRequireDefault(require("../header/TableHeadCell"));
var _useContext = require("../useContext");
var _classnames = _interopRequireDefault(require("classnames"));
var _TableBodyRow = _interopRequireDefault(require("../body/TableBodyRow"));
var _TableFooterCell = _interopRequireDefault(require("../footer/TableFooterCell"));
var _reactTooltip = require("react-tooltip");
var _ContextMenu = _interopRequireDefault(require("../../table-component/ContextMenu"));
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; }
/* eslint-disable @typescript-eslint/no-shadow */
const TableWrapper = props => {
const {
table,
height,
id,
commandClick,
editAble,
contextMenuItems: propContextMenuItems,
contextMenuHidden,
contextMenuClick,
contextMenuOpen
} = props;
const menuRef = _react.default.useRef(null);
const {
prefix,
editingKey,
rowEditable,
windowSize
} = (0, _react.useContext)(_useContext.TableContext); //onRowHeaderStyles
// ref cho scroll container
const scrollRef = (0, _react.useRef)(null);
const {
rows
} = table.getRowModel();
const [menuVisible, setMenuVisible] = _react.default.useState(false);
const [selectedRowData, setSelectedRowData] = _react.default.useState(undefined);
const [position, setPosition] = _react.default.useState({
x: 0,
y: 0,
viewportWidth: windowSize.innerWidth,
viewportHeight: windowSize.innerHeight
});
const contextMenuItems = _react.default.useMemo(() => {
if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
const hiddenItems = contextMenuHidden({
rowInfo: {
rowData: selectedRowData.rowData
},
field: selectedRowData.field
});
return propContextMenuItems.filter(item => !hiddenItems.includes(item?.key));
}
if (contextMenuHidden && typeof contextMenuHidden !== 'function' && propContextMenuItems) {
return propContextMenuItems.filter(item => !contextMenuHidden.includes(item?.key));
}
return propContextMenuItems;
}, [propContextMenuItems, contextMenuHidden, selectedRowData]);
const onContextMenu = args => event => {
event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
setSelectedRowData(args);
contextMenuOpen?.({
rowInfo: {
rowData: args.rowData
},
field: args.field,
event
});
setMenuVisible(true);
// Đợi DOM cập nhật và lấy kích thước menu
setTimeout(() => {
const menuElement = menuRef.current; // Lấy menu từ DOM
const menuWidth = menuElement?.offsetWidth || 200; // Mặc định 200px nếu chưa render
const menuHeight = menuElement?.offsetHeight; // Mặc định 450px nếu chưa render
// Điều chỉnh vị trí menu
let x = event.clientX;
let y = event.clientY;
if (x + menuWidth > windowSize.innerWidth) {
x = x - menuWidth - 10; // Cách cạnh phải 10px
}
if (y + menuHeight > windowSize.innerHeight) {
if (y < menuHeight) {
y = 10;
} else {
y = y - 10 - menuHeight; // Cách cạnh dưới 10px
}
}
setPosition(prevState => ({
...prevState,
x,
y
}));
}, 100);
if (!menuVisible) {
document.addEventListener(`click`, function onClickOutside(e) {
const element = e.target;
const menuContainer = document.querySelector('.popup-context-menu');
const isInsideContainer = element.closest('.popup-context-menu') && menuContainer;
if (isInsideContainer) {
return;
}
setMenuVisible(false);
setPosition(prevState => ({
...prevState,
x: undefined,
y: undefined
}));
document.removeEventListener(`click`, onClickOutside);
});
}
};
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)(`${prefix}-grid-container`, {})
}, /*#__PURE__*/_react.default.createElement("div", {
ref: scrollRef,
style: {
overflow: "auto",
height,
position: "relative"
}
}, /*#__PURE__*/_react.default.createElement(_reactVirtuoso.TableVirtuoso, {
data: table.getRowModel().rows,
totalCount: rows.length,
components: {
Table: ({
style,
...props
}) => {
return /*#__PURE__*/_react.default.createElement("table", (0, _extends2.default)({}, props, {
style: {
...style,
width: "100%",
tableLayout: "fixed"
// borderCollapse: "collapse",
// borderSpacing: 0
}
// className={classNames(`${prefix}-grid-container`, {
// 'ui-rc-table-ping-right':
// tableContainerRef &&
// (tableContainerRef.current?.scrollLeft ?? 0) >= 0 &&
// (tableContainerRef.current?.scrollLeft ?? 0) + (tableContainerRef.current?.clientWidth ?? 0) <
// (tableContainerRef.current?.scrollWidth ?? 0),
// 'ui-rc-table-ping-left': tableContainerRef && (tableContainerRef.current?.scrollLeft ?? 0) > 0
// })}
}));
},
TableHead: props => /*#__PURE__*/_react.default.createElement("thead", (0, _extends2.default)({}, props, {
className: `${prefix}-grid-thead`
})),
// TableBody: (props) => (
// <tbody {...props} className={`${prefix}-grid-tbody1`} />
// ),
TableFoot: props => /*#__PURE__*/_react.default.createElement("tfoot", (0, _extends2.default)({}, props, {
className: `${prefix}-grid-tfoot`
})),
TableRow: props => {
const {
item,
...rest
} = props;
const index = props["data-index"];
const rowheight = props["data-known-size"];
const row = rows[index];
const isEditing = row.id === editingKey;
const isRowEditable = rowEditable ? rowEditable(row.original) : true;
return /*#__PURE__*/_react.default.createElement(_TableBodyRow.default, (0, _extends2.default)({
tableId: id,
row: row,
table: table,
commandClick: commandClick,
rowheight: editAble ? 37 : rowheight,
isEditing: isEditing,
isRowEditable: isRowEditable,
editAble: editAble,
onContextMenu: onContextMenu,
contextMenuItems: contextMenuItems
}, rest));
}
}
// defaultItemHeight={37}
// fixedItemHeight={37}
// itemSize={() => 37}
// overscan={{
// main: 10,
// reverse: 20
// }}
// atBottomThreshold={200}
// atTopThreshold={200}
,
increaseViewportBy: {
top: 200,
bottom: 200
},
fixedHeaderContent: () => {
return table.getHeaderGroups().map((headerGroup, index) => {
return /*#__PURE__*/_react.default.createElement("tr", {
key: headerGroup.id,
"data-index": headerGroup.id
}, headerGroup.headers.map(header => {
const columnRelativeDepth = header.depth - header.column.depth;
if (columnRelativeDepth > 1) {
return null;
}
let rowSpan = 1;
if (header.isPlaceholder) {
const leafs = header.getLeafHeaders();
rowSpan = leafs[leafs.length - 1].depth - header.depth;
}
return /*#__PURE__*/_react.default.createElement(_TableHeadCell.default, {
key: header.id,
header: header,
table: table,
colSpan: header.colSpan,
rowSpan: rowSpan,
rowIndex: index
});
}));
});
},
fixedFooterContent: () => {
const visibleColumns = table.getVisibleLeafColumns();
return /*#__PURE__*/_react.default.createElement("tr", {
className: "ui-rc-grid-footer-row"
}, visibleColumns.map(header => {
return /*#__PURE__*/_react.default.createElement(_TableFooterCell.default, {
key: header.id,
column: header
});
}));
}
})), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
id: `${id}-tooltip-content`,
style: {
zIndex: 1999,
maxWidth: 450
},
delayShow: 100
}), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
id: `${id}-tooltip-error`,
style: {
zIndex: 1999,
maxWidth: 450
}
}), menuVisible && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
open: menuVisible,
pos: position,
setOpen: setMenuVisible,
menuRef: menuRef,
contextMenuItems: contextMenuItems,
contextMenuClick: contextMenuClick,
rowData: selectedRowData
}));
};
var _default = exports.default = TableWrapper;