es-grid-template 1.7.23 → 1.7.24

package/es/table-component/InternalTable.js

@@ -0,0 +1,295 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+import React, { Fragment, useState } from 'react';
+import 'react-resizable/css/styles.css';
+import dayjs from 'dayjs';
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+
+// 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 "./style.scss";
+
+// import Swal from "sweetalert2"
+// import withReactContent from "sweetalert2-react-content"
+// import { Tooltip } from "react-tooltip"
+
+import { faker } from '@faker-js/faker';
+import useMergedState from "rc-util/es/hooks/useMergedState";
+// import InfiniteTable from './table/InfiniteTable'
+// import GridEdit from './table/GridEdit'
+import Grid from "./table/Grid";
+// import { Group } from 'becoxy-icons'
+
+import { Tooltip } from 'react-tooltip';
+import ContextMenu from "./ContextMenu";
+import { addRowIdArray,
+// convertFilters,
+filterDataByColumns,
+// filterDataByColumns,
+getAllRowKey, getFixedFields, getInvisibleColumns, groupArrayByColumns } from "./hook/utils";
+import GridEdit from "./table/GridEdit";
+import { convertToTanStackColumns } from "./hook/useColumns";
+dayjs.extend(customParseFormat);
+
+// const MySwal = withReactContent(Swal)
+
+// const ASCEND = 'ascend'
+// const DESCEND = 'descend'
+
+export const 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.useMemo(() => {
+    return faker.string.alpha(20);
+  }, []);
+  const rowKey = 'rowId';
+  const prefix = 'ui-rc';
+  const getWindowSize = () => {
+    const {
+      innerWidth,
+      innerHeight
+    } = window;
+    return {
+      innerWidth,
+      innerHeight
+    };
+  };
+  const [windowSize, setWindowSize] = useState(getWindowSize());
+  React.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.useRef(null);
+  const viewportWidth = windowSize.innerWidth;
+  const viewportHeight = windowSize.innerHeight;
+  const [menuVisible, setMenuVisible] = React.useState(false);
+  const [selectedRowData, setSelectedRowData] = React.useState(null);
+  const [position, setPosition] = React.useState({
+    x: 0,
+    y: 0,
+    viewportWidth,
+    viewportHeight
+  });
+
+  // const [tooltipContent, setTooltipContent] = useState<any>('')
+
+  const [filterStates, setFilterState] = React.useState(null);
+  const [sorterStates, setSorterStates] = React.useState([]);
+
+  // const [isFullScreen, setIsFullScreen] = React.useState<boolean>(false)
+
+  const [expanded, setExpanded] = React.useState({});
+  const convertData = React.useMemo(() => {
+    if (groupAble && groupSetting && groupSetting.client !== false) {
+      return groupArrayByColumns(dataSource, groupColumns);
+    }
+    return addRowIdArray(dataSource);
+  }, [dataSource, groupAble, groupColumns, groupSetting]);
+  const mergedColumns = React.useMemo(() => {
+    return convertToTanStackColumns({
+      columns,
+      expanded,
+      setExpanded,
+      expandable,
+      format,
+      editAble
+    });
+
+    // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
+  }, [columns, expanded, expandable, format, editAble]);
+  const columnPinning = React.useMemo(() => {
+    return {
+      left: getFixedFields(columns, 'left'),
+      right: getFixedFields(columns, 'right')
+    };
+  }, [columns]);
+
+  // ========================= Keys =========================
+  const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(convertData), {
+    value: undefined
+  });
+  const mergedData = React.useMemo(() => {
+    return filterDataByColumns(convertData, filterStates, sorterStates, mergedFilterKeys);
+  }, [convertData, filterStates, mergedFilterKeys, sorterStates]);
+  const columnVisibility = React.useMemo(() => {
+    return getInvisibleColumns(columns);
+  }, [columns]);
+  const contextMenuItems = React.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 : Grid;
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TableComponent, _extends({}, 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.createElement(ContextMenu, {
+    open: menuVisible,
+    pos: position,
+    setOpen: setMenuVisible,
+    menuRef: menuRef,
+    contextMenuItems: contextMenuItems,
+    contextMenuClick: contextMenuClick,
+    rowData: selectedRowData
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    id: `${id}-tooltip-header-trigger`,
+    style: {
+      zIndex: 1999
+    }
+  }));
+};
+export default InternalTable;

package/es/table-component/TableContainer.d.ts

@@ -0,0 +1,22 @@
+import type { Dispatch, SetStateAction } from 'react';
+import React from 'react';
+import type { Table } from '@tanstack/react-table';
+import type { TableProps } from './type';
+type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
+    table: Table<T>;
+    prefix: string;
+    id: string;
+    rowKey: any;
+    originData: T[];
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+    }>>;
+    setSorterChange: Dispatch<SetStateAction<boolean>>;
+    setFilterChange: Dispatch<SetStateAction<boolean>>;
+    onContextMenu?: (data: T) => (event: any) => void;
+    tableHeight?: number;
+};
+declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
+export default TableContainer;

package/es/table-component/TableContainer.js

@@ -0,0 +1,130 @@
+// import type { Dispatch, SetStateAction } from "react";
+
+import React from 'react';
+import TableHead from "./header/TableHead";
+import { sumSize } from "./hook/utils";
+import { useVirtualizer } from '@tanstack/react-virtual';
+import classNames from 'classnames';
+import TableBody from "./body/TableBody";
+import { TableContext } from "./useContext";
+const TableContainer = props => {
+  const {
+    // t,
+    table,
+    id,
+    prefix,
+    commandClick,
+    editAble,
+    rowKey,
+    format,
+    dataSource,
+    originData,
+    expandable,
+    wrapSettings,
+    recordDoubleClick,
+    // triggerFilter,
+    selectionSettings,
+    setIsSelectionChange,
+    onContextMenu,
+    contextMenuItems,
+    setSorterChange,
+    setFilterChange,
+    tableHeight
+  } = props;
+  const tableContainerRef = React.useRef(null);
+  const visibleColumns = table.getVisibleLeafColumns();
+  const fixedLeftColumns = table.getState().columnPinning.left ? visibleColumns.filter(vc => table.getState().columnPinning.left?.includes(vc.id)) : [];
+  const fixedRightColumns = table.getState().columnPinning.right ? visibleColumns.filter(vc => table.getState().columnPinning.right?.includes(vc.id)) : [];
+  const columnVirtualizer = useVirtualizer({
+    count: visibleColumns.length,
+    estimateSize: index => visibleColumns[index].getSize(),
+    getScrollElement: () => tableContainerRef.current,
+    horizontal: true,
+    measureElement: typeof window !== 'undefined' && navigator.userAgent.indexOf('Firefox') === -1 ? element => element?.getBoundingClientRect().height : undefined,
+    overscan: 3 //how many columns to render on each side off screen each way (adjust this for performance)
+  });
+
+  // const columnSizingState = table.getState().columnSizing
+
+  // React.useEffect(() => {
+  //   requestAnimationFrame(() => {
+  //     columnVirtualizer.measure()
+  //   })
+  // }, [columnSizingState, columnVirtualizer])
+
+  const virtualColumns = columnVirtualizer.getVirtualItems();
+  const cacheColumns = columnVirtualizer.measurementsCache;
+  const rightCols = table.getState().columnPinning.right?.length ? [...cacheColumns].slice(-(table.getState().columnPinning.right?.length ?? 0)) : [];
+  const leftCols = [...cacheColumns].slice(0, table.getState().columnPinning.left?.length ?? 0);
+  const rightWidth = sumSize(rightCols);
+  const leftWidth = sumSize(leftCols);
+
+  //different virtualization strategy for columns - instead of absolute and translateY, we add empty columns to the left and right
+  let virtualPaddingLeft;
+  let virtualPaddingRight;
+  const pdRight = columnVirtualizer.getTotalSize() - (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
+  if (columnVirtualizer && virtualColumns?.length) {
+    virtualPaddingLeft = fixedLeftColumns && fixedLeftColumns.length > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth > 0 ? (virtualColumns[0]?.start ?? 0) - leftWidth : 0 : virtualColumns[0]?.start ?? 0;
+    virtualPaddingRight = fixedRightColumns && fixedRightColumns.length > 0 ? pdRight - rightWidth > 0 ? pdRight - rightWidth : 0 : pdRight;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    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
+    }),
+    id: id,
+    ref: tableContainerRef,
+    style: {
+      overflow: 'auto',
+      //our scrollable table container
+      position: 'relative',
+      //needed for sticky header
+      height: tableHeight ?? '500px' //should be a fixed height
+      // minWidth: table.getTotalSize()
+    }
+  }, /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: {
+      prefix,
+      id,
+      rowKey,
+      format,
+      expandable,
+      dataSource,
+      originData,
+      // triggerFilter,
+      wrapSettings,
+      recordDoubleClick,
+      selectionSettings,
+      setIsSelectionChange,
+      onContextMenu,
+      setSorterChange,
+      setFilterChange
+    }
+  }, /*#__PURE__*/React.createElement("table", {
+    style: {
+      display: 'grid',
+      minWidth: table.getTotalSize()
+    }
+  }, /*#__PURE__*/React.createElement(TableHead, {
+    tableContainerRef: tableContainerRef,
+    columnVirtualizer: columnVirtualizer,
+    table: table,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns
+  }), /*#__PURE__*/React.createElement(TableBody, {
+    tableId: id,
+    columnVirtualizer: columnVirtualizer,
+    table: table,
+    tableContainerRef: tableContainerRef,
+    virtualPaddingLeft: virtualPaddingLeft,
+    virtualPaddingRight: virtualPaddingRight,
+    fixedLeftColumns: fixedLeftColumns,
+    fixedRightColumns: fixedRightColumns,
+    commandClick: commandClick,
+    editAble: editAble,
+    contextMenuItems: contextMenuItems
+  }))));
+};
+export default TableContainer;

package/es/table-component/TableContainerEdit.d.ts

@@ -0,0 +1,28 @@
+import type { Dispatch, SetStateAction } from "react";
+import React from "react";
+import type { Table } from "@tanstack/react-table";
+import type { TableProps } from "./type";
+type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
+    table: Table<T>;
+    prefix: string;
+    id: string;
+    rowKey: any;
+    originData: T[];
+    setIsSelectionChange: Dispatch<SetStateAction<{
+        isChange: boolean;
+        type: string;
+        rowData: T;
+    }>>;
+    setSorterChange: Dispatch<SetStateAction<boolean>>;
+    setFilterChange: Dispatch<SetStateAction<boolean>>;
+    onContextMenu?: (data: T) => (event: any) => void;
+    tableHeight?: number;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
+    triggerChangeData?: (newData: T[], type: string) => void;
+    mergedFilterKeys: any;
+    setMergedFilterKeys: any;
+    setExpanded: any;
+    expanded: any;
+};
+declare const TableContainerEdit: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
+export default TableContainerEdit;