es-grid-template 1.7.27 → 1.7.29

package/es/grid-component/InternalTable.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import React, { createContext, Fragment, useCallback, useContext, useState } from 'react';
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
+import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, flattenArray, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, isNullOrUndefined, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, translateOption, unFlattenData, updateArrayByKey, updateColumnsByGroup,
 // updateData,
 updateOrInsert } from "./hooks";
 import dayjs from "dayjs";
@@ -185,6 +185,7 @@ const InternalTable = props => {
     wrapSettings,
     onFilter,
     onSorter,
+    defaultSorter,
     ...rest
   } = props;
   const id = React.useMemo(() => {
@@ -298,6 +299,7 @@ const InternalTable = props => {
     setColumns(propsColumns);
   }, [propsColumns]);
   const handleOnFilter = queries => {
+    console.log('queries', queries);
     if (onFilter) {
       onFilter?.(convertFilters(queries));
     } else {
@@ -330,30 +332,6 @@ const InternalTable = props => {
     // @ts-ignore
     return record => record?.[rowKey];
   }, [rowKey]);
-
-  // const [transformSelectionColumns] = useColumns<RecordType>(
-  //   {
-  //     locale,
-  //     t,
-  //     rowKey,
-  //     // dataSource: mergerdData,
-  //     dataSource,
-  //     buddhistLocale,
-  //     dataSourceFilter: propDataSourceFilter,
-  //     format,
-  //     sortMultiple,
-  //     groupAble,
-  //     groupSetting,
-  //     groupColumns,
-  //     handleResize,
-  //     // onMouseHover
-  //   },
-  // );
-
-  // const mergedColumns: any = React.useMemo(() => {
-  //   return transformSelectionColumns(columns)
-  // }, [columns, transformSelectionColumns])
-
   const firstNonGroupColumn = flatColumns2(columns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
   const nonGroupColumns = flatColumns2(columns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
   const getColumnSearchProps = useCallback(column => ({
@@ -367,6 +345,8 @@ const InternalTable = props => {
       searchValue,
       setSearchValue
     }) => {
+      // console.log('selectedKeys', selectedKeys)
+
       const type = getTypeFilter(column);
       // const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : (!type || type === 'Text' ? stringOperator : numberOperator)
 
@@ -402,6 +382,10 @@ const InternalTable = props => {
         type: "primary",
         onClick: () => {
           // confirm({closeDropdown: false})
+          const typeFilter = getTypeFilter(column);
+          if ((!typeFilter || typeFilter === 'Text') && isNullOrUndefined(selectedKeys[0])) {
+            setSelectedKeys(['']);
+          }
           confirm();
           // handleSearch(selectedKeys as string[], confirm)
         },
@@ -460,7 +444,9 @@ const InternalTable = props => {
           id: id,
           wrapSettings: wrapSettings
         })),
-        ellipsis: column.ellipsis !== false,
+        ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
+        // ellipsis: column.ellipsis !== false,
+
         align: column.textAlign ?? column.align,
         fixed: column.fixedType ?? column.fixed,
         isSummary: column.isSummary ?? column.haveSum,
@@ -519,15 +505,19 @@ const InternalTable = props => {
         ...(transformedColumn.allowFiltering === false ? {} : {
           ...getColumnSearchProps(column)
         }),
-        sorter: column.sorter === false ? undefined : {
-          // @ts-ignore
-          compare: (a, b) => onSorter ? a : a[column.field] - b[column.field],
-          multiple: sortMultiple ? colIndex : undefined
-        },
+        // sorter: (column.sorter === false ? undefined : {
+        //   // @ts-ignore
+        //   compare: (a: any, b: any) => onSorter ? a : a[column.field] - b[column.field],
+        //   multiple: sortMultiple ? colIndex : undefined
+
+        // }),
+        // @ts-ignore
+        sorter: (a, b) => a[column.field] - b[column.field],
         sortIcon: args => {
           const {
             sortOrder
           } = args;
+          console.log('sortOrder', sortOrder);
           return /*#__PURE__*/React.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(SortCancel, {
             fontSize: 15,
             style: {
@@ -566,7 +556,8 @@ const InternalTable = props => {
           id: `${column.field}`,
           width: column.width,
           onResize: handleResize?.(column),
-          className: column.headerTextAlign === 'center' ? 'head-align-center' : column.headerTextAlign === 'right' ? 'head-align-right' : ''
+          className: `${column.headerTextAlign === 'center' ? 'head-align-center' : column.headerTextAlign === 'right' ? 'head-align-right' : ''}
+           ${wrapSettings && wrapSettings.wrapMode === 'Content' ? 'ui-rc-table-cell-ellipsis' : ''}`
         }),
         onCell: (data, index) => {
           return {
@@ -603,10 +594,11 @@ const InternalTable = props => {
           }
           return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
+        defaultSortOrder: 'ascend',
         hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(column.field) ? true : transformedColumn.hidden
       };
     });
-  }, [columns, t, id, wrapSettings, getColumnSearchProps, sortMultiple, groupSetting, groupAble, groupColumns, mergedData, filterStates, mergedFilterKeys, pagination, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
+  }, [columns, t, id, wrapSettings, editAble, getColumnSearchProps, groupSetting, groupAble, groupColumns, mergedData, filterStates, mergedFilterKeys, pagination, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
   const transformColumns = React.useCallback(cols => {
     return cols.map(column => {
       const find = convertColumns.find(it => it.field === column.field);
@@ -627,11 +619,13 @@ const InternalTable = props => {
           id: id,
           wrapSettings: wrapSettings
         })),
-        ellipsis: column.ellipsis !== false,
+        // ellipsis: column.ellipsis !== false,
+        ellipsis: editAble || column.ellipsis !== false && wrapSettings && wrapSettings.wrapMode !== 'Content' && wrapSettings.wrapMode !== 'Both',
         align: column.textAlign ?? column.align,
         fixed: column.fixedType ?? column.fixed,
         isSummary: column.isSummary ?? column.haveSum,
-        hidden: column.hidden ?? column.visible === false
+        hidden: column.hidden ?? column.visible === false,
+        defaultSortOrder: 'ascend'
       };
 
       // Xử lý đệ quy cho children
@@ -654,7 +648,7 @@ const InternalTable = props => {
         };
       }
     });
-  }, [convertColumns, id, t, wrapSettings]);
+  }, [convertColumns, editAble, id, t, wrapSettings]);
   const mergedColumns = React.useMemo(() => {
     return transformColumns(columns);
   }, [columns, transformColumns]);
@@ -906,6 +900,7 @@ const InternalTable = props => {
     }
   };
   const handleChange = (paging, filters, sorter) => {
+    console.log('sorter', sorter);
     onSorter?.(sorter);
   };
 

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { GridTableProps } from "./type";
+declare const TempTable: <RecordType extends object>(props: GridTableProps<RecordType>) => React.JSX.Element;
+export default TempTable;

package/es/grid-component/TempTable.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment } from 'react';
+import Table from "../table-component";
+import InternalTable from "./InternalTable";
+const TempTable = props => {
+  const {
+    infiniteScroll,
+    groupAble,
+    editAble,
+    ...rest
+  } = props;
+  const TabComponent = groupAble ? InternalTable : Table;
+  // const TabComponent = editAble ? Table : InternalTable
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TabComponent, _extends({}, rest, {
+    infiniteScroll: infiniteScroll,
+    groupAble: groupAble,
+    editAble: editAble
+  })));
+};
+export default TempTable;

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

@@ -499,7 +499,9 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
       }, /*#__PURE__*/React.createElement(Input, {
         placeholder: t ? t('Search') : `Search`,
         value: selectedKeys[0],
-        onChange: e => setSelectedKeys(e.target.value ? [e.target.value] : [])
+        onChange: e => {
+          setSelectedKeys(e.target.value ? [e.target.value] : ['']);
+        }
         // onPressEnter={() => handleSearch(selectedKeys as string[], confirm)}
         ,
         onPressEnter: () => confirm(),

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

@@ -1,5 +1,5 @@
-import InternalTable from './InternalTable';
+import TempTable from './TempTable';
 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;
+export default TempTable;

package/es/grid-component/index.js

@@ -1,4 +1,6 @@
-// import ConvertColumnTable  from './ConvertColumnTable'
-import InternalTable from "./InternalTable";
-export default InternalTable;
-// export default ConvertColumnTable
+import TempTable from "./TempTable";
+// import InternalTable  from './InternalTable'
+
+// 
+// export default InternalTable
+export default TempTable;

package/es/grid-component/styles.scss

@@ -1433,7 +1433,6 @@ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
 .rc-fullscreen {
   background-color: #ffffff85;
 }
-
 .be-popup-container {
   z-index: 1070 !important;
 }

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

@@ -470,14 +470,28 @@ const GridEdit = props => {
 
     // return [...new Set(Array.from(rangeCells).map((item: any) => parseInt(item.split('-')[0])))] ?? []
     return arr.filter(it => it < leng);
-  }, [dataSource.length, rangeCells]);
+  }, [dataSource, rangeCells]);
   const contextMenuItems = React.useMemo(() => {
     const a = showDefaultContext !== false ? [...defaultContext] : [];
     const b = propsContext && propsContext.length > 0 ? [...propsContext, {
       type: 'divider'
     }] : [];
     return [...b, ...a];
-  }, [propsContext, showDefaultContext]);
+  }, [defaultContext, propsContext, showDefaultContext]);
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    trigger,
+    getValues,
+    reset,
+    formState: {
+      errors
+    }
+  } = useForm({
+    mode: 'onChange',
+    resolver: validate ? yupResolver(validate) : undefined
+  });
   const onTriggerExpand = React.useCallback(record => {
     const key = getRowKey(record, dataSource.indexOf(record));
     let newExpandedKeys;
@@ -765,6 +779,84 @@ const GridEdit = props => {
   const handleDeleteAll = React.useCallback(() => {
     triggerChangeData?.([], 'INSERT_BEFORE');
   }, [triggerChangeData]);
+  const onSubmit = formData => {
+    try {
+      // const record = (await form.validateFields()) as RecordType;
+      const row = {
+        ...formData
+      };
+
+      // const newData = [...dataSource]
+      const newData = [...originData];
+
+      // @ts-ignore
+      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
+      const rs = updateArrayByKey(newData, row, rowKey);
+      if (index > -1) {
+        triggerChangeData?.(rs, 'onChange');
+      }
+    } catch (errInfo) {
+      console.log('Validate Failed:', errInfo);
+    }
+  };
+  const handleCellChange = args => {
+    const {
+      record,
+      type: changeType,
+      newState,
+      prevState,
+      option,
+      field,
+      indexCol,
+      indexRow,
+      key
+    } = args;
+    console.log('changeType', changeType);
+    if (changeType === 'blur') {
+      const handleChangeCallback = callbackData => {
+        const callbackRecord = callbackData;
+        Object.entries(callbackRecord).forEach(([name, value]) => {
+          setValue(name, value);
+        });
+        onSubmit(callbackRecord);
+      };
+      if (onCellChange) {
+        if (onCellChange.length > 1) {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            value: newState,
+            option,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            // rowsData: [...dataSource],
+            rowsData: [...originData],
+            sumValue: []
+          }, handleChangeCallback);
+        } else {
+          onCellChange({
+            field,
+            indexCol,
+            type: 'onChange',
+            option,
+            value: newState,
+            indexRow,
+            rowData: record,
+            rowId: key,
+            // rowsData: [...dataSource],
+            rowsData: [...originData],
+            sumValue: []
+          }, handleChangeCallback);
+          onSubmit(record);
+        }
+      }
+    }
+    if (prevState && newState && prevState !== newState && changeType === 'enter') {
+      onSubmit(record);
+    }
+  };
   const handleDeleteContent = React.useCallback(() => {
     if (selectedCells.current.size > 0) {
       const newData = [...dataSource];
@@ -781,16 +873,31 @@ const GridEdit = props => {
         const column = flatColumns2(visibleCols)[colIndex];
         const rowData = flattenData(childrenColumnName, dataSource)[rowIndex];
         if (newData[rowIndex] && field && field in newData[rowIndex] && isEditable(column, rowData)) {
+          const rowDta = {
+            ...newData[rowIndex]
+          };
+
           // @ts-ignore
           newData[rowIndex][field] = '';
+          handleCellChange({
+            key: getRowKey?.(newData[rowIndex], rowIndex),
+            field: column.field ?? column.dataIndex,
+            record: newData[rowIndex],
+            prevState: rowDta[field],
+            newState: '',
+            option: '',
+            indexCol: colIndex,
+            indexRow: rowIndex,
+            type: 'blur'
+          });
+
+          // if (onCellChange)
         }
       }
       const rsFilterData = updateOrInsert(flattenArray([...originData]), newData);
-
-      // triggerChangeData?.([...newData], 'DELETE_CONTENT')
       triggerChangeData?.([...rsFilterData], 'DELETE_CONTENT');
     }
-  }, [dataSource, originData, triggerChangeData, visibleCols]);
+  }, [dataSource, getRowKey, handleCellChange, originData, triggerChangeData, visibleCols]);
   const toolbarItemsBottom = useMemo(() => {
     if (!rowsFocus || rowsFocus.length === 0) {
       return toolbarItems?.filter(it => it.position === 'Bottom' && it.visible !== false && it.key !== 'DUPLICATE' && it.key !== 'INSERT_BEFORE' && it.key !== 'INSERT_AFTER' && it.key !== 'DELETE_ROWS' && it.key !== 'INSERT_CHILDREN').map(item => {
@@ -1000,20 +1107,6 @@ const GridEdit = props => {
       };
     });
   }, [handleAddMulti, handleDeleteAll, handleDeleteRows, handleDuplicate, handleInsertAfter, handleInsertBefore, handleInsertChild, itemsAdd, rowsFocus, t, toolbarItems]);
-  const {
-    control,
-    handleSubmit,
-    setValue,
-    trigger,
-    getValues,
-    reset,
-    formState: {
-      errors
-    }
-  } = useForm({
-    mode: 'onChange',
-    resolver: validate ? yupResolver(validate) : undefined
-  });
 
   // const isEditing = React.useCallback((record: RecordType) => {
   //   return record[rowKey as any] === editingKey.current
@@ -1815,83 +1908,6 @@ const GridEdit = props => {
     e.clipboardData.setData("text/plain", copyText);
     Message(t ? t('CopySuccessful') : 'Copy Successful');
   };
-  const onSubmit = formData => {
-    try {
-      // const record = (await form.validateFields()) as RecordType;
-      const row = {
-        ...formData
-      };
-
-      // const newData = [...dataSource]
-      const newData = [...originData];
-
-      // @ts-ignore
-      const index = flattenData(childrenColumnName, newData).findIndex(item => formData[rowKey] === item[rowKey]);
-      const rs = updateArrayByKey(newData, row, rowKey);
-      if (index > -1) {
-        triggerChangeData?.(rs, 'onChange');
-      }
-    } catch (errInfo) {
-      console.log('Validate Failed:', errInfo);
-    }
-  };
-  const handleCellChange = args => {
-    const {
-      record,
-      type: changeType,
-      newState,
-      prevState,
-      option,
-      field,
-      indexCol,
-      indexRow,
-      key
-    } = args;
-    if (changeType === 'blur') {
-      const handleChangeCallback = callbackData => {
-        const callbackRecord = callbackData;
-        Object.entries(callbackRecord).forEach(([name, value]) => {
-          setValue(name, value);
-        });
-        onSubmit(callbackRecord);
-      };
-      if (onCellChange) {
-        if (onCellChange.length > 1) {
-          onCellChange({
-            field,
-            indexCol,
-            type: 'onChange',
-            value: newState,
-            option,
-            indexRow,
-            rowData: record,
-            rowId: key,
-            // rowsData: [...dataSource],
-            rowsData: [...originData],
-            sumValue: []
-          }, handleChangeCallback);
-        } else {
-          onCellChange({
-            field,
-            indexCol,
-            type: 'onChange',
-            option,
-            value: newState,
-            indexRow,
-            rowData: record,
-            rowId: key,
-            // rowsData: [...dataSource],
-            rowsData: [...originData],
-            sumValue: []
-          }, handleChangeCallback);
-          onSubmit(record);
-        }
-      }
-    }
-    if (prevState && newState && prevState !== newState && changeType === 'enter') {
-      onSubmit(record);
-    }
-  };
   const handleEdit = (record, col, editType, rowIndex, e) => {
     onRemoveBorderSelectedCell(selectedCells.current, id);
     setTooltipContent('');

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

@@ -185,6 +185,11 @@ export type Locale = TableLocale & {
     delete_rows: string;
     custom: string;
 };
+export type Sort = {
+    columnKey: string;
+    field: string;
+    order: 'ascend' | 'descend' | null;
+};
 export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<RecordType>, 'columns' | 'rowSelection' | 'loading' | 'dataSource' | 'summary' | 'pagination' | 'locale'> {
     editAble?: boolean;
     infiniteScroll?: boolean;
@@ -223,8 +228,9 @@ export interface TableProps<RecordType = AnyObject> extends Omit<RcTableProps<Re
         column: ColumnTable<RecordType>;
         columnKey: string;
         field: string;
-        direction: 'Ascending' | 'Descending' | null;
+        order: 'ascend' | 'descend' | null;
     }) => void;
+    defaultSorter?: Sort[];
     selectionSettings?: SelectionSettings;
     rowKey?: string | keyof RecordType | GetRowKey<RecordType>;
     rowSelection?: RowSelection<RecordType>;