es-grid-template 1.5.16 → 1.6.0

package/es/grid-component/CheckboxFilter2.js

@@ -79,7 +79,6 @@ const CheckboxFilter = props => {
 
   // const [searchValue, setSearchValue] = React.useState('');
 
-  console.log('options', options);
   const [openKeys, setOpenKeys] = React.useState([]);
 
   // clear search value after close filter dropdown
@@ -172,9 +171,6 @@ const CheckboxFilter = props => {
       onSelect?.(keys);
     }
   };
-  console.log('getTreeData({ filters: options })', getTreeData({
-    filters: options
-  }));
   if (filterMode === 'tree') {
     return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(FilterSearch, {
       filterSearch: filterSearch,

package/es/grid-component/ColumnsChoose.js

@@ -378,7 +378,7 @@ export const ColumnsChoose = props => {
   const defaultSelectedKeys = useMemo(() => {
     const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
     return getVisibleColumnKeys(defaultColumns);
-  }, [propsColumns]);
+  }, [columnsGroup, propsColumns]);
   const [clicked, setClicked] = useState(false);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
 
@@ -473,7 +473,8 @@ export const ColumnsChoose = props => {
     placement: 'bottomLeft',
     content: /*#__PURE__*/React.createElement("div", {
       style: {
-        minWidth: 250
+        minWidth: 250,
+        maxWidth: 320
       }
     }, /*#__PURE__*/React.createElement(Input, {
       style: {
@@ -518,8 +519,12 @@ export const ColumnsChoose = props => {
       defaultCheckedKeys: selectedKeys
       // defaultCheckedKeys={defaultSelectedKeys}
       ,
-      selectedKeys: [],
-      height: window.innerHeight - 200
+      selectedKeys: []
+
+      // height={window.innerHeight - 200}
+      ,
+      height: window.innerHeight / 2 > 450 ? 450 : window.innerHeight / 2 - 110
+      // style={{height: 300}}
     }), /*#__PURE__*/React.createElement(BoxAction, {
       className: 'px-1'
     }, /*#__PURE__*/React.createElement(Button

package/es/grid-component/ColumnsGroup/ColumnsGroup.js

@@ -10,6 +10,7 @@ import { Button, Popover, Tooltip } from "antd";
 // import {SettingOutlined} from "@ant-design/icons";
 import { Select } from "rc-master-ui";
 import styled from "styled-components";
+import { customFilterOption } from "../hooks";
 const BoxAction = styled.div.withConfig({
   displayName: "BoxAction",
   componentId: "es-grid-template__sc-1uj3tyy-0"
@@ -119,7 +120,8 @@ export const ColumnsGroup = props => {
     }, "M\u1EE9c 1"), /*#__PURE__*/React.createElement(Select, {
       style: {
         width: '100%'
-      }
+      },
+      showSearch: true
       // labelInValue={true}
       // options={columns.filter((it: any) => !tempGroup.includes(it.field))}
       // options={columns && columns.length > 0 ? options : []}
@@ -136,7 +138,8 @@ export const ColumnsGroup = props => {
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
         return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
-      }
+      },
+      filterOption: customFilterOption
       // hideSelectedOptions
     })), /*#__PURE__*/React.createElement("div", {
       className: 'mb-1',
@@ -149,6 +152,7 @@ export const ColumnsGroup = props => {
         margin: 0
       }
     }, "M\u1EE9c 2"), /*#__PURE__*/React.createElement(Select, {
+      showSearch: true,
       style: {
         width: '100%'
       },
@@ -165,7 +169,8 @@ export const ColumnsGroup = props => {
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
         return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
-      }
+      },
+      filterOption: customFilterOption
     })), /*#__PURE__*/React.createElement("div", {
       className: 'mb-1',
       style: {
@@ -181,6 +186,7 @@ export const ColumnsGroup = props => {
         width: '100%'
       },
       options: options,
+      showSearch: true,
       value: tempGroup?.[2],
       onChange: val => onChangeGroupColumns(val, 2),
       allowClear: !!tempGroup?.[2] && !(unClearableLevel && unClearableLevel - 3 >= 0)
@@ -192,7 +198,8 @@ export const ColumnsGroup = props => {
       labelRender: labelProps => {
         const it = columns.find(col => col.field === labelProps.value);
         return t ? t(it?.columnGroupText ?? it?.headerText) : it?.columnGroupText ?? it?.headerText;
-      }
+      },
+      filterOption: customFilterOption
     }))), /*#__PURE__*/React.createElement(BoxAction, {
       className: 'px-1'
     }, /*#__PURE__*/React.createElement(Button

package/es/grid-component/EditableCell.js

@@ -28,6 +28,9 @@ import { cyan, green, red, blue } from '@ant-design/colors';
 const {
   SHOW_PARENT
 } = TreeSelect;
+const {
+  TextArea
+} = Input;
 const filterTreeNode = (input, treeNode) => {
   const {
     title,
@@ -114,8 +117,13 @@ const EditableCell = props => {
           style: {
             width: '100%',
             height: '100%'
-          },
-          value: date,
+          }
+          // value={date}
+          ,
+          defaultValue: date
+          // preserveInvalidOnBlur
+          ,
+
           onBlur: () => {
             const formState = getValues();
             const itemState = getValues(dataIndex);
@@ -178,8 +186,10 @@ const EditableCell = props => {
             width: '100%',
             height: '100%'
           },
-          showTime: true,
-          value: date,
+          showTime: true
+          // value={date}
+          ,
+          defaultValue: date,
           placeholder: t ? t(column.placeholder ?? 'Select') : column.placeholder ?? 'Select',
           disabled: isDisable(column, record) ?? false,
           maxDate: maxDate,
@@ -708,7 +718,7 @@ const EditableCell = props => {
           style: {
             display: 'flex',
             alignItems: 'center',
-            justifyContent: column.align ?? 'left',
+            justifyContent: column.align ?? 'center',
             paddingInline: 5,
             height: '100%',
             width: '100%'
@@ -718,7 +728,7 @@ const EditableCell = props => {
           // style={{ textAlign: column.align ?? 'left' }}
           ,
           onChange: val => {
-            const newVal = parseBooleanToValue(val.target.checked, typeof value);
+            const newVal = typeof value === "number" ? parseBooleanToValue(val.target.checked, typeof value) : val.target.checked;
             onChange(newVal);
             const key = getRowKey?.(record, index);
             const formState = getValues();
@@ -929,11 +939,14 @@ const EditableCell = props => {
           "data-tooltip-id": `${id}-tooltip-form-error`
         }));
       default:
-        return /*#__PURE__*/React.createElement(Input, {
+        return /*#__PURE__*/React.createElement(TextArea, {
           id: `col${indexCol}-record${indexRow}`,
           style: {
-            textAlign: column.align
+            textAlign: column.align,
+            resize: 'none',
+            height: '100%'
           }
+
           // @ts-ignore
           // value={!isNullOrUndefined(record[column.dataIndex]) ? record[column.dataIndex] : ''}
           ,
@@ -989,7 +1002,11 @@ const EditableCell = props => {
           onChange: onChange,
           status: isInvalid ? 'error' : undefined,
           "data-tooltip-content": message,
-          "data-tooltip-id": `${id}-tooltip-form-error`
+          "data-tooltip-id": `${id}-tooltip-form-error`,
+          autoSize: {
+            minRows: 1,
+            maxRows: 1
+          }
         });
     }
   };

package/es/grid-component/InternalTable.js

@@ -3,7 +3,7 @@ import React, { createContext, Fragment, useCallback, useContext, useState } fro
 // import {Resizable} from "react-resizable";
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray, booleanOperator, findItemByKey, findItemPath, getFormat, getTypeFilter, groupArrayByColumns, numberOperator, removeColumns, stringOperator, translateOption, updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
+import { addRowIdArray, booleanOperator, convertFilters, convertFlatColumn, filterDataByColumns4, findItemByKey, findItemPath, getAllRowKey, getFormat, getTypeFilter, groupArrayByColumns, numberOperator, removeColumns, removeInvisibleColumns, stringOperator, translateOption, updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
 import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
@@ -37,6 +37,7 @@ import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable
 import { Resizable } from "react-resizable";
 import { faker } from "@faker-js/faker";
 import InfiniteTable from "./table/InfiniteTable";
+import useMergedState from "rc-util/es/hooks/useMergedState";
 dayjs.extend(customParseFormat);
 const MySwal = withReactContent(Swal);
 const ASCEND = 'ascend';
@@ -180,15 +181,19 @@ const InternalTable = props => {
     summary,
     infiniteScroll,
     wrapSettings,
+    onFilter,
     ...rest
   } = props;
   const id = React.useMemo(() => {
     return tableId ?? faker.string.alpha(20);
     // return tableId ?? newGuid()
   }, [tableId]);
-  const rowKey = React.useMemo(() => {
-    return propRowKey ?? 'rowId';
-  }, [propRowKey]);
+
+  // const rowKey = React.useMemo(() => {
+  //   return  propRowKey ?? 'rowId'
+  // }, [propRowKey])
+
+  const rowKey = 'rowId';
   const [scrollHeight, setHeight] = useState(0);
   const local = lang && lang === 'en' ? en : vi;
   const dateRangeLocale = lang && lang === 'en' ? enDr : viDr;
@@ -208,14 +213,30 @@ const InternalTable = props => {
     over: -1
   });
   const [tooltipContent, setTooltipContent] = useState('');
-  const mergedData = React.useMemo(() => {
-    // return addRowIdArray(dataSource)
+  const [filterStates, setFilterState] = React.useState(null);
+  // const [filterData, setFilterData] = React.useState<any>(null)
 
+  const mergedData = React.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
       return groupArrayByColumns(dataSource, groupColumns);
     }
     return addRowIdArray(dataSource);
   }, [dataSource, groupAble, groupColumns, groupSetting]);
+
+  // ========================= Keys =========================
+  const [mergedFilterKeys, setMergedFilterKeys] = useMergedState(getAllRowKey(mergedData), {
+    value: undefined
+  });
+  //
+  // const originData = React.useMemo(() => {
+  //
+  //   if (groupAble && groupSetting && groupSetting.client !== false) {
+  //     return groupArrayByColumns(dataSource, groupColumns)
+  //   }
+  //   return addRowIdArray(dataSource)
+  //
+  // }, [dataSource, groupAble, groupColumns, groupSetting])
+
   const [columns, setColumns] = React.useState([]);
   React.useEffect(() => {
     if (propsHeight) {
@@ -234,6 +255,20 @@ const InternalTable = props => {
   React.useEffect(() => {
     setColumns(propsColumns);
   }, [propsColumns]);
+  const handleOnFilter = queries => {
+    if (onFilter) {
+      onFilter?.(convertFilters(queries));
+    } else {
+      setFilterState(convertFilters(queries));
+      const b = filterDataByColumns4(mergedData, convertFilters(queries), []);
+      setMergedFilterKeys(getAllRowKey(b));
+      if (queries && queries.length > 0) {
+        // setIsFilter?.(true)
+      } else {
+        // setIsFilter?.(false)
+      }
+    }
+  };
   const handleResize = column => (e, {
     size
   }) => {
@@ -405,10 +440,11 @@ const InternalTable = props => {
             })
           }),
           render: (val, record) => {
+            const tmpData = filterDataByColumns4(mergedData, filterStates, mergedFilterKeys);
             if (pagination && pagination.onChange && pagination.currentPage && pagination.pageSize) {
-              return findItemPath(mergedData, record, rowKey, pagination.currentPage, pagination.pageSize);
+              return findItemPath(tmpData, record, rowKey, pagination.currentPage, pagination.pageSize);
             }
-            return findItemPath(mergedData, record, rowKey);
+            return findItemPath(tmpData, record, rowKey);
           }
         };
       }
@@ -504,28 +540,28 @@ const InternalTable = props => {
         render: (value, record, rowIndex) => {
           const colFormat = typeof column.format === 'function' ? column.format(record) : column.format;
           const cellFormat = getFormat(colFormat, format);
-          if (groupSetting && groupSetting.hiddenColumnGroup === false) {
+          if (groupAble && groupSetting && groupSetting.hiddenColumnGroup === false) {
             if (record.children) {
-              return renderContent(column, value, record, rowIndex, cellFormat);
+              return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
             }
             if (groupColumns?.includes(column.field)) {
               return '';
             }
-            return renderContent(column, value, record, rowIndex, cellFormat);
+            return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
           }
-          if (column.field === firstNonGroupColumn?.field && record.children) {
+          if (groupAble && column.field === firstNonGroupColumn?.field && record.children) {
             const currentGroupColumn = flatColumns2(columns).find(it => it.field === record.field);
             if (currentGroupColumn?.template) {
-              return renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
+              return renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat);
             }
-            return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
+            return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, colIndex, false, cellFormat));
           }
-          return renderContent(column, value, record, rowIndex, cellFormat);
+          return renderContent(column, value, record, rowIndex, colIndex, false, cellFormat);
         },
         hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(column.field) ? true : transformedColumn.hidden
       };
     });
-  }, [columns, t, getColumnSearchProps, sortMultiple, groupSetting, groupAble, groupColumns, pagination, mergedData, rowKey, handleResize, firstNonGroupColumn?.field, nonGroupColumns, format]);
+  }, [columns, t, id, wrapSettings, getColumnSearchProps, sortMultiple, 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);
@@ -573,7 +609,7 @@ const InternalTable = props => {
         };
       }
     });
-  }, [convertColumns, t]);
+  }, [convertColumns, id, t, wrapSettings]);
   const mergedColumns = React.useMemo(() => {
     return transformColumns(columns);
   }, [columns, transformColumns]);
@@ -591,9 +627,9 @@ const InternalTable = props => {
       });
     }
     onChooseColumns?.({
-      showColumns: [],
-      columns: [],
-      flattenColumns: []
+      showColumns: removeInvisibleColumns([...newColumns]),
+      columns: [...newColumns],
+      flattenColumns: convertFlatColumn([...newColumns])
     });
   };
   const onDragEnd = ({
@@ -672,7 +708,9 @@ const InternalTable = props => {
       rowData,
       index
     } = args;
-    const tmpData = [...mergedData];
+
+    // const tmpData = [...mergedData]
+    const tmpData = filterDataByColumns4(mergedData, filterStates, mergedFilterKeys);
     if (idCommand === 'DELETE') {
       // bật modal confirm
       if (commandSettings && commandSettings.confirmDialog) {
@@ -698,7 +736,7 @@ const InternalTable = props => {
 
               let newData = [];
               if (rowData?.parentId) {
-                const parent = findItemByKey(mergedData, rowKey, rowData.parentId);
+                const parent = findItemByKey(tmpData, rowKey, rowData.parentId);
                 const childData = parent?.children ? [...parent.children] : [];
                 const findIndex = childData.findIndex(obj => obj[rowKey] === rowData[rowKey]);
                 childData.splice(Number(findIndex), 1);
@@ -785,7 +823,7 @@ const InternalTable = props => {
       }
     }
   };
-  const triggerPaste = (pastedRows, pastedColumnsArray, newData) => {
+  const triggerPaste = (pastedRows, pastedColumnsArray, newData, copyRows) => {
     const handlePasteCallback = callbackData => {
       const newDataUpdate = updateData(mergedData, callbackData, rowKey);
       triggerChangeData(newDataUpdate);
@@ -797,6 +835,7 @@ const InternalTable = props => {
         // có callback
         onCellPaste.onPasted({
           pasteData: pastedRows,
+          copyRows,
           type: 'onPaste',
           data: mergedData,
           pastedColumns: pastedColumnsArray
@@ -806,6 +845,7 @@ const InternalTable = props => {
         onCellPaste.onPasted({
           pasteData: pastedRows,
           type: 'onPaste',
+          copyRows,
           data: mergedData,
           pastedColumns: pastedColumnsArray
         }, handlePasteCallback);
@@ -833,8 +873,13 @@ const InternalTable = props => {
     t: t,
     id: id,
     locale: locale,
-    tableRef: tableRef,
-    dataSource: mergedData,
+    tableRef: tableRef
+    // dataSource={mergedData}
+    ,
+    originData: mergedData
+    // dataSource={filterStates && filterStates.length ? filterData : mergedData}
+    ,
+    dataSource: filterDataByColumns4(mergedData, filterStates, mergedFilterKeys),
     format: format,
     columns: mergedColumns,
     showSorterTooltip: {
@@ -874,14 +919,23 @@ const InternalTable = props => {
         cell: TableBodyCell
       }
     },
-    setTooltipContent: setTooltipContent
+    setTooltipContent: setTooltipContent,
+    onFilter: val => {
+      handleOnFilter(val);
+      // triggerFilter?.(convertFilters(val))
+      // onFilter?.(convertFilters(val))
+    },
+    setMergedFilterKeys: setMergedFilterKeys,
+    mergedFilterKeys: mergedFilterKeys,
+    wrapSettings: wrapSettings
   })))), /*#__PURE__*/React.createElement(DragOverlay, {
     style: {
-      width: 100
+      minWidth: 100,
+      width: columns[columns.findIndex(i => i.field === dragIndex.active)]?.width
     }
   }, /*#__PURE__*/React.createElement("th", {
     style: {
-      backgroundColor: '#c4c4c4',
+      backgroundColor: '#f0f0f0',
       padding: 6,
       borderRadius: 6,
       fontWeight: 500