es-grid-template 1.2.7 → 1.2.9

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type { ColumnEditType, IFormat } from "./type";
+import type { ColumnTable, IFormat } from "./type";
 import type { EditType } from "rc-master-ui";
 interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement> {
     t?: any;
@@ -10,7 +10,7 @@ interface EditableCellProps<DataType> extends React.HTMLAttributes<HTMLElement>
     record: DataType;
     index: number;
     format?: IFormat;
-    column: ColumnEditType<DataType>;
+    column: ColumnTable<DataType>;
     indexRow: number;
     indexCol: number;
     rowKey: any;

package/es/grid-component/TableGrid.js

@@ -20,6 +20,7 @@ import Pagination from "rc-master-ui/es/pagination";
 import ComponentSpinner from "./LoadingSpinner";
 import { ColumnsChoose } from "./ColumnsChoose";
 import useMergedState from "rc-util/es/hooks/useMergedState";
+import AdvanceFilter from "./AdvanceFilter";
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({
@@ -108,6 +109,7 @@ const TableGrid = props => {
     recordDoubleClick,
     toolbarItems,
     showColumnChoose,
+    showAdvanceFilter,
     onFilter,
     selectionSettings,
     rowSelection,
@@ -399,7 +401,8 @@ const TableGrid = props => {
         style: {
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center'
+          alignItems: 'center',
+          gap: '.75rem'
         }
       }, groupAble && groupToolbar?.(), toolbarItems && toolbarItems?.length > 0 && /*#__PURE__*/React.createElement("div", {
         style: {
@@ -416,7 +419,8 @@ const TableGrid = props => {
         style: {
           display: 'flex',
           justifyContent: 'space-between',
-          alignItems: 'center'
+          alignItems: 'center',
+          gap: '.75rem'
         }
       }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
         showSizeChanger: true,
@@ -431,6 +435,11 @@ const TableGrid = props => {
         t: t,
         columnsGroup: groupColumns,
         triggerChangeColumns: triggerChangeColumns
+      }), showAdvanceFilter && /*#__PURE__*/React.createElement(AdvanceFilter, {
+        columns: columns,
+        t: t
+        // columnsGroup={groupColumns}
+        // triggerChangeColumns={triggerChangeColumns}
       }))));
     },
     expandable: {

package/es/grid-component/checkbox-control/index.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+type OptionType = {
+    value: any;
+    label: string;
+    [key: string]: any;
+};
+type Props<T> = {
+    options: T[];
+    value: any[];
+    onChange?: (value: any[]) => void;
+};
+declare const CheckboxControl: <T extends OptionType>(props: Props<T>) => React.JSX.Element;
+export default CheckboxControl;

package/es/grid-component/checkbox-control/index.js

@@ -0,0 +1,40 @@
+import React, { useMemo } from "react";
+import { Checkbox } from "rc-master-ui";
+const CheckboxControl = props => {
+  const {
+    options,
+    value,
+    onChange
+  } = props;
+  const selected = useMemo(() => {
+    return value ? value : [];
+  }, [value]);
+  const list = useMemo(() => {
+    return options ? options : [];
+  }, [options]);
+  const onChangeValue = val => {
+    const findIndex = selected.findIndex(it => it === val);
+    if (findIndex > -1) {
+      const newVal = selected.filter(it => it !== val);
+      onChange?.(newVal);
+    } else {
+      const newVal = [...selected, val];
+      onChange?.(newVal);
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "d-flex flex-column gap-50",
+    style: {}
+  }, list.map((it, index) => {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "d-flex align-items-center"
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: selected.includes(it.value),
+      type: "checkbox",
+      className: "cursor-pointer me-50",
+      onChange: () => onChangeValue(it.value)
+    }), /*#__PURE__*/React.createElement("span", null, it.label));
+  }));
+};
+export default CheckboxControl;

package/es/grid-component/hooks/columns/index.d.ts

@@ -1,9 +1,9 @@
-import type { ColumnType, IFormat } from "../../type";
+import type { ColumnTable, IFormat } from "../../type";
 import React from "react";
 import type { TableLocale } from "rc-master-ui/lib/table/interface";
 import type { ColumnsTable } from "../../type";
 export declare function flatColumns<RecordType>(columns: ColumnsTable<RecordType>, parentKey?: string): ColumnsTable<RecordType>;
 export declare function flatColumns2<RecordType>(columns: ColumnsTable<RecordType>): ColumnsTable<RecordType>;
