es-grid-template 1.5.7 → 1.5.9

package/es/grid-component/EditableCell.js

@@ -883,6 +883,8 @@ const EditableCell = props => {
         };
         return /*#__PURE__*/React.createElement(NumericFormat, _extends({
           id: `col${indexCol}-record${indexRow}`
+          // value={value ? numericFormatter(value.toString(), numericFormatProps) : ''}
+          // value={value}
         }, numericFormatProps, {
           min: column.min,
           max: column.max,
@@ -898,7 +900,7 @@ const EditableCell = props => {
             'be-cell-edit-align-right': !column.align || column.align === 'right'
           }),
           onValueChange: values => {
-            onChange(values?.floatValue);
+            onChange(values?.floatValue || 0);
           },
           onBlur: () => {
             const formState = getValues();

package/es/grid-component/InternalTable.js

@@ -36,6 +36,7 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 // import {CSS} from "@dnd-kit/utilities";
 import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
+import InfiniteTable from "./table/InfiniteTable";
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 const ASCEND = 'ascend';
@@ -177,6 +178,7 @@ const InternalTable = props => {
     pagination,
     height: propsHeight,
     summary,
+    infiniteScroll,
     ...rest
   } = props;
   const id = React.useMemo(() => {
@@ -807,7 +809,7 @@ const InternalTable = props => {
       triggerChangeData(newData);
     }
   };
-  const TableComponent = groupAble ? Group : editAble ? GridEdit : Grid;
+  const TableComponent = infiniteScroll ? InfiniteTable : groupAble ? Group : editAble ? GridEdit : Grid;
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(DndContext, {
     sensors: sensors,
     modifiers: [restrictToHorizontalAxis],

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

@@ -4,6 +4,6 @@ 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 const flatColumns2: <RecordType>(columns: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
-export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
+export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, record: T, 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, dateRangeLocale?: any) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateString, getTypeFilter, isColor, isEmpty } from "../utils";
+import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, convertFormat, getDatepickerFormat, getDateRangeFormat, getDateString, getFormat, getTypeFilter, isColor, isEmpty } from "../utils";
 import { numericFormatter } from "react-numeric-component";
 import dayjs from "dayjs";
 import moment from "moment/moment";
@@ -55,25 +55,29 @@ export const flatColumns2 = columns => {
     }];
   }, []);
 };
