es-grid-template 1.8.71 → 1.8.73

package/es/group-component/body/TableBodyRowGroupCell.js

@@ -0,0 +1,567 @@
+import { flexRender } from "@tanstack/react-table";
+import Space from "rc-master-ui/es/space";
+import Command from "../components/command/Command";
+import ReactDOMServer from 'react-dom/server';
+import { getCommonPinningStyles } from "../hook/utils";
+import Checkbox from "rc-master-ui/es/checkbox/Checkbox";
+import classNames from "classnames";
+import React from "react";
+import { TableContext } from "../useContext";
+// import type { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
+import { toggleRowSelection } from "../hook/useColumns";
+import { checkDecimalSeparator, checkThousandSeparator, getFormat } from "../../table-component/hook/utils";
+import { sumByField } from "../../grid-component/hooks";
+import { numericFormatter } from "react-numeric-component";
+const renderCellIndex = props => {
+  const {
+    parrents,
+    cell,
+    pagination
+  } = props;
+  if (parrents && parrents.length > 0) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc_cell-content"
+    }, parrents.map(pr => {
+      return `${pr.index + 1}.`;
+    }), cell.row.index + 1);
+  }
+  if (pagination && pagination.onChange) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc_cell-content"
+    }, cell.row.index + (pagination ? ((pagination.currentPage ?? 1) - 1) * (pagination?.pageSize ?? 0) : 0) + 1);
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc_cell-content"
+  }, cell.row.index + 1);
+};
+const renderCommand = args => {
+  const {
+    cell,
+    commandClick,
+    id,
+    data
+  } = args;
+  const col = cell.column.columnDef.meta ?? {};
+  const record = cell.row.original;
+
+  // const commandItems = args.cell.column.columnDef?.meta?.commandItems ?? []
+
+  const commands = col.commandItems ? col.commandItems.map(it => {
+    return {
+      ...it,
+      visible: typeof it.visible === 'function' ? it.visible?.(record) : it.visible
+    };
+  }) : [];
+  return /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc_cell-content"
+  }, /*#__PURE__*/React.createElement(Space, null, commands.filter(it => it.visible !== false).map(item => {
+    return /*#__PURE__*/React.createElement(Command, {
+      id: id,
+      key: item.id,
+      item: item,
+      record: record,
+      onClick: () => {
+        commandClick?.({
+          id: item.id,
+          // rowId: getRowKey(record, index) as any,
+          rowId: record.rowId,
+          rowData: record,
+          index: cell.row.index,
+          rows: [...data]
+        });
+      }
+    });
+  })));
+};
+const renderSelection = args => {
+  const {
+    row
+  } = args.cell;
+  const {
+    cell,
+    expandIconColumnIndex,
+    isDataTree,
+    expanded,
+    setExpanded
+  } = args;
+  const {
+    selectionSettings,
+    setIsSelectionChange,
+    isSelectionChange
+  } = args;
+  const checked = selectionSettings?.checkStrictly ? row.getIsSelected() : row.getIsSelected() || row.getIsAllSubRowsSelected();
+  const indeterminate = selectionSettings?.type === 'single' || selectionSettings?.checkStrictly ? false : row.getIsSomeSelected() && selectionSettings && selectionSettings.mode === 'checkbox' || row.getIsSomeSelected();
+  return /*#__PURE__*/React.createElement("div", {
+    style: {}
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: checked,
+    indeterminate: indeterminate,
+    onChange: e => {
+      toggleRowSelection({
+        e,
+        cell,
+        setIsSelectionChange,
+        isSelectionChange,
+        selectionSettings
+      });
+    },
+    disabled: !row.getCanSelect()
+  })));
+};
+const TableBodyCell = props => {
+  const {
+    cell,
+    commandClick,
+    // tableId,
+    table,
+    isEditing,
+    row,
+    colSpan
+    // rowSpan
+  } = props;
+  const {
+    id,
+    prefix,
+    focusedCell,
+    setFocusedCell,
+    // endCell,
+    // startCell,
+    originData,
+    expanded,
+    setExpanded,
+    expandable,
+    isDataTree,
+    setIsSelectionChange,
+    isSelectionChange,
+    selectionSettings,
+    wrapSettings,
+    pagination,
+    setIsSelecting,
+    setIsPasting,
+    setEndCell,
+    setStartCell,
+    setRangeState,
+    setEditingKey,
+    format
+    // dataSource
+  } = React.useContext(TableContext);
+  const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
+  const [isOpenTooltip, setIsOpenTooltip] = React.useState(false);
+  const record = cell.row.original;
+  const columnMeta = cell.column.columnDef.meta ?? {};
+  const cellStyles = typeof columnMeta.onCellStyles === 'function' ? columnMeta.onCellStyles(cell.getValue(), cell) : columnMeta.onCellStyles;
+  const originCol = cell.column.columnDef.meta ?? {};
+
+  // const tooltipContent = (isOpenTooltip === false || columnMeta.type === 'checkbox') ? '' : flexRender(cell.column.columnDef.cell, cell.getContext());
+  const tooltipContent = isOpenTooltip === false ? '' : columnMeta?.tooltipDescription ? typeof columnMeta.tooltipDescription === 'function' ? columnMeta.tooltipDescription({
+    value: cell.getValue(),
+    record
+  }) : columnMeta.tooltipDescription : columnMeta.template && typeof columnMeta.template !== 'function' ? columnMeta.template : cell.getValue();
+  const allRows = table.getRowModel().flatRows;
+  const rowNumber = allRows.findIndex(it => it.id === cell.row.id);
+  const colIndex = cell.column.getIndex();
+  const isPinned = cell.column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === "left" && cell.column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn = isPinned === "right" && cell.column.getIsFirstColumn("right");
+  const enableClick = typeof columnMeta.allowSelection === 'function' ? columnMeta.allowSelection(record) : columnMeta.allowSelection;
+  const parrents = cell.row.getParentRows();
+  if (cell.column.id === "#") {
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-index`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
+      }),
+      style: {
+        ...cellStyles,
+        display: 'flex',
+        userSelect: 'none',
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      },
+      onClick: e => {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          toggleRowSelection({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+        }
+      }
+    }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+      className: "ui-rc-table-row-expand-trigger",
+      style: {
+        paddingLeft: `${cell.row.depth * 25}px`
+      }
+    }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+      // onClick: row.getToggleExpandedHandler(),
+      onClick: e => {
+        e.stopPropagation();
+        const keys = Object.keys(expanded);
+        // @ts-ignore
+        const tmp = {
+          ...expanded
+        };
+        if (keys.includes(cell.row.id)) {
+          delete tmp[cell.row.id];
+          setExpanded(tmp);
+        } else {
+          setExpanded(old => ({
+            ...old,
+            [cell.row.id]: true
+          }));
+        }
+      },
+      style: {
+        cursor: "pointer"
+      },
+      className: "ui-rc-table-row-expand"
+    }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+    }) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+    })) : /*#__PURE__*/React.createElement("span", {
+      className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+    }))), renderCellIndex({
+      parrents,
+      cell,
+      pagination
+    }));
+  }
+  if (cell.column.id === "command") {
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-command`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
+      }),
+      style: {
+        ...cellStyles,
+        display: 'flex',
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, renderCommand({
+      cell,
+      commandClick,
+      id,
+      data: originData
+    }));
+  }
+  if (cell.column.id === "selection_column") {
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell ${prefix}-grid-cell-selection`, {
+        [`${prefix}-grid-cell-ellipsis`]: true,
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right'
+      }),
+      style: {
+        ...cellStyles,
+        display: 'flex',
+        minHeight: 36,
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: classNames('ui-rc_cell-content', {})
+    }, cell.column.id === "selection_column" && renderSelection({
+      cell,
+      table,
+      selectionSettings,
+      setIsSelectionChange,
+      expanded,
+      isDataTree,
+      setExpanded,
+      expandIconColumnIndex,
+      isSelectionChange
+    })));
+  }
+  if (row.subRows.length > 0 && originCol.sumGroup === true && originCol.type === 'number') {
+    const colFormat = typeof originCol.format === 'function' ? originCol.format({}) : originCol.format;
+    const cellFormat = getFormat(colFormat, format);
+    const thousandSeparator = cellFormat?.thousandSeparator;
+    const decimalSeparator = cellFormat?.decimalSeparator;
+    const dec = cellFormat?.decimalScale;
+    const numericFormatProps = {
+      thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+      decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+      allowNegative: cellFormat?.allowNegative ?? true,
+      prefix: cellFormat?.prefix,
+      suffix: cellFormat?.suffix,
+      decimalScale: dec,
+      fixedDecimalScale: cellFormat?.fixedDecimalScale ?? false
+    };
+
+    // const childrenData = row.subRows.map((it) => it.original)
+    const childrenData = record?.children ?? [];
+    const sumValue = sumByField(childrenData, cell.column.id);
+    const sumValueFormat = numericFormatter(sumValue.toString(), numericFormatProps);
+    return /*#__PURE__*/React.createElement("div", {
+      key: cell.id,
+      className: classNames(`${prefix}-grid-cell`, {
+        [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+        [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+        [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+        [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+        [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+        [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+      }),
+      style: {
+        ...cellStyles,
+        display: 'flex',
+        userSelect: 'none',
+        width: cell.column.getSize(),
+        minWidth: cell.column.getSize(),
+        ...getCommonPinningStyles(cell.column)
+      },
+      onClick: e => {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          toggleRowSelection({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+        }
+      }
+    }, sumValueFormat);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    key: cell.id,
+    ref: el => {
+      if (focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id && !isEditing) {
+        el?.focus();
+      }
+    },
+    tabIndex: focusedCell?.rowId === cell.row.id && focusedCell?.colId === cell.column.id ? 0 : -1,
+    "data-col-index": colIndex,
+    "data-row-index": rowNumber,
+    "data-col-key": cell.column.id
+    // data-row-key={cell.row.id}
+    ,
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-html": ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, tooltipContent))
+    // data-tooltip-delay-show={500}
+    ,
+
+    className: classNames(`${prefix}-grid-cell`, {
+      // [`${prefix}-grid-cell-ellipsis`]: true,
+
+      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
+      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
+      // [`${prefix}-grid-cell-selected`]: isCellSelected,
+
+      [`${prefix}-grid-cell-fix-left-last`]: isLastLeftPinnedColumn,
+      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
+      [`${prefix}-grid-cell-text-center`]: columnMeta?.textAlign === 'center',
+      [`${prefix}-grid-cell-text-right`]: columnMeta?.textAlign === 'right' || columnMeta.type === 'number'
+    }),
+    style: {
+      ...cellStyles,
+      display: 'flex',
+      width: cell.column.getSize(),
+      minWidth: cell.column.getSize(),
+      minHeight: 36,
+      gridColumn: `span ${colSpan} / span ${colSpan}`,
+      ...getCommonPinningStyles(cell.column)
+    },
+    onMouseDown: () => {
+      // setEditingKey?.('')
+      // setEndCell?.(undefined)
+      // setStartCell?.(undefined)
+      // setFocusedCell?.(undefined)
+      // setRangeState?.(undefined)
+    },
+    onMouseEnter: e => {
+      if (e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
+        setIsOpenTooltip(true);
+      }
+      setIsSelecting?.(false);
+      setIsPasting?.(false);
+    },
+    onKeyDown: e => {
+      const flatRows = table.getRowModel().flatRows;
+      if (e.key === 'ArrowDown' && rowNumber < flatRows.length - 1) {
+        const nextIndex = cell.row.index + 1;
+        // const nextIndex = rowNumber + 1
+
+        const nextId = flatRows[nextIndex].id;
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: nextId
+        });
+        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
+        const cellFocus = rowQr?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      if (e.key === 'ArrowUp' && rowNumber > 0) {
+        const prevIndex = cell.row.index - 1;
+        const nextId = flatRows[prevIndex].id;
+        setFocusedCell?.({
+          colId: cell.column.id,
+          rowId: nextId
+        });
+        const rowQr = document.querySelector(`.ui-rc-grid-row[data-row-key="${nextId}"]`);
+        const cellFocus = rowQr?.querySelector('.ui-rc-grid-cell:not(.ui-rc-grid-cell-selection)');
+        if (cellFocus) {
+          cellFocus.focus();
+        }
+      }
+      if (e.ctrlKey && e.code === 'Space' && cell.row.getCanSelect()) {
+        toggleRowSelection({
+          e,
+          cell,
+          setIsSelectionChange,
+          isSelectionChange,
+          selectionSettings
+        });
+        cell.row.getToggleSelectedHandler()(e);
+
+        // if (cell.row.getIsSelected()) { // nếu đã chọn
+
+        //   const aaa = isSelectionChange?.rowsData.filter((it) => it.id !== cell.row.id)
+
+        //   setIsSelectionChange({
+        //     isChange: true,
+        //     type: 'rowSelected',
+        //     rowData: cell.row.original,
+        //     rowsData: aaa ?? []
+        //   })
+
+        // } else {
+
+        //   const { rowsData } = isSelectionChange ?? {}
+
+        //   const abc = rowsData && rowsData.length > 0 ? [...rowsData] : []
+
+        //   abc.push(cell.row)
+
+        //   setIsSelectionChange({
+        //     isChange: true,
+        //     type: 'rowSelected',
+        //     rowData: cell.row.original,
+        //     rowsData: abc
+        //   })
+        // }
+      }
+    }
+
+    // onKeyUp={() => {
+
+    // }}
+    ,
+
+    onClick: e => {
+      const selection = window.getSelection();
+      const text = selection ? selection.toString() : "";
+      if (text.length > 0 || enableClick === false) {} else {
+        if (!selectionSettings || selectionSettings.checkboxOnly !== true) {
+          toggleRowSelection({
+            e,
+            cell,
+            setIsSelectionChange,
+            isSelectionChange,
+            selectionSettings
+          });
+          setFocusedCell?.({
+            colId: cell.column.id,
+            rowId: cell.row.id
+          });
+          setEditingKey?.('');
+          setEndCell?.(undefined);
+          setStartCell?.(undefined);
+          // setFocusedCell?.(undefined)
+          setRangeState?.(undefined);
+        }
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc_cell-content', {})
+  }, cell.column.getIndex() === expandIconColumnIndex && isDataTree && /*#__PURE__*/React.createElement("div", {
+    className: "ui-rc-table-row-expand-trigger",
+    style: {
+      paddingLeft: `${cell.row.depth * 25}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", null, cell.row.getCanExpand() ? /*#__PURE__*/React.createElement("button", {
+    // onClick: row.getToggleExpandedHandler(),
+    onClick: e => {
+      e.stopPropagation();
+      const keys = Object.keys(expanded);
+      // @ts-ignore
+      const tmp = {
+        ...expanded
+      };
+      if (keys.includes(cell.row.id)) {
+        delete tmp[cell.row.id];
+        setExpanded(tmp);
+      } else {
+        setExpanded(old => ({
+          ...old,
+          [cell.row.id]: true
+        }));
+      }
+    },
+    style: {
+      cursor: "pointer"
+    },
+    className: "ui-rc-table-row-expand"
+  }, cell.row.getIsExpanded() ? /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
+  }) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
+  })) : /*#__PURE__*/React.createElement("span", {
+    className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-spaced"
+  }))), flexRender(cell.column.columnDef.cell, cell.getContext())));
+};
+export default TableBodyCell;

