es-grid-template 1.9.44 → 1.9.46

package/es/table-component/body/EditableCell.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from "react";
 import { DatePicker, TimePicker, ColorPicker, Input } from "rc-master-ui";
 import { Divider, Row, Col, Button } from "antd";
-import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat, removeVietnameseTones } from "../hook/utils";
+import { checkDecimalSeparator, checkThousandSeparator, checkFieldKey, convertArrayWithIndent, convertDateToDayjs, convertLabelToTitle, getDatepickerFormat, isDisable, isEmpty, isNullOrUndefined, customWeekStartEndFormat, convertDayjsToDate, parseBooleanToValue, isColor, genPresets, getFormat, removeVietnameseTones, getDateValueType } from "../hook/utils";
 import classNames from "classnames";
 import { NumericFormat } from "react-numeric-component";
 import dayjs from "dayjs";
@@ -305,7 +305,17 @@ const EditableCell = props => {
         });
       case 'time':
         const timeFormat = getDatepickerFormat(editType, cellFormat);
-        const time = value ? dayjs(value, timeFormat) : null;
+
+        //  chỉ nhận giá trị dạng HH:mm | mm:HH => convert
+
+        let time = value ?? null;
+        const typeTime = getDateValueType(value);
+        if (typeTime === 'time') {
+          time = value ? dayjs(value, timeFormat) : null;
+        } else {
+          const abc = moment(value).format(timeFormat);
+          time = abc ? dayjs(abc, timeFormat) : null;
+        }
         const maxTimeValue = !isEmpty(column.maxTime) ? dayjs(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !isEmpty(column.minTime) ? dayjs(column.minTime).format(timeFormat) : null;
 
@@ -336,7 +346,16 @@ const EditableCell = props => {
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId,
           onChange: (newDate, dateString) => {
-            // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+            if (typeTime === 'time') {
+              onChange(dateString);
+            } else {
+              // const datetime = dayjs(dateString as string, timeFormat, true);
+
+              const newVal = moment(newDate.toDate()).format();
+
+              // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
+              onChange(newVal);
+            }
             onChange(dateString);
             setTimeout(() => {
               // @ts-ignore
@@ -349,14 +368,23 @@ const EditableCell = props => {
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = itemState;
+            let newValue = newState;
+            if (typeTime === 'time') {
+              newValue = newState;
+            } else {
+              const datetime = dayjs(newState, timeFormat, true);
+              const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : '';
+              onChange(newVal);
+              newValue = newVal;
+            }
             if (prevState !== newState) {
               handleCellChange?.({
                 key: key,
                 field: column.field ?? column.field,
                 record: formState,
                 prevState,
-                newState,
-                option: newState,
+                newState: newValue,
+                option: newValue,
                 indexCol,
                 indexRow,
                 type: 'blur'

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

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import ControlCheckbox from "../components/ControlCheckbox";
-import { checkDecimalSeparator, checkThousandSeparator, countUnselectedChildren, excludeItems, getAllChildren, getFormat, isColor, isEmpty, sortByType, toggleRowAndChildren } from "./utils";
+import { checkDecimalSeparator, checkThousandSeparator, convertToDate, countUnselectedChildren, excludeItems, getAllChildren, getFormat, isColor, isEmpty, sortByType, toggleRowAndChildren } from "./utils";
 import { numericFormatter } from 'react-numeric-component';
 import dayjs from 'dayjs';
 import moment from 'moment';
@@ -38,7 +38,10 @@ export const renderValueCell = (column, value, record, rowIndex, colIndex, forma
     case 'date':
       return value ? dayjs(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
     case 'time':
-      return value ? value : '';
+      const timeFormat = format?.timeFormat ?? 'HH:mm';
+      const abc = convertToDate(value, timeFormat);
+      const timeValue = value ? dayjs(abc).format(timeFormat) : '';
+      return timeValue ?? '';
     case 'year':
       const year = value ? moment(value).format('yyyy') : '';
       return year;

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

@@ -37,6 +37,9 @@ export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
 export declare function convertFormat(formatStr: string): string;
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const getDateRangeFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
+export type DateValueType = 'datetime' | 'time' | 'invalid';
+export declare function getDateValueType(value: unknown): DateValueType;
+export declare const convertToDate: (value?: string | Date | null, format?: string) => string;
 export declare const getTypeFilter: (col: any) => TypeFilter;
 export declare const addRowIdArray: (inputArray: any[]) => any[];
 export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;

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

@@ -171,6 +171,67 @@ export const getDateRangeFormat = (type, format) => {
       return 'dd/MM/yyyy';
   }
 };
+export function getDateValueType(value) {
+  if (typeof value !== 'string') {
+    return 'invalid';
+  }
+  const datetimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?(\.\d+)?(Z|[+-]\d{2}:\d{2})?$/;
+  const timeRegex = /^\d{2}:\d{2}(:\d{2})?$/;
+  if (datetimeRegex.test(value)) {
+    return 'datetime';
+  }
+  if (timeRegex.test(value)) {
+    return 'time';
+  }
+  return 'invalid';
+}
+export const convertToDate = (value, format) => {
+  if (!value) {
+    return '';
+  }
+  const valueType = getDateValueType(value);
+  if (valueType === 'time') {
+    const date = dayjs(value, format, true);
+    return date.isValid() ? moment(date.toDate()).format() : '';
+  }
+  if (valueType === 'datetime') {
+    return moment(value).format() ?? '';
+  }
+  if (valueType === 'invalid') {
+    return '';
+  }
+  return '';
+
+  // if (value instanceof Date) {
+  //   return moment(value).format();
+  // }
+
+  // let date: dayjs.Dayjs;
+
+  // if (format) {
+  //   const bbb = moment(value)
+
+  //   if (!bbb.isValid()) {
+
+  //     //  value dạng HH:mm
+  //     date = dayjs(value, format, true);
+
+  //   } else {
+  //     //  value dạng datetime
+
+  //     date = dayjs(bbb.format(format), format, true);
+
+  //   }
+
+  // } else {
+
+  //   // Tự nhận diện ISO, YYYY-MM-DD,...
+  //   date = dayjs(value);
+
+  // }
+
+  // return date.isValid() ? moment(date.toDate()).format() : null;
+};
 export const getTypeFilter = col => {
   if (col?.typeFilter) {
     return col.typeFilter;

package/lib/table-component/body/EditableCell.js

@@ -313,7 +313,17 @@ const EditableCell = props => {
         });
       case 'time':
         const timeFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
-        const time = value ? (0, _dayjs.default)(value, timeFormat) : null;
+
+        //  chỉ nhận giá trị dạng HH:mm | mm:HH => convert
+
+        let time = value ?? null;
+        const typeTime = (0, _utils.getDateValueType)(value);
+        if (typeTime === 'time') {
+          time = value ? (0, _dayjs.default)(value, timeFormat) : null;
+        } else {
+          const abc = (0, _moment.default)(value).format(timeFormat);
+          time = abc ? (0, _dayjs.default)(abc, timeFormat) : null;
+        }
         const maxTimeValue = !(0, _utils.isEmpty)(column.maxTime) ? (0, _dayjs.default)(column.maxTime).format(timeFormat) : null;
         const minTimeValue = !(0, _utils.isEmpty)(column.minTime) ? (0, _dayjs.default)(column.minTime).format(timeFormat) : null;
 
@@ -344,7 +354,16 @@ const EditableCell = props => {
           autoFocus: column.field === startCell?.colId,
           defaultOpen: column.field === startCell?.colId,
           onChange: (newDate, dateString) => {
-            // const newDateValue = dateString ? moment(convertDayjsToDate(dateString as string, dateFormat)).format() : null
+            if (typeTime === 'time') {
+              onChange(dateString);
+            } else {
+              // const datetime = dayjs(dateString as string, timeFormat, true);
+
+              const newVal = (0, _moment.default)(newDate.toDate()).format();
+
+              // const newVal = datetime.isValid() ? moment(datetime.toDate()).format() : ''
+              onChange(newVal);
+            }
             onChange(dateString);
             setTimeout(() => {
               // @ts-ignore
@@ -357,14 +376,23 @@ const EditableCell = props => {
             // @ts-ignore
             const prevState = record[dataIndex];
             const newState = itemState;
+            let newValue = newState;
+            if (typeTime === 'time') {
+              newValue = newState;
+            } else {
+              const datetime = (0, _dayjs.default)(newState, timeFormat, true);
+              const newVal = datetime.isValid() ? (0, _moment.default)(datetime.toDate()).format() : '';
+              onChange(newVal);
+              newValue = newVal;
+            }
             if (prevState !== newState) {
               handleCellChange?.({
                 key: key,
                 field: column.field ?? column.field,
                 record: formState,
                 prevState,
-                newState,
-                option: newState,
+                newState: newValue,
+                option: newValue,
                 indexCol,
                 indexRow,
                 type: 'blur'

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

@@ -48,7 +48,10 @@ const renderValueCell = (column, value, record, rowIndex, colIndex, format, edit
     case 'date':
       return value ? (0, _dayjs.default)(value).format(format?.dateFormat ?? 'DD/MM/YYYY') : '';
     case 'time':
-      return value ? value : '';
+      const timeFormat = format?.timeFormat ?? 'HH:mm';
+      const abc = (0, _utils.convertToDate)(value, timeFormat);
+      const timeValue = value ? (0, _dayjs.default)(abc).format(timeFormat) : '';
+      return timeValue ?? '';
     case 'year':
       const year = value ? (0, _moment.default)(value).format('yyyy') : '';
       return year;

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

@@ -37,6 +37,9 @@ export declare const getFormat: (colFormat?: IFormat, format?: IFormat) => {
 export declare function convertFormat(formatStr: string): string;
 export declare const getDatepickerFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
 export declare const getDateRangeFormat: (type: EditType | TypeFilter | IColumnType, format?: IFormat) => string;
+export type DateValueType = 'datetime' | 'time' | 'invalid';
+export declare function getDateValueType(value: unknown): DateValueType;
+export declare const convertToDate: (value?: string | Date | null, format?: string) => string;
 export declare const getTypeFilter: (col: any) => TypeFilter;
 export declare const addRowIdArray: (inputArray: any[]) => any[];
 export declare function groupArrayByColumns(arr: any[], columns: string[] | undefined): any;

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

@@ -19,7 +19,7 @@ exports.convertArrayWithIndent = void 0;
 exports.convertColumnsToTreeData = convertColumnsToTreeData;
 exports.convertFomatedDateToDate = exports.convertFlatColumn1 = exports.convertFilters = exports.convertDayjsToDate = exports.convertDateToDayjs = void 0;
 exports.convertFormat = convertFormat;
-exports.convertToObjTrue = exports.convertToObj = exports.convertLabelToTitle = void 0;
+exports.convertToObjTrue = exports.convertToObj = exports.convertToDate = exports.convertLabelToTitle = void 0;
 exports.countUnselectedChildren = countUnselectedChildren;
 exports.detectSeparators = exports.customWeekStartEndFormat = void 0;
 exports.excludeItems = excludeItems;
@@ -33,7 +33,9 @@ exports.getAllChildren = getAllChildren;
 exports.getAllVisibleKeys1 = exports.getAllVisibleKeys = exports.getAllRowKey = void 0;
 exports.getCellsByPosition = getCellsByPosition;
 exports.getColIdsBetween = getColIdsBetween;
-exports.getFormat = exports.getFixedFields = exports.getEditType = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = exports.getDateRangeFormat = exports.getCommonPinningStyles2 = exports.getCommonPinningStyles = void 0;
+exports.getDateRangeFormat = exports.getCommonPinningStyles2 = exports.getCommonPinningStyles = void 0;
+exports.getDateValueType = getDateValueType;
+exports.getFormat = exports.getFixedFields = exports.getEditType = exports.getDiffent2Array = exports.getDefaultValue = exports.getDefaultOperator = exports.getDatepickerFormat = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
 exports.getHiddenParentKeys1 = getHiddenParentKeys1;
 exports.getInvisibleColumns = getInvisibleColumns;
@@ -61,8 +63,7 @@ exports.sumFields = sumFields;
 exports.sumNumberFields = sumNumberFields;
 exports.sumSize = void 0;
 exports.toggleRowAndChildren = toggleRowAndChildren;
-exports.unFlattenData = void 0;
-exports.updateArrayByKey = void 0;
+exports.updateArrayByKey = exports.unFlattenData = void 0;
 exports.updateColumnWidthsRecursive = updateColumnWidthsRecursive;
 exports.updateColumnsByGroup = exports.updateColumns1 = void 0;
 exports.updateOrInsert = updateOrInsert;
@@ -253,6 +254,68 @@ const getDateRangeFormat = (type, format) => {
   }
 };
 exports.getDateRangeFormat = getDateRangeFormat;
+function getDateValueType(value) {
+  if (typeof value !== 'string') {
+    return 'invalid';
+  }
+  const datetimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(:\d{2})?(\.\d+)?(Z|[+-]\d{2}:\d{2})?$/;
+  const timeRegex = /^\d{2}:\d{2}(:\d{2})?$/;
+  if (datetimeRegex.test(value)) {
+    return 'datetime';
+  }
+  if (timeRegex.test(value)) {
+    return 'time';
+  }
+  return 'invalid';
+}
+const convertToDate = (value, format) => {
+  if (!value) {
+    return '';
+  }
+  const valueType = getDateValueType(value);
+  if (valueType === 'time') {
+    const date = (0, _dayjs.default)(value, format, true);
+    return date.isValid() ? (0, _moment.default)(date.toDate()).format() : '';
+  }
+  if (valueType === 'datetime') {
+    return (0, _moment.default)(value).format() ?? '';
+  }
+  if (valueType === 'invalid') {
+    return '';
+  }
+  return '';
+
+  // if (value instanceof Date) {
+  //   return moment(value).format();
+  // }
+
+  // let date: dayjs.Dayjs;
+
+  // if (format) {
+  //   const bbb = moment(value)
+
+  //   if (!bbb.isValid()) {
+
+  //     //  value dạng HH:mm
+  //     date = dayjs(value, format, true);
+
+  //   } else {
+  //     //  value dạng datetime
+
+  //     date = dayjs(bbb.format(format), format, true);
+
+  //   }
+
+  // } else {
+
+  //   // Tự nhận diện ISO, YYYY-MM-DD,...
+  //   date = dayjs(value);
+
+  // }
+
+  // return date.isValid() ? moment(date.toDate()).format() : null;
+};
+exports.convertToDate = convertToDate;
 const getTypeFilter = col => {
   if (col?.typeFilter) {
     return col.typeFilter;

package/package.json

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