es-grid-template 1.9.53 → 1.9.56

package/es/table-component/ColumnsConfig.js

@@ -0,0 +1,303 @@
+import React, { useEffect, useState } from "react";
+import { Button, Checkbox, Drawer, Input, InputNumber, Select, Space } from "rc-master-ui";
+import { Info, Settings } from "becoxy-icons";
+import TableAli from "../ali-table";
+import { updateArrayByKey } from "../grid-component/hooks";
+const align = {
+  left: 'Left',
+  right: 'Right'
+};
+export const ColumnsConfig = props => {
+  const {
+    originColumns,
+    triggerChangeColumns,
+    t,
+    id,
+    locale,
+    tableLocal
+  } = props;
+  const [tmpColumn, settmpColumn] = useState([...originColumns]);
+  useEffect(() => {
+    if (originColumns) {
+      settmpColumn([...originColumns]);
+    }
+  }, [originColumns]);
+
+  // const treeColumns = React.useMemo(() => {
+  //   return convertColumnsToTreeData(propsColumns, columnsGroup)
+  // }, [propsColumns, columnsGroup])
+
+  // const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
+  //   defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined,
+  //   {
+  //     value: undefined,
+  //   },
+  // );
+  const getWindowSize = () => {
+    const {
+      innerWidth,
+      innerHeight
+    } = window;
+    return {
+      innerWidth,
+      innerHeight
+    };
+  };
+  const [windowSize, setWindowSize] = useState(getWindowSize());
+  const [open, setOpen] = useState(false);
+  const [currentRow, setCurrentRow] = useState('');
+  useEffect(() => {
+    const handleWindowResize = () => {
+      setWindowSize(getWindowSize());
+    };
+    window.addEventListener('resize', handleWindowResize);
+    return () => {
+      window.removeEventListener('resize', handleWindowResize);
+    };
+  }, []);
+  const onClose = () => {
+    setOpen(!open);
+  };
+  const handleAccept = () => {
+    triggerChangeColumns?.(tmpColumn, [], 'columnChoose');
+    onClose();
+  };
+  const handleChange = newElemt => {
+    const newEle = {
+      ...newElemt
+    };
+    const abc = updateArrayByKey(tmpColumn, newEle, 'field');
+    settmpColumn(abc);
+  };
+  const columns = [{
+    field: 'headerText1',
+    headerText: 'Tên cột',
+    template: args => {
+      const {
+        rowData
+      } = args;
+      return /*#__PURE__*/React.createElement("span", null, rowData.headerText);
+    },
+    getCellProps(value, row) {
+      return {
+        style: {},
+        onClick: () => {
+          setCurrentRow(row.field);
+        }
+      };
+    }
+  }, {
+    field: 'headerText',
+    headerText: 'Tên cột hiển thị',
+    width: 200,
+    getCellProps(value, row) {
+      return {
+        style: {
+          paddingBlock: currentRow === row.field ? 0 : undefined
+        },
+        onClick: () => {
+          setCurrentRow(row.field);
+        }
+      };
+    },
+    template: args => {
+      const {
+        value,
+        rowData
+      } = args;
+      if (currentRow === rowData.field) {
+        return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Input, {
+          defaultValue: value,
+          allowClear: true,
+          onBlur: e => {
+            const newData = {
+              ...rowData,
+              visible: e.target.value
+            };
+            handleChange(newData);
+          }
+        }));
+      }
+      return /*#__PURE__*/React.createElement("span", null, value);
+    }
+  }, {
+    field: 'visible',
+    headerText: 'Hiển thị',
+    textAlign: 'center',
+    headerTextAlign: 'center',
+    width: 80,
+    template: args => {
+      const {
+        value,
+        rowData
+      } = args;
+      return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Checkbox, {
+        defaultChecked: value !== false,
+        onChange: e => {
+          const newData = {
+            ...rowData,
+            visible: e.target.checked
+          };
+          handleChange(newData);
+        }
+      }));
+    }
+  }, {
+    field: 'fixed',
+    headerText: 'Cố định cột',
+    getCellProps(value, row) {
+      return {
+        style: {
+          paddingBlock: currentRow === row.field ? 0 : undefined
+        },
+        onClick: () => {
+          setCurrentRow(row.field);
+        }
+      };
+    },
+    template: args => {
+      const {
+        value,
+        rowData
+      } = args;
+      const rs = value ?? rowData.fixedType;
+      if (currentRow === rowData.field) {
+        return /*#__PURE__*/React.createElement(Select, {
+          value: rs,
+          allowClear: true,
+          style: {
+            width: '100%'
+          },
+          options: [{
+            value: 'left',
+            label: 'Trái'
+          }, {
+            value: 'right',
+            label: 'Phải'
+          }],
+          onChange: val => {
+            const newData = {
+              ...rowData,
+              fixed: val
+            };
+            handleChange(newData);
+          }
+        });
+      }
+      if (rs) {
+        return /*#__PURE__*/React.createElement("span", null, t ? t?.(align[rs]) : align[rs]);
+      }
+      return '';
+    }
+  }, {
+    field: 'width',
+    headerText: 'Độ rộng cột (px)',
+    getCellProps(value, row) {
+      return {
+        style: {
+          paddingBlock: currentRow === row.field ? 0 : undefined
+        },
+        onClick: () => {
+          setCurrentRow(row.field);
+        }
+      };
+    },
+    template: args => {
+      const {
+        value,
+        rowData
+      } = args;
+      if (currentRow === rowData.field) {
+        return /*#__PURE__*/React.createElement(InputNumber, {
+          defaultValue: value,
+          style: {
+            width: '100%'
+          },
+          changeOnWheel: true,
+          onBlur: e => {
+            const newData = {
+              ...rowData,
+              visible: e.target.value
+            };
+            handleChange(newData);
+          }
+        });
+      }
+      return /*#__PURE__*/React.createElement("span", null, value);
+    }
+  }];
+  const handleReset = () => {
+    settmpColumn([...originColumns]);
+  };
+  const footer = /*#__PURE__*/React.createElement("div", {
+    className: "d-flex justify-content-end gap-2 w-100"
+  }, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    onClick: () => handleReset(),
+    styles: {
+      icon: {}
+    }
+  }, "Thi\u1EBFt l\u1EADp l\u1EA1i"), /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    styles: {
+      icon: {}
+    },
+    onClick: () => handleAccept()
+  }, "X\xE1c nh\u1EADn"), /*#__PURE__*/React.createElement(Button, {
+    onClick: () => onClose(),
+    styles: {
+      icon: {}
+    }
+  }, "Cancel"));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Settings, {
+    "data-tooltip-id": `${id}-tooltip-content`,
+    "data-tooltip-content": locale?.table?.setting || tableLocal?.setting || 'Setting',
+    fontSize: 16,
+    style: {
+      cursor: 'pointer'
+    },
+    className: "toolbar-icon",
+    onClick: () => setOpen(true)
+  }), /*#__PURE__*/React.createElement(Drawer, {
+    title: `Cấu hình cột`,
+    placement: "right"
+    // size={'large'}
+    ,
+    styles: {
+      wrapper: {
+        width: 1200
+      },
+      body: {
+        paddingBlock: 6
+      }
+    },
+    onClose: onClose,
+    open: open,
+    footer: footer,
+    extra: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Info, {
+      "data-tooltip-id": `${id}-tooltip-content`,
+      "data-tooltip-content": 'Click vào dòng để chỉnh sửa'
+    }))
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(TableAli, {
+    fullScreen: false,
+    columns: columns,
+    dataSource: tmpColumn,
+    gridLines: "Horizontal",
+    height: windowSize.innerHeight - 125,
+    minHeight: windowSize.innerHeight - 125,
+    rowDnd: {
+      enabled: true,
+      onChange: args => {
+        settmpColumn(args.rows);
+      }
+    },
+    expandable: {
+      expandIconColumnIndex: 1,
+      defaultExpandAllRows: true
+    },
+    useOuterBorder: true,
+    allowFiltering: false,
+    allowSortering: false,
+    allowResizing: false
+  }))));
+};

package/es/table-component/ContextMenu.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Dropdown, Menu } from "antd";
+import { Dropdown, Menu } from "rc-master-ui";
 export const findItemByKey = (array, key, value) => {
   for (let i = 0; i < array.length; i++) {
     const item = array[i];

package/es/table-component/InternalTable.js

@@ -9,7 +9,11 @@ import "./style.scss";
 import { faker } from '@faker-js/faker';
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import Grid from "./table/Grid";
-import { addRowIdArray, convertFlatColumn1, convertToObj, convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, getTreeDepth, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
+import { addRowIdArray, convertFlatColumn1,
+// convertToObj,
+convertToObjTrue, filterDataByColumns, findAllChildrenKeys2, flatColumns2, getAllRowKey,
+// getDiffent2Array,
+getFixedFields, getInvisibleColumns, getTreeDepth, groupArrayByColumns, isTreeArray, updateWidthsByOther } from "./hook/utils";
 import { convertToTanStackColumns } from "./hook/useColumns";
 import { convertColumns } from "./hook/convert";
 import { removeInvisibleColumns } from "../grid-component/hooks";
@@ -98,6 +102,12 @@ const InternalTable = props => {
   const depthData = React.useMemo(() => {
     return getTreeDepth(convertData);
   }, [convertData]);
+
+  //  const dataIds = React.useMemo<UniqueIdentifier[]>(
+  //   () => convertData.map((it: any) => it.rowId),
+  //   [convertData],
+  // )
+
   const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
   const flatColumns = React.useMemo(() => {
     return flatColumns2(propsColumns);
@@ -164,17 +174,26 @@ const InternalTable = props => {
   const columnVisibility = React.useMemo(() => {
     return getInvisibleColumns(columns);
   }, [columns]);
-  const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
-    value: undefined
-  });
+
+  // const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(
+  //   undefined,
+  //   {
+  //     value: undefined,
+  //   },
+  // );
+
   const triggerChangeColumns = (cols, keys, type) => {
     if (type === 'cellClick') {
       setColumns(cols);
     } else {
       setColumns(cols);
-      const aa = flatColumns2(columns).map(it => it.field);
-      const rsss = getDiffent2Array(aa, keys);
-      setColumnsHiddenKeys(rsss);
+
+      // const aa = flatColumns2(columns).map((it) => it.field)
+
+      // const rsss = getDiffent2Array(aa, keys)
+
+      // setColumnsHiddenKeys(rsss as any)
+
       onChooseColumns?.({
         showColumns: removeInvisibleColumns([...cols]),
         columns: [...cols],
@@ -246,8 +265,10 @@ const InternalTable = props => {
     groupSetting: groupSetting,
     groupAble: groupAble,
     groupColumns: groupColumns,
-    columnPinning: columnPinning,
-    columnHidden: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
+    columnPinning: columnPinning
+    // columnHidden={columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility}
+    ,
+    columnHidden: columnVisibility,
     triggerFilter: setFilterState,
     triggerSorter: setSorterStates,
     defaultFilter: defaultFilter,

package/es/table-component/TableContainer.js

@@ -5,12 +5,14 @@ import { TableContext } from "./useContext";
 import Pagination from 'rc-master-ui/es/pagination';
 import { Toolbar } from 'rc-master-ui';
 import { Maximize, Minimize } from 'becoxy-icons';
-import { ColumnsChoose } from "./ColumnsChoose";
 import { numericFormatter } from 'react-numeric-component';
 import TableWrapper from "./table/TableWrapper";
 import { getTableHeight, sumSize, updateColumnWidthsRecursive } from "./hook/utils";
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useLocale } from "rc-master-ui/es/locale";
+
+// import { ColumnsChoose } from './ColumnsChoose'
+import { ColumnsConfig } from "./ColumnsConfig";
 const TableContainer = props => {
   const {
     t,
@@ -287,7 +289,7 @@ const TableContainer = props => {
     },
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
-  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsConfig, {
     id: id,
     table: table,
     locale: locale,

package/es/table-component/TableContainerEdit.js

@@ -13,7 +13,7 @@ sumSize,
 unFlattenData, updateArrayByKey, updateColumnWidthsRecursive, updateOrInsert } from "./hook/utils";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useForm } from 'react-hook-form';
-import { Modal, Typography } from "antd";
+import { Modal, Typography } from "rc-master-ui";
 import Button from "rc-master-ui/es/button";
 import Dropdown from "rc-master-ui/es/dropdown";
 import Pagination from "rc-master-ui/es/pagination";
@@ -23,13 +23,13 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { Toolbar } from "rc-master-ui";
 import classNames from "classnames";
 import { Maximize, Minimize } from "becoxy-icons";
-import { ColumnsChoose } from "./ColumnsChoose";
 import TableWrapper from "./table/TableWrapper";
 import withReactContent from "sweetalert2-react-content";
 import Swal from "sweetalert2";
 import { useLocale } from "rc-master-ui/es/locale";
 import { getToolbarTemplate } from "../grid-component/hooks";
 import moment from "moment";
+import { ColumnsConfig } from "./ColumnsConfig";
 const MySwal = withReactContent(Swal);
 const {
   Paragraph,
@@ -649,11 +649,24 @@ const TableContainerEdit = props => {
       const isInsideContainer = element.closest(".be-popup-container") && container;
       const isInsideContainerContext = containerContextMenu && element.closest(".popup-context-menu");
       const isInsideToolbar = element.closest(`.ui-rc-toolbar-selection-overflow-item`) && itemContainer;
-      const isInsideHeader = itemHeader && itemHeader.contains(event.target);
+      const isInsideHeader = itemHeader && itemHeader.contains(element);
       if (isInsideContainer || isInsideToolbar || isInsideHeader || isInsideContainerContext || element.id === id) {
         return;
       }
-      if (containerRef.current && tableBody && !tableBody.contains(event.target)) {
+
+      // trường hợp đặc biệt select table clear icon
+      const path = '<path d="M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z"></path>';
+      const expectedD = path.match(/d="([^"]*)"/)?.[1];
+      const clickedPath = element.closest('path') ?? element.closest('svg')?.querySelector('path');
+      if (clickedPath) {
+        const isMatch = clickedPath.getAttribute('d') === expectedD;
+        if (isMatch) {
+          return;
+        }
+      }
+      // trường hợp đặc biệt select table clear icon
+
+      if (containerRef.current && tableBody && !tableBody.contains(element)) {
         if (editingKey) {
           onBlur?.(dataSource);
         }
@@ -2113,7 +2126,7 @@ const TableContainerEdit = props => {
     },
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
-  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
+  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsConfig, {
     table: table,
     columns: columns,
     originColumns: propsColumns,