es-grid-template 0.0.8 → 0.0.13

package/es/grid-component/TableGrid.js

@@ -0,0 +1,375 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { createStyles } from 'antd-style';
+import { numericFormatter } from "react-numeric-component";
+import { Table, Toolbar } from "rc-master-ui";
+import 'dayjs/locale/es';
+import 'dayjs/locale/vi';
+import ContextMenu from "./ContextMenu";
+import classNames from "classnames";
+import { checkDecimalSeparator, checkThousandSeparator, isEmpty, sumDataByField
+// updateArrayByKey
+} from "./hooks";
+import { ConfigProvider } from "antd";
+import { flatColumns } from "./hooks/useColumns";
+import Pagination from "rc-master-ui/es/pagination";
+import ComponentSpinner from "./LoadingSpinner";
+import { ColumnsChoose } from "./ColumnsChoose";
+const convertFilters = filters => {
+  const result = [];
+  filters.forEach(({
+    key,
+    column,
+    filteredKeys,
+    operator
+  }) => {
+    if (!filteredKeys || filteredKeys.length === 0) return;
+    if (column?.typeFilter === "DateRange" && filteredKeys.length === 2) {
+      result.push({
+        key,
+        field: column?.dataIndex,
+        value: filteredKeys[0],
+        predicate: "and",
+        operator: "greaterthanorequal"
+      }, {
+        key,
+        field: column?.dataIndex,
+        value: filteredKeys[1],
+        predicate: "and",
+        operator: "lessthanorequal"
+      });
+    } else if (column?.typeFilter === 'Checkbox') {
+      filteredKeys.forEach(value => {
+        result.push({
+          key,
+          field: column?.dataIndex,
+          value,
+          predicate: "or",
+          operator
+        });
+      });
+    } else {
+      result.push({
+        key,
+        field: column?.dataIndex,
+        value: filteredKeys[0],
+        predicate: 'and',
+        operator
+      });
+    }
+  });
+  return result;
+};
+const useStyle = createStyles(({
+  css
+}) => {
+  // const { antCls } = token
+  const antCls = 'ui-rc';
+  return {
+    customTable: css`
+      ${antCls}-table {
+        ${antCls}-table-container {
+          ${antCls}-table-body,
+          ${antCls}-table-content {
+            scrollbar-width: thin;
+            scrollbar-color: #eaeaea transparent;
+            scrollbar-gutter: stable;
+          }
+        }
+      }
+    `
+  };
+});
+// type OnChange = NonNullable<TableProps<any>['onChange']>;
+
+const TableGrid = props => {
+  const {
+    columns,
+    tableRef,
+    dataSource,
+    title,
+    format,
+    virtual = true,
+    t,
+    lang,
+    contextMenuOpen,
+    contextMenuItems: propContextMenuItems,
+    contextMenuHidden,
+    contextMenuClick,
+    recordDoubleClick,
+    toolbarItems,
+    showColumnChoose,
+    onFilter,
+    selectionSettings,
+    rowSelection,
+    rowSelected,
+    rowKey = 'id',
+    pagination,
+    scroll,
+    onFilterClick,
+    dataSourceFilter: propDataSourceFilter,
+    loading,
+    setColumns,
+    // dataSourceFilter,
+    ...rest
+  } = props;
+  const {
+    styles
+  } = useStyle();
+  const clickRef = useRef(null);
+  const menuRef = useRef(null);
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const defaultSelected = useMemo(() => {
+    return selectionSettings?.defaultSelectedRowKeys ?? [];
+  }, [selectionSettings?.defaultSelectedRowKeys]);
+  const [menuVisible, setMenuVisible] = React.useState(false);
+  const [selectedRowData, setSelectedRowData] = React.useState(null);
+  const [position, setPosition] = React.useState({
+    x: 0,
+    y: 0,
+    viewportWidth,
+    viewportHeight
+  });
+  const [selectedRowKeys, setSelectedRowKeys] = useState(defaultSelected);
+  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]);
+  useLayoutEffect(() => {
+    setMenuVisible(false);
+  }, []);
+  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);
+        document.removeEventListener(`click`, onClickOutside);
+      });
+    }
+  };
+  const handleRowClick = () => {
+    if (clickRef.current) return;
+
+    // @ts-ignore
+    clickRef.current = setTimeout(() => {
+      // console.log("Single Click:", record);
+      clickRef.current = null;
+    }, 250);
+  };
+  const handleRowDoubleClick = (record, index) => e => {
+    if (clickRef.current) {
+      clearTimeout(clickRef.current);
+      clickRef.current = null;
+    }
+    recordDoubleClick?.({
+      e,
+      rowIndex: index,
+      rowData: record
+    });
+  };
+  const onSelectChange = (keys, selectedRows, info, selectedRow) => {
+    if (info.type === 'all') {
+      // setSelectedRowKeys(keys)
+      rowSelected?.({
+        selected: selectedRows,
+        type: 'rowSelected',
+        rowData: {}
+      });
+    } else {
+      if (selectionSettings?.type === 'multiple') {
+        // setSelectedRowKeys(keys)
+        rowSelected?.({
+          selected: selectedRows,
+          type: 'rowSelected',
+          rowData: selectedRow
+        });
+      } else {
+        // @ts-ignore
+        setSelectedRowKeys([selectedRow[rowKey]]);
+        rowSelected?.({
+          selected: [selectedRow],
+          type: 'rowSelected',
+          rowData: selectedRow
+        });
+      }
+    }
+  };
+  const handleChange = sorter => {
+    console.log('Various parameters', sorter);
+    // setFilteredInfo(filters);
+    // setSortedInfo(sorter as Sorts);
+  };
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619'
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(ContextMenu, {
+    open: menuVisible,
+    pos: position,
+    setOpen: setMenuVisible,
+    menuRef: menuRef,
+    contextMenuItems: contextMenuItems,
+    contextMenuClick: contextMenuClick,
+    rowData: selectedRowData
+  }), /*#__PURE__*/React.createElement(Table, _extends({
+    ref: tableRef,
+    loading: {
+      spinning: columns && columns.length === 0 || loading === true,
+      indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
+    },
+    dataSource: dataSource
+    // className={styles.customTable}
+    ,
+    className: classNames('', {
+      'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
+    }, styles.customTable),
+    bordered: true,
+    virtual: virtual,
+    columns: columns,
+    rowKey: rowKey,
+    rowHoverable: true,
+    size: "small",
+    scroll: scroll ? scroll : {
+      y: 500
+    },
+    onRow: (data, index) => {
+      return {
+        onDoubleClick: handleRowDoubleClick(data, index),
+        onClick: handleRowClick,
+        onContextMenu: onContextMenu(data)
+      };
+    },
+    rowSelection: {
+      type: selectionSettings?.mode === 'checkbox' || selectionSettings?.type === 'multiple' ? 'checkbox' : "radio",
+      columnWidth: !selectionSettings?.mode ? 0.0000001 : selectionSettings?.columnWidth ?? 50,
+      onChange: onSelectChange,
+      selectedRowKeys: selectionSettings?.mode === 'checkbox' && selectionSettings?.type === 'single' ? selectedRowKeys : undefined,
+      defaultSelectedRowKeys: selectionSettings?.defaultSelectedRowKeys,
+      preserveSelectedRowKeys: true,
+      ...rowSelection,
+      hideSelectAll: !selectionSettings?.type || selectionSettings?.type === 'single' || selectionSettings?.mode === 'radio' ? true : selectionSettings?.hideSelectAll ?? selectionSettings?.type !== 'multiple'
+    },
+    onScroll: () => {
+      setMenuVisible(false);
+    },
+    summary: () => /*#__PURE__*/React.createElement(Table.Summary, {
+      fixed: true
+    }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(columns).filter(col => col.hidden !== true).map((col, index) => {
+      const thousandSeparator = col.format?.thousandSeparator ? col.format?.thousandSeparator : format?.thousandSeparator;
+      const decimalSeparator = col.format?.decimalSeparator ? col.format?.decimalSeparator : format?.decimalSeparator;
+      const dec = col.format?.decimalScale || col.format?.decimalScale === 0 ? col.format?.decimalScale : format?.decimalScale;
+      const sumValue = col.type === 'number' ? sumDataByField(dataSource, col?.key) : 0;
+      const value = !isEmpty(sumValue) ? dec || dec === 0 ? parseFloat(Number(sumValue).toFixed(dec)).toString() : sumValue.toString() : '0';
+      const cellValue = col.type === 'number' && col.isSummary !== false ? value : '';
+      const numericFormatProps = {
+        thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+        decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+        allowNegative: (col.format?.allowNegative ? col.format?.allowNegative : format?.allowNegative) ?? false,
+        prefix: col.format?.prefix ? col.format?.prefix : format?.prefix,
+        suffix: col.format?.suffix ? col.format?.suffix : format?.suffix,
+        decimalScale: dec,
+        fixedDecimalScale: (col.format?.fixedDecimalScale ? col.format?.fixedDecimalScale : format?.fixedDecimalScale) ?? false
+      };
+      return /*#__PURE__*/React.createElement(Table.Summary.Cell, {
+        key: col.key,
+        index: index
+      }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : numericFormatter(cellValue, numericFormatProps));
+    }))),
+    pagination: pagination && pagination.onChange ? false : {
+      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
+      ...pagination
+    },
+    onFilter: val => {
+      onFilter?.(convertFilters(val));
+    },
+    onChange: (paging, filters, sorter) => handleChange(sorter),
+    title: () => {
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, title?.(dataSource)), (toolbarItems || showColumnChoose !== false) && /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between'
+        }
+      }, /*#__PURE__*/React.createElement(Toolbar, {
+        style: {
+          width: '100%'
+        },
+        items: toolbarItems ?? [],
+        mode: 'responsive'
+        // mode={'scroll'}
+        ,
+        onClick: val => {
+          console.log(val);
+        }
+      }), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+        columns: columns,
+        setColumns: setColumns
+      }), /*#__PURE__*/React.createElement("div", null)));
+    }
+  }, rest)), pagination && pagination.onChange && /*#__PURE__*/React.createElement(Pagination
+  // style={{padding: '0.75rem 1rem'}}
+  , _extends({
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`
+  }, pagination))));
+};
+export default TableGrid;

package/es/grid-component/async-table-select/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
+import type { TableSelectProps } from "rc-master-ui/es/table-select";
+export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends TableSelectProps {
+    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void) => void;
+    debounceTimeout?: number;
+    defaultOptions?: OptionType[];
+}
+export declare function AsyncTableSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, columns, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;

package/es/grid-component/async-table-select/index.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useEffect, useMemo, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { TableSelect } from "rc-master-ui";
+export function AsyncTableSelect({
+  loadOptions,
+  debounceTimeout = 500,
+  defaultOptions,
+  columns,
+  ...props
+}) {
+  const [options, setOptions] = useState(defaultOptions ?? []);
+  const debounceFetcher = useMemo(() => {
+    const fetchOptions = value => {
+      if (value.trim().length === 0) {
+        setOptions(defaultOptions ?? []);
+        return;
+      }
+      if (loadOptions) {
+        loadOptions(value, newOptions => {
+          setOptions(newOptions);
+        });
+      }
+    };
+    return debounce(fetchOptions, debounceTimeout);
+  }, [loadOptions, debounceTimeout]);
+  useEffect(() => {
+    setOptions(defaultOptions ?? []);
+  }, [defaultOptions]);
+  return /*#__PURE__*/React.createElement(TableSelect, _extends({}, props, {
+    filterOption: loadOptions ? false : props?.filterOption,
+    onSearch: debounceFetcher,
+    onSelect: () => setOptions(defaultOptions ?? []),
+    options: options,
+    columns: columns
+  }));
+}

package/{lib → es/grid-component}/hooks/constant.d.ts

@@ -46,3 +46,17 @@ export declare const optionFontSize: {
     value: number;
     label: string;
 }[];
+/**
+ * Sort order for BaseTable
+ */
+declare const SortOrder: {
+    /**
+     * Sort data in ascending order
+     */
+    ascend: string;
+    /**
+     * Sort data in descending order
+     */
+    descend: string;
+};
+export default SortOrder;

package/es/{hooks → grid-component/hooks}/constant.js

@@ -211,4 +211,19 @@ export const optionFontSize = [{
 }, {
   value: 48,
   label: '48'
-}];
+}];
+
+/**
+ * Sort order for BaseTable
+ */
+const SortOrder = {
+  /**
+   * Sort data in ascending order
+   */
+  ascend: 'Ascending',
+  /**
+   * Sort data in descending order
+   */
+  descend: 'Descending'
+};
+export default SortOrder;

package/es/grid-component/hooks/useColumns/index.d.ts

@@ -0,0 +1,6 @@
+import type { ColumnsType, ColumnType, IFormat } from "../../type";
+import React from "react";
+export declare function flatColumns<RecordType>(columns: ColumnsType<RecordType>, parentKey?: string): ColumnType<RecordType>[];
+export declare const getValueCell: <T>(column: ColumnType<T>, value: any, format?: IFormat) => any;
+export declare const renderContent: <RecordType>(column: ColumnType<RecordType>, value: any, record: RecordType, index: number, format?: IFormat) => React.JSX.Element;
+export declare const renderFilter: <RecordType>(column: ColumnType<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any) => React.JSX.Element;