package/es/group-component/components/ControlCheckbox.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ColumnTable } from "../../grid-component/type";
+type Props = {
+    column: ColumnTable;
+    record?: any;
+    rowIndex: number;
+    colIndex: number;
+    checkValue: any;
+    checked: boolean;
+    editAble?: boolean;
+};
+declare const ControlCheckbox: (props: Props) => React.JSX.Element;
+export default ControlCheckbox;

package/es/group-component/components/ControlCheckbox.js

@@ -0,0 +1,84 @@
+import React, { useContext } from "react";
+import { Checkbox } from "rc-master-ui";
+import { TableContext } from "../useContext";
+import { isEditable, isDisable, parseBooleanToValue } from "../hook/utils";
+const ControlCheckbox = props => {
+  const {
+    column,
+    record,
+    rowIndex,
+    colIndex,
+    checkValue,
+    editAble,
+    checked
+  } = props;
+  const {
+    handleCellChange,
+    rowKey
+  } = useContext(TableContext);
+  const isEdit = React.useMemo(() => {
+    return isEditable(column, record);
+  }, [column, record]);
+
+  // const [isHover, setIsHover] = useState(false)
+
+  const inputNode = value => {
+    return /*#__PURE__*/React.createElement(Checkbox, {
+      checked: Boolean(value),
+      defaultChecked: Boolean(checked)
+      // style={{ textAlign: column.align ?? 'left' }}
+      ,
+      onChange: val => {
+        const newVal = typeof checkValue === "number" ? parseBooleanToValue(val.target.checked, typeof value) : val.target.checked;
+
+        // onChange(newVal)
+
+        const key = record[rowKey];
+        // const formState = getValues()
+
+        handleCellChange?.({
+          key: key,
+          // @ts-ignore
+          record: {
+            ...record,
+            [column.field]: newVal
+          },
+          option: value,
+          prevState: value,
+          newState: newVal,
+          field: column.field,
+          indexCol: colIndex,
+          indexRow: rowIndex,
+          type: 'blur'
+        });
+      },
+      disabled: isDisable(column, record) ?? false
+    });
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    // onMouseEnter={() => {
+    //   setIsHover(true)
+    // }}
+    //
+    // onMouseLeave={() => {
+    //   setIsHover(false)
+    // }}
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: column.align ?? 'center',
+      paddingInline: 5,
+      height: '100%',
+      width: '100%'
+    }
+  }, editAble && isEdit !== false ? inputNode(checkValue) : /*#__PURE__*/React.createElement(Checkbox, {
+    checked: checked,
+    onChange: e => {
+      e.preventDefault();
+    },
+    style: {
+      textAlign: column.align ?? 'left'
+    }
+  }));
+};
+export default ControlCheckbox;

package/es/group-component/components/EditForm/EditForm.d.ts

@@ -0,0 +1,27 @@
+import React from "react";
+type Props = {
+    id?: string;
+    externalClick?: any;
+    menuPortalTarget?: any;
+    value: any;
+    onChange: (props: any) => void;
+    filterKey?: string;
+    customRender?: any;
+    filterHeaderKey?: string;
+    placeholder?: string;
+    invalid?: any;
+    menuHeight?: number;
+    menuWidth?: number;
+    classNamePrefix?: string;
+    cellFocus?: boolean;
+    t?: any;
+    column: any;
+    fieldKey?: any;
+    rowData: any;
+    indexRow: any;
+    template?: any;
+    onKeyDown?: (event: any) => void;
+};
+export declare const SelectStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EditForm: (props: Props) => React.JSX.Element;
+export {};