-export declare const getValueCell: <T>(column: ColumnType<T>, value: any, format?: IFormat) => any;
-export declare const renderContent: (column: any, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
-export declare const renderFilter: <RecordType>(column: ColumnType<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;
+export declare const getValueCell: <T>(column: ColumnTable<T>, value: any, format?: IFormat) => any;
+export declare const renderContent: <T>(column: ColumnTable<T>, value: any, record: any, index: number, format?: IFormat) => React.JSX.Element;
+export declare const renderFilter: <RecordType>(column: ColumnTable<RecordType>, selectedKeys: string[], setSelectedKeys: any, confirm: any, visible: boolean, searchValue: string, setSearchValue: any, dataSourceFilter: any[], buddhistLocale: any, locale?: TableLocale, t?: any) => React.JSX.Element;

package/es/grid-component/hooks/columns/index.js

@@ -118,7 +118,12 @@ export const getValueCell = (column, value, format) => {
 export const renderContent = (column, value, record, index, format) => {
   const cellValue = value instanceof Date ? getDateString(column, value) : value;
   const content = getValueCell(column, cellValue, format);
-  return /*#__PURE__*/React.createElement(Fragment, null, column?.template ? typeof column.template === "function" ? column.template(value, record, index) : column.template : content);
+  return /*#__PURE__*/React.createElement(Fragment, null, column?.template ? typeof column.template === "function" ? column.template({
+    value,
+    index,
+    rowData: record,
+    field: column.field
+  }) : column.template : content);
 };
 export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t) => {
   const type = getTypeFilter(column);

package/es/grid-component/hooks/useColumns.js

@@ -246,11 +246,12 @@ const useColumns = config => {
             width: col.width,
             onResize: handleResize?.(col)
           }),
-          onCell: data => {
+          onCell: (data, index) => {
             return {
               colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
               zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
-              className: classNames('', {
+              ...transformedColumn?.onCell?.(data, index),
+              className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
                 'cell-group': groupColumns && data.children,
                 'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
               })

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

@@ -1,7 +1,7 @@
 import type * as React from "react";
 import dayjs from "dayjs";
 import type { EditType, IColumnType, TypeFilter } from "rc-master-ui";
-import type { ColumnEditType, ColumnsType, ColumnTable, GetRowKey } from "../type";
+import type { ColumnTable, GetRowKey } from "../type";
 import type { SelectionSettings } from "../type";
 import type { AnyObject } from "../type";
 import type { Key } from "react";
@@ -26,15 +26,15 @@ export declare const customWeekStartEndFormat: (value: any, weekFormat: string)
 export declare const getTypeFilter: (col: ColumnTable<any>) => TypeFilter;
 export declare const updateArrayByKey: (arr: any[], element: any, key: string) => any[];
 export declare const getDateString: <T>(column: ColumnTable<T>, value: any) => string;
-export declare const getEditType: <T>(column: ColumnEditType<T>, rowData?: any) => EditType;
-export declare const isDisable: <T>(column: ColumnEditType<T>, rowData?: any) => boolean;
+export declare const getEditType: <T>(column: ColumnTable<T>, rowData?: any) => EditType;
+export declare const isDisable: <T>(column: ColumnTable<T>, rowData?: any) => boolean;
 export declare const checkFieldKey: (key: string | undefined) => string;
 export declare const convertLabelToTitle: (data: any[]) => any[];
 export declare const convertArrayWithIndent: (inputArray: any[], parentIndent?: number) => any[];
 export declare const getTemplate: (template: any) => React.ReactNode | React.ReactElement;
-export declare const totalFixedWidth: <T>(columns: ColumnsType<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
+export declare const totalFixedWidth: <T>(columns: ColumnsTable<T>, type: 'left' | 'right', selectionSettings?: SelectionSettings) => number;
 export declare const isObjEmpty: (obj: any) => boolean;
-export declare const getColumnsVisible: <T>(columns: ColumnsType<T>, index: number) => import("../type").ColumnType<T>[];
+export declare const getColumnsVisible: <T>(columns: ColumnsTable<T>, index: number) => ColumnTable<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[];
@@ -64,8 +64,10 @@ export declare function addRows8(arr: any, n: number): {
 };
 export declare const transformColumns: <RecordType>(cols: ColumnsTable<RecordType>, convertColumns: any[], t?: any) => ColumnsTable<RecordType>;
 export declare const transformColumns1: <RecordType>(cols: ColumnsTable<RecordType>, sortMultiple?: boolean) => ColumnsTable<RecordType>;
-export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordType>, groupColumns: string[]) => ColumnsTable<RecordType>;
+export declare const removeColumns: <RecordType>(columns: ColumnTable<RecordType>[], groupColumns: string[]) => ColumnsTable<RecordType>;
 export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];
 export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkChild: (inputArray: any[]) => boolean;
-export declare const isEditable: <RecordType>(column: ColumnEditType, rowData: RecordType) => (boolean | ((rowData: any) => boolean)) & (boolean | ((rowData: any) => boolean));
+export declare const isEditable: <RecordType>(column: ColumnTable, rowData: RecordType) => boolean | ((rowData: any) => boolean);
+export declare const isArraysEqual: (arr1: any[], arr2: any[]) => boolean;
+export declare const editAbleColumns: <T>(columns: ColumnsTable<T>) => ColumnTable<T>[];

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

@@ -704,7 +704,7 @@ export const removeColumns = (columns, groupColumns) => {
     const newCol = {
       ...column
     };
-    if (newCol.children) {
+    if (newCol?.children && newCol?.children.length > 0) {
       newCol.children = removeColumns(newCol.children, groupColumns);
     }
     return newCol;
@@ -778,4 +778,13 @@ export const isEditable = (column, rowData) => {
     return column.editEnable(rowData);
   }
   return column?.editEnable;
+};
+export const isArraysEqual = (arr1, arr2) => {
+  if (arr1.length !== arr2.length) {
+    return false;
+  }
+  return arr1.every((element, index) => element === arr2[index]);
+};
+export const editAbleColumns = columns => {
+  return columns.filter(col => col.field !== '#' && col.field !== 'index' && col.field !== 'command' && col.visible !== false);
 };

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
-import type { AnyObject } from "../type";
-import type { TableEditProps } from "../type";
+import type { AnyObject, TableProps } from "../type";
 import type { ColumnsTable } from "../type";
 import type { GetRowKey } from "../type";
-type Props<RecordType> = TableEditProps<RecordType> & {
+type Props<RecordType> = TableProps<RecordType> & {
     tableRef: any;
     triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
     triggerChangeData?: (newData: RecordType[], type: string) => void;

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

@@ -13,9 +13,8 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addRows8, checkChild, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
+import { addRows8, checkChild, editAbleColumns, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
-
 // import Command from "../Command";
 
 import { Toolbar, ConfigProvider } from "rc-master-ui";
@@ -757,8 +756,9 @@ const GridEdit = props => {
   };
   const handleClickRowHeader = (row, col) => {
     const newSelectedCells = new Set();
+    const tCols = editAbleColumns(columns);
     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++) {
+      for (let c = Math.min(tCols.length, col) + 1; c <= Math.max(tCols.length, col); c++) {
         newSelectedCells.add(`${r}-${c}`);
       }
     }
@@ -1265,6 +1265,29 @@ const GridEdit = props => {
       return {
         ...column,
         className: 'rc-ui-cell-editable',
+        onCell: (record, rowIndex) => {
+          const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
+          return {
+            onPaste: event => {
+              if (editingKey === '') {
+                handlePaste(record, colIndex + 1, rowNumber, event);
+                event.preventDefault();
+              }
+            },
+            onCopy: e => {
+              if (editingKey === '') {
+                handleCopy(e);
+                e.preventDefault();
+              }
+            },
+            onClick: () => {
+              if (record[rowKey] !== editingKey && editingKey !== '') {
+                setEditingKey('');
+              }
+            },
+            tabIndex: (rowIndex ?? 0) * columns.length + colIndex
+          };
+        },
         render: (value, record, rowIndex) => {
           const rowNumber = getRowNumber(dataSource, record[rowKey], rowKey);
           return /*#__PURE__*/React.createElement("div", {
@@ -1294,7 +1317,7 @@ const GridEdit = props => {
           onKeyDown: event => {
             const key = getRowKey(record, dataSource.indexOf(record));
             if (event.key.length === 1 && !event.ctrlKey && !event.metaKey || event.key === 'Enter') {
-              if (record[rowKey] !== editingKey) {
+              if (record[rowKey] !== editingKey && isEditable(column, record)) {
                 // ~~ khi editingKey = ''
                 event.preventDefault();
                 event.stopPropagation();
@@ -1370,14 +1393,14 @@ const GridEdit = props => {
             }
           },
           onDoubleClick: event => {
-            if (!isEditing(record) && record[rowKey] !== editingKey) {
+            if (!isEditing(record) && record[rowKey] !== editingKey && isEditable(column, record)) {
               handleEdit(record, column, getEditType(column, record), event);
               handleCellClick(rowNumber, record, column);
             }
           },
           onClick: () => {
             if (record[rowKey] !== editingKey && editingKey !== '') {
-              // setEditingKey('')
+              setEditingKey('');
             }
           },
           // className: isEditing(record) ? 'rc-ui-cell-editable cell-editing' : 'rc-ui-cell-editable cell-editable',
@@ -1389,8 +1412,9 @@ const GridEdit = props => {
           title: getValueCell(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
-          editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record) !== false,
+          editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record),
           cellEditing,
+          t,
           // editing: isEditing(record) && rowEditable?.(record) !== false,
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
           style: isPasteDragging ? {
@@ -1462,10 +1486,10 @@ const GridEdit = props => {
         width: '100%'
       },
       items: toolbarItemsBottom ?? [],
-      mode: 'scroll'
-      // onClick={({  item }) => {
-      //   console.log('item', item)
-      // }}
+      mode: 'scroll',
+      onClick: ({}) => {
+        setEditingKey('');
+      }
     }));
   };
   const onSelectChange = keys => {

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

@@ -84,7 +84,7 @@ export type ToolbarClick = {
     item: any;
     column: any;
 };
-export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title'> & {
+export type ColumnTable<RecordType = AnyObject> = Omit<RcColumnType<RecordType>, 'headerTemplate' | 'title'> & {
     field?: string;
     key?: any;
     type?: IColumnType;
@@ -111,9 +111,9 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
     template?: ReactNode | ReactElement | ((args: ColumnTemplate<RecordType>) => 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);
+    headerTemplate?: React.ReactNode | React.ReactElement | ((column: ColumnTable<RecordType>) => React.ReactNode | React.ReactElement);
     commandItems?: CommandItem[];
-    children?: ColumnType<RecordType>[];
+    children?: ColumnTable<RecordType>[];
     editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
     editEnable?: boolean | ((rowData: any) => boolean);
@@ -133,25 +133,8 @@ export type ColumnTemplate<RecordType> = {
     index: number;
     field: string;
 };
-export type ColumnEditType<RecordType = AnyObject> = Omit<ColumnType<RecordType>, 'children'> & {
-    editType?: EditType | ((rowData?: RecordType) => EditType);
-    disable?: boolean | ((rowData: any) => boolean);
-    editEnable?: boolean | ((rowData: any) => boolean);
-    isClearable?: boolean;
-    maxDate?: any;
-    minDate?: any;
-    maxTime?: any;
-    minTime?: any;
-    max?: number;
-    min?: number;
-    editSelectSettings?: IEditSelectSettings;
-    children?: ColumnEditType<RecordType>[];
-};
-export type ColumnsType<RecordType = AnyObject> = ColumnType<RecordType>[];
-export type ColumnsEditType<RecordType = AnyObject> = ColumnEditType<RecordType>[];
-export type ColumnTable<RecordType = AnyObject> = ColumnEditType<RecordType> | ColumnType<RecordType>;
-export type ColumnsTable<RecordType = AnyObject> = (ColumnType<RecordType> | ColumnEditType<RecordType>)[];
-export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
+export type ColumnsTable<RecordType = AnyObject> = ColumnTable<RecordType>[];
+export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary'> {
     editAble?: boolean;
     groupAble?: boolean;
     groupColumns?: string[];
@@ -172,6 +155,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     recordDoubleClick?: (args: RecordDoubleClickEventArgs<RecordType>) => void;
     toolbarItems?: ToolbarItem[];
     showColumnChoose?: boolean;
+    showAdvanceFilter?: boolean;
     onFilter?: (query: {
         field: string;
         key: string;
@@ -180,7 +164,7 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
         value: any;
     }[]) => void;
     onSorter?: (args: {
-        column: ColumnType<RecordType>;
+        column: ColumnTable<RecordType>;
         columnKey: string;
         field: string;
         direction: 'Ascending' | 'Descending' | null;
@@ -203,9 +187,6 @@ export interface TableProps<RecordType> extends Omit<RcTableProps<RecordType>, '
     summary?: boolean | ((data: readonly RecordType[]) => React.ReactNode);
     showEmptyText?: boolean;
     commandSettings?: CommandSettings;
-}
-export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
-    columns: ColumnsTable<RecordType>;
     onCellPaste?: ICellPasteModel<RecordType>;
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
     onCellClick?: (args: ICellClick, callback?: any) => void;
@@ -220,7 +201,7 @@ export type ICellClick = {
     cellValue: any;
     rowData: any;
 };
-export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType> | TableEditProps<RecordType>;
+export type GridTableProps<RecordType = AnyObject> = TableProps<RecordType>;
 export interface CommandItem {
     id: string;
     type?: string;

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

@@ -1,10 +1,14 @@
 import React from "react";
-import type { ColumnsTable } from "./type";
-export type IColumnsChoose<RecordType> = {
-    columns: ColumnsTable<RecordType>;
-    columnsGroup?: string[];
-    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
+import type { IFormat } from "./type";
+type Props = {
+    columns: any[];
+    dataSourceFilter?: any[];
+    onFilter?: (query: any, col?: any[]) => void;
+    mode?: 'sidebar' | 'dropdown';
+    defaultFilter?: any[];
+    leftFilterWidth?: number;
+    format?: IFormat;
     t?: any;
-    triggerChangeKeys?: any;
 };
-export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;
+declare const AdvanceFilter: (props: Props) => React.JSX.Element;
+export default AdvanceFilter;