es-grid-template 0.0.8 → 0.1.0

package/lib/grid-component/TableGrid.js

@@ -0,0 +1,382 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _antdStyle = require("antd-style");
+var _reactNumericComponent = require("react-numeric-component");
+var _rcMasterUi = require("rc-master-ui");
+require("dayjs/locale/es");
+require("dayjs/locale/vi");
+var _ContextMenu = _interopRequireDefault(require("./ContextMenu"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _hooks = require("./hooks");
+var _antd = require("antd");
+var _useColumns = require("./hooks/useColumns");
+var _pagination = _interopRequireDefault(require("rc-master-ui/es/pagination"));
+var _LoadingSpinner = _interopRequireDefault(require("./LoadingSpinner"));
+var _ColumnsChoose = require("./ColumnsChoose");
+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; }
+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 = (0, _antdStyle.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 = (0, _react.useRef)(null);
+  const menuRef = (0, _react.useRef)(null);
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const defaultSelected = (0, _react.useMemo)(() => {
+    return selectionSettings?.defaultSelectedRowKeys ?? [];
+  }, [selectionSettings?.defaultSelectedRowKeys]);
+  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 [selectedRowKeys, setSelectedRowKeys] = (0, _react.useState)(defaultSelected);
+  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]);
+  (0, _react.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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        Table: {
+          rowHoverBg: '#eb461912',
+          rowSelectedBg: '#eb4619',
+          rowSelectedHoverBg: '#eb4619'
+        }
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ContextMenu.default, {
+    open: menuVisible,
+    pos: position,
+    setOpen: setMenuVisible,
+    menuRef: menuRef,
+    contextMenuItems: contextMenuItems,
+    contextMenuClick: contextMenuClick,
+    rowData: selectedRowData
+  }), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table, (0, _extends2.default)({
+    ref: tableRef,
+    loading: {
+      spinning: columns && columns.length === 0 || loading === true,
+      indicator: /*#__PURE__*/_react.default.createElement(_LoadingSpinner.default, null)
+    },
+    dataSource: dataSource
+    // className={styles.customTable}
+    ,
+    className: (0, _classnames.default)('', {
+      '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.default.createElement(_rcMasterUi.Table.Summary, {
+      fixed: true
+    }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _useColumns.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' ? (0, _hooks.sumDataByField)(dataSource, col?.key) : 0;
+      const value = !(0, _hooks.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: (0, _hooks.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+        decimalSeparator: (0, _hooks.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.default.createElement(_rcMasterUi.Table.Summary.Cell, {
+        key: col.key,
+        index: index
+      }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.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.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", null, title?.(dataSource)), (toolbarItems || showColumnChoose !== false) && /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Toolbar, {
+        style: {
+          width: '100%'
+        },
+        items: toolbarItems ?? [],
+        mode: 'responsive'
+        // mode={'scroll'}
+        ,
+        onClick: val => {
+          console.log(val);
+        }
+      }), showColumnChoose && /*#__PURE__*/_react.default.createElement(_ColumnsChoose.ColumnsChoose, {
+        columns: columns,
+        setColumns: setColumns
+      }), /*#__PURE__*/_react.default.createElement("div", null)));
+    }
+  }, rest)), pagination && pagination.onChange && /*#__PURE__*/_react.default.createElement(_pagination.default
+  // style={{padding: '0.75rem 1rem'}}
+  , (0, _extends2.default)({
+    showSizeChanger: true,
+    responsive: true,
+    size: 'small',
+    showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`
+  }, pagination))));
+};
+var _default = exports.default = TableGrid;

package/lib/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/lib/grid-component/async-table-select/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AsyncTableSelect = AsyncTableSelect;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _rcMasterUi = require("rc-master-ui");
+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; }
+function AsyncTableSelect({
+  loadOptions,
+  debounceTimeout = 500,
+  defaultOptions,
+  columns,
+  ...props
+}) {
+  const [options, setOptions] = (0, _react.useState)(defaultOptions ?? []);
+  const debounceFetcher = (0, _react.useMemo)(() => {
+    const fetchOptions = value => {
+      if (value.trim().length === 0) {
+        setOptions(defaultOptions ?? []);
+        return;
+      }
+      if (loadOptions) {
+        loadOptions(value, newOptions => {
+          setOptions(newOptions);
+        });
+      }
+    };
+    return (0, _debounce.default)(fetchOptions, debounceTimeout);
+  }, [loadOptions, debounceTimeout]);
+  (0, _react.useEffect)(() => {
+    setOptions(defaultOptions ?? []);
+  }, [defaultOptions]);
+  return /*#__PURE__*/_react.default.createElement(_rcMasterUi.TableSelect, (0, _extends2.default)({}, props, {
+    filterOption: loadOptions ? false : props?.filterOption,
+    onSearch: debounceFetcher,
+    onSelect: () => setOptions(defaultOptions ?? []),
+    options: options,
+    columns: columns
+  }));
+}

package/{es → lib/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/lib/{hooks → grid-component/hooks}/constant.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.translateOption = exports.transferFontSize = exports.stringOperator = exports.paperSize = exports.optionsSize = exports.optionsPaperOrientation = exports.optionFontSize = exports.optionFont = exports.numberOperator = exports.defaultWidth = exports.defaultTimeFormat = exports.defaultRowHeight = exports.defaultPageSizes = exports.defaultDateTimeFormat = exports.defaultDateFormat = exports.dateTimeOperator = exports.dateOperator = exports.booleanOperator = exports.alignToFlex = void 0;
+exports.translateOption = exports.transferFontSize = exports.stringOperator = exports.paperSize = exports.optionsSize = exports.optionsPaperOrientation = exports.optionFontSize = exports.optionFont = exports.numberOperator = exports.defaultWidth = exports.defaultTimeFormat = exports.defaultRowHeight = exports.defaultPageSizes = exports.defaultDateTimeFormat = exports.defaultDateFormat = exports.default = exports.dateTimeOperator = exports.dateOperator = exports.booleanOperator = exports.alignToFlex = void 0;
 const defaultWidth = exports.defaultWidth = 100;
 const defaultRowHeight = exports.defaultRowHeight = 35;
 const numberOperator = exports.numberOperator = [{
@@ -218,4 +218,19 @@ const optionFontSize = exports.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'
+};
+var _default = exports.default = SortOrder;

package/lib/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;