es-grid-template 1.9.59 → 1.9.60

package/es/ali-table/ColumnsConfig.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { ColumnsTable, ColumnTable, GridTableLocale, Locale } from "../grid-component/type";
+export type IColumnsChoose<RecordType> = {
+    id: string;
+    originColumns: ColumnTable[];
+    columnsGroup?: string[];
+    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, keys: string[], type: string) => void;
+    t?: any;
+    triggerChangeKeys?: any;
+    columnHidden: any;
+    locale?: Locale;
+    tableLocal: GridTableLocale;
+};
+export declare const ColumnsConfig: <RecordType extends object>(props: IColumnsChoose<RecordType>) => JSX.Element;

package/es/ali-table/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/ali-table/Grid.js

@@ -10,11 +10,16 @@ import classNames from "classnames";
 import Pagination from "rc-master-ui/es/pagination";
 import { Maximize, Minimize } from "becoxy-icons";
 import { numericFormatter } from "react-numeric-component";
-import { pageSizeOptions } from "../grid-component/hooks";
+import { pageSizeOptions, removeInvisibleColumns } from "../grid-component/hooks";
 import ContextMenu from "../table-component/ContextMenu";
 import { TableContext } from "./useContext";
-import { ColumnsChoose } from "./pipeline/features/ColumnsChoose";
+// import { ColumnsChoose } from "./pipeline/features/ColumnsChoose";
+
 import { StyleTableContainer } from "./base-table/styles";
+import { ColumnsConfig } from "../table-component/ColumnsConfig";
+import { convertFlatColumn1 } from "../table-component/hook/utils";
+// import { StyleTableContainer } from "./base-table/styles";
+
 const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     id,
@@ -28,7 +33,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     toolbarMode,
     pagination,
     infiniteScroll,
-    dataSource,
+    // dataSource,
     originData,
     format,
     locale,
@@ -48,16 +53,21 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     onRowStyles,
     showColumnChoose,
     originColumns,
-    columns,
+    // columns,
     groupColumns,
-    setVisibleKeys,
+    // setVisibleKeys,
     footerDataSource,
     loading,
     useVirtual,
     useOuterBorder = true,
     showHeader = true,
     gridLines,
-    dataRowIds
+    dataRowIds,
+    editAble,
+    toolbarItemsBottom,
+    toolbarItemTopRight,
+    toolbarItemsTop,
+    onChooseColumns
   } = props;
   const {
     cssVariables
@@ -146,8 +156,26 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
   }, []);
-  const triggerChangeColumns = (nextColumn, _, nextVisibleKeys) => {
-    setVisibleKeys(nextVisibleKeys);
+  const triggerChangeColumns = (cols, keys, type) => {
+    if (type === 'cellClick') {
+
+      //  setColumns(cols)
+    } else {
+      //  setColumns(cols)
+      pipeline.columns(cols);
+
+      // const aa = flatColumns2(columns).map((it) => it.field)
+
+      // const rsss = getDiffent2Array(aa, keys)
+
+      // setColumnsHiddenKeys(rsss as any)
+
+      onChooseColumns?.({
+        showColumns: removeInvisibleColumns([...cols]),
+        columns: [...cols],
+        flattenColumns: convertFlatColumn1([...cols])
+      });
+    }
   };
   const artTableWrapperProps = {
     style: {
@@ -158,6 +186,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     return (toolbarItems ?? []).filter(it => it.position !== 'Bottom');
   }, [toolbarItems]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyleTableContainer, {
+    id: id,
     className: classNames(`${prefix}-grid`, {
       [tableClassNames]: !!tableClassNames,
       [`${prefix}-grid-theme-dark`]: theme?.theme === 'dark',
@@ -177,38 +206,62 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
       flexDirection: 'column',
       ...artTableWrapperProps.style
     }
-  }, showToolbar !== false && (fullScreen !== false || title || topToolbaritems.length > 0) && /*#__PURE__*/React.createElement("div", {
-    className: classNames(`${prefix}-grid-top`, {})
+  }, (showToolbar !== false || fullScreen !== false || showColumnChoose || title) && /*#__PURE__*/React.createElement("div", {
+    className: classNames(`${prefix}-grid-top-toolbar`, {}),
+    style: {
+      paddingInline: '1rem',
+      paddingBlock: '.5rem'
+    }
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
-      alignItems: 'center'
+      alignItems: 'center',
+      gap: '1rem'
     }
-  }, topToolbaritems.length > 0 && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       flex: 1,
       overflow: 'hidden'
     }
+  }, toolbarItemsTop && toolbarItemsTop.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc-toolbar-bottom border-0', {
+      'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
+    })
   }, /*#__PURE__*/React.createElement(Toolbar, {
-    items: topToolbaritems,
-    mode: toolbarMode
-  })), /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: '100%'
+    },
+    items: toolbarItemsTop ?? [],
+    mode: toolbarMode,
+    onClick: ({}) => {
+
+      // setEditingKey('')
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       justifyContent: 'space-between',
       alignItems: 'center',
-      gap: '.25rem'
+      gap: '.75rem'
     }
   }, pagination && pagination.onChange && pagination?.position && pagination?.position[0] === 'topRight' && /*#__PURE__*/React.createElement(Pagination, _extends({
     showSizeChanger: true,
     responsive: true,
     size: 'small',
     rootClassName: 'top-pagination',
-    showTotal: (totalItems, range) =>
+    showTotal: (total, range) =>
     // @ts-ignore
-    `${range[0]}-${range[1]} / ${totalItems} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
+    `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
+  }, pagination)), typeof actionTemplate === 'function' ? actionTemplate() : actionTemplate, toolbarItemTopRight && /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    items: toolbarItemTopRight,
+    mode: toolbarMode
+  })), fullScreen !== false && (isFullScreen ? /*#__PURE__*/React.createElement(Minimize, {
     fontSize: 16,
     onClick: () => {
       setIsFullScreen(!isFullScreen);
@@ -222,22 +275,23 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     },
     "data-tooltip-id": `${id}-tooltip-content`,
     "data-tooltip-content": locale?.table?.fullScreen || tableLocal?.fullScreen || 'Full screen'
-  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsChoose, {
-    id: id ?? '',
-    locale: locale,
-    tableLocal: tableLocal,
-    columns: columns,
+  })), showColumnChoose && /*#__PURE__*/React.createElement(ColumnsConfig, {
     originColumns: originColumns,
     t: t,
+    id: id ?? '',
     columnsGroup: groupColumns,
-    triggerChangeColumns: triggerChangeColumns
+    triggerChangeColumns: triggerChangeColumns,
+    locale: locale,
+    tableLocal: tableLocal
   }))), /*#__PURE__*/React.createElement("div", {
     style: {
       textAlign: 'center'
     }
-  }, typeof title === 'function' ? title?.(dataSource) : title)), /*#__PURE__*/React.createElement(WebsiteBaseTable, _extends({
-    ref: ref,
-    id: id,
+  }, typeof title === 'function' ? title?.(originData) : title)), /*#__PURE__*/React.createElement(WebsiteBaseTable, _extends({
+    ref: ref
+    // id={id}
+    ,
+
     showHeader: showHeader,
     commandClick: commandClick,
     isLoading: loading,
@@ -271,13 +325,22 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     ,
     onResizeEnd: onResizeEnd
   }, pipeline.getProps(), {
+    // dataSource={pipeline.getProps().dataSource}
+    // columns={pipeline.getProps().columns as any}
+
+    // dataSource={dataSource}
+    // columns={columns as any}
+
     getRowProps: (row, rowIndex) => {
       const prevRowProps = pipeline.getProps().getRowProps?.(row, rowIndex);
+      // const prevRowProps = {}
+
       const rowStyle = onRowStyles ? typeof onRowStyles === 'function' ? onRowStyles(row) : onRowStyles : undefined;
       return {
         ...prevRowProps,
         className: classNames(``, {
-          [`${prefix}-grid-row-parent`]: row.children && row.children.length > 0 || Array.isArray(row.children)
+          [`${prefix}-grid-row-parent`]: row.children && row.children.length > 0 || Array.isArray(row.children),
+          'no-hover': editAble
         }),
         style: {
           ...prevRowProps?.style,
@@ -293,7 +356,7 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
             })(e);
           }
         },
-        onDoubleClick: e => {
+        onDoubleClick: editAble ? undefined : e => {
           recordDoubleClick?.({
             e,
             rowData: row,
@@ -307,7 +370,23 @@ const Grid = /*#__PURE__*/React.forwardRef((props, ref) => {
     footerDataSource: footerDataSource
   })), (bottom || pagination && !infiniteScroll) && /*#__PURE__*/React.createElement("div", {
     className: classNames(`${prefix}-grid-bottom`, {})
-  }, bottom, pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
+  }, bottom, toolbarItemsBottom && toolbarItemsBottom.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: classNames('ui-rc-toolbar-bottom', {
+      'ui-rc-toolbar-bottom_border-bottom': !pagination || infiniteScroll
+    })
+  }, /*#__PURE__*/React.createElement(Toolbar, {
+    style: {
+      width: '100%'
+    },
+    items: toolbarItemsBottom ?? [],
+    mode: toolbarMode
+    // mode={'scroll'}
+    ,
+    onClick: ({}) => {
+
+      // setEditingKey('')
+    }
+  })), pagination && !infiniteScroll && /*#__PURE__*/React.createElement(Pagination, _extends({
     pageSizeOptions: pageSizeOptions,
     rootClassName: 'pagination-template',
     showSizeChanger: true,