es-grid-template 1.7.24 → 1.7.26

package/es/table-component/ColumnsChoose.d.ts

@@ -1,10 +1,13 @@
 import React from "react";
-import type { ColumnsTable } from "./type";
+import type { ColumnsTable, ColumnTable } from "./type";
+import type { ColumnDef } from "@tanstack/react-table";
 export type IColumnsChoose<RecordType> = {
-    columns: ColumnsTable<RecordType>;
+    columns: ColumnDef<RecordType>[];
+    originColumns: ColumnTable[];
     columnsGroup?: string[];
-    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void;
+    triggerChangeColumns?: (columns: ColumnsTable<RecordType>, keys: string[], type: string) => void;
     t?: any;
     triggerChangeKeys?: any;
+    columnHidden: any;
 };
 export declare const ColumnsChoose: <RecordType extends object>(props: IColumnsChoose<RecordType>) => React.JSX.Element;

package/es/table-component/ColumnsChoose.js

@@ -1,336 +1,11 @@
-// import React, {Fragment, useMemo, useState} from "react"
-//
-// import styled from "styled-components"
-// import {Button, Input, Popover, Tooltip} from "antd";
-// import {SettingOutlined} from "@ant-design/icons";
-// import {
-//   getVisibleColumnKeys,
-//   updateColumns
-// } from "./hooks";
-//
-// // import type {TableColumnsType} from "rc-master-ui";
-// import Tree from "rc-master-ui/es/tree";
-// import SearchOutlined from "@ant-design/icons/SearchOutlined";
-// import type {ColumnsTable} from "./type";
-// import useMergedState from "rc-util/lib/hooks/useMergedState";
-//
-//
-// const  BoxAction = styled.div`
-//   border-top: 1px solid #c4c4c4;
-//   padding-top: .75rem;
-//   display: flex;
-//   justify-content: end;
-//   gap: 10px;
-//
-//   .btn-action {
-//     background: none !important;
-//     border: none !important;
-//     &.btn-action-submit {
-//       color: #df4318;
-//       &:disabled {
-//         background-color: #f0f0f0 !important;
-//       }
-//       &:hover {
-//         color: #df4318 !important;
-//       }
-//     }
-//
-//     &:hover {
-//       background-color: #f0f0f0 !important;
-//     }
-//   }
-// `
-//
-// export type IColumnsChoose<RecordType> = {
-//   columns: ColumnsTable<RecordType>
-//   columnsGroup?: string[]
-//   triggerChangeColumns?: (columns: ColumnsTable<RecordType>, type: string) => void
-//   t?: any
-//
-// }
-//
-//
-// export const ColumnsChoose = <RecordType extends object>(props: IColumnsChoose<RecordType>) => {
-//   const {
-//     columns: propsColumns,
-//     triggerChangeColumns,
-//     t,
-//     columnsGroup,
-//   } = props
-//
-//   // const dataList: { key: React.Key; title: string }[] = [];
-//
-//   // const defaultColumns = useMemo(() => {
-//   //   return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
-//   // }, [propsColumns])
-//
-//
-//   // const columnsChooseRef: any = useRef()
-//   // const searchRef: any = useRef()
-//
-//
-//
-//   // const [columns, setColumns] = useState<TableColumnsType>([])
-//
-//   // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-//
-//   // const [isManualUpdate, setIsManualUpdate] = useState(false);
-//
-//
-//   // useEffect(() => {
-//   //
-//   //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-//   //   setColumns(defaultColumns as TableColumnsType)
-//   //
-//   // }, [propsColumns])
-//
-//   const columns  = useMemo(() => {
-//
-//     // return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
-//     return  propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false)
-//     // setColumns(defaultColumns as TableColumnsType)
-//   }, [columnsGroup, propsColumns])
-//
-//
-//   // useEffect(() => {
-//   //
-//   //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-//   //
-//   //   const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns)
-//   //
-//   //   if (!isManualUpdate) {
-//   //     setSelectedKeys(defaultSelectedKeys)
-//   //   }
-//   //   setIsManualUpdate(false);
-//   //
-//   //
-//   // }, [isManualUpdate, propsColumns])
-//
-//   const defaultSelectedKeys =  React.useMemo(() => {
-//
-//     const rs = propsColumns.filter((it) => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field as string))
-//     return getVisibleColumnKeys(rs)
-//
-//   },  [columnsGroup, propsColumns])
-//
-//   const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(
-//     defaultSelectedKeys || [],
-//     {
-//       value: defaultSelectedKeys,
-//     },
-//   );
-//
-//   //
-//   // const defaultSelectedKeys = useMemo(() => {
-//   //
-//   //   return getVisibleColumnKeys(propsColumns)
-//   //
-//   // }, [propsColumns])
-//
-//
-//   const [clicked, setClicked] = useState(false);
-//   const [autoExpandParent, setAutoExpandParent] = useState(true);
-//
-//
-//   // const treeData = useMemo(() => {
-//   //   const loop = (data: TreeDataNode[]): TreeDataNode[] =>
-//   //     data.map((item) => {
-//   //       const strTitle = item.title as string;
-//   //       const index = strTitle.indexOf(searchValue);
-//   //       const beforeStr = strTitle.substring(0, index);
-//   //       const afterStr = strTitle.slice(index + searchValue.length);
-//   //       const title =
-//   //         index > -1 ? (
-//   //           <span key={item.key}>
-//   //             {beforeStr}
-//   //             <span className="site-tree-search-value">{searchValue}</span>
-//   //             {afterStr}
-//   //           </span>
-//   //         ) : (
-//   //           <span key={item.key}>{strTitle}</span>
-//   //         );
-//   //       if (item.children) {
-//   //         return { title, key: item.key, children: loop(item.children) };
-//   //       }
-//   //
-//   //       return {
-//   //         title,
-//   //         key: item.key,
-//   //       };
-//   //     });
-//   //
-//   //   // return loop(defaultData);
-//   //   return loop(columns as any);
-//   // }, [searchValue, columns]);
-//
-//
-//   const hide = () => {
-//     setClicked(false)
-//   }
-//
-//   const handleClickChange = (open: boolean) => {
-//     setClicked(open)
-//   }
-//
-//   const onExpand = () => {
-//     // setExpandedKeys(newExpandedKeys)
-//     setAutoExpandParent(false)
-//   }
-//
-//   // const getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {
-//   //   let parentKey: React.Key
-//   //   for (let i = 0; i < tree.length; i++) {
-//   //     const node = tree[i]
-//   //     if (node.children) {
-//   //       if (node.children.some((item) => item.key === key)) {
-//   //         parentKey = node.key
-//   //       } else if (getParentKey(key, node.children)) {
-//   //         parentKey = getParentKey(key, node.children)
-//   //       }
-//   //     }
-//   //   }
-//   //   return parentKey!
-//   // }
-//
-//   // const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-//   const onChange = () => {
-//     // const { value } = e.target
-//     // const newExpandedKeys = dataList
-//     //   .map((item) => {
-//     //     if (item.title.indexOf(value) > -1) {
-//     //       return getParentKey(item.key, defaultData)
-//     //     }
-//     //     return null
-//     //   })
-//     //   .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i))
-//     // setExpandedKeys(newExpandedKeys)
-//
-//     // setSearchValue(value)
-//     setAutoExpandParent(true)
-//   };
-//
-//   const onCheck = (keys: string[]) => {
-//
-//     // setSelectedKeys(keys)
-//     setMergedSelectedKeys(keys)
-//     // setIsManualUpdate(true)
-//
-//   }
-//
-//   const handleAccept = () => {
-//
-//     console.log('mergedSelectedKeys', mergedSelectedKeys)
-//
-//     // const rs1  =  updateColumns(propsColumns, selectedKeys)
-//     const rs1  =  updateColumns(propsColumns, mergedSelectedKeys)
-//
-//
-//     triggerChangeColumns?.(rs1, 'columnChoose')
-//
-//     hide()
-//
-//   }
-//
-//   const handleCancel = () => {
-//     // setSelectedKeys(defaultSelectedKeys)
-//     hide()
-//   }
-//
-//
-//   return (
-//     <Fragment>
-//       <Popover
-//         placement={'bottomLeft'}
-//         content={
-//           <div style={{minWidth: 250}}>
-//             <Input style={{ marginBottom: 8 }} placeholder={t ? t("Search") : 'Search'} prefix={<SearchOutlined />} onChange={onChange} />
-//
-//             <Tree
-//               onExpand={onExpand}
-//               // expandedKeys={expandedKeys}
-//               autoExpandParent={autoExpandParent}
-//               // treeData={treeData}
-//               treeData={columns}
-//               defaultExpandAll={true}
-//               checkable={true}
-//               // onSelect={(keys, info) => {
-//               //   const key = info.node.key
-//               //
-//               //   const find = findItemByKey(columns, 'key', key)
-//               //
-//               //   // const tmpColumn
-//               //
-//               //   // if (selectedKeys.includes(key as string)) {
-//               //   //   const rssss  = findKeyPath(columns, key as string)
-//               //   //   const rs = selectedKeys.filter(item => !rssss.includes(item));
-//               //   //
-//               //   //   setSelectedKeys(rs)
-//               //   // } else {
-//               //
-//               //     // const rs  = [...selectedKeys, keys[0]]
-//               //
-//               //     // setSelectedKeys(keys)
-//               //   // }
-//               // }}
-//               onCheck={(keys) => onCheck(keys as string[])}
-//
-//
-//               multiple={true}
-//               // checkedKeys={selectedKeys}
-//
-//               defaultCheckedKeys={mergedSelectedKeys}
-//               // defaultCheckedKeys={defaultSelectedKeys}
-//               // selectedKeys={[]}
-//
-//               height={window.innerHeight - 200}
-//
-//             />
-//
-//
-//             <BoxAction className={'px-1'}>
-//               <Button
-//                 // className={classnames('btn-action btn-action-submit', {
-//                 //   // disable: !columns.find((item) => item.visible !== false || item.visible)
-//                 // })}
-//                 onClick={handleAccept}
-//                 // disabled={!columns.find((item) => item.visible !== false || item.visible)}
-//               >
-//                 {t ? t('OK') : 'OK'}
-//                 {/*{'OK'}*/}
-//               </Button>
-//
-//               {/*<Button className={'btn-action btn-action-cancel'} onClick={hide}  >{('Cancel') }</Button>*/}
-//               <Button className={'btn-action btn-action-cancel'} onClick={handleCancel}  >{t ? t('Cancel') : 'Cancel' }</Button>
-//             </BoxAction>
-//           </div>
-//         }
-//         trigger="click"
-//         open={clicked}
-//         onOpenChange={handleClickChange}
-//         arrow={false}
-//       >
-//         <Tooltip arrow={false} title={'Cài đặt'} >
-//           <SettingOutlined size={16} color={'#555555'} style={{fontSize: 16, color: '#555555'}} />
-//         </Tooltip>
-//
-//       </Popover>
-//     </Fragment>
-//   )
-// }
-
-import React, { Fragment, useEffect, useMemo, useState } from "react";
+import useMergedState from "rc-util/es/hooks/useMergedState";
+import React, { Fragment, useState } from "react";
 import styled from "styled-components";
 import { Button, Input, Popover, Tooltip } from "antd";
 import { SettingOutlined } from "@ant-design/icons";
