es-grid-template 1.4.0 → 1.4.2

package/lib/grid-component/TableGrid.js

@@ -355,9 +355,7 @@ const TableGrid = props => {
   }), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table, (0, _extends2.default)({
     ref: tableRef
   }, rest, {
-    tableLayout: 'fixed'
-    // id={newGuid()}
-    ,
+    tableLayout: 'fixed',
     locale: {
       ...locale,
       emptyText: showEmptyText !== false ? /*#__PURE__*/_react.default.createElement(_rcMasterUi.Empty, {
@@ -371,10 +369,7 @@ const TableGrid = props => {
     }
     // dataSource={columns && columns.length > 0 ? filterDataByColumns3(dataSource, filterStates) : []}
     ,
-    dataSource: columns && columns.length > 0 ? (0, _hooks.filterDataByColumns4)(dataSource, filterStates) : []
-    // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
-    // className={styles.customTable}
-    ,
+    dataSource: columns && columns.length > 0 ? (0, _hooks.filterDataByColumns4)(dataSource, filterStates) : [],
     className: (0, _classnames.default)(className, {
       'table-none-column-select': selectionSettings?.mode === undefined && selectionSettings?.type !== 'multiple'
     }, styles.customTable),
@@ -413,46 +408,6 @@ const TableGrid = props => {
     // }}
     ,
 
-    summary: () => {
-      if (typeof summary === 'function') {
-        return summary(dataSource);
-      }
-      if (!summary) {
-        return undefined;
-      }
-      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
-        fixed: true
-      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)(!!mode ? [_rcMasterUi.Table.SELECTION_COLUMN, ...columns] : [...columns]).filter(col => col.hidden !== true).map((col, index) => {
-        const cellFormat = col.format ? typeof col.format === 'function' ? col.format({}) : col.format : format;
-        const thousandSeparator = cellFormat?.thousandSeparator;
-        const decimalSeparator = cellFormat?.decimalSeparator;
-
-        // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
-        const dec = cellFormat?.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: cellFormat?.allowNegative ?? false,
-          prefix: cellFormat?.prefix,
-          suffix: cellFormat?.suffix,
-          decimalScale: dec,
-          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
-        };
-        return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Cell, {
-          key: col.key,
-          index: index,
-          align: col.align ?? 'right',
-          className: 'ui-rc-table-cell-ellipsis'
-        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
-      })));
-    },
-    pagination: !pagination || pagination && pagination?.onChange ? false : {
-      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
-      ...pagination
-    },
     onFilter: val => {
       handleOnFilter(val);
       // triggerFilter?.(convertFilters(val))
@@ -507,6 +462,49 @@ const TableGrid = props => {
     },
     expandable: {
       ...expandable
+    },
+    summary: () => {
+      if (typeof summary === 'function') {
+        return summary(dataSource);
+      }
+      if (!summary) {
+        return undefined;
+      }
+      return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary, {
+        fixed: true
+      }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Row, null, (0, _columns.flatColumns)(!!mode ? [_rcMasterUi.Table.SELECTION_COLUMN, ...columns] : [...columns]).filter(col => col.hidden !== true).map((col, index) => {
+        // const cellFormat: IFormat | undefined = col.format ? typeof col.format === 'function' ? col.format({}) : col.format : format
+
+        const colFormat = typeof col.format === 'function' ? col.format({}) : col.format;
+        const cellFormat = (0, _hooks.getFormat)(colFormat, format);
+        const thousandSeparator = cellFormat?.thousandSeparator;
+        const decimalSeparator = cellFormat?.decimalSeparator;
+
+        // const dec = (col.format?.decimalScale || col.format?.decimalScale === 0) ? col.format?.decimalScale : format?.decimalScale
+        const dec = cellFormat?.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: cellFormat?.allowNegative ?? false,
+          prefix: cellFormat?.prefix,
+          suffix: cellFormat?.suffix,
+          decimalScale: dec,
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+        };
+        return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Table.Summary.Cell, {
+          key: col.key,
+          index: index,
+          align: col.align ?? 'right',
+          className: 'ui-rc-table-cell-ellipsis'
+        }, col.summaryTemplate ? col.summaryTemplate(cellValue, col.key) : (0, _reactNumericComponent.numericFormatter)(cellValue, numericFormatProps));
+      })));
+    },
+    pagination: !pagination || pagination && pagination?.onChange ? false : {
+      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
+      ...pagination
     }
   })), /*#__PURE__*/_react.default.createElement("div", null), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/_react.default.createElement(_pagination.default
   // style={{padding: '0.75rem 1rem'}}

package/lib/grid-component/hooks/columns/index.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { ColumnsTable } from "../../type";
 export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType>, parentKey?: string): ColumnsTable<RecordType>;
-export declare function flatColumns2<RecordType>(columns: ColumnsTable<RecordType>): ColumnsTable<RecordType>;
+export declare const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
 export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
 export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any, format?: IFormat) => React.JSX.Element;

package/lib/grid-component/hooks/columns/index.js

