es-grid-template
Version:
es-grid-template
299 lines (267 loc) • 10.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SELECTION_COLUMN = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _customParseFormat = _interopRequireDefault(require("dayjs/plugin/customParseFormat"));
var _react = _interopRequireWildcard(require("react"));
require("react-resizable/css/styles.css");
var _dayjs = _interopRequireDefault(require("dayjs"));
require("dayjs/locale/es");
require("dayjs/locale/vi");
require("./style.scss");
var _faker = require("@faker-js/faker");
var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var _Grid = _interopRequireDefault(require("./table/Grid"));
var _reactTooltip = require("react-tooltip");
var _ContextMenu = _interopRequireDefault(require("./ContextMenu"));
var _utils = require("./hook/utils");
var _GridEdit = _interopRequireDefault(require("./table/GridEdit"));
var _useColumns = require("./hook/useColumns");
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; }
// import en from "rc-master-ui/es/date-picker/locale/en_US"
// import vi from "rc-master-ui/es/date-picker/locale/vi_VN"
// import enDr from "rc-master-ui/es/locales/en_US"
// import viDr from "rc-master-ui/es/locales/vi_VN"
// import type { PickerLocale } from "rc-master-ui/es/date-picker/generatePicker"
// import Swal from "sweetalert2"
// import withReactContent from "sweetalert2-react-content"
// import { Tooltip } from "react-tooltip"
// import InfiniteTable from './table/InfiniteTable'
// import GridEdit from './table/GridEdit'
// import { Group } from 'becoxy-icons'
_dayjs.default.extend(_customParseFormat.default);
// const MySwal = withReactContent(Swal)
// const ASCEND = 'ascend'
// const DESCEND = 'descend'
const SELECTION_COLUMN = exports.SELECTION_COLUMN = {};
const InternalTable = props => {
const {
t,
// columns: propsColumns,
columns,
lang,
locale,
dataSource,
editAble,
format,
groupAble,
groupSetting,
groupColumns,
infiniteScroll,
// wrapSettings,
// onFilter,
expandable,
contextMenuItems: propContextMenuItems,
contextMenuHidden,
contextMenuClick,
contextMenuOpen,
...rest
} = props;
const id = _react.default.useMemo(() => {
return _faker.faker.string.alpha(20);
}, []);
const rowKey = 'rowId';
const prefix = 'ui-rc';
const getWindowSize = () => {
const {
innerWidth,
innerHeight
} = window;
return {
innerWidth,
innerHeight
};
};
const [windowSize, setWindowSize] = (0, _react.useState)(getWindowSize());
_react.default.useEffect(() => {
const handleWindowResize = () => {
setWindowSize(getWindowSize());
};
window.addEventListener('resize', handleWindowResize);
return () => {
window.removeEventListener('resize', handleWindowResize);
};
}, []);
// const local = lang && lang === 'en' ? en : vi
// const dateRangeLocale = lang && lang === 'en' ? enDr : viDr
// const buddhistLocale: PickerLocale = {
// ...local,
// lang: {
// ...local.lang
// }
// }
const menuRef = _react.default.useRef(null);
const viewportWidth = windowSize.innerWidth;
const viewportHeight = windowSize.innerHeight;
const [menuVisible, setMenuVisible] = _react.default.useState(false);
const [selectedRowData, setSelectedRowData] = _react.default.useState(null);
const [position, setPosition] = _react.default.useState({
x: 0,
y: 0,
viewportWidth,
viewportHeight
});
// const [tooltipContent, setTooltipContent] = useState<any>('')
const [filterStates, setFilterState] = _react.default.useState(null);
const [sorterStates, setSorterStates] = _react.default.useState([]);
// const [isFullScreen, setIsFullScreen] = React.useState<boolean>(false)
const [expanded, setExpanded] = _react.default.useState({});
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 mergedColumns = _react.default.useMemo(() => {
return (0, _useColumns.convertToTanStackColumns)({
columns,
expanded,
setExpanded,
expandable,
format,
editAble
});
// return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
}, [columns, expanded, expandable, format, editAble]);
const columnPinning = _react.default.useMemo(() => {
return {
left: (0, _utils.getFixedFields)(columns, 'left'),
right: (0, _utils.getFixedFields)(columns, 'right')
};
}, [columns]);
// ========================= Keys =========================
const [mergedFilterKeys, setMergedFilterKeys] = (0, _useMergedState.default)((0, _utils.getAllRowKey)(convertData), {
value: undefined
});
const mergedData = _react.default.useMemo(() => {
return (0, _utils.filterDataByColumns)(convertData, filterStates, sorterStates, mergedFilterKeys);
}, [convertData, filterStates, mergedFilterKeys, sorterStates]);
const columnVisibility = _react.default.useMemo(() => {
return (0, _utils.getInvisibleColumns)(columns);
}, [columns]);
const contextMenuItems = _react.default.useMemo(() => {
if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
const hiddenItems = contextMenuHidden({
rowInfo: {
rowData: selectedRowData
}
});
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 [columns, setColumns] = React.useState<any[]>([])
// React.useEffect(() => {
// setColumns(propsColumns)
// }, [propsColumns])
// const triggerFilter = (queries: any[]) => {
// if (onFilter) {
// onFilter?.(convertFilters(queries))
// } else {
// setFilterState(convertFilters(queries))
// const b = filterDataByColumns(convertData, convertFilters(queries), [], [])
// setMergedFilterKeys(getAllRowKey(b))
// }
// }
const onContextMenu = data => event => {
event.preventDefault(); // Ngăn chặn menu mặc định của trình duyệt
setSelectedRowData(data);
contextMenuOpen?.({
rowInfo: {
rowData: data
},
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 > viewportWidth) {
x = x - menuWidth - 10; // Cách cạnh phải 10px
}
if (y + menuHeight > viewportHeight) {
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);
});
}
};
// const TableComponent = infiniteScroll ? InfiniteTable : (groupAble ? Group : editAble ? GridEdit : Grid)
const TableComponent = editAble ? _GridEdit.default : _Grid.default;
return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
t: t,
id: id,
prefix: prefix,
originData: convertData,
dataSource: mergedData,
locale: locale,
format: format,
columns: mergedColumns,
propsColumns: columns,
rowKey: rowKey,
groupSetting: groupSetting,
groupAble: groupAble,
groupColumns: groupColumns,
isFullScreen: false,
columnPinning: columnPinning,
columnVisibility: columnVisibility,
triggerFilter: setFilterState,
triggerSorter: setSorterStates,
setMergedFilterKeys: setMergedFilterKeys,
mergedFilterKeys: mergedFilterKeys,
expanded: expanded,
onContextMenu: onContextMenu,
contextMenuItems: contextMenuItems,
editAble: editAble
})), menuVisible && /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
open: menuVisible,
pos: position,
setOpen: setMenuVisible,
menuRef: menuRef,
contextMenuItems: contextMenuItems,
contextMenuClick: contextMenuClick,
rowData: selectedRowData
}), /*#__PURE__*/_react.default.createElement(_reactTooltip.Tooltip, {
id: `${id}-tooltip-header-trigger`,
style: {
zIndex: 1999
}
}));
};
var _default = exports.default = InternalTable;