-// import {
-//   getVisibleColumnKeys,
-//   updateColumns
-// } from "./hooks"
-
-// import type {TableColumnsType} from "rc-master-ui";
 import Tree from "rc-master-ui/es/tree";
 import SearchOutlined from "@ant-design/icons/SearchOutlined";
-import { getVisibleColumnKeys } from "./hook/utils";
+import { convertColumnsToTreeData, getVisibleColumnKeys1, updateColumns1 } from "./hook/utils";
 const BoxAction = styled.div.withConfig({
   displayName: "BoxAction",
   componentId: "es-grid-template__sc-jfujqh-0"
@@ -338,50 +13,24 @@ const BoxAction = styled.div.withConfig({
 export const ColumnsChoose = props => {
   const {
     columns: propsColumns,
-    // triggerChangeColumns,
+    originColumns,
+    columnHidden,
+    triggerChangeColumns,
     // triggerChangeKeys,
     t,
     columnsGroup
   } = props;
-
-  // const dataList: { key: React.Key; title: string }[] = [];
-
-  // const defaultColumns = useMemo(() => {
-  //   return propsColumns.filter((it) => it.key || it.dataIndex && it.showColumnChoose !== false)
-  // }, [propsColumns])
-
-  // const columnsChooseRef: any = useRef()
-  // const searchRef: any = useRef()
-
-  // const [columns, setColumns] = useState<TableColumnsType>([])
-  const [selectedKeys, setSelectedKeys] = useState([]);
-  const [isManualUpdate, setIsManualUpdate] = useState(false);
-
-  // useEffect(() => {
-  //
-  //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-  //   setColumns(defaultColumns as TableColumnsType)
-  //
-  // }, [propsColumns])
-
-  const columns = useMemo(() => {
-    return propsColumns.filter(it => it.field && it.showInColumnChoose !== false);
-    // setColumns(defaultColumns as TableColumnsType)
-  }, [propsColumns]);
-  console.log('columns', columns);
-  useEffect(() => {
-    // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
-    const defaultColumns = propsColumns.filter(it => it.field && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
-    const defaultSelectedKeys = getVisibleColumnKeys(defaultColumns);
-    if (!isManualUpdate) {
-      setSelectedKeys(defaultSelectedKeys);
-    }
-    setIsManualUpdate(false);
-  }, [propsColumns]);
-  const defaultSelectedKeys = useMemo(() => {
-    const defaultColumns = propsColumns.filter(it => it.field && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
-    return getVisibleColumnKeys(defaultColumns);
-  }, [columnsGroup, propsColumns]);
+  const treeColumns = React.useMemo(() => {
+    return convertColumnsToTreeData(propsColumns, columnsGroup);
+  }, [propsColumns, columnsGroup]);
+  const defaultSelectedKeys = React.useMemo(() => {
+    const defaultColumns = originColumns.filter(it => it.field && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    const aa = Object.keys(columnHidden);
+    return getVisibleColumnKeys1(defaultColumns).filter(it => !aa.includes(it));
+  }, [columnHidden, columnsGroup, originColumns]);
+  const [mergedSelectedKeys, setMergedSelectedKeys] = useMergedState(defaultSelectedKeys && defaultSelectedKeys.length ? defaultSelectedKeys : undefined, {
+    value: undefined
+  });
   const [clicked, setClicked] = useState(false);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
 
@@ -459,20 +108,17 @@ export const ColumnsChoose = props => {
     setAutoExpandParent(true);
   };
   const onCheck = keys => {
-    setSelectedKeys(keys);
-    setIsManualUpdate(true);
+    // setSelectedKeys(keys)
+    // setIsManualUpdate(true)
+    setMergedSelectedKeys(keys);
   };
   const handleAccept = () => {
-    // const rs1  =  updateColumns(propsColumns, selectedKeys)
-
-    // triggerChangeKeys?.(selectedKeys)
-
-    // triggerChangeColumns?.(rs1, 'columnChoose')
-
+    const rs1 = updateColumns1(originColumns, mergedSelectedKeys ?? []);
+    triggerChangeColumns?.(rs1, mergedSelectedKeys ?? [], 'columnChoose');
     hide();
   };
   const handleCancel = () => {
-    setSelectedKeys(defaultSelectedKeys);
+    setMergedSelectedKeys(defaultSelectedKeys);
     hide();
   };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
@@ -497,7 +143,7 @@ export const ColumnsChoose = props => {
       // treeData={treeData}
       // treeData={columns.filter((it) => !columnsGroup?.includes(it.field as string))}
       ,
-      treeData: [],
+      treeData: treeColumns,
       defaultExpandAll: true,
       checkable: true
       // onSelect={(keys, info) => {
@@ -521,11 +167,14 @@ export const ColumnsChoose = props => {
       // }}
       ,
       onCheck: keys => onCheck(keys),
-      multiple: true,
-      checkedKeys: selectedKeys,
-      defaultCheckedKeys: selectedKeys
-      // defaultCheckedKeys={defaultSelectedKeys}
+      multiple: true
+      // checkedKeys={selectedKeys}
+      ,
+      checkedKeys: mergedSelectedKeys || defaultSelectedKeys
+
+      // defaultCheckedKeys={selectedKeys}
       ,
+      defaultCheckedKeys: defaultSelectedKeys,
       selectedKeys: []
 
       // height={window.innerHeight - 200}

package/es/table-component/InternalTable.js

@@ -29,13 +29,15 @@ import Grid from "./table/Grid";
 
 import { Tooltip } from 'react-tooltip';
 import ContextMenu from "./ContextMenu";
-import { addRowIdArray,
+import { addRowIdArray, convertToObj,
 // convertFilters,
-filterDataByColumns,
+filterDataByColumns, flatColumns2,
 // filterDataByColumns,
-getAllRowKey, getFixedFields, getInvisibleColumns, groupArrayByColumns } from "./hook/utils";
-import GridEdit from "./table/GridEdit";
+getAllRowKey, getDiffent2Array, getFixedFields, getInvisibleColumns, groupArrayByColumns } from "./hook/utils";
+// import GridEdit from './table/GridEdit'
 import { convertToTanStackColumns } from "./hook/useColumns";
+// import { columns111 } from '../test-2/columns'
+
 dayjs.extend(customParseFormat);
 
 // const MySwal = withReactContent(Swal)
@@ -60,7 +62,7 @@ const InternalTable = props => {
     infiniteScroll,
     // wrapSettings,
     // onFilter,
-    expandable,
+    // expandable,
     contextMenuItems: propContextMenuItems,
     contextMenuHidden,
     contextMenuClick,
@@ -119,9 +121,6 @@ const InternalTable = props => {
 
   const [filterStates, setFilterState] = React.useState(null);
   const [sorterStates, setSorterStates] = React.useState([]);
-
-  // const [isFullScreen, setIsFullScreen] = React.useState<boolean>(false)
-
   const [expanded, setExpanded] = React.useState({});
   const convertData = React.useMemo(() => {
     if (groupAble && groupSetting && groupSetting.client !== false) {
@@ -131,16 +130,18 @@ const InternalTable = props => {
   }, [dataSource, groupAble, groupColumns, groupSetting]);
   const mergedColumns = React.useMemo(() => {
     return convertToTanStackColumns({
+      t,
       columns,
-      expanded,
-      setExpanded,
-      expandable,
+      // expanded,
+      // setExpanded,
+      // expandable,
       format,
       editAble
     });
 
     // return convertToTanStackColumns<RecordType>(columns, expanded, setExpanded, expandable)
-  }, [columns, expanded, expandable, format, editAble]);
+  }, [t, columns, format, editAble]);
+  console.log('mergedColumns', mergedColumns);
   const columnPinning = React.useMemo(() => {
     return {
       left: getFixedFields(columns, 'left'),
@@ -158,6 +159,14 @@ const InternalTable = props => {
   const columnVisibility = React.useMemo(() => {
     return getInvisibleColumns(columns);
   }, [columns]);
+  const [columnsHiddenKeys, setColumnsHiddenKeys] = useMergedState(undefined, {
+    value: undefined
+  });
+  const triggerChangeColumns = (cols, keys) => {
+    const aa = flatColumns2(columns).map(it => it.field);
+    const rsss = getDiffent2Array(aa, keys);
+    setColumnsHiddenKeys(rsss);
+  };
   const contextMenuItems = React.useMemo(() => {
     if (typeof contextMenuHidden === 'function' && propContextMenuItems && selectedRowData) {
       const hiddenItems = contextMenuHidden({
@@ -251,24 +260,26 @@ const InternalTable = props => {
   };
 
   // const TableComponent = infiniteScroll ? InfiniteTable : (groupAble ? Group : editAble ? GridEdit : Grid)
-  const TableComponent = editAble ? GridEdit : Grid;
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TableComponent, _extends({}, rest, {
+  // const TableComponent = Grid
+
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Grid, _extends({}, rest, {
     t: t,
     id: id,
     prefix: prefix,
     originData: convertData,
     dataSource: mergedData,
     locale: locale,
-    format: format,
+    format: format
+    // columns={columns111 as any}
+    ,
     columns: mergedColumns,
     propsColumns: columns,
     rowKey: rowKey,
     groupSetting: groupSetting,
     groupAble: groupAble,
     groupColumns: groupColumns,
-    isFullScreen: false,
     columnPinning: columnPinning,
-    columnVisibility: columnVisibility,
+    columnHidden: columnsHiddenKeys ? convertToObj(columnsHiddenKeys) : columnVisibility,
     triggerFilter: setFilterState,
     triggerSorter: setSorterStates,
     setMergedFilterKeys: setMergedFilterKeys,
@@ -276,7 +287,9 @@ const InternalTable = props => {
     expanded: expanded,
     onContextMenu: onContextMenu,
     contextMenuItems: contextMenuItems,
-    editAble: editAble
+    editAble: editAble,
+    triggerChangeColumns: triggerChangeColumns,
+    setExpanded: setExpanded
   })), menuVisible && /*#__PURE__*/React.createElement(ContextMenu, {
     open: menuVisible,
     pos: position,
@@ -286,7 +299,7 @@ const InternalTable = props => {
     contextMenuClick: contextMenuClick,
     rowData: selectedRowData
   }), /*#__PURE__*/React.createElement(Tooltip, {
-    id: `${id}-tooltip-header-trigger`,
+    id: `${id}-tooltip-content`,
     style: {
       zIndex: 1999
     }

package/es/table-component/TableContainer.d.ts

@@ -1,7 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react';
 import React from 'react';
-import type { Table } from '@tanstack/react-table';
-import type { TableProps } from './type';
+import type { ColumnDef, Table } from '@tanstack/react-table';
+import type { ColumnsTable, TableProps } from './type';
 type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     table: Table<T>;
     prefix: string;
@@ -17,6 +17,15 @@ type TableContainerProps<T> = Omit<TableProps<T>, 'columns'> & {
     setFilterChange: Dispatch<SetStateAction<boolean>>;
     onContextMenu?: (data: T) => (event: any) => void;
     tableHeight?: number;
+    triggerPaste?: (pastedRows: T[], pastedColumnsArray: string[], newData: T[], copyRows: T[]) => void;
+    mergedFilterKeys?: any;
+    setMergedFilterKeys?: any;
+    setExpanded?: any;
+    expanded?: any;
+    columns: ColumnDef<T>[];
+    propsColumns: ColumnsTable;
+    triggerChangeColumns: any;
+    columnHidden: any;
 };
 declare const TableContainer: <RecordType extends object>(props: TableContainerProps<RecordType>) => React.JSX.Element;
 export default TableContainer;