es-grid-template 1.4.0 → 1.4.2

package/es/grid-component/TableGrid.js

@@ -12,7 +12,7 @@ import classNames from "classnames";
 import { checkDecimalSeparator, checkThousandSeparator,
 // filterDataByColumns2,
 // filterDataByColumns3,
-filterDataByColumns4,
+filterDataByColumns4, getFormat,
 // convertFlatColumn,
 isEmpty,
 // newGuid,
@@ -355,9 +355,7 @@ const TableGrid = props => {
   }), /*#__PURE__*/React.createElement(Table, _extends({
     ref: tableRef
   }, rest, {
-    tableLayout: 'fixed'
-    // id={newGuid()}
-    ,
+    tableLayout: 'fixed',
     locale: {
       ...locale,
       emptyText: showEmptyText !== false ? /*#__PURE__*/React.createElement(Empty, {
@@ -371,10 +369,7 @@ const TableGrid = props => {
     }
     // dataSource={columns && columns.length > 0 ? filterDataByColumns3(dataSource, filterStates) : []}
     ,
-    dataSource: columns && columns.length > 0 ? filterDataByColumns4(dataSource, filterStates) : []
-    // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
-    // className={styles.customTable}
-    ,
+    dataSource: columns && columns.length > 0 ? filterDataByColumns4(dataSource, filterStates) : [],
     className: classNames(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.createElement(Table.Summary, {
-        fixed: true
-      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(!!mode ? [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' ? 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: cellFormat?.allowNegative ?? false,
-          prefix: cellFormat?.prefix,
-          suffix: cellFormat?.suffix,
-          decimalScale: dec,
-          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
-        };
-        return /*#__PURE__*/React.createElement(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) : 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.createElement(Table.Summary, {
+        fixed: true
+      }, /*#__PURE__*/React.createElement(Table.Summary.Row, null, flatColumns(!!mode ? [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 = 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' ? 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: cellFormat?.allowNegative ?? false,
+          prefix: cellFormat?.prefix,
+          suffix: cellFormat?.suffix,
+          decimalScale: dec,
+          fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+        };
+        return /*#__PURE__*/React.createElement(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) : numericFormatter(cellValue, numericFormatProps));
+      })));
+    },
+    pagination: !pagination || pagination && pagination?.onChange ? false : {
+      showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} items`,
+      ...pagination
     }
   })), /*#__PURE__*/React.createElement("div", null), pagination && pagination.onChange && !pagination.position && /*#__PURE__*/React.createElement(Pagination
   // style={{padding: '0.75rem 1rem'}}

package/es/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/es/grid-component/hooks/columns/index.js

@@ -38,16 +38,8 @@ export function flatColumns(columns, parentKey = 'key') {
     }];
   }, []);
 }
-export function flatColumns2(columns
-// parentKey = 'key'
-) {
-  // @ts-ignore
+export 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 === SELECTION_COLUMN) {
       return [...list, {
@@ -55,18 +47,16 @@ export 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
     }];
   }, []);
-}
+};
 export const getValueCell = (column, value, format) => {
   switch (column?.type) {
     case 'number':

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

@@ -4,7 +4,7 @@ import { Fragment, useCallback } from 'react';
 // import Command from "../Command";
 import { Button, Space } from "antd";
 import { Select } from "rc-master-ui";
-import { findItemPath, getTypeFilter } from "./utils";
+import { findItemPath, getFormat, getTypeFilter } from "./utils";
 import { booleanOperator, numberOperator, stringOperator, translateOption } from "./constant";
 import { flatColumns2, renderContent, renderFilter } from "./columns";
 import { SearchOutlined } from "@ant-design/icons";
@@ -262,12 +262,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),
@@ -282,7 +284,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 = getFormat(colFormat, format);
             if (groupSetting && groupSetting.hiddenColumnGroup === false) {
               if (record.children) {
                 return renderContent(col, value, record, rowIndex, cellFormat);

package/es/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/es/grid-component/hooks/utils.js

@@ -171,6 +171,25 @@ export const updateColumnsByGroup = (columns, columnsGroup) => {
     return newColumn;
   });
 };
+export 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
+  };
+};
 export const getDatepickerFormat = (type, format) => {
   const typeFormat = type ? type.toLowerCase() : '';
   switch (typeFormat) {
@@ -930,11 +949,11 @@ export const isArraysEqual = (arr1, arr2) => {
 export const editAbleColumns = columns => {
   return columns.filter(col => col.field !== '#' && col.field !== 'index' && col.field !== 'command' && col.visible !== false);
 };
-export const findItemPath = (tree, targetItem, rowKey) => {
+export 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('.');
@@ -1544,7 +1563,7 @@ export const removeBorderClass2 = (className, id) => {
     });
   }
 };
-export const onAddBgSelectedCell = (selectedCells, id) => {
+export 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}"]`;
@@ -1559,7 +1578,7 @@ export 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');
     });
@@ -1595,7 +1614,7 @@ export 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;
   }