es-grid-template 0.1.0 → 0.1.2-1

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

@@ -2,7 +2,8 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { Fragment, useMemo } from 'react';
 import { GridStyle } from "../GridStyle";
 import TableGrid from "../TableGrid";
-import EditableCell from "../EditableCell";
+import Command from "../Command";
+import { renderContent } from "../hooks/useColumns";
 const Grid = props => {
   const {
     columns,
@@ -10,74 +11,61 @@ const Grid = props => {
     tableRef,
     className,
     components,
+    style,
+    format,
     ...rest
   } = props;
-
-  // const transformColumns = React.useCallback((cols: ColumnsTable<RecordType>): ColumnsTable<RecordType> => {
-  //   return cols.map((column) => {
-  //
-  //     if (column?.children && column?.children.length > 0) {
-  //       return {
-  //         ...column,
-  //         children: transformColumns(column?.children) // Xử lý đệ quy cho cấp con
-  //       }
-  //     }
-  //
-  //     if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
-  //       return {
-  //         ...column,
-  //         render: (value: any, record: any, rowIndex: number) => {
-  //           return rowIndex + 1
-  //         }
-  //       }
-  //     }
-  //
-  //     return {
-  //       ...column,
-  //     }
-  //   })
-  // }, [])
-  //
-  //
-  // const mergedColumns = useMemo(() => {
-  //
-  //   // @ts-ignore
-  //   return transformColumns(columns ?? [])
-  //
-  // }, [transformColumns, columns])
-
-  const addFilter = React.useCallback(cols => {
+  const transformColumns = React.useCallback(cols => {
+    // @ts-ignore
     return cols.map(column => {
-      // @ts-ignore
-      if (!column?.dataIndex && !column?.key) {
+      if (!column?.field && !column?.key) {
         return column;
       }
-      // @ts-ignore
-      if (column?.children && column?.children.length > 0) {
+
+      // Xử lý đệ quy cho children
+      if (column.children?.length) {
         return {
           ...column,
-          // @ts-ignore
-          children: addFilter(column?.children) // Xử lý đệ quy cho cấp con
+          children: transformColumns(column.children)
         };
       }
+      const transformedColumn = {
+        ...column,
+        dataIndex: column.field ?? column.dataIndex,
+        title: column.headerText ?? column.title,
+        ellipsis: column.ellipsis !== false,
+        align: column.textAlign ?? column.align,
+        fixed: column.frozen ? column.frozen.toLowerCase() : column.fixed
+      };
       // @ts-ignore
-      if (column.dataIndex === 'index' || column.field === 'index' || column.dataIndex === '#' || column.dataIndex === '#') {
+      if (["index", "#"].includes(transformedColumn.dataIndex)) {
         return {
-          ...column,
-          render: (value, record, rowIndex) => {
-            return rowIndex + 1;
-          }
+          ...transformedColumn,
+          render: (_, __, rowIndex) => rowIndex + 1
+        };
+      }
+      if (transformedColumn.dataIndex === "command") {
+        return {
+          ...transformedColumn,
+          onCell: () => ({
+            className: "ui-rc-cell-command"
+          }),
+          render: () => /*#__PURE__*/React.createElement("div", {
+            className: "ui-rc-cell-command__content"
+          }, column.commandItems?.map((item, index) => item.visible !== false ? /*#__PURE__*/React.createElement(Command, {
+            key: `command-${index}`,
+            item: item,
+            onClick: e => e.preventDefault()
+          }) : null))
         };
       }
       return {
-        ...column
+        ...transformedColumn,
+        render: (value, record, rowIndex) => renderContent(column, value, record, rowIndex, format)
       };
     });
   }, []);
-  const tmpColumns = useMemo(() => {
-    // @ts-ignore
-    return addFilter(columns ?? []);
-  }, [addFilter, columns]);
+  const mergedColumns = useMemo(() => transformColumns(columns ?? []), [transformColumns, columns]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(GridStyle, {
     heightTable: height,
     style: {
@@ -86,14 +74,13 @@ const Grid = props => {
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     tableRef: tableRef,
     components: {
-      ...components,
-      body: {
-        cell: EditableCell
-      }
+      ...components
+    },
+    columns: mergedColumns,
+    style: {
+      ...style,
+      minHeight: height
     }
-    // columns={mergedColumns}
-    ,
-    columns: tmpColumns
   }))));
 };
 export default Grid;

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

@@ -2,8 +2,12 @@ import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import type { TableEditProps } from "../type";
+import type { GetRowKey } from "../type";
 type Props<RecordType> = TableEditProps<RecordType> & {
     tableRef: any;
+    triggerChangeColumns?: () => void;
+    triggerChangeData?: (newData: RecordType[], type: string) => void;
+    getRowKey: GetRowKey<RecordType>;
 };
 declare const GridEdit: <RecordType extends object>(props: Props<RecordType>) => React.JSX.Element;
 export default GridEdit;

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

@@ -14,7 +14,8 @@ import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
 import { getEditType, isObjEmpty, totalFixedWidth } from "../hooks";
-import Message from "./../Message/Message";
+import Message from "../../Message/Message";
+import Command from "../Command";
 dayjs.extend(customParseFormat);
 const toast = 'top-right';
 const GridEdit = props => {
@@ -23,17 +24,23 @@ const GridEdit = props => {
     t,
     columns,
     dataSource,
+    components,
     allowResizing,
     rowKey = 'id',
     selectionSettings,
     height,
     format,
-    onDataChange,
+    // onDataChange,
+    triggerChangeData,
     onCellPaste,
     onCellChange,
-    components,
+    style,
+    getRowKey,
     ...rest
   } = props;
+
+  // const forceUpdate = useForceUpdate();
+  const [updateKey, setUpdateKey] = useState(0);
   const isSelecting = useRef(false);
   const startCell = useRef(null);
   const isSelectingRow = useRef(false);
@@ -116,6 +123,30 @@ const GridEdit = props => {
     }
     setSelectedCells(newSelectedCells);
   };
+  const handleClickRowHeader = (row, col) => {
+    const newSelectedCells = new Set();
+    for (let r = Math.min(row, row); r <= Math.max(row, row); r++) {
+      for (let c = Math.min(columns.length, col) + 1; c <= Math.max(columns.length, col); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+    setSelectedCells(newSelectedCells);
+  };
+  const handleClickColHeader = (column, indexColumn) => {
+    const newSelectedCells = new Set();
+    for (let r = Math.min(dataSource.length, 0); r <= Math.max(dataSource.length - 1, 0); r++) {
+      for (let c = Math.min(indexColumn, indexColumn); c <= Math.max(indexColumn, indexColumn); c++) {
+        newSelectedCells.add(`${r}-${c}`);
+      }
+    }
+
+    // console.log('newSelectedCells', newSelectedCells)
+    // setSelectedCells(newSelectedCells)
+
+    setSelectedCells(new Set(newSelectedCells));
+    // forceUpdate();
+    setUpdateKey(prev => prev + 1); // Cập nhật key để trigger re-render
+  };
   const handleMouseDownColIndex = (row, col, e) => {
     if (e.button === 2) {
       e.stopPropagation();
@@ -318,6 +349,7 @@ const GridEdit = props => {
           ...item,
           ...row
         });
+        triggerChangeData?.(newData, 'onChange');
 
         // trigger DataChange
         // setData(newData);
@@ -338,14 +370,16 @@ const GridEdit = props => {
       record,
       type,
       newState,
-      prevState
+      prevState,
+      option,
+      field
     } = args;
 
     // console.log('newState', newState)
     //
     // console.log('getValues()', getValues())
 
-    // const record = getValues()
+    // const newRecord = getValues()
 
     if (type === 'enter') {
       console.log('aaaaaa enter');
@@ -357,18 +391,21 @@ const GridEdit = props => {
         // const newDataUpdate  = updateData(data, callbackData, rowKey as any)
 
         console.log('callbackData', callbackData);
-        const newRecord = callbackData;
-        onSubmit(newRecord);
+        const callbackRecord = callbackData;
+        Object.entries(callbackRecord).forEach(([name, value]) => {
+          setValue(name, value);
+        });
+        onSubmit(callbackRecord);
       };
       if (onCellChange) {
         if (onCellChange.length > 1) {
           console.log('onCellChange Callback');
           onCellChange({
-            field: '',
+            field,
             indexCol: 1,
             type: 'onChange',
-            rows: [],
             value: newState,
+            option,
             indexRow: 1,
             rowData: record,
             rowId: '',
@@ -378,10 +415,10 @@ const GridEdit = props => {
         } else {
           console.log('onCellChange');
           onCellChange({
-            field: '',
+            field,
             indexCol: 1,
             type: 'onChange',
-            rows: [],
+            option,
             value: newState,
             indexRow: 1,
             rowData: record,
@@ -546,6 +583,7 @@ const GridEdit = props => {
       if (col.dataIndex === 'index' || col.field === 'index' || col.dataIndex === '#' || col.dataIndex === '#') {
         return {
           ...col,
+          className: 'rc-ui-cell-editable',
           render: (value, record, rowIndex) => {
             return /*#__PURE__*/React.createElement("div", {
               className: classNames('ui-rc_cell-content ui-rc_cell-content--index', {
@@ -553,13 +591,45 @@ const GridEdit = props => {
                 focus: selectedCells && Array.from(selectedCells).some(item => item.startsWith(`${rowIndex}-`))
               }),
               onMouseDown: event => handleMouseDownColIndex(rowIndex, colIndex, event),
-              onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event)
+              onMouseEnter: event => handleMouseEnterColIndex(rowIndex, colIndex, event),
+              onClick: () => handleClickRowHeader(rowIndex, colIndex)
             }, /*#__PURE__*/React.createElement("div", {
               className: 'ui-rc_content'
             }, rowIndex + 1));
           }
         };
       }
+      if (col.dataIndex === 'command' || col.field === 'command') {
+        return {
+          ...col,
+          title: col.headerText ?? col.title,
+          ellipsis: col.ellipsis !== false,
+          onCell: () => ({
+            className: 'ui-rc-cell-command'
+          }),
+          // render: (value: any, record: any, rowIndex: number) => {
+          render: () => {
+            return /*#__PURE__*/React.createElement("div", {
+              className: classNames('ui-rc-cell-command__content', {})
+            }, col.commandItems && col.commandItems?.map((item, indexComm) => {
+              if (item.visible !== false) {
+                // return  (
+                //   <span>{item.title}</span>
+                // )
+
+                return /*#__PURE__*/React.createElement(Command, {
+                  key: `command-${indexComm}`,
+                  item: item,
+                  onClick: e => {
+                    e.preventDefault();
+                    // handleCommandClick({command: item, rowData: record, index: rowIndex})
+                  }
+                });
+              }
+            }));
+          }
+        };
+      }
       return {
         ...col,
         onCell: (record, rowIndex) => ({
@@ -619,12 +689,20 @@ 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('');
             }
           },
-          className: isEditing(record) ? 'cell-editing' : 'cell-editable',
+          className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
           record,
           column: col,
           editType: getEditType(col, record),
@@ -632,23 +710,28 @@ const GridEdit = props => {
           title: col.title,
           'data-col-index': colIndex,
           'data-row-index': rowIndex,
-          colIndex: colIndex,
+          // colIndex: colIndex,
           indexCol: colIndex,
           indexRow: rowIndex,
           editing: isEditing(record),
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex
         }),
+        onHeaderCell: data => ({
+          ...col.onHeaderCell(),
+          onClick: () => {
+            handleClickColHeader(data, colIndex);
+          }
+        }),
         render: (value, record, rowIndex) => {
           return /*#__PURE__*/React.createElement("div", {
             className: classNames('ui-rc_cell-content', {
               selected: selectedCells.has(`${rowIndex}-${colIndex}`)
             }),
             onMouseDown: event => handleMouseDown(rowIndex, colIndex, event),
-            onMouseEnter: () => handleMouseEnter(rowIndex, colIndex),
-            onMouseLeave: () => {}
+            onMouseEnter: () => handleMouseEnter(rowIndex, colIndex)
           }, /*#__PURE__*/React.createElement("div", {
             className: 'ui-rc_content'
-          }, renderContent(col, value, record, rowIndex)));
+          }, renderContent(col, value, record, rowIndex, format)));
         }
       };
     });
@@ -668,12 +751,14 @@ const GridEdit = props => {
       control,
       trigger,
       getValues,
-      handleCellChange
+      handleCellChange,
+      getRowKey
     }
   }, /*#__PURE__*/React.createElement("form", {
     onSubmit: handleSubmit(onSubmit)
   }, /*#__PURE__*/React.createElement(TableGrid, _extends({}, rest, {
     t: t,
+    key: updateKey,
     tableRef: tableRef,
     dataSource: dataSource,
     components: {
@@ -694,8 +779,10 @@ const GridEdit = props => {
       checkboxOnly: true
     } : undefined,
     style: {
+      ...style,
       minHeight: height
-    }
+    },
+    rowHoverable: false
   }))))), /*#__PURE__*/React.createElement(Toaster, {
     position: toast,
     toastOptions: {

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

@@ -6,10 +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;
@@ -39,6 +42,7 @@ export type ColumnSelectTable = {
 };
 export type IEditSelectSettings = {
     fieldKey?: string;
+    options: any[];
     /**  get value form other field **/
     fieldValue?: string;
     /** get label form other field **/
@@ -46,7 +50,6 @@ export type IEditSelectSettings = {
     inputKey?: string;
     filterKey?: string[];
     selectMode?: SelectMode;
-    options: any[];
     getPasteValue?: (value: any) => Record<string, any> | null;
     validateOption?: (rowData: any, field: string) => any[];
     defaultOptions?: any[];
@@ -84,14 +87,18 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     format?: IFormat;
     allowFiltering?: boolean;
     operator?: FilterOperator;
+    hideOperator?: boolean;
     placeholder?: string;
     showInColumnChoose?: boolean;
     typeFilter?: TypeFilter;
     headerText?: string;
+    textAlign?: ITextAlign;
+    frozen?: Frozen;
     template?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
     showTooltip?: boolean;
     tooltipDescription?: ReactNode | ReactElement | ((value: any, record: RecordType, index: number) => ReactNode | ReactElement);
     headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnType<RecordType>) => React.ReactNode | React.ReactElement);
+    commandItems?: CommandItem[];
     children?: ColumnType<RecordType>[];
 };
 export type ColumnEditType<RecordType> = ColumnType<RecordType> & {
@@ -119,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;
@@ -140,7 +147,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
         direction: 'Ascending' | 'Descending' | null;
     }) => void;
     selectionSettings?: SelectionSettings;
-    rowKey?: string;
+    rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
     rowSelection?: RowSelection<RecordType>;
     rowSelected?: (args: {
         type: string;
@@ -148,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;
@@ -156,18 +163,30 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
 export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
     columns: ColumnsTable<RecordType>;
     onCellPaste?: ICellPasteModel<RecordType>;
-    onCellChange?: (args: CellChangeArgs, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
+    onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
 }
 export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
-export type CellChangeArgs = {
+export interface CommandItem {
+    id: string;
+    type?: string;
+    visible?: boolean;
+    title: string;
+    color?: 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
+    tooltip?: string;
+    icon?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    template?: ReactNode | ReactElement | (() => ReactNode | ReactElement);
+    client?: boolean;
+    confirmDialog?: boolean;
+}
+export type CellChangeArgs<T> = {
     type: 'onPaste' | 'onChange' | 'onCellPaste';
     value: any;
-    rowData: any;
-    rows: any[];
-    rowsData: any[];
+    option: AnyObject;
+    rowData: T;
+    rowsData: T[];
     indexRow: number;
     rowId?: string;
-    field: string;
+    field: string | undefined;
     indexCol: any;
     sumValue?: any[];
 };
@@ -188,13 +207,10 @@ export type SourceFilter = {
     loadOptions?: (search: string, callback: (newOptions: any[]) => void) => void;
 };
 export type RowSelection<RecordType> = Omit<TableRowSelection<RecordType>, 'type' | 'columnWidth' | 'hideSelectAll' | 'defaultSelectedRowKeys'>;
-export type SelectionSettings = {
+export type SelectionSettings = Omit<TableRowSelection, 'type' | 'onChange' | 'onSelect' | 'onSelectAll' | 'onSelectNone' | 'onSelectMultiple'> & {
     mode?: 'checkbox' | 'radio';
     type?: 'single' | 'multiple';
     checkboxOnly?: boolean;
-    hideSelectAll?: boolean;
-    columnWidth?: number | string;
-    defaultSelectedRowKeys?: Key[];
 };
 export type RecordDoubleClickEventArgs<RecordType> = {
     rowData: RecordType;
@@ -223,3 +239,5 @@ export type IFormat = {
     monthFormat?: string;
     yearFormat?: string;
 };
+export type GetRowKey<RecordType> = (record: RecordType, index?: number) => Key;
+export type Presets = Required<ColorPickerProps>['presets'][number];

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

@@ -1,12 +1,13 @@
 /// <reference types="react" />
-import type { IFormat } from "./type";
+import type { AnyObject, IFormat } from "./type";
 import type { SubmitHandler } from "react-hook-form";
-export interface IContext {
+import type { GetRowKey } from "./type";
+export interface IContext<RecordType> {
     searchValue?: any;
     setSearchValue?: any;
     open?: boolean;
     setOpen?: any;
-    rowKey: string;
+    rowKey: string | keyof RecordType | GetRowKey<RecordType>;
     onSave?: any;
     form?: any;
     format?: IFormat;
@@ -15,13 +16,16 @@ export interface IContext {
     handleSubmit?: any;
     onSubmit?: SubmitHandler<any>;
     getValues?: any;
-    handleCellChange?: ({ key, record, type }: ContextCellChange) => void;
+    handleCellChange?: (args: ContextCellChange<RecordType>) => void;
+    getRowKey?: GetRowKey<RecordType>;
 }
-export type ContextCellChange = {
-    key: string;
+export type ContextCellChange<RecordType = AnyObject> = {
+    key: string | keyof RecordType | GetRowKey<RecordType>;
     record: any;
+    field: string | undefined;
+    option: any;
     newState?: any;
     prevState?: any;
     type: 'enter' | 'blur' | 'outClick';
 };
-export declare const TableContext: import("react").Context<IContext>;
+export declare const TableContext: import("react").Context<IContext<any>>;

package/es/grid-component/useContext.js

@@ -1,4 +1,7 @@
 import { createContext } from 'react';
+
+// import {AnyObject} from "antd/es/_util/type";
+
 export const TableContext = /*#__PURE__*/createContext({
   rowKey: 'id'
 });

package/es/index.d.ts

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

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

@@ -1,9 +1,8 @@
-import type { Dispatch, SetStateAction } from "react";
 import React from "react";
-import type { ColumnsType } from "./type";
+import type { ColumnsTable } from "./type";
 export type IColumnsChoose<RecordType> = {
-    columns: any[];
-    setColumns: Dispatch<SetStateAction<ColumnsType<RecordType>>>;
+    columns: ColumnsTable<RecordType>;
+    triggerChangeColumns?: (columns: ColumnsTable<RecordType>) => void;
     t?: any;
 };
 export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;