es-grid-template
Version:
es-grid-template
274 lines (265 loc) • 9.07 kB
JavaScript
import classNames from "classnames";
import TableHead from "../header/TableHead";
import TableBody from "../body/TableBody";
import TableFooter from "../footer/TableFooter";
import ComponentSpinner from "../../grid-component/LoadingSpinner";
import { Tooltip } from "react-tooltip";
import ContextMenu from "../ContextMenu";
import React, { useContext } from "react";
import { TableContext } from "../useContext";
import { isNullOrUndefined } from "../hook/utils";
const TableWrapper = props => {
const {
id,
prefix,
tableContainerRef,
height,
minHeight,
summary,
table,
loading,
commandClick,
editAble,
contextMenuItems: propContextMenuItems,
contextMenuHidden,
showEmptyText,
contextMenuClick,
contextMenuOpen,
next,
dataSource,
pagination,
infiniteScroll,
onEndReachedThreshold,
columnVirtualizer,
fixedLeftColumns,
fixedRightColumns,
virtualPaddingLeft,
virtualPaddingRight
} = props;
const menuRef = React.useRef(null);
const loadingRef = React.useRef(false);
const hasMoreRef = React.useRef(true);
const {
windowSize
} = useContext(TableContext);
const {
currentPage,
pageSize,
total
} = pagination ?? {};
const [menuVisible, setMenuVisible] = React.useState(false);
const [selectedRowData, setSelectedRowData] = React.useState(undefined);
const [position, setPosition] = React.useState({
x: 0,
y: 0,
viewportWidth: windowSize.innerWidth,
viewportHeight: windowSize.innerHeight
});
const contextMenuItems = React.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 loadData = page => {
if (!hasMoreRef.current || loadingRef.current || loading) return;
loadingRef.current = true;
setTimeout(() => {
next?.();
if (page * pageSize >= total) {
hasMoreRef.current = false;
}
loadingRef.current = false;
}, 10);
};
const handleNext = () => {
loadData(currentPage + 1);
};
const handleScroll = e => {
if (infiniteScroll) {
if (loadingRef.current || loading || dataSource?.length === 0) {
e.stopPropagation();
e.preventDefault();
return;
}
const {
scrollHeight: tbScrollHeight,
scrollTop,
clientHeight
} = e.currentTarget;
const abc = clientHeight * (isNullOrUndefined(onEndReachedThreshold) ? 0.1 : onEndReachedThreshold ?? 0);
// const isEnd = scrollTop + clientHeight >= tbScrollHeight - 50;
const isEnd = scrollTop + clientHeight >= tbScrollHeight - abc;
if (isEnd && !loadingRef.current && hasMoreRef.current && dataSource?.length > 0) {
handleNext();
}
}
if (e.target.scrollLeft >= 0 && e.target.scrollLeft + e.target.clientWidth < e.target.scrollWidth) {
e.target.classList.add('ui-rc-table-ping-right');
} else {
e.target.classList.remove('ui-rc-table-ping-right');
}
if ((e.target.scrollLeft ?? 0) > 0) {
e.target.classList.add('ui-rc-table-ping-left');
} else {
e.target.classList.remove('ui-rc-table-ping-left');
}
};
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
});
// Đợi DOM cập nhật và lấy kích thước menu
setTimeout(() => {
setMenuVisible(true);
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: any = 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)
// })
// }
};
React.useEffect(() => {
const handleClickOutside = event => {
const element = event.target;
const containerContextMenu = document.querySelector(".popup-context-menu");
const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
if (isInsideContainerContext) {
return;
} else {
setMenuVisible(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, []);
return /*#__PURE__*/React.createElement("div", {
style: {
position: 'relative'
},
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
})
}, /*#__PURE__*/React.createElement("div", {
// id={id}
ref: tableContainerRef,
style: {
overflow: 'auto',
//our scrollable table container
position: 'relative',
//needed for sticky header
maxHeight: height,
//should be a fixed height
minHeight: minHeight ? height : undefined //should be a fixed height
}
// onScroll={infiniteScroll ? handleScroll : undefined}
,
onScroll: handleScroll
}, /*#__PURE__*/React.createElement("div", {
style: {
display: 'grid',
minWidth: table.getTotalSize()
}
}, /*#__PURE__*/React.createElement(TableHead, {
tableContainerRef: tableContainerRef,
table: table,
columnVirtualizer: columnVirtualizer,
virtualPaddingLeft: virtualPaddingLeft,
virtualPaddingRight: virtualPaddingRight,
fixedLeftColumns: fixedLeftColumns,
fixedRightColumns: fixedRightColumns
}), /*#__PURE__*/React.createElement(TableBody, {
tableId: id,
table: table,
tableContainerRef: tableContainerRef,
commandClick: commandClick,
editAble: editAble,
contextMenuItems: contextMenuItems,
showEmptyText: showEmptyText,
onContextMenu: onContextMenu,
columnVirtualizer: columnVirtualizer,
virtualPaddingLeft: virtualPaddingLeft,
virtualPaddingRight: virtualPaddingRight,
fixedLeftColumns: fixedLeftColumns,
fixedRightColumns: fixedRightColumns
}), summary && /*#__PURE__*/React.createElement(TableFooter
// columnVirtualizer={columnVirtualizer}
, {
table: table
// virtualPaddingLeft={virtualPaddingLeft}
// virtualPaddingRight={virtualPaddingRight}
// fixedLeftColumns={fixedLeftColumns}
// fixedRightColumns={fixedRightColumns}
}))), loading && /*#__PURE__*/React.createElement("div", {
className: "spinner-loading"
}, /*#__PURE__*/React.createElement(ComponentSpinner, null)), /*#__PURE__*/React.createElement(Tooltip, {
id: `${id}-tooltip-content`,
style: {
zIndex: 1999,
maxWidth: 450
},
delayShow: 100
}), /*#__PURE__*/React.createElement(Tooltip, {
id: `${id}-tooltip-error`,
style: {
zIndex: 1999,
maxWidth: 450
}
}), menuVisible && /*#__PURE__*/React.createElement(ContextMenu, {
open: menuVisible,
pos: position,
setOpen: setMenuVisible,
menuRef: menuRef,
contextMenuItems: contextMenuItems,
contextMenuClick: contextMenuClick,
rowData: selectedRowData
}));
};
export default TableWrapper;