es-grid-template 1.2.4 → 1.2.6

package/es/grid-component/hooks/content/HeaderContent.js

@@ -65,7 +65,7 @@ const HeaderContent = props => {
     // style={{flex: 1}}
     ,
     className: classnames('', {})
-  }), headerTemplate ? getTemplate(headerTemplate) : text), isOpen && (headerTooltip !== false || headerTemplate || headerTooltip || columnGroupText || headerText) && /*#__PURE__*/React.createElement(FloatingPortal, {
+  }), headerTemplate ? getTemplate(headerTemplate) : t ? t(text) : text), isOpen && (headerTooltip !== false || headerTemplate || headerTooltip || columnGroupText || headerText) && /*#__PURE__*/React.createElement(FloatingPortal, {
     root: document.body
   }, /*#__PURE__*/React.createElement(TooltipStyle, _extends({
     className: "Tooltip",

package/es/grid-component/hooks/utils.d.ts

@@ -68,3 +68,4 @@ export declare const removeColumns: <RecordType>(columns: ColumnsTable<RecordTyp
 export declare const convertFlatColumn: (array: ColumnsTable) => ColumnsTable[];
 export declare const convertColumns: <RecordType>(cols: ColumnsTable<RecordType>) => ColumnsTable<RecordType>;
 export declare const checkChild: (inputArray: any[]) => boolean;
+export declare const isEditable: <RecordType>(column: ColumnEditType, rowData: RecordType) => boolean | ((rowData: any) => boolean);

package/es/grid-component/hooks/utils.js

@@ -772,4 +772,10 @@ export const convertColumns = cols => {
 };
 export const checkChild = inputArray => {
   return inputArray.some(item => item.children && item.children.length > 0);
+};
+export const isEditable = (column, rowData) => {
+  if (column && typeof column.editEnable === 'function') {
+    return column.editEnable(rowData);
+  }
+  return column?.editEnable;
 };

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

@@ -13,7 +13,7 @@ import dayjs from "dayjs";
 import 'dayjs/locale/es';
 import 'dayjs/locale/vi';
 import TableGrid from "../TableGrid";
-import { addRows8, checkChild, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
+import { addRows8, checkChild, findAllChildrenKeys, findItemByKey, flattenArray, flattenData, getDefaultValue, getEditType, getFirstSelectCell, getLastSelectCell, getRowNumber, getRowsPasteIndex, isEditable, isObjEmpty, newGuid, totalFixedWidth, updateArrayByKey } from "../hooks";
 import Message from "../../Message/Message";
 
 // import Command from "../Command";
@@ -49,6 +49,7 @@ const GridEdit = props => {
     defaultValue,
     expandable,
     onCellClick,
+    rowEditable,
     ...rest
   } = props;
   const {
@@ -82,6 +83,7 @@ const GridEdit = props => {
   const [editingKey, setEditingKey] = useState('');
   const [selectedCells, setSelectedCells] = useState(new Set());
   const [pasteCells, setPasteCells] = useState(new Set());
+  const [cellEditing, setCellEditing] = useState(null);
   const [isSelectDragging, setSelectIsDragging] = useState(false);
   const [isPasteDragging, setIsPasteDragging] = useState(false); // isPasteDragging == tiếp tục hiển thị con trỏ crosshair
 
@@ -1079,6 +1081,10 @@ const GridEdit = props => {
   const handleEdit = (record, col, editType, e) => {
     // @ts-ignore
     setEditingKey(record[rowKey]);
+    setCellEditing({
+      row: record,
+      column: col
+    });
     reset();
 
     // const formattedRecord = { ...record };
@@ -1365,7 +1371,9 @@ const GridEdit = props => {
           title: getValueCell(column, record[column.field], format),
           'data-col-index': colIndex,
           'data-row-index': rowNumber,
-          editing: isEditing(record),
+          editing: isEditing(record) && rowEditable?.(record) !== false && isEditable(column, record) !== false,
+          cellEditing,
+          // editing: isEditing(record) && rowEditable?.(record) !== false,
           tabIndex: (rowIndex ?? 0) * columns.length + colIndex,
           style: isPasteDragging ? {
             cursor: "crosshair"
@@ -1384,7 +1392,7 @@ const GridEdit = props => {
           onMouseUp: handleMouseUp
         }, /*#__PURE__*/React.createElement("div", {
           className: 'ui-rc_content'
-        }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && !isSelectDragging &&
+        }, renderContent(column, value, record, rowIndex, format)), selectedCells && selectedCells.size > 0 && getLastSelectCell(selectedCells).row === rowNumber && getLastSelectCell(selectedCells).col === colIndex && isEditable(column, record) !== false && !isSelectDragging &&
         /*#__PURE__*/
         // showDraggingPoint &&
         React.createElement("div", {
@@ -1490,6 +1498,7 @@ const GridEdit = props => {
       ...components,
       body: {
         cell: EditableCell
+        // cell: () =>  <EditableCell  />,
       }
     },
     className: classNames(className, 'grid-editable'),

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

@@ -46,7 +46,7 @@ export type ColumnSelectTable = {
 };
 export type IEditSelectSettings = {
     fieldKey?: string;
-    options: any[];
+    options: any[] | ((rowData: any, field: string) => any[]);
     /**  get value form other field **/
     fieldValue?: string;
     /** get label form other field **/
@@ -114,6 +114,7 @@ export type ColumnType<RecordType> = Omit<RcColumnType<RecordType>, 'headerTempl
 export type ColumnEditType<RecordType = AnyObject> = Omit<ColumnType<RecordType>, 'children'> & {
     editType?: EditType | ((rowData?: RecordType) => EditType);
     disable?: boolean | ((rowData: any) => boolean);
+    editEnable?: boolean | ((rowData: any) => boolean);
     isClearable?: boolean;
     maxDate?: any;
     minDate?: any;
@@ -185,6 +186,7 @@ export interface TableEditProps<RecordType = AnyObject> extends Omit<TableProps<
     onCellPaste?: ICellPasteModel<RecordType>;
     onCellChange?: (args: CellChangeArgs<RecordType>, handleCallback: (rowData: any, index: any, value?: any) => void) => void;
     onCellClick?: (args: ICellClick, callback?: any) => void;
+    rowEditable?: (rowData: RecordType) => boolean;
 }
 export type ICellClick = {
     index: number;

package/lib/grid-component/AdvanceFilter.d.ts

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

package/lib/grid-component/AdvanceFilter.js

@@ -0,0 +1,554 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnsChoose = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _antd = require("antd");
+var _icons = require("@ant-design/icons");
+var _hooks = require("./hooks");
+var _tree = _interopRequireDefault(require("rc-master-ui/es/tree"));
+var _SearchOutlined = _interopRequireDefault(require("@ant-design/icons/SearchOutlined"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// 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[]) => {
+//
+//     console.log('keys', keys)
+//     // setSelectedKeys(keys)
+//     setMergedSelectedKeys(keys)
+//     // setIsManualUpdate(true)
+//
+//   }
+//
+//   const handleAccept = () => {
+//
+//     console.log('mergedSelectedKeys', mergedSelectedKeys)
+//
+//     // const rs1  =  updateColumns(propsColumns, selectedKeys)
+//     const rs1  =  updateColumns(propsColumns, mergedSelectedKeys)
+//
+//     console.log('rs1', rs1)
+//
+//     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 type {TableColumnsType} from "rc-master-ui";
+
+const BoxAction = _styledComponents.default.div.withConfig({
+  displayName: "BoxAction",
+  componentId: "es-grid-template__sc-zdl2xa-0"
+})(["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;}}"]);
+const ColumnsChoose = props => {
+  const {
+    columns: propsColumns,
+    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] = (0, _react.useState)([]);
+  const [isManualUpdate, setIsManualUpdate] = (0, _react.useState)(false);
+
+  // useEffect(() => {
+  //
+  //   const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
+  //   setColumns(defaultColumns as TableColumnsType)
+  //
+  // }, [propsColumns])
+
+  const columns = (0, _react.useMemo)(() => {
+    return propsColumns.filter(it => it.key || it.dataIndex && it.showInColumnChoose !== false);
+    // setColumns(defaultColumns as TableColumnsType)
+  }, [propsColumns]);
+  (0, _react.useEffect)(() => {
+    // const defaultColumns = propsColumns.filter((it) => it.key || it.dataIndex && it.showInColumnChoose !== false)
+    const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    const defaultSelectedKeys = (0, _hooks.getVisibleColumnKeys)(defaultColumns);
+    if (!isManualUpdate) {
+      setSelectedKeys(defaultSelectedKeys);
+    }
+    setIsManualUpdate(false);
+  }, [propsColumns]);
+  const defaultSelectedKeys = (0, _react.useMemo)(() => {
+    const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
+    return (0, _hooks.getVisibleColumnKeys)(defaultColumns);
+  }, [propsColumns]);
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const [autoExpandParent, setAutoExpandParent] = (0, _react.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 => {
+    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 => {
+    setSelectedKeys(keys);
+    setIsManualUpdate(true);
+  };
+  const handleAccept = () => {
+    const rs1 = (0, _hooks.updateColumns)(propsColumns, selectedKeys);
+    triggerChangeKeys?.(selectedKeys);
+    triggerChangeColumns?.(rs1, 'columnChoose');
+    hide();
+  };
+  const handleCancel = () => {
+    setSelectedKeys(defaultSelectedKeys);
+    hide();
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_antd.Popover, {
+    placement: 'bottomLeft',
+    content: /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        minWidth: 250
+      }
+    }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+      style: {
+        marginBottom: 8
+      },
+      placeholder: t ? t("Search") : 'Search',
+      prefix: /*#__PURE__*/_react.default.createElement(_SearchOutlined.default, null),
+      onChange: onChange
+    }), /*#__PURE__*/_react.default.createElement(_tree.default, {
+      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),
+      multiple: true,
+      checkedKeys: selectedKeys,
+      defaultCheckedKeys: selectedKeys
+      // defaultCheckedKeys={defaultSelectedKeys}
+      ,
+      selectedKeys: [],
+      height: window.innerHeight - 200
+    }), /*#__PURE__*/_react.default.createElement(BoxAction, {
+      className: 'px-1'
+    }, /*#__PURE__*/_react.default.createElement(_antd.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'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+      className: 'btn-action btn-action-cancel',
+      onClick: handleCancel
+    }, t ? t('Cancel') : 'Cancel'))),
+    trigger: "click",
+    open: clicked,
+    onOpenChange: handleClickChange,
+    arrow: false
+  }, /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+    arrow: false,
+    title: 'Cài đặt'
+  }, /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null))));
+};
+exports.ColumnsChoose = ColumnsChoose;