@@ -5,8 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.flatColumns = flatColumns;
-exports.flatColumns2 = flatColumns2;
-exports.renderFilter = exports.renderContent = exports.getValueCell = void 0;
+exports.renderFilter = exports.renderContent = exports.getValueCell = exports.flatColumns2 = void 0;
 var _utils = require("../utils");
 var _reactNumericComponent = require("react-numeric-component");
 var _dayjs = _interopRequireDefault(require("dayjs"));
@@ -49,16 +48,8 @@ function flatColumns(columns, parentKey = 'key') {
     }];
   }, []);
 }
-function flatColumns2(columns
-// parentKey = 'key'
-) {
-  // @ts-ignore
+const flatColumns2 = columns => {
   return columns.reduce((list, column) => {
-    // const { fixed } = column
-    // Convert `fixed='true'` to `fixed='left'` instead
-    // const parsedFixed = fixed === true ? 'left' : fixed
-    // const mergedKey = `${parentKey}-${index}`
-
     const subColumns = column.children;
     if (column === _useSelection.SELECTION_COLUMN) {
       return [...list, {
@@ -66,18 +57,17 @@ function flatColumns2(columns
       }];
     }
     if (subColumns && subColumns.length > 0) {
-      return [...list, ...flatColumns(subColumns).map(subColum => ({
+      return [...list, ...flatColumns2(subColumns).map(subColum => ({
         // fixed: parsedFixed,
         ...subColum
       }))];
     }
     return [...list, {
-      // key: mergedKey,
       ...column
-      // fixed: parsedFixed
     }];
   }, []);
-}
+};
+exports.flatColumns2 = flatColumns2;
 const getValueCell = (column, value, format) => {
   switch (column?.type) {
     case 'number':

package/lib/grid-component/hooks/useColumns.js

@@ -273,12 +273,14 @@ const useColumns = config => {
             })));
           },
           onHeaderCell: () => ({
+            id: `${col.field}`,
             width: col.width,
             onResize: handleResize?.(col),
             className: col.headerTextAlign === 'center' ? 'head-align-center' : col.headerTextAlign === 'right' ? 'head-align-right' : ''
           }),
           onCell: (data, index) => {
             return {
+              id: `${col.field}`,
               colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
               zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
               ...transformedColumn?.onCell?.(data, index),
@@ -293,7 +295,8 @@ const useColumns = config => {
             };
           },
           render: (value, record, rowIndex) => {
-            const cellFormat = col.format ? typeof col.format === 'function' ? col.format(record) : col.format : format;
+            const colFormat = typeof col.format === 'function' ? col.format(record) : col.format;
+            const cellFormat = (0, _utils.getFormat)(colFormat, format);
             if (groupSetting && groupSetting.hiddenColumnGroup === false) {
               if (record.children) {
                 return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);

package/lib/grid-component/hooks/utils.d.ts

@@ -21,6 +21,21 @@ export declare const getVisibleColumnKeys: (columns: any[]) => string[];
 export declare function getHiddenParentKeys(columns: any[], parentKeys?: string[]): string[];
 export declare const updateColumns: (columns: any[], includes: string[]) => any[];
 export declare const updateColumnsByGroup: (columns: any[], columnsGroup: string[]) => any[];
+export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
+    thousandSeparator: string;
+    decimalSeparator: string;
+    decimalScale: number;
+    allowNegative: boolean;
+    prefix: string;
+    suffix: string;
+    fixedDecimalScale: boolean;
+    dateFormat: string;
+    datetimeFormat: string;
+    timeFormat: string;
+    weekFormat: string;
+    monthFormat: string;
+    yearFormat: string;
+};
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const customWeekStartEndFormat: (value: any, weekFormat: string) => string;
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
@@ -78,7 +93,7 @@ export declare const checkChild: (inputArray: any[]) => boolean;
 export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
 export declare const isArraysEqual: (arr1: any[], arr2: any[]) => boolean;
 export declare const editAbleColumns: <T>(columns: ColumnsTable<T>) => ColumnTable<T>[];
-export declare const findItemPath: (tree: any[], targetItem: any, rowKey: any) => any;
+export declare const findItemPath: (tree: any[], targetItem: any, rowKey: any, currentPage?: number, pageSize?: number) => any;
 export declare const filterDataByColumns: (data: any[], queries: any) => any[];
 export declare const filterDataByColumns2: (data: any[], queries: any) => any[];
 export declare const removeFieldRecursive: (data: any[], field: string) => any[];
@@ -109,7 +124,7 @@ export declare function getCellsByPosition(cellSet: any, position?: string): any
 export declare const addBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
 export declare const removeBorderClass: (selectedCells: any, type: string, className: string, id?: string) => void;
 export declare const removeBorderClass2: (className: string, id?: string) => void;
-export declare const onAddBgSelectedCell: (selectedCells: any, id?: string) => void;
+export declare const onAddBgSelectedCell: (selectedCells: any, id?: string, isFocusCellIndex?: boolean) => void;
 export declare const onAddBorderSelectedCell: (selectedCells: any, id?: string) => void;
 export declare const onRemoveBgSelectedCell: (selectedCells: any, id?: string, rowsSelected?: any) => void;
 export declare const onRemoveBorderSelectedCell: (selectedCells: any, id?: string) => void;

package/lib/grid-component/hooks/utils.js

@@ -16,7 +16,7 @@ exports.findAllChildrenKeys = findAllChildrenKeys;
 exports.getAllVisibleKeys = exports.genPresets = exports.flattenData = exports.flattenArray = exports.findItemPath = exports.findItemByKey = void 0;
 exports.getBottomRowCells = getBottomRowCells;
 exports.getCellsByPosition = getCellsByPosition;
-exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = void 0;
+exports.getFormat = exports.getFirstSelectCell = exports.getEditType = exports.getDefaultValue = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.hideDraggingPoint = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = exports.getRowsPasteIndex = exports.getRowNumber = exports.getLastSelectCell = void 0;
 exports.invalidDate = invalidDate;
@@ -216,6 +216,26 @@ const updateColumnsByGroup = (columns, columnsGroup) => {
   });
 };
 exports.updateColumnsByGroup = updateColumnsByGroup;
+const getFormat = (colFormat, format) => {
+  return {
+    thousandSeparator: colFormat?.thousandSeparator ?? format?.thousandSeparator,
+    decimalSeparator: colFormat?.decimalSeparator ?? format?.decimalSeparator,
+    decimalScale: colFormat?.decimalScale ?? format?.decimalScale,
+    allowNegative: colFormat?.allowNegative ?? format?.allowNegative,
+    // check nhập số âm
+    prefix: colFormat?.prefix ?? format?.prefix,
+    suffix: colFormat?.suffix ?? format?.suffix,
+    fixedDecimalScale: colFormat?.fixedDecimalScale ?? format?.fixedDecimalScale,
+    // mặc định thêm số 0 sau số thập phân
+    dateFormat: colFormat?.dateFormat ?? format?.dateFormat,
+    datetimeFormat: colFormat?.datetimeFormat ?? format?.datetimeFormat,
+    timeFormat: colFormat?.timeFormat ?? format?.timeFormat,
+    weekFormat: colFormat?.weekFormat ?? format?.weekFormat,
+    monthFormat: colFormat?.monthFormat ?? format?.monthFormat,
+    yearFormat: colFormat?.yearFormat ?? format?.yearFormat
+  };
+};
+exports.getFormat = getFormat;
 const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
@@ -1011,11 +1031,11 @@ const editAbleColumns = columns => {
   return columns.filter(col => col.field !== '#' && col.field !== 'index' && col.field !== 'command' && col.visible !== false);
 };
 exports.editAbleColumns = editAbleColumns;
-const findItemPath = (tree, targetItem, rowKey) => {
+const findItemPath = (tree, targetItem, rowKey, currentPage, pageSize) => {
   let result = null;
   function dfs(nodes, path = []) {
     for (let i = 0; i < nodes.length; i++) {
-      const currentPath = [...path, i + 1];
+      const currentPath = currentPage && pageSize ? [...path, i + 1 + (currentPage - 1) * pageSize] : [...path, i + 1];
       const node = nodes[i];
       if (node?.[rowKey] === targetItem?.[rowKey]) {
         result = currentPath.join('.');
@@ -1642,7 +1662,7 @@ const removeBorderClass2 = (className, id) => {
   }
 };
 exports.removeBorderClass2 = removeBorderClass2;
-const onAddBgSelectedCell = (selectedCells, id) => {
+const onAddBgSelectedCell = (selectedCells, id, isFocusCellIndex) => {
   const selectors = Array.from(selectedCells).map(pos => {
     const [row1, col1] = pos.split('-');
     return `[data-row-index="${row1}"][data-col-index="${col1}"]`;
@@ -1657,7 +1677,7 @@ const onAddBgSelectedCell = (selectedCells, id) => {
   const rowsArray = [...new Set([...selectedCells].map(item => item.split("-")[0]))];
   const rowsSelectors = rowsArray.map(r => `.rc-ui-cell-index[data-row-index="${r}"]`).join(", ");
   const cellsIndex = table && rowsSelectors.length > 0 ? table?.querySelectorAll(rowsSelectors) : null;
-  if (cellsIndex) {
+  if (cellsIndex && isFocusCellIndex !== false) {
     cellsIndex.forEach(cell => {
       cell.classList.add('focus');
     });
@@ -1694,7 +1714,7 @@ const onAddBorderSelectedCell = (selectedCells, id) => {
   if (cell) {
     cell.style.zIndex = 1;
   }
-  if (cell && cell.classList.contains('ui-rc-table-cell-fix-left')) {
+  if (cell && (cell.classList.contains('ui-rc-table-cell-fix-left') || cell.classList.contains('ui-rc-table-cell-fix-right'))) {
     cell.style.zIndex = 3;
   }