es-grid-template 1.9.19 → 1.9.21

package/lib/table-component/hook/useColumns.d.ts

@@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from "react";
 import type { ColumnsTable, ColumnTable, IFormat, SelectionSettings } from '../../grid-component/type';
 import type { Cell, ColumnDef } from '@tanstack/react-table';
 export declare const renderValueCell: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat, editAble?: boolean) => any;
+export declare const getValueCellString: <T>(column: ColumnTable<T>, value: any, record: T, rowIndex: number, colIndex: number, format?: IFormat) => any;
 export declare function convertToTanStackColumns<T>({ t, columns, format, editAble }: {
     t?: any;
     columns: ColumnsTable<T>;

package/lib/table-component/hook/useColumns.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.convertToTanStackColumns = convertToTanStackColumns;
-exports.toggleRowSelection = exports.renderValueCell = void 0;
+exports.toggleRowSelection = exports.renderValueCell = exports.getValueCellString = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ControlCheckbox = _interopRequireDefault(require("../components/ControlCheckbox"));
 var _utils = require("./utils");
@@ -51,7 +51,7 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
       return value ? value : '';
     case 'year':
       const year = value ? (0, _moment.default)(value).format('yyyy') : '';
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, year);
+      return year;
     case 'datetime':
       return value ? (0, _moment.default)(value).format(format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
     case 'boolean':
@@ -87,6 +87,62 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
   }
 };
 exports.renderValueCell = renderValueCell;
+const getValueCellString = (column, value, record, rowIndex, colIndex, format) => {
+  const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
+  const cellFormat = (0, _utils.getFormat)(colFormat, format);
+  switch (column?.type) {
+    case 'number':
+      // 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 numericFormatProps = {
+        thousandSeparator: (0, _utils.checkThousandSeparator)(thousandSeparator, decimalSeparator),
+        decimalSeparator: (0, _utils.checkDecimalSeparator)(thousandSeparator, decimalSeparator),
+        allowNegative: cellFormat?.allowNegative ?? true,
+        prefix: cellFormat?.prefix,
+        suffix: cellFormat?.suffix,
+        decimalScale: dec,
+        fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+      };
+
+      // if ( typeof value === "string") {
+      //   const ttt =  removeNumericFormat(value, undefined, numericFormatProps )
+      //
+      // }
+
+      const contentNumber = !(0, _utils.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'
+
+      return !(0, _utils.isEmpty)(contentNumber) ? (0, _reactNumericComponent.numericFormatter)(contentNumber, numericFormatProps) : '';
+    case 'date':
+      return value ? (0, _dayjs.default)(value).format(cellFormat?.dateFormat ?? 'DD/MM/YYYY') : '';
+    case 'time':
+      return value ? value : '';
+    case 'year':
+      const year = value ? (0, _moment.default)(value).format('yyyy') : '';
+      return year;
+    case 'datetime':
+      return value ? (0, _moment.default)(value).format(cellFormat?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : '';
+    case 'boolean':
+      return value ? 'true' : 'false';
+      const nameFile = typeof value === 'object' && !Array.isArray(value) ? value.name : Array.isArray(value) ? value.map(it => typeof it === 'object' ? it.name : it).filter(Boolean).join(", ") : '';
+      return value ? nameFile : '';
+    default:
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+      return value;
+  }
+};
+exports.getValueCellString = getValueCellString;
 function convertToTanStackColumns({
   t,
   columns,

package/lib/table-component/hook/utils.d.ts

@@ -67,6 +67,8 @@ export declare const detectSeparators: (str: string) => {
     thousandSeparator: string;
     decimalSeparator: string;
 };
+export declare const isDateValue: (value: any) => boolean;
+export declare const convertFomatedDateToDate: (value: string) => Date | null;
 export declare function isDateString(str: any): boolean;
 export declare function compareDates(date1: any, date2: any): boolean;
 export declare function compareDate(itemValue: any, value: any): boolean;

package/lib/table-component/hook/utils.js

@@ -17,7 +17,7 @@ exports.compareDate = compareDate;
 exports.compareDates = compareDates;
 exports.convertArrayWithIndent = void 0;
 exports.convertColumnsToTreeData = convertColumnsToTreeData;
-exports.convertFlatColumn1 = exports.convertFilters = exports.convertDayjsToDate = exports.convertDateToDayjs = void 0;
+exports.convertFomatedDateToDate = exports.convertFlatColumn1 = exports.convertFilters = exports.convertDayjsToDate = exports.convertDateToDayjs = void 0;
 exports.convertFormat = convertFormat;
 exports.convertToObjTrue = exports.convertToObj = exports.convertLabelToTitle = void 0;
 exports.countUnselectedChildren = countUnselectedChildren;
@@ -44,7 +44,7 @@ exports.getVisibleFields = getVisibleFields;
 exports.groupArrayByColumns = groupArrayByColumns;
 exports.isColor = void 0;
 exports.isDateString = isDateString;
-exports.isEmpty = exports.isEditable = exports.isDisable = void 0;
+exports.isEmpty = exports.isEditable = exports.isDisable = exports.isDateValue = void 0;
 exports.isEqualSet = isEqualSet;
 exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isFormattedNumber = void 0;
 exports.isObjEqual = isObjEqual;
@@ -61,7 +61,8 @@ exports.sumFields = sumFields;
 exports.sumNumberFields = sumNumberFields;
 exports.sumSize = void 0;
 exports.toggleRowAndChildren = toggleRowAndChildren;
-exports.updateArrayByKey = exports.unFlattenData = void 0;
+exports.unFlattenData = void 0;
+exports.updateArrayByKey = void 0;
 exports.updateColumnWidthsRecursive = updateColumnWidthsRecursive;
 exports.updateColumnsByGroup = exports.updateColumns1 = void 0;
 exports.updateOrInsert = updateOrInsert;
@@ -825,6 +826,174 @@ const detectSeparators = str => {
   return null;
 };
 exports.detectSeparators = detectSeparators;
+const isDateValue = value => {
+  if (value === null || value === undefined) {
+    return false;
+  }
+
+  // Date object
+  if (value instanceof Date) {
+    return !isNaN(value.getTime());
+  }
+
+  // number timestamp
+  if (typeof value === 'number') {
+    const date = new Date(value);
+    return !isNaN(date.getTime());
+  }
+  if (typeof value !== 'string') return false;
+  const str = value.trim();
+  if (!str) {
+    return false;
+  }
+
+  // Các format date phổ biến
+  const patterns = [
+  // dd/MM/yyyy
+  /^\d{2}\/\d{2}\/\d{4}$/,
+  // d/M/yyyy
+  /^\d{1,2}\/\d{1,2}\/\d{4}$/,
+  // yyyy/MM/dd
+  /^\d{4}\/\d{2}\/\d{2}$/,
+  // yyyy/M/d
+  /^\d{4}\/\d{1,2}\/\d{1,2}$/,
+  // MM/yyyy
+  /^\d{2}\/\d{4}$/,
+  // M/yyyy
+  /^\d{1,2}\/\d{4}$/,
+  // yyyy/MM
+  /^\d{4}\/\d{2}$/,
+  // yyyy/M
+  /^\d{4}\/\d{1,2}$/,
+  // dd-MM-yyyy
+  /^\d{2}-\d{2}-\d{4}$/,
+  // yyyy-MM-dd
+  /^\d{4}-\d{2}-\d{2}$/,
+  // yyyy-M-d
+  /^\d{4}-\d{1,2}-\d{1,2}$/,
+  // ISO datetime
+  /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/,
+  // ISO datetime milliseconds
+  /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z?$/,
+  // yyyyMMdd
+  /^\d{8}$/,
+  // dd MMM yyyy
+  /^\d{1,2}\s[A-Za-z]{3}\s\d{4}$/,
+  // MMM dd, yyyy
+  /^[A-Za-z]{3}\s\d{1,2},\s\d{4}$/,
+  // full text date
+  /^[A-Za-z]+,\s[A-Za-z]+\s\d{1,2},\s\d{4}$/];
+  const matched = patterns.some(regex => regex.test(str));
+  if (matched) {
+    return true;
+  }
+
+  // fallback:
+  // nếu regex không match nhưng Date parse được
+  if (!matched) {
+    const fallbackDate = new Date(str);
+    return !isNaN(fallbackDate.getTime());
+  }
+
+  // validate real date
+  const date = new Date(str);
+  return !isNaN(date.getTime());
+};
+exports.isDateValue = isDateValue;
+const convertFomatedDateToDate = value => {
+  const monthMap = {
+    Jan: 0,
+    Feb: 1,
+    Mar: 2,
+    Apr: 3,
+    May: 4,
+    Jun: 5,
+    Jul: 6,
+    Aug: 7,
+    Sep: 8,
+    Oct: 9,
+    Nov: 10,
+    Dec: 11
+  };
+  let date = null;
+
+  // dd/MM/yyyy | d/M/yyyy
+  if (/^\d{1,2}\/\d{1,2}\/\d{4}$/.test(value)) {
+    const [d, m, y] = value.split('/').map(Number);
+    date = new Date(y, m - 1, d);
+  }
+
+  // yyyy/MM/dd | yyyy/M/d
+  else if (/^\d{4}\/\d{1,2}\/\d{1,2}$/.test(value)) {
+    const [y, m, d] = value.split('/').map(Number);
+    date = new Date(y, m - 1, d);
+  }
+
+  // MM/yyyy | M/yyyy
+  else if (/^\d{1,2}\/\d{4}$/.test(value)) {
+    const [m, y] = value.split('/').map(Number);
+    date = new Date(y, m - 1, 1);
+  }
+
+  // yyyy/MM | yyyy/M
+  else if (/^\d{4}\/\d{1,2}$/.test(value)) {
+    const [y, m] = value.split('/').map(Number);
+    date = new Date(y, m - 1, 1);
+  }
+
+  // dd-MM-yyyy
+  else if (/^\d{2}-\d{2}-\d{4}$/.test(value)) {
+    const [d, m, y] = value.split('-').map(Number);
+    date = new Date(y, m - 1, d);
+  }
+
+  // yyyy-MM-dd | yyyy-M-d
+  else if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(value)) {
+    const [y, m, d] = value.split('-').map(Number);
+    date = new Date(y, m - 1, d);
+  }
+
+  // ISO datetime
+  else if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/.test(value)) {
+    date = new Date(value);
+  }
+
+  // ISO datetime milliseconds
+  else if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z?$/.test(value)) {
+    date = new Date(value);
+  }
+
+  // yyyyMMdd
+  else if (/^\d{8}$/.test(value)) {
+    const y = Number(value.slice(0, 4));
+    const m = Number(value.slice(4, 6));
+    const d = Number(value.slice(6, 8));
+    date = new Date(y, m - 1, d);
+  }
+
+  // dd MMM yyyy
+  else if (/^\d{1,2}\s[A-Za-z]{3}\s\d{4}$/.test(value)) {
+    const [d, mon, y] = value.split(' ');
+    date = new Date(Number(y), monthMap[mon], Number(d));
+  }
+
+  // MMM dd, yyyy
+  else if (/^[A-Za-z]{3}\s\d{1,2},\s\d{4}$/.test(value)) {
+    const [mon, dayComma, y] = value.split(' ');
+    const d = Number(dayComma.replace(',', ''));
+    date = new Date(Number(y), monthMap[mon], d);
+  }
+
+  // full text date
+  else if (/^[A-Za-z]+,\s[A-Za-z]+\s\d{1,2},\s\d{4}$/.test(value)) {
+    date = new Date(value);
+  }
+  if (!date || isNaN(date.getTime())) {
+    return null;
+  }
+  return date;
+};
+exports.convertFomatedDateToDate = convertFomatedDateToDate;
 function isDate(value) {
   if (value instanceof Date) {
     return !isNaN(value.getTime());
@@ -885,8 +1054,11 @@ const shouldInclude = (item, queries, ignoreAccents) => {
     } = query;
     const itemValue = item[field];
     let condition = false;
-    const isDateComparison = isDate(itemValue) || isDateString(value);
-    const itemDate = isDateComparison ? new Date(itemValue) : null;
+
+    // const aaa =  convertFomatedDateToDate('25/01/2026')
+
+    const isDateComparison = isDate(itemValue) || isDateString(value) || isDateValue(itemValue) || isDateValue(value);
+    const itemDate = isDateComparison ? isNaN(new Date(itemValue).getTime()) ? convertFomatedDateToDate(itemValue) : new Date(itemValue) : null;
     const queryDate = isDateComparison ? parseToDate(value) : null;
     const itemStr = removeVietnameseTones(itemValue?.toString().toLowerCase?.() ?? '');
     const queryStr = removeVietnameseTones(value?.toString().toLowerCase?.() ?? '');

package/lib/table-virtuoso/body/TableBodyRow.js

@@ -73,7 +73,6 @@ const TableBodyRow = ({
           rowData: row.original,
           field: colKey
         })(e);
-        onContextMenu?.(row.original)(e);
       }
     }
   }), visibleCells.map(cell => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "es-grid-template",
-  "version": "1.9.19",
+  "version": "1.9.21",
   "description": "es-grid-template",
   "keywords": [
     "react",