es-grid-template 1.8.87 → 1.8.88

package/es/ali-table/Grid.d.ts

@@ -0,0 +1,15 @@
+import type { TablePipeline } from "./pipeline";
+import type { Dispatch, SetStateAction } from "react";
+import React from "react";
+import './base-table/styles.scss';
+import type { TableProps } from "../table-component";
+import type { BaseTable } from "./base-table/table";
+declare const Grid: React.ForwardRefExoticComponent<TableProps & {
+    isFullScreen: boolean;
+    setIsFullScreen: Dispatch<SetStateAction<boolean>>;
+    pipeline: TablePipeline;
+    originData: any[];
+    originColumns: any[];
+    setVisibleKeys: Dispatch<SetStateAction<any>>;
+} & React.RefAttributes<BaseTable>>;
+export default Grid;

package/es/ali-table/Grid.js

@@ -0,0 +1,331 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { WebsiteBaseTable } from "./assets/WebsiteBaseTable";
+import { useLocale } from "rc-master-ui/es/locale";
+import React, { useContext } from "react";
+import { Tooltip } from "react-tooltip";
+// @ts-ignore
+import "./base-table/styles.scss";
+import { Toolbar } from 'rc-master-ui';
+import classNames from "classnames";
+import Pagination from "rc-master-ui/es/pagination";
+import { Maximize, Minimize } from "becoxy-icons";
+import { numericFormatter } from "react-numeric-component";
+import { pageSizeOptions } from "../grid-component/hooks";
+import ContextMenu from "../table-component/ContextMenu";
+import { TableContext } from "./useContext";
+import { ColumnsChoose } from "./pipeline/features/ColumnsChoose";
+// const Grid = (props: GridProps) => {
+const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    id,
+    t,
+    isFullScreen,
+    setIsFullScreen,
+    className: tableClassNames,
+    title,
+    showToolbar,
+    toolbarItems,
+    pagination,
+    infiniteScroll,
+    dataSource,
+    originData,
+    format,
+    locale,
+    fullScreen,
+    actionTemplate,
+    theme,
+    height,
+    minHeight,
+    pipeline,
+    contextMenuItems: propContextMenuItems,
+    contextMenuHidden,
+    contextMenuOpen,
+    recordDoubleClick,
+    contextMenuClick,
+    commandClick,
+    onRowStyles,
+    showColumnChoose,
+    originColumns,
+    columns,
+    groupColumns,
+    setVisibleKeys,
+    footerDataSource,
+    loading
+
+    // onRowFooterStyles,
+    // onRowHeaderStyles
+  } = props;
+  const prefix = 'ui-rc';
+  const stateKeyPager = 'pagination';
+  const [tableLocal] = useLocale('Table');
+  const [paginationLocal] = useLocale('Pagination');
+  const menuRef = React.useRef(null);
+  const {
+    windowSize
+  } = useContext(TableContext);
+  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 onResizeEnd = () => {};
+  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.pageY;
+      const pageY = event.pageY;
+      if (x + menuWidth > windowSize.innerWidth) {
+        x = x - menuWidth - 10; // Cách cạnh phải 10px
+      }
+      if (pageY > windowSize.innerHeight) {
+        y = windowSize.innerHeight;
+      }
+      setPosition(prevState => ({
+        ...prevState,
+        x,
+        y
+      }));
+    }, 100);
+  };
+  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);
+    };
+  }, []);
+  const triggerChangeColumns = (nextColumn, _, nextVisibleKeys) => {
+    setVisibleKeys(nextVisibleKeys);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefix}-grid ${tableClassNames}`, {
+      [`${prefix}-grid-light`]: !theme || theme.theme === 'light',
+      [`${prefix}-grid-dark`]: theme?.theme === 'dark'
+    }),
+    style: {
+      height: height ?? 700,
+      minHeight,
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, (showToolbar !== false || fullScreen !== false || title) && /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefix}-grid-top-toolbar`, {})
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: (toolbarItems ?? []).filter(it => it.position !== 'Bottom'),
+    mode: 'scroll'
+  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: '.25rem'
+    }
+  }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    rootClassName: 'top-pagination',
+    showTotal: (totalItems, range) =>
+    // @ts-ignore
+    `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": locale?.table?.minimized || tableLocal?.minimized || 'Minimized'
+  }) : /*#__PURE__*/React.createElement(Maximize, {
+    fontSize: 16,
+    onClick: () => {
+      setIsFullScreen(!isFullScreen);
+    },
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
+  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+    id: id ?? '',
+    locale: locale,
+    tableLocal: tableLocal,
+    columns: columns,
+    originColumns: originColumns,
+    t: t,
+    columnsGroup: groupColumns,
+    triggerChangeColumns: triggerChangeColumns
+  }))), /*#__PURE__*/React.createElement("div", {
+    style: {
+      textAlign: 'center'
+    }
+  }, typeof title === 'function' ? title?.(dataSource) : title)), /*#__PURE__*/React.createElement(WebsiteBaseTable, _extends({
+    ref: ref,
+    id: id,
+    commandClick: commandClick,
+    isLoading: loading,
+    useVirtual: {
+      header: false,
+      vertical: true,
+      horizontal: true
+    },
+    hasStickyScroll: true,
+    isStickyFooter: true,
+    isStickyHeader: true,
+    stickyBottom: 0,
+    stickyTop: 0,
+    defaultColumnWidth: 100,
+    originData: originData,
+    format: format
+
+    // estimatedRowHeight={50}
+    ,
+    useOuterBorder: true
+    // style={{ height: 700, overflow: 'auto' }}
+    ,
+    style: minHeight ? {
+      flex: 1,
+      overflow: 'auto'
+    } : {
+      overflow: 'auto'
+    }
+
+    // columnResizeMode={'onChange'}
+    ,
+    onResizeEnd: onResizeEnd
+  }, pipeline.getProps(), {
+    getRowProps: (row, rowIndex) => {
+      const prevRowProps = pipeline.getProps().getRowProps?.(row, rowIndex);
+      const rowStyle = onRowStyles ? typeof onRowStyles === 'function' ? onRowStyles(row) : onRowStyles : undefined;
+      return {
+        ...prevRowProps,
+        className: classNames(``, {
+          [`${prefix}-grid-row-parent`]: row.children && row.children.length > 0 || Array.isArray(row.children)
+        }),
+        style: {
+          ...prevRowProps?.style,
+          ...rowStyle
+        },
+        onContextMenu: e => {
+          if (contextMenuItems && contextMenuItems.length) {
+            const cell = e.target.closest('[data-col-key]');
+            const colKey = cell?.getAttribute('data-col-key');
+            onContextMenu?.({
+              rowData: row,
+              field: colKey
+            })(e);
+          }
+        },
+        onDoubleClick: e => {
+          recordDoubleClick?.({
+            e,
+            rowData: row,
+            rowIndex: rowIndex
+          });
+        }
+      };
+    },
+    footerDataSource: footerDataSource
+  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
+    pageSizeOptions: pageSizeOptions,
+    rootClassName: 'pagination-template',
+    showSizeChanger: true,
+    size: 'small',
+    total: pagination.total,
+    pageSize: pagination.onChange ? pagination.pageSize : pipeline.getStateAtKey(stateKeyPager)?.pageSize ?? pageSizeOptions[0],
+    showTotal: (totalItems, range) => `${numericFormatter((range[0] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })}-${numericFormatter((range[1] ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} / ${numericFormatter((totalItems ?? 0).toString(), {
+      thousandSeparator: '.'
+    })} ${pagination?.locale?.items || paginationLocal?.items || ''}`,
+    current: pagination.onChange ? pagination.currentPage : pipeline.getStateAtKey(stateKeyPager)?.currentPage
+  }, pagination, {
+    onChange: (page, pageSize1) => {
+      if (pagination.onChange) {
+        pagination.onChange(page, pageSize1);
+      } else {
+        pipeline.setStateAtKey(stateKeyPager, {
+          currentPage: page,
+          pageSize: pageSize1
+        });
+      }
+    },
+    responsive: true
+  }))), /*#__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 Grid;

package/es/ali-table/InternalTable.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import './base-table/styles.scss';
+import type { TableProps } from "../table-component";
+declare const InternalTable: <RecordType extends object>(props: TableProps<RecordType>) => React.JSX.Element;
+export default InternalTable;

package/es/ali-table/InternalTable.js

@@ -0,0 +1,274 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { features, useTablePipeline } from "./pipeline";
+import * as fusion from '@alifd/next';
+import { useLocale } from "rc-master-ui/es/locale";
+import { faker } from "@faker-js/faker";
+import React from "react";
+import "./base-table/styles.scss";
+import { addRowIdArray, filterDataByColumns, groupArrayByColumns, isTreeArray, sortByType, sumFields } from "../table-component/hook/utils";
+import { CustomProvider, ConfigProvider } from 'rc-master-ui';
+import { getLocale, getLocales } from "../locale/useLocale";
+import { TableContext } from "./useContext";
+import Grid from "./Grid";
+import { Modal } from "antd";
+import { getParentKeysLarge, getRowsByKeysKeepTreeOrder } from "./utils/selected";
+// import { collectNodes } from "./utils"
+// import { filterColumnsByField } from "./utils/convertColumnsChoose"
+
+const InternalTable = props => {
+  const {
+    t,
+    columns: propColumns,
+    dataSource,
+    allowFiltering,
+    allowSortering,
+    groupAble,
+    groupColumns,
+    groupSetting,
+    lang,
+    pagination,
+    locale,
+    fullScreenTitle,
+    wrapSettings,
+    ignoreAccents,
+    rowSelected,
+    selectionSettings,
+    expandable,
+    sortMultiple,
+    onFilter,
+    onSorter,
+    footerDataSource,
+    summary,
+    ...rest
+  } = props;
+  const prefix = 'ui-rc';
+  const rowKey = 'rowId';
+  const childrenKey = 'children';
+  const [tableLocal] = useLocale('Table');
+  const id = React.useMemo(() => {
+    return faker.string.alpha(20);
+  }, []);
+  const language = React.useMemo(() => {
+    return getLocale(lang);
+  }, [lang]);
+  const languages = React.useMemo(() => {
+    return getLocales(lang);
+  }, [lang]);
+  const getWindowSize = () => {
+    const {
+      innerWidth,
+      innerHeight
+    } = window;
+    return {
+      innerWidth,
+      innerHeight
+    };
+  };
+  const [windowSize, setWindowSize] = React.useState(getWindowSize());
+  React.useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    document.addEventListener('resize', handleWindowResize);
+    return () => {
+      document.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+  const isDataTree = React.useMemo(() => {
+    return isTreeArray(dataSource);
+  }, [dataSource]);
+  const [visibleKeys, setVisibleKeys] = React.useState(undefined);
+  const [filterState, setFilterState] = React.useState(undefined);
+  const [sortState, setSortState] = React.useState(undefined);
+  const columns = React.useMemo(() => {
+    return sortByType(propColumns);
+  }, [propColumns]);
+  const convertData = React.useMemo(() => {
+    if (groupAble && groupSetting && groupSetting.client !== false) {
+      return groupArrayByColumns(dataSource, groupColumns);
+    }
+    return addRowIdArray(dataSource);
+  }, [dataSource, groupAble, groupColumns, groupSetting]);
+  const mergedData = React.useMemo(() => {
+    if (sortState || filterState) {
+      return filterDataByColumns(convertData, filterState ?? [], sortState ?? [], [], ignoreAccents);
+    }
+    return convertData;
+  }, [convertData, filterState, ignoreAccents, sortState]);
+  const footerData = React.useMemo(() => {
+    if (!summary) {
+      return undefined;
+    }
+    if (footerDataSource) {
+      return footerDataSource;
+    }
+    const a = sumFields(columns, dataSource, childrenKey);
+    return [a];
+  }, [columns, dataSource, footerDataSource, summary]);
+  const expandAllKeys = React.useMemo(() => {
+    if (expandable?.defaultExpandAllRows && isDataTree) {
+      return getParentKeysLarge(convertData, rowKey, childrenKey);
+    }
+    return undefined;
+  }, [expandable?.defaultExpandAllRows, convertData, isDataTree]);
+  const [isFullScreen, setIsFullScreen] = React.useState(false);
+  const pipeline = useTablePipeline({
+    components: fusion
+  }).input({
+    dataSource: mergedData,
+    columns
+  }).primaryKey(rowKey)
+  // .mapDataSource((dta) => collectNodes(dta, 'pre'))
+  .snapshot('flat').use(features.hiddenColumns({
+    columns,
+    visibleKeys
+  })).use(features.treeSelect({
+    tree: mergedData,
+    value: selectionSettings?.selectedRowKeys,
+    defaultValue: selectionSettings?.defaultSelectedRowKeys,
+    // rootKey: selectionSettings?.hideSelectAll,
+    rootKey: selectionSettings?.hideSelectAll || selectionSettings?.type === 'single' ? undefined : 'root',
+    // rootKey: 'root',
+    checkStrictly: selectionSettings?.checkStrictly,
+    // checkStrictly: true,
+    checkedStrategy: isDataTree ? selectionSettings?.checkedStrategy : 'all',
+    // checkedStrategy: 'parent',
+
+    mode: selectionSettings?.mode,
+    type: selectionSettings?.type,
+    highlightRowWhenSelected: true,
+    isDisabled(row) {
+      return !!selectionSettings?.getCheckboxProps?.(row)?.disabled;
+    },
+    checkboxColumn: {
+      lock: true
+    },
+    clickArea: selectionSettings?.checkboxOnly ? 'checkbox' : 'row',
+    // clickArea: 'row',
+    onChange: (nextValue, rowData, type) => {
+      const rs = getRowsByKeysKeepTreeOrder(nextValue, mergedData ?? [], rowKey);
+      rowSelected?.({
+        type,
+        rowData,
+        selected: rs
+      });
+    }
+
+    // clickArea: 'checkbox'
+  })).use(features.treeMode({
+    clickArea: 'icon',
+    stopClickEventPropagation: true,
+    expandIconColumnIndex: expandable?.expandIconColumnIndex,
+    defaultOpenKeys: expandAllKeys ?? expandable?.defaultExpandedRowKeys
+  })).use(features.columnCustom({
+    id,
+    t,
+    columns,
+    mode: sortMultiple !== false ? 'multiple' : 'single',
+    dataSource: mergedData,
+    columnResizeMode: 'onChange',
+    disableUserSelectWhenResizing: true,
+    allowFiltering,
+    allowSortering,
+    tableLocal,
+    locale,
+    prefix,
+    wrapSettings,
+    ignoreAccents,
+    currentPage: pagination ? pagination?.currentPage : undefined,
+    pageSize: pagination ? pagination?.pageSize : undefined,
+    onFilter(val) {
+      // const rs  = 
+
+      if (onFilter) {
+        onFilter(val);
+      } else {
+        setFilterState(val);
+      }
+    },
+    onSorter(val) {
+      if (onSorter) {
+        onSorter(val);
+      } else {
+        setSortState(val);
+      }
+    }
+  })).use(features.paginationFeature({
+    pagination
+  }));
+
+  // const onResizeEnd = (args: any[]) => {
+
+  // }
+
+  return /*#__PURE__*/React.createElement(ConfigProvider, {
+    locale: language
+  }, /*#__PURE__*/React.createElement(CustomProvider, {
+    locale: languages
+  }, /*#__PURE__*/React.createElement(TableContext.Provider, {
+    value: {
+      prefix,
+      id,
+      rowKey,
+      dataSource: mergedData,
+      originData: convertData,
+      windowSize,
+      lang,
+      locale
+    }
+  }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
+    id: id,
+    isFullScreen: isFullScreen,
+    pagination: pagination,
+    setIsFullScreen: setIsFullScreen,
+    pipeline: pipeline
+  }, pipeline.getProps(), {
+    originData: convertData,
+    originColumns: columns,
+    groupColumns: groupColumns,
+    setVisibleKeys: setVisibleKeys,
+    footerDataSource: footerData
+  })), /*#__PURE__*/React.createElement(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
+      }
+    },
+    title: /*#__PURE__*/React.createElement("div", {
+      style: {
+        minHeight: 24
+      }
+    }, "  ", typeof fullScreenTitle === 'function' ? fullScreenTitle?.() : fullScreenTitle, " "),
+    destroyOnClose: true
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {}
+  }, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
+    id: id,
+    isFullScreen: isFullScreen,
+    setIsFullScreen: setIsFullScreen,
+    pipeline: pipeline,
+    pagination: pagination
+  }, pipeline.getProps(), {
+    originData: convertData,
+    originColumns: columns,
+    groupColumns: groupColumns,
+    setVisibleKeys: setVisibleKeys,
+    footerDataSource: footerData
+  })))))));
+};
+export default InternalTable;

package/es/ali-table/assets/WebsiteBaseTable.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { BaseTableProps } from '../base-table/table';
+import { BaseTable } from '../base-table/table';
+export declare const WebsiteBaseTable: React.ForwardRefExoticComponent<BaseTableProps & React.RefAttributes<BaseTable>>;

package/es/ali-table/assets/WebsiteBaseTable.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import cx from 'classnames';
+import React from 'react';
+import styled from 'styled-components';
+import { BaseTable } from "../base-table/table";
+const DarkSupportBaseTable = styled(BaseTable).withConfig({
+  displayName: "DarkSupportBaseTable",
+  componentId: "es-grid-template__sc-4ltmbz-0"
+})(["", ";&.dark{--bgcolor:#333;--header-bgcolor:#45494f;--hover-bgcolor:#46484a;--header-hover-bgcolor:#606164;--highlight-bgcolor:#191a1b;--header-highlight-bgcolor:#191a1b;--color:#dadde1;--header-color:#dadde1;--lock-shadow:rgb(37 37 37 / 0.5) 0 0 6px 2px;--border-color:#3c4045;}"], props => props.css);
+export const WebsiteBaseTable = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const isDarkTheme = false;
+  return /*#__PURE__*/React.createElement(DarkSupportBaseTable, _extends({
+    ref: ref,
+    className: cx({
+      dark: isDarkTheme
+    }, props.className)
+  }, props));
+});