es-grid-template 1.9.38 → 1.9.39

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

@@ -194,10 +194,10 @@ export declare const fixColumnsLeft: <RecordType>(columns: ColumnTable<RecordTyp
         value: any;
         rowData: RecordType;
     }) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactNode);
-    onCellStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width">);
-    onCellHeaderStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width">);
+    onCellStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Cell<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
+    onCellHeaderStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
     onCell?: (rowData: RecordType, index: number) => import("react").TdHTMLAttributes<HTMLTableCellElement>;
-    onCellFooterStyles?: Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "right" | "left" | "position" | "display" | "minWidth" | "width">);
+    onCellFooterStyles?: Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display"> | ((cellValue: any, cell: import("@tanstack/react-table").Header<RecordType, unknown>) => Omit<CSSProperties, "width" | "minWidth" | "right" | "left" | "position" | "display">);
     getValue?: (row: any, rowIndex: number) => any;
     getCellProps?: (value: any, row: any, rowIndex: number) => import("./../../grid-component/type").CellProps;
     headerCellProps?: import("./../../grid-component/type").CellProps;

package/es/table-component/InternalTable.js

@@ -182,16 +182,23 @@ const InternalTable = props => {
           colorLink: '#eb4619',
           colorLinkHover: '#eb4619'
         },
+        TableSelect: {
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
+        },
         Select: {
           activeBorderColor: '#1677ff',
-          hoverBorderColor: '#1677ff'
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
           // colorPrimary: '#eb4619',
           // colorBgBase: 'red'
         },
         DatePicker: {
           colorPrimary: '#eb4619',
           activeBorderColor: '#1677ff',
-          hoverBorderColor: '#1677ff'
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
         },
         Pagination: {
           fontSize: 12

package/es/table-component/TableContainerEdit.js

@@ -1,7 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment } from "react";
 import { useCopyToClipboard } from 'usehooks-ts';
-import { checkDecimalSeparator, checkThousandSeparator, detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDefaultValue, getEditType, getFormat, getRowIdsBetween, getSelectedCellMatrix, getTableHeight, isEditable, isFormattedNumber, newGuid, parseExcelClipboard,
+import { checkDecimalSeparator, checkThousandSeparator,
+// convertDateToDayjs,
+detectSeparators, findItemByKey, flattenArray, flattenData, getAllRowKey, getColIdsBetween, getDatepickerFormat,
+// getDatepickerFormat,
+getDefaultValue, getEditType, getFormat, getRowIdsBetween, getSelectedCellMatrix, getTableHeight, isDateValue, isEditable, isEmpty, isFormattedNumber, newGuid, parseExcelClipboard,
 // parseExcelClipboardText,
 sumSize,
 // sumSize,
@@ -24,6 +28,7 @@ import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import { useLocale } from "rc-master-ui/es/locale";
 import { getToolbarTemplate } from "../grid-component/hooks";
+import moment from "moment";
 const MySwal = withReactContent(Swal);
 const {
   Paragraph,
@@ -409,6 +414,17 @@ const TableContainerEdit = props => {
                   [columnKey]: Number(val)
                 };
               }
+            } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
+              const isDate = isDateValue(cellValue.trim());
+              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
+              const cellFormat = getFormat(colFormat, format);
+              const editType = getEditType(columnOri);
+              const dateFormat = getDatepickerFormat(editType, cellFormat);
+              const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: date
+              };
             } else {
               newData[targetRow] = {
                 ...newData[targetRow],
@@ -474,8 +490,6 @@ const TableContainerEdit = props => {
 
           if (isEdit) {
             const columnKey = allCols[targetCol].id;
-
-            // if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
             if (columnOri.type === 'number') {
               if (cellValue.trim() === '') {
                 childData[targetRow] = {
@@ -505,6 +519,17 @@ const TableContainerEdit = props => {
                   [columnKey]: Number(val)
                 };
               }
+            } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
+              const isDate = isDateValue(cellValue.trim());
+              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
+              const cellFormat = getFormat(colFormat, format);
+              const editType = getEditType(columnOri);
+              const dateFormat = getDatepickerFormat(editType, cellFormat);
+              const date = isDate && !isEmpty(cellValue.trim()) ? moment(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+              childData[targetRow] = {
+                ...childData[targetRow],
+                [columnKey]: date
+              };
             } else {
               childData[targetRow] = {
                 ...childData[targetRow],

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { useContext } from "react";
-import { DatePicker, TimePicker, ColorPicker } from "rc-master-ui";
-import { Divider, Row, Col, Input, Button } from "antd";
+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 classNames from "classnames";
 import { NumericFormat } from "react-numeric-component";

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

@@ -1,6 +1,6 @@
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-import { getCommonPinningStyles } from "../hook/utils";
+import { getCommonPinningStyles, getFormat } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
@@ -182,7 +182,7 @@ const TableBodyCell = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
   const record = cell.row.original;
-  const columnMeta = cell.column.columnDef.meta ?? {};
+  const columnMeta = React.useMemo(() => cell.column.columnDef.meta ?? {}, [cell.column.columnDef.meta]);
   const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
 
   // const tooltipContent: any = (isOpenTooltip === false)
@@ -208,7 +208,9 @@ const TableBodyCell = props => {
   const parrents = cell.row.getParentRows();
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
+  const cellFormat = getFormat(colFormat, format);
+  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
   const valueCellString = getValueCellString(columnMeta, cellValue, record, rowIndex, colIndex, format);
   const tooltipContent = React.useMemo(() => {
     if (isOpenTooltip === false) {

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

@@ -1,6 +1,6 @@
 import Space from "rc-master-ui/es/space";
 import Command from "../components/command/Command";
-import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getEditType, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
+import { addRowsDown, addRowsDownWithCtrl, addRowsUp, addRowsUpWithCtrl, findFirst, flattenArray, flattenData, getColIdsBetween, getCommonPinningStyles, getEditType, getFormat, getRowIdsBetween, getSelectedCellMatrix, isEditable, isObjEmpty, isObjEqual, newGuid, unFlattenData, updateOrInsert } from "../hook/utils";
 import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
 import classNames from "classnames";
 import React from "react";
@@ -1113,7 +1113,9 @@ const TableBodyCellEdit = props => {
   };
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, format, true);
+  const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
+  const cellFormat = getFormat(colFormat, format);
+  const fomatedValue = renderValueCell(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
   return /*#__PURE__*/React.createElement("div", {
     key: cell.id,
     ref: el => {

package/es/table-component/header/TableHeadCell2.js

@@ -182,6 +182,10 @@ const TableHeadCell2 = props => {
         onChange: val => {
           column.setFilterOperator(val);
         }
+        // dropdownStyle={{
+
+        //   zIndex: 1059
+        // }}
       })), /*#__PURE__*/React.createElement("div", {
         style: {
           marginBottom: 8

package/lib/table-component/InternalTable.js

@@ -191,16 +191,23 @@ const InternalTable = props => {
           colorLink: '#eb4619',
           colorLinkHover: '#eb4619'
         },
+        TableSelect: {
+          activeBorderColor: '#1677ff',
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
+        },
         Select: {
           activeBorderColor: '#1677ff',
-          hoverBorderColor: '#1677ff'
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
           // colorPrimary: '#eb4619',
           // colorBgBase: 'red'
         },
         DatePicker: {
           colorPrimary: '#eb4619',
           activeBorderColor: '#1677ff',
-          hoverBorderColor: '#1677ff'
+          hoverBorderColor: '#1677ff',
+          zIndexPopup: 1059
         },
         Pagination: {
           fontSize: 12

package/lib/table-component/TableContainerEdit.js

@@ -27,6 +27,7 @@ var _sweetalert2ReactContent = _interopRequireDefault(require("sweetalert2-react
 var _sweetalert = _interopRequireDefault(require("sweetalert2"));
 var _locale = require("rc-master-ui/es/locale");
 var _hooks = require("../grid-component/hooks");
+var _moment = _interopRequireDefault(require("moment"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const MySwal = (0, _sweetalert2ReactContent.default)(_sweetalert.default);
@@ -414,6 +415,17 @@ const TableContainerEdit = props => {
                   [columnKey]: Number(val)
                 };
               }
+            } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
+              const isDate = (0, _utils.isDateValue)(cellValue.trim());
+              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
+              const cellFormat = (0, _utils.getFormat)(colFormat, format);
+              const editType = (0, _utils.getEditType)(columnOri);
+              const dateFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
+              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+              newData[targetRow] = {
+                ...newData[targetRow],
+                [columnKey]: date
+              };
             } else {
               newData[targetRow] = {
                 ...newData[targetRow],
@@ -479,8 +491,6 @@ const TableContainerEdit = props => {
 
           if (isEdit) {
             const columnKey = allCols[targetCol].id;
-
-            // if (columnOri.type === 'number' && isFormattedNumber(cellValue.trim())) {
             if (columnOri.type === 'number') {
               if (cellValue.trim() === '') {
                 childData[targetRow] = {
@@ -510,6 +520,17 @@ const TableContainerEdit = props => {
                   [columnKey]: Number(val)
                 };
               }
+            } else if (columnOri.type === 'data' || columnOri.type === 'datatime' || columnOri.editType === 'date' || columnOri.editType === 'datetime') {
+              const isDate = (0, _utils.isDateValue)(cellValue.trim());
+              const colFormat = typeof columnOri?.format === 'function' ? columnOri?.format(record) : columnOri?.format;
+              const cellFormat = (0, _utils.getFormat)(colFormat, format);
+              const editType = (0, _utils.getEditType)(columnOri);
+              const dateFormat = (0, _utils.getDatepickerFormat)(editType, cellFormat);
+              const date = isDate && !(0, _utils.isEmpty)(cellValue.trim()) ? (0, _moment.default)(cellValue.trim(), dateFormat).format("YYYY-MM-DDTHH:mm:ssZ") : null;
+              childData[targetRow] = {
+                ...childData[targetRow],
+                [columnKey]: date
+              };
             } else {
               childData[targetRow] = {
                 ...childData[targetRow],

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

@@ -29,7 +29,7 @@ const {
 } = _rcMasterUi.TreeSelect;
 const {
   TextArea
-} = _antd.Input;
+} = _rcMasterUi.Input;
 const filterTreeNode = (input, treeNode) => {
   const {
     title,
@@ -1039,7 +1039,7 @@ const EditableCell = props => {
         }, numericFormatProps, {
           min: column.min,
           max: column.max,
-          customInput: _antd.Input
+          customInput: _rcMasterUi.Input
           // valueIsNumericString={true}
           ,
           placeholder: t && column.placeholder ? t(column.placeholder) : tableLocal?.textPlaceholder,

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

@@ -189,7 +189,7 @@ const TableBodyCell = props => {
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const [isOpenTooltip, setIsOpenTooltip] = _react.default.useState(false);
   const record = cell.row.original;
-  const columnMeta = cell.column.columnDef.meta ?? {};
+  const columnMeta = _react.default.useMemo(() => cell.column.columnDef.meta ?? {}, [cell.column.columnDef.meta]);
   const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
 
   // const tooltipContent: any = (isOpenTooltip === false)
@@ -215,7 +215,9 @@ const TableBodyCell = props => {
   const parrents = cell.row.getParentRows();
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, false);
+  const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
+  const cellFormat = (0, _utils.getFormat)(colFormat, format);
+  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
   const valueCellString = (0, _useColumns.getValueCellString)(columnMeta, cellValue, record, rowIndex, colIndex, format);
   const tooltipContent = _react.default.useMemo(() => {
     if (isOpenTooltip === false) {

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

@@ -1120,7 +1120,9 @@ const TableBodyCellEdit = props => {
   };
   const cellValue = cell.getValue();
   const rowIndex = cell.row.index;
-  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, format, true);
+  const colFormat = typeof columnMeta?.format === 'function' ? columnMeta?.format(record) : columnMeta?.format;
+  const cellFormat = (0, _utils.getFormat)(colFormat, format);
+  const fomatedValue = (0, _useColumns.renderValueCell)(columnMeta, cellValue, record, rowIndex, colIndex, cellFormat, true);
   return /*#__PURE__*/_react.default.createElement("div", {
     key: cell.id,
     ref: el => {

package/lib/table-component/header/TableHeadCell2.js

@@ -191,6 +191,10 @@ const TableHeadCell2 = props => {
         onChange: val => {
           column.setFilterOperator(val);
         }
+        // dropdownStyle={{
+
+        //   zIndex: 1059
+        // }}
       })), /*#__PURE__*/_react.default.createElement("div", {
         style: {
           marginBottom: 8

package/package.json

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