-export const getValueCell = (column, value, format) => {
+export const getValueCell = (column, value, record, format) => {
   switch (column?.type) {
     case 'number':
-      const thousandSeparator = format?.thousandSeparator;
-      const decimalSeparator = format?.decimalSeparator;
-      const dec = format?.decimalScale;
+      const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+      const cellFormat = getFormat(colFormat, format);
+      const thousandSeparator = cellFormat?.thousandSeparator;
+      const decimalSeparator = cellFormat?.decimalSeparator;
+      const dec = cellFormat?.decimalScale;
 
       // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? parseFloat(Number(value).toFixed(dec)).toString() : value.toString()) : '0'
 
       const tmpval = typeof value === 'string' ? Number(value) : value;
       const contentNumber = !isEmpty(value) ? dec || dec === 0 ? parseFloat(tmpval.toFixed(dec)).toString() : tmpval.toString() : '0';
+      // const contentNumber = !isEmpty(value) ? ((dec || dec === 0) ? tmpval.toString() : tmpval.toString()) : '0'
+
       const numericFormatProps = {
         thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
         decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
-        allowNegative: format?.allowNegative ?? true,
-        prefix: format?.prefix,
-        suffix: format?.suffix,
+        allowNegative: cellFormat?.allowNegative ?? true,
+        prefix: cellFormat?.prefix,
+        suffix: cellFormat?.suffix,
         decimalScale: dec,
-        fixedDecimalScale: format?.fixedDecimalScale ?? false
+        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
       };
       return !isEmpty(contentNumber) ? numericFormatter(contentNumber, numericFormatProps) : '';
     case 'date':
@@ -115,7 +119,7 @@ export const getValueCell = (column, value, format) => {
 };
 export const renderContent = (column, value, record, index, format) => {
   const cellValue = value instanceof Date ? getDateString(column, value) : value;
-  const content = getValueCell(column, cellValue, format);
+  const content = getValueCell(column, cellValue, record, format);
   return /*#__PURE__*/React.createElement(Fragment, null, column?.template ? typeof column.template === "function" ? column.template({
     value,
     index,
@@ -127,7 +131,7 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
   const cellFormat = column.format ? typeof column.format === 'function' ? column.format({}) : column.format : format;
   const type = getTypeFilter(column);
   const dateFormat = getDatepickerFormat(column?.typeFilter ?? column?.type, cellFormat) ?? 'DD/MM/YYYY';
-  const dateRangeFormat = convertFormat(getDatepickerFormat(column?.type, cellFormat) ?? 'DD/MM/YYYY');
+  const dateRangeFormat = convertFormat(getDateRangeFormat(column?.type, cellFormat) ?? 'dd/MM/yyyy');
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
   switch (type) {

package/es/grid-component/hooks/content/HeaderContent.js

@@ -16,7 +16,7 @@ const HeaderContent = props => {
     return columnGroupText ?? headerText;
   }, [columnGroupText, headerText]);
   const tooltip = React.useMemo(() => {
-    return headerTooltip ?? t ? t(columnGroupText ?? headerText) : columnGroupText ?? headerText;
+    return headerTooltip ?? t ? t?.(columnGroupText ?? headerText) : columnGroupText ?? headerText;
   }, [columnGroupText, headerText, headerTooltip, t]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classnames('', {}),

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

@@ -175,7 +175,7 @@ export const getFormat = (colFormat, format) => {
   return {
     thousandSeparator: colFormat?.thousandSeparator ?? format?.thousandSeparator,
     decimalSeparator: colFormat?.decimalSeparator ?? format?.decimalSeparator,
-    decimalScale: colFormat?.decimalScale ?? format?.decimalScale,
+    decimalScale: colFormat?.decimalScale ?? format?.decimalScale ? Number(colFormat?.decimalScale ?? format?.decimalScale) : colFormat?.decimalScale ?? format?.decimalScale,
     allowNegative: colFormat?.allowNegative ?? format?.allowNegative,
     // check nhập số âm
     prefix: colFormat?.prefix ?? format?.prefix,
@@ -217,21 +217,21 @@ export const getDatepickerFormat = (type, format) => {
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return format?.dateFormat ?? 'dd/MM/YYYY';
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "datetime":
-      return format?.datetimeFormat ?? 'dd/MM/YYYY HH:mm';
+      return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
     case "week":
-      return format?.weekFormat ?? 'dd/MM';
+      return format?.weekFormat ?? 'DD/MM';
     case "month":
       return format?.monthFormat ?? 'MM/YYYY';
     case "quarter":
-      return format?.dateFormat ?? 'dd/MM/YYYY';
+      return format?.dateFormat ?? 'DD/MM/YYYY';
     case "year":
       return format?.yearFormat ?? 'YYYY';
     case "time":
       return format?.timeFormat ?? 'HH:mm';
     default:
-      return 'dd/MM/YYYY';
+      return 'DD/MM/YYYY';
   }
 };
 export const getDateRangeFormat = (type, format) => {
@@ -239,21 +239,21 @@ export const getDateRangeFormat = (type, format) => {
   switch (typeFormat) {
     case "date":
     case "daterange":
-      return convertFormat(format?.dateFormat ?? 'DD/MM/YYYY');
+      return convertFormat(format?.dateFormat ?? 'dd/MM/yyyy');
     case "datetime":
-      return format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm';
+      return format?.datetimeFormat ?? 'dd/MM/yyyy HH:mm';
     case "week":
-      return format?.weekFormat ?? 'DD/MM';
+      return format?.weekFormat ?? 'dd/MM';
     case "month":
-      return format?.monthFormat ?? 'MM/YYYY';
+      return format?.monthFormat ?? 'MM/yyyy';
     case "quarter":
-      return format?.dateFormat ?? 'DD/MM/YYYY';
+      return format?.dateFormat ?? 'dd/MM/yyyy';
     case "year":
-      return format?.yearFormat ?? 'YYYY';
+      return format?.yearFormat ?? 'yyyy';
     case "time":
       return format?.timeFormat ?? 'HH:mm';
     default:
-      return 'DD/MM/YYYY';
+      return 'dd/MM/yyyy';
   }
 };
 export const customWeekStartEndFormat = (value, weekFormat) => {