es-grid-template 0.1.1 → 0.1.2-1

package/lib/grid-component/GridStyle.js

@@ -9,4 +9,4 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 const GridStyle = exports.GridStyle = _styledComponents.default.div.withConfig({
   displayName: "GridStyle",
   componentId: "es-grid-template__sc-sueu2e-0"
-})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);
+})([".ui-rc-pagination{border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin:0;padding:.75rem 1rem;.ui-rc-pagination-total-text{order:2;margin-left:auto;}&::before{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;left:0;z-index:-1;}&::after{content:\"\";position:absolute;border-left:1px solid #e0e0e0;height:", ";bottom:0;visibility:visible;right:0;z-index:-1;}}.react-resizable{position:relative;background-clip:padding-box;}.react-resizable-handle{position:absolute;right:0px;bottom:0;z-index:1;width:5px;height:100%;cursor:col-resize;&.none{cursor:auto;display:none;}}"], props => props.heightTable ? typeof props.heightTable === 'string' ? props.heightTable : `${props.heightTable}px` : undefined, props => props.heightTable ? `${props.heightTable}px` : undefined);

package/lib/grid-component/InternalTable.js

@@ -65,6 +65,7 @@ const InternalTable = props => {
     onFilterClick,
     editAble,
     rowKey,
+    onDataChange,
     ...rest
   } = props;
   const locale = lang && lang === 'en' ? _en_US.default : _vi_VN.default;
@@ -95,11 +96,9 @@ const InternalTable = props => {
     if (typeof rowKey === 'function') {
       return rowKey;
     }
-
     // @ts-ignore
     return record => record?.[rowKey];
   }, [rowKey]);
-  console.log('getRowKey', getRowKey);
   const handleSearch = (selectedKeys, confirm) => {
     confirm();
   };
@@ -240,32 +239,37 @@ const InternalTable = props => {
     return cols.map((col, index) => {
       const currentPath = [...parentPath, index];
       // @ts-ignore
-      if (!col?.dataIndex && !col.key) {
+      if (!col?.dataIndex && !col.key && !col.field) {
         return col;
       }
+      const transformedColumn = {
+        ...col,
+        dataIndex: col.field ?? col.dataIndex,
+        title: t ? t(col.headerText ?? col.title) : col.headerText ?? col.title,
+        ellipsis: col.ellipsis !== false,
+        align: col.textAlign ?? col.align,
+        fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed
+      };
       if (col.children) {
         return {
-          ...col,
-          title: col.headerText ?? col.title,
-          ellipsis: col.ellipsis !== false,
+          ...transformedColumn,
           children: transformColumns(col.children, currentPath)
         };
       }
       if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
         return {
-          ...col,
-          title: col.headerText ?? col.title,
-          ellipsis: col.ellipsis !== false
+          ...transformedColumn
         };
       }
       return {
         ...getColumnSearchProps(col),
-        ...col,
-        dataIndex: col.field ?? col.dataIndex,
-        title: col.headerText ?? col.title,
-        ellipsis: col.ellipsis !== false,
-        align: col.textAlign ?? col.align,
-        fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed,
+        ...transformedColumn,
+        // dataIndex: col.field ?? col.dataIndex,
+        // key: col.field ?? col.dataIndex ?? col.key,
+        // title: col.headerText ?? col.title,
+        // ellipsis: col.ellipsis !== false,
+        // align: col.textAlign ?? col.align,
+        // fixed: col.frozen ? col.frozen.toLowerCase() : col.fixed,
         onFilter: (value, record) => {
           // @ts-ignore
           return record[col.field ?? col.dataIndex];
@@ -284,7 +288,11 @@ const InternalTable = props => {
   // console.log('mergedColumns', mergedColumns)
 
   const triggerChangeColumns = () => {};
-  const triggerChangeData = () => {};
+  const triggerChangeData = newData => {
+    setIsManualUpdate(true);
+    setData(newData);
+    onDataChange?.(newData);
+  };
   const TableComponent = editAble ? _GridEdit.default : _Grid.default;
   return /*#__PURE__*/_react.default.createElement(TableComponent, (0, _extends2.default)({}, rest, {
     tableRef: tableRef,

package/lib/grid-component/TableGrid.js

@@ -287,7 +287,8 @@ const TableGrid = props => {
         });
       } else {
         // @ts-ignore
-        setMergedSelectedKeys([selectedRow[rowKey]]);
+        // setMergedSelectedKeys([selectedRow[rowKey]])
+
         rowSelected?.({
           selected: [selectedRow],
           type: 'rowSelected',

package/lib/grid-component/async-select/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { BaseOptionType, DefaultOptionType } from "rc-select/lib/Select";
+import type { SelectProps } from "rc-master-ui/es/select";
+export interface DebounceSelectProps<OptionType extends BaseOptionType = DefaultOptionType> extends SelectProps {
+    loadOptions?: (search: string, callback: (newOptions: OptionType[]) => void) => void;
+    debounceTimeout?: number;
+    defaultOptions?: OptionType[];
+}
+export declare function AsyncSelect<OptionType extends BaseOptionType>({ loadOptions, debounceTimeout, defaultOptions, ...props }: DebounceSelectProps<OptionType>): React.JSX.Element;

package/lib/grid-component/async-select/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AsyncSelect = AsyncSelect;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _rcMasterUi = require("rc-master-ui");
+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; }
+function AsyncSelect({
+  loadOptions,
+  debounceTimeout = 500,
+  defaultOptions,
+  ...props
+}) {
+  const [options, setOptions] = (0, _react.useState)(defaultOptions ?? []);
+  const debounceFetcher = (0, _react.useMemo)(() => {
+    const fetchOptions = value => {
+      if (value.trim().length === 0) {
+        setOptions(defaultOptions ?? []);
+        return;
+      }
+      if (loadOptions) {
+        loadOptions(value, newOptions => {
+          setOptions(newOptions);
+        });
+      }
+    };
+    return (0, _debounce.default)(fetchOptions, debounceTimeout);
+  }, [loadOptions, debounceTimeout]);
+  (0, _react.useEffect)(() => {
+    setOptions(defaultOptions ?? []);
+  }, [defaultOptions]);
+  return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, (0, _extends2.default)({}, props, {
+    filterOption: loadOptions ? false : props?.filterOption,
+    onSearch: debounceFetcher,
+    onSelect: () => setOptions(defaultOptions ?? []),
+    options: options
+  }));
+}

package/lib/grid-component/hooks/constant.d.ts

@@ -60,3 +60,13 @@ declare const SortOrder: {
     descend: string;
 };
 export default SortOrder;
+export declare const valueToBoolean: {
+    true: boolean;
+    false: boolean;
+    1: boolean;
+    0: boolean;
+};
+export declare const booleanToValue: {
+    true: number;
+    false: number;
+};

package/lib/grid-component/hooks/constant.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.translateOption = exports.transferFontSize = exports.stringOperator = exports.paperSize = exports.optionsSize = exports.optionsPaperOrientation = exports.optionFontSize = exports.optionFont = exports.numberOperator = exports.defaultWidth = exports.defaultTimeFormat = exports.defaultRowHeight = exports.defaultPageSizes = exports.defaultDateTimeFormat = exports.defaultDateFormat = exports.default = exports.dateTimeOperator = exports.dateOperator = exports.booleanOperator = exports.alignToFlex = void 0;
+exports.valueToBoolean = exports.translateOption = exports.transferFontSize = exports.stringOperator = exports.paperSize = exports.optionsSize = exports.optionsPaperOrientation = exports.optionFontSize = exports.optionFont = exports.numberOperator = exports.defaultWidth = exports.defaultTimeFormat = exports.defaultRowHeight = exports.defaultPageSizes = exports.defaultDateTimeFormat = exports.defaultDateFormat = exports.default = exports.dateTimeOperator = exports.dateOperator = exports.booleanToValue = exports.booleanOperator = exports.alignToFlex = void 0;
 const defaultWidth = exports.defaultWidth = 100;
 const defaultRowHeight = exports.defaultRowHeight = 35;
 const numberOperator = exports.numberOperator = [{
@@ -233,4 +233,14 @@ const SortOrder = {
    */
   descend: 'Descending'
 };
-var _default = exports.default = SortOrder;
+var _default = exports.default = SortOrder;
+const valueToBoolean = exports.valueToBoolean = {
+  true: true,
+  false: false,
+  1: true,
+  0: false
+};
+const booleanToValue = exports.booleanToValue = {
+  true: 1,
+  false: 0
+};

package/lib/grid-component/hooks/useColumns/index.js

@@ -17,6 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 // import * as React from 'react'
 
+// import {ColorPicker} from "antd";
 const {
   RangePicker
 } = _rcMasterUi.DatePicker;
@@ -72,13 +73,15 @@ const getValueCell = (column, value, format) => {
     case 'boolean':
       return value ? 'true' : 'false';
     case 'color':
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, (0, _utils.isColor)(value) ? /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
         className: 'w-100 h-100',
         style: {
-          backgroundColor: value,
-          border: '1px solid #f0f0f0'
+          backgroundColor: (0, _utils.isColor)(value) ? value : '#fff',
+          border: '1px solid #f0f0f0',
+          height: '100%',
+          minHeight: 20
         }
-      }) : '');
+      }));
     case 'checkbox':
       return /*#__PURE__*/_react.default.createElement(_rcMasterUi.Input, {
         checked: !!content,

package/lib/grid-component/hooks/utils.d.ts

@@ -33,3 +33,5 @@ export declare const totalFixedWidth: <T>(columns: ColumnsType<T>, type: 'left'
 export declare const isObjEmpty: (obj: any) => boolean;
 export declare const getColumnsVisible: <T>(columns: ColumnsType<T>, index: number) => import("../type").ColumnType<T>[];
 export declare const updateData: <Record_1 = AnyObject>(initData: Record_1[], rows: Record_1[], key: keyof Record_1) => Record_1[];
+export declare const parseBooleanToValue: (value: boolean, type: 'boolean' | 'number') => number | boolean;
+export declare const genPresets: (presets?: import("@ant-design/colors").PalettesProps) => import("antd/es/color-picker/interface").PresetsItem[];

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

@@ -4,12 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getEditType = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.customWeekStartEndFormat = exports.convertLabelToTitle = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = void 0;
+exports.getEditType = exports.getDatepickerFormat = exports.getDateString = exports.getColumnsVisible = exports.getAllVisibleKeys = exports.genPresets = exports.customWeekStartEndFormat = exports.convertLabelToTitle = exports.convertDayjsToDate = exports.convertDateToDayjs = exports.convertArrayWithIndent = exports.checkThousandSeparator = exports.checkFieldKey = exports.checkDecimalSeparator = void 0;
 exports.getHiddenParentKeys = getHiddenParentKeys;
-exports.updateData = exports.updateColumns = exports.updateArrayByKey = exports.totalFixedWidth = exports.sumDataByField = exports.newGuid = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isDisable = exports.isColor = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = void 0;
+exports.updateData = exports.updateColumns = exports.updateArrayByKey = exports.totalFixedWidth = exports.sumDataByField = exports.parseBooleanToValue = exports.newGuid = exports.isObjEmpty = exports.isNullOrUndefined = exports.isNameColor = exports.isEmpty = exports.isDisable = exports.isColor = exports.getVisibleColumnKeys = exports.getTypeFilter = exports.getTemplate = void 0;
 var _dayjs = _interopRequireDefault(require("dayjs"));
 var _moment = _interopRequireDefault(require("moment/moment"));
 var _uuid = require("uuid");
+var _colors = require("@ant-design/colors");
 const newGuid = () => {
   for (let i = 0; i < 20; i++) {
     // @ts-ignore
@@ -354,4 +355,16 @@ const updateData = (initData, rows, key) => {
   const newRows = rows.filter(row => !initData.some(item => item[key] === row[key]));
   return [...updatedData, ...newRows];
 };
-exports.updateData = updateData;
+exports.updateData = updateData;
+const parseBooleanToValue = (value, type) => {
+  return type === 'boolean' ? value : Number(value);
+};
+exports.parseBooleanToValue = parseBooleanToValue;
+const genPresets = (presets = _colors.presetPalettes) => {
+  return Object.entries(presets).map(([label, colors]) => ({
+    label,
+    colors,
+    key: label
+  }));
+};
+exports.genPresets = genPresets;

package/lib/grid-component/index.d.ts

@@ -1,4 +1,5 @@
 import InternalTable from './InternalTable';
-import type { ColumnsTable, TableProps, ColumnTable } from './type';
-export type { ColumnsTable, TableProps, ColumnTable };
+import type { ColumnsTable, TableProps, ColumnTable, CommandItem, ContextMenuItem } from './type';
+import type { ToolbarItem } from "rc-master-ui/es/toolbar";
+export type { ColumnsTable, TableProps, ColumnTable, ToolbarItem, CommandItem, ContextMenuItem };
 export default InternalTable;

package/lib/grid-component/styles.scss

@@ -25,27 +25,6 @@ $rowSelectedHoverBg: 'ui-rc' !default;
   min-width: 200px;
 }
 
-.react-resizable {
-  position: relative;
-  background-clip: padding-box;
-}
-
-.react-resizable-handle {
-  position: absolute;
-  //right: 10px;
-  right: 0px;
-  bottom: 0;
-  z-index: 1;
-  width: 5px;
-  height: 100%;
-  cursor: col-resize;
-  //transform: translateY(-50%);
-  &.none {
-    cursor: auto;
-    display: none;
-  }
-}
-
 // -------------- Table -------------
 
 .#{$prefix}-table-wrapper {
@@ -302,10 +281,55 @@ $rowSelectedHoverBg: 'ui-rc' !default;
             }
           }
 
+          .ui-rc-checkbox-wrapper {
+            .ui-rc-checkbox {
+              background-color: red;
+            }
+            .ui-rc-checkbox-input {
+              &:focus-visible {
+                outline: none;
+              }
+            }
+          }
+
 
           .ant-input, .ant-picker{
             border-radius: 0;
           }
+
+          // color picker
+
+          .ant-color-picker-trigger{
+            height: 100%;
+            border-radius: 0;
+            .ant-color-picker-color-block {
+              height: 100%;
+              width: 100%;
+            }
+
+          }
+
+
+          // ------------ select  ---------------
+
+          .ui-rc-table-select-single .ui-rc-table-select-selector,
+          .ui-rc-select-single .ui-rc-select-selector {
+
+            border-radius: 0;
+
+          }
+
+          .ui-rc-table-select-single:not(.ui-rc-table-select-customize-input) {
+            .ui-rc-table-select-selector {
+              .ui-rc-table-select-selection-search-input {
+                height: auto;
+              }
+            }
+          }
+
+          // ------------ select  ---------------
+
+
         }
         &.cell-editable {
           padding: 0;
@@ -321,6 +345,9 @@ $rowSelectedHoverBg: 'ui-rc' !default;
         .ui-rc_content {
           padding: 5px 8px;
         }
+        .ui-rc_content:has(.ant-color-picker-trigger) {
+          padding: 1px 8px;
+        }
       }
     }
 
@@ -345,6 +372,15 @@ $rowSelectedHoverBg: 'ui-rc' !default;
     }
   }
 }
+//.ui-rc-checkbox-input {
+//  &:focus-visible {
+//    outline: none;
+//  }
+//}
+
+.ui-rc-checkbox .ui-rc-checkbox-input:focus-visible+.ui-rc-checkbox-inner {
+  outline: none;
+}
 
 .#{$prefix}-checkbox {
   &.#{$prefix}-checkbox-checked {
@@ -486,6 +522,8 @@ $rowSelectedHoverBg: 'ui-rc' !default;
   }
 }
 
+
+
 //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
 //  border-inline-end: 1px solid $tableBorderColor;
 //}
@@ -530,16 +568,37 @@ $rowSelectedHoverBg: 'ui-rc' !default;
 }
 
 
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-title,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-footer,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-cell,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-thead > tr > th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody > tr > th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small .ui-rc-table-tbody > tr > td,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot > tr > th,
-.ui-rc-table-wrapper .ui-rc-table.ui-rc-table-small tfoot > tr > td {
-  padding: 5px 8px;
+.ui-rc-table-wrapper {
+  .ui-rc-table.ui-rc-table-small {
+    .ui-rc-table-title,
+    .ui-rc-table-footer,
+    .ui-rc-table-cell,
+    .ui-rc-table-thead > tr > th,
+    .ui-rc-table-tbody > tr > th,
+    .ui-rc-table-tbody > tr > td,
+    tfoot > tr > th,
+    tfoot > tr > td {
+      padding: 5px 8px;
+    }
+  }
 }
+.ui-rc-table-wrapper {
+  .ui-rc-table.ui-rc-table-small {
+    .ui-rc-table-cell {
+      &:has(.ant-color-picker-trigger) {
+        padding: 1px 8px;
+      }
+      .ant-color-picker-trigger{
+        width: 100%;
+        min-height: 20px;
+        .ant-color-picker-clear {
+          height: 20px;
+        }
+      }
+    }
+  }
+}
+
 
 
 //ui-rc-table-ping-right

package/lib/grid-component/table/Grid.js

@@ -9,8 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _react = _interopRequireWildcard(require("react"));
 var _GridStyle = require("../GridStyle");
 var _TableGrid = _interopRequireDefault(require("../TableGrid"));
-var _EditableCell = _interopRequireDefault(require("../EditableCell"));
 var _Command = _interopRequireDefault(require("../Command"));
+var _useColumns = require("../hooks/useColumns");
 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 Grid = props => {
@@ -21,6 +21,7 @@ const Grid = props => {
     className,
     components,
     style,
+    format,
     ...rest
   } = props;
   const transformColumns = _react.default.useCallback(cols => {
@@ -67,7 +68,10 @@ const Grid = props => {
           }) : null))
         };
       }
-      return transformedColumn;
+      return {
+        ...transformedColumn,
+        render: (value, record, rowIndex) => (0, _useColumns.renderContent)(column, value, record, rowIndex, format)
+      };
     });
   }, []);
   const mergedColumns = (0, _react.useMemo)(() => transformColumns(columns ?? []), [transformColumns, columns]);
@@ -79,10 +83,7 @@ const Grid = props => {
   }, /*#__PURE__*/_react.default.createElement(_TableGrid.default, (0, _extends2.default)({}, rest, {
     tableRef: tableRef,
     components: {
-      ...components,
-      body: {
-        cell: _EditableCell.default
-      }
+      ...components
     },
     columns: mergedColumns,
     style: {

package/lib/grid-component/table/GridEdit.d.ts

@@ -6,7 +6,7 @@ import type { GetRowKey } from "../type";
 type Props<RecordType> = TableEditProps<RecordType> & {
     tableRef: any;
     triggerChangeColumns?: () => void;
-    triggerChangeData?: () => void;
+    triggerChangeData?: (newData: RecordType[], type: string) => void;
     getRowKey: GetRowKey<RecordType>;
 };
 declare const GridEdit: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;

package/lib/grid-component/table/GridEdit.js

@@ -39,7 +39,8 @@ const GridEdit = props => {
     selectionSettings,
     height,
     format,
-    onDataChange,
+    // onDataChange,
+    triggerChangeData,
     onCellPaste,
     onCellChange,
     style,
@@ -357,6 +358,7 @@ const GridEdit = props => {
           ...item,
           ...row
         });
+        triggerChangeData?.(newData, 'onChange');
 
         // trigger DataChange
         // setData(newData);
@@ -378,14 +380,16 @@ const GridEdit = props => {
       type,
       newState,
       prevState,
-      option
+      option,
+      field
     } = args;
 
     // console.log('newState', newState)
     //
     // console.log('getValues()', getValues())
 
-    const newRecord = getValues();
+    // const newRecord = getValues()
+
     if (type === 'enter') {
       console.log('aaaaaa enter');
     }
@@ -399,20 +403,14 @@ const GridEdit = props => {
         const callbackRecord = callbackData;
         Object.entries(callbackRecord).forEach(([name, value]) => {
           setValue(name, value);
-
-          // if (listObjectDate.includes(name) && value) {
-          //   setValue(name, new Date(value))
-          // }  else {
-          //   setValue(name, value)
-          // }
         });
-        onSubmit(newRecord);
+        onSubmit(callbackRecord);
       };
       if (onCellChange) {
         if (onCellChange.length > 1) {
           console.log('onCellChange Callback');
           onCellChange({
-            field: '',
+            field,
             indexCol: 1,
             type: 'onChange',
             value: newState,
@@ -424,11 +422,9 @@ const GridEdit = props => {
             sumValue: []
           }, handleChangeCallback);
         } else {
-          // const aaaa  = updateData(dataSource, newRecord, rowKey as any)
-
           console.log('onCellChange');
           onCellChange({
-            field: '',
+            field,
             indexCol: 1,
             type: 'onChange',
             option,
@@ -702,6 +698,14 @@ const GridEdit = props => {
               handleEdit(record, col, col.editType, event);
             }
           },
+          // onMouseDown: (event) => {
+          //   handleMouseDown(rowIndex, colIndex, event)
+          // },
+          //
+          // onMouseEnter: () => {
+          //   handleMouseEnter(rowIndex, colIndex)
+          // },
+
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
               setEditingKey('');
@@ -736,7 +740,7 @@ const GridEdit = props => {
             onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
           }, /*#__PURE__*/_react.default.createElement("div", {
             className: 'ui-rc_content'
-          }, (0, _useColumns.renderContent)(col, value, record, rowIndex)));
+          }, (0, _useColumns.renderContent)(col, value, record, rowIndex, format)));
         }
       };
     });

package/lib/grid-component/type.d.ts

@@ -6,11 +6,13 @@ import type { FilterOperator, TableRowSelection } from "rc-master-ui/es/table/in
 import type { ToolbarItem } from "rc-master-ui/es/toolbar";
 import type { ItemType } from "rc-master-ui/es/menu/interface";
 import type { FieldNames, FilterFunc } from "rc-select/es/Select";
+import type { ColorPickerProps } from "antd";
 export type IColumnType = "number" | "time" | "date" | "week" | "month" | "file" | "quarter" | "year" | "datetime" | "string" | "boolean" | "checkbox" | "color" | null | undefined;
 export type AnyObject = Record<PropertyKey, any>;
 export type SelectMode = 'checkbox' | 'radio' | undefined;
 export type ITextAlign = 'center' | 'left' | 'right';
 export type Frozen = 'left' | 'right' | 'Left' | 'Right';
+export type ContextMenuItem = ItemType & {};
 export type ITemplateColumn = {
     value: any;
     column: any;
@@ -124,7 +126,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     format?: IFormat;
     t?: any;
     lang?: string;
-    contextMenuItems?: any[];
+    contextMenuItems?: ContextMenuItem[];
     contextMenuHidden?: string[] | ((args?: Omit<ContextInfo<RecordType>, 'item' | 'event'>) => string[]);
     contextMenuOpen?: (args: Omit<ContextInfo<RecordType>, 'item'>) => void;
     contextMenuClick?: (args: ContextInfo<RecordType>) => void;
@@ -153,7 +155,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
         selected: RecordType | RecordType[];
     }) => void;
     dataSourceFilter?: SourceFilter[];
-    onFilterClick?: (column: ColumnType<RecordType>, callback: (key: string, data: any) => void) => void;
+    onFilterClick?: (column: ColumnTable<RecordType>, callback: (key: string, data: any) => void) => void;
     loading?: boolean;
     allowResizing?: boolean;
     onDataChange?: (data: RecordType[]) => void;
@@ -184,7 +186,7 @@ export type CellChangeArgs<T> = {
     rowsData: T[];
     indexRow: number;
     rowId?: string;
-    field: string;
+    field: string | undefined;
     indexCol: any;
     sumValue?: any[];
 };
@@ -238,3 +240,4 @@ export type IFormat = {
     yearFormat?: string;
 };
 export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
+export type Presets = Required<ColorPickerProps>['presets'][number];

package/lib/grid-component/useContext.d.ts

@@ -16,12 +16,13 @@ export interface IContext<RecordType> {
     handleSubmit?: any;
     onSubmit?: SubmitHandler<any>;
     getValues?: any;
-    handleCellChange?: ({ key, record, type, option }: ContextCellChange<RecordType>) => void;
+    handleCellChange?: (args: ContextCellChange<RecordType>) => void;
     getRowKey?: GetRowKey<RecordType>;
 }
 export type ContextCellChange<RecordType = AnyObject> = {
     key: string | keyof RecordType | GetRowKey<RecordType>;
     record: any;
+    field: string | undefined;
     option: any;
     newState?: any;
     prevState?: any;

package/lib/index.d.ts

@@ -1,2 +1,2 @@
 export { default as GridComponent } from './grid-component';
-export type { ColumnsTable, TableProps, ColumnTable } from './grid-component';
+export type { ColumnsTable, TableProps, ColumnTable, CommandItem, ToolbarItem, ContextMenuItem } from './grid-component';