es-grid-template 1.2.7 → 1.2.9

package/es/grid-component/AdvanceFilter.js

@@ -1,538 +1,433 @@
-// 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)
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { Fragment, useState } from "react";
+import styled from "styled-components";
+import { Badge, Button, Tooltip } from "antd";
+import { Filter } from "becoxy-icons";
+import { DatePicker, TimePicker, TreeSelect, Popover, Input } from "rc-master-ui";
+import { checkDecimalSeparator, checkThousandSeparator, convertDateToDayjs, convertDayjsToDate, isArraysEqual, isEmpty, isObjEmpty } from "./hooks";
+import CheckboxControl from "./checkbox-control";
+import { AsyncSelect } from "./async-select";
+import { NumericFormat } from 'react-numeric-component';
+import classnames from "classnames";
+import { getDefaultOperator } from "rc-master-ui/es/table/util";
+const {
+  RangePicker
+} = DatePicker;
+const MainFilter = styled.div.withConfig({
+  displayName: "MainFilter",
+  componentId: "es-grid-template__sc-zdl2xa-0"
+})([".filter-left{display:flex;flex-direction:column;gap:1rem;width:", ";border-right:1px solid #c4c4c4;}@media (max-width:576px){flex-direction:column-reverse;gap:1rem;.filter-left{width:100%;border-right:0;}}"], props => `${props.leftFilterWidth}px`);
+const GridFilter = styled.div.withConfig({
+  displayName: "GridFilter",
+  componentId: "es-grid-template__sc-zdl2xa-1"
+})(["display:grid;gap:10px;padding-right:1rem;padding-left:1rem;max-height:500px;overflow:auto;overflow-x:hidden;flex-wrap:wrap;grid-template-columns:repeat(2,minmax(250px,1fr));.grid-item-filter{}.adv-form-input{height:32px;}@media (max-width:720px){grid-template-columns:repeat(1,minmax(250px,1fr));}"]);
+const BoxAction = styled.div.withConfig({
+  displayName: "BoxAction",
+  componentId: "es-grid-template__sc-zdl2xa-2"
+})(["border-top:1px solid #c4c4c4;padding-top:0.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 FilterContainer = styled.div<{ contentWidth?: number }>`
+//   .customizer {
+//     right: ${props => (props.contentWidth ? `-${props.contentWidth}px` : '-400px')};
+//     width: ${props => (props.contentWidth ? `${props.contentWidth}px` : '400px')};
 //   }
-//
-//   // 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)
-//
+//   .customizer.open {
+//     right: 0;
 //   }
-//
-//   const handleAccept = () => {
-//
-//     console.log('mergedSelectedKeys', mergedSelectedKeys)
-//
-//     // const rs1  =  updateColumns(propsColumns, selectedKeys)
-//     const rs1  =  updateColumns(propsColumns, mergedSelectedKeys)
-//
-//     console.log('rs1', rs1)
-//
-//     triggerChangeColumns?.(rs1, 'columnChoose')
-//
-//     hide()
-//
+//   .adv-form-input {
+//     height: 32px;
 //   }
-//
-//   const handleCancel = () => {
-//     // setSelectedKeys(defaultSelectedKeys)
-//     hide()
+//   .checkbox-dropdown {
+//     .ant-select-tree-treenode {
+//       .ant-select-tree-switcher.ant-select-tree-switcher-noop {
+//         width: 0 !important;
+//       }
+//     }
 //   }
-//
-//
-//   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 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";
-const BoxAction = styled.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;}}"]);
-export const ColumnsChoose = props => {
+const AdvanceFilter = props => {
   const {
-    columns: propsColumns,
-    triggerChangeColumns,
-    triggerChangeKeys,
-    t,
-    columnsGroup
+    columns: defaultColumns,
+    dataSourceFilter,
+    onFilter,
+    // mode = 'dropdown',
+    defaultFilter,
+    leftFilterWidth = 280,
+    format,
+    t
   } = 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(null)
+  const menuRef = React.useRef(null);
 
-  // const columnsChooseRef: any = useRef()
-  // const searchRef: any = useRef()
+  // const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+  // const [isManualUpdate, setIsManualUpdate] = useState(false);
 
-  // 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.key || it.dataIndex && it.showInColumnChoose !== false);
-    // setColumns(defaultColumns as TableColumnsType)
-  }, [propsColumns]);
-  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 = getVisibleColumnKeys(defaultColumns);
-    if (!isManualUpdate) {
-      setSelectedKeys(defaultSelectedKeys);
-    }
-    setIsManualUpdate(false);
-  }, [propsColumns]);
-  const defaultSelectedKeys = useMemo(() => {
-    const defaultColumns = propsColumns.filter(it => (it.key || it.dataIndex) && it.showInColumnChoose !== false && !columnsGroup?.includes(it.field));
-    return getVisibleColumnKeys(defaultColumns);
-  }, [propsColumns]);
+  const [prevFilter, setPrevFilter] = useState([]);
+  const [filterColumns, setFilterColumns] = useState([]);
   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) };
-  //       }
+  const [columns, setColumns] = useState([]);
+  const count = 4;
+  // const count = useMemo(() => {
   //
-  //       return {
-  //         title,
-  //         key: item.key,
-  //       };
-  //     });
+  //   const uniqueItems = prevFilter.filter((item, index, arr) => {
+  //     return arr.findIndex(el => el.field === item.field) === index
+  //   })
   //
-  //   // return loop(defaultData);
-  //   return loop(columns as any);
-  // }, [searchValue, columns]);
+  //   return uniqueItems?.filter((quer: any) => quer.filterOption && quer.filterOption?.value).length ?? 0
+  //
+  // }, [prevFilter])
 
+  React.useEffect(() => {
+    if (defaultColumns) {
+      const filter = defaultColumns.filter(it => it.visible !== false && it.allowFiltering !== false && it.field !== '#' && it.field !== 'command');
+      const tmpFilter = filter.map(it => ({
+        ...it,
+        filterOption: {
+          key: it.field,
+          field: it.field,
+          value: undefined,
+          predicate: undefined,
+          operator: it?.filterOption?.operator ? it.filterOption.operator : getDefaultOperator(it)
+        }
+      }));
+      setColumns(filter);
+      setPrevFilter(tmpFilter);
+      setFilterColumns(tmpFilter);
+    }
+  }, [defaultColumns, defaultFilter]);
   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);
+    if (defaultFilter) {
+      setFilterColumns(defaultFilter ?? []);
+    }
   };
   const handleAccept = () => {
-    const rs1 = updateColumns(propsColumns, selectedKeys);
-    triggerChangeKeys?.(selectedKeys);
-    triggerChangeColumns?.(rs1, 'columnChoose');
+    const query = filterColumns.filter(quer => quer.filterOption && (quer.filterOption?.value || quer.filterOption?.value === 0)).map(quer => quer.filterOption);
+    if (onFilter && !isArraysEqual(filterColumns, defaultFilter ?? [])) {
+      onFilter(query, filterColumns);
+    }
     hide();
+    setPrevFilter(filterColumns);
+  };
+  const handleReset = () => {
+    setFilterColumns(columns);
   };
   const handleCancel = () => {
-    setSelectedKeys(defaultSelectedKeys);
     hide();
+    setFilterColumns(prevFilter);
   };
-  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
-    placement: 'bottomLeft',
-    content: /*#__PURE__*/React.createElement("div", {
+  const renderFilter = (tmpColumn, index) => {
+    const find = filterColumns.find(it => it.field === tmpColumn.field);
+    const column = find ? find : tmpColumn;
+    let valueFilter;
+    if (column?.typeFilter === 'Checkbox' || column?.typeFilter === 'CheckboxDropdown' || tmpColumn?.filterOption?.multiple) {
+      const currentValueFilter = filterColumns.filter(it => it.field === column?.field && (it.filterOption?.value || it.filterOption?.value === 0));
+      valueFilter = currentValueFilter.map(it => it.filterOption?.value);
+    } else if (column?.typeFilter === 'DateRange') {
+      const currentValueFilter = filterColumns.filter(it => it.field === column?.field);
+      const findStartDate = currentValueFilter.find(it => it.filterOption?.operator === 'greaterthanorequal');
+      const findEndDate = currentValueFilter.find(it => it.filterOption?.operator === 'lessthanorequal');
+      const startDate = findStartDate ? convertDateToDayjs(findStartDate.filterOption?.value, column?.format?.dateFormat ?? 'DD/MM/YYYY') : '';
+      const endDate = findEndDate ? convertDateToDayjs(findEndDate.filterOption?.value, column?.format?.dateFormat ?? 'DD/MM/YYYY') : '';
+      valueFilter = [startDate, endDate];
+    } else {
+      // single Value
+      valueFilter = column?.filterOption?.value;
+    }
+    const options = dataSourceFilter?.find(it => it.key === column?.field)?.data;
+    const loadOptions = dataSourceFilter?.find(it => it.key === column?.field)?.loadOptions;
+    switch (column?.typeFilter) {
+      case "Checkbox":
+        return /*#__PURE__*/React.createElement(CheckboxControl, {
+          value: valueFilter,
+          options: options ?? [],
+          onChange: val => {
+            console.log(val);
+            // onChangeValueFilter(column, val, true)
+          }
+        });
+      case 'Dropdown':
+        return (
+          /*#__PURE__*/
+          // <Select
+          //   showSearch
+          //   allowClear
+          //   style={{ width: '100%' }}
+          //   placeholder='Search to Select'
+          //   optionFilterProp='label'
+          //   value={valueFilter}
+          //   mode={tmpColumn.filterOption?.multiple ? 'multiple' : undefined}
+          //   options={options ?? []}
+          //   onChange={val => {
+          //     onChangeValueFilter(column, val)
+          //   }}
+          //   dropdownStyle={{ zIndex: 9999 }}
+          //   popupClassName={'adv-popup-container'}
+          //   getPopupContainer={() => menuRef.current}
+          //   className='filter-item-control'
+          // />
+          React.createElement(AsyncSelect, {
+            showSearch: true,
+            allowClear: true,
+            style: {
+              width: '100%'
+            },
+            placeholder: "Search to Select",
+            optionFilterProp: "label",
+            value: valueFilter,
+            mode: tmpColumn.filterOption?.multiple ? 'multiple' : undefined,
+            options: options ?? [],
+            defaultOptions: options ?? [],
+            onChange: val => {
+              console.log(val);
+              // onChangeValueFilter(column, val)
+            },
+            loadOptions: loadOptions,
+            dropdownStyle: {
+              zIndex: 9999
+            },
+            popupClassName: 'adv-popup-container'
+            // getPopupContainer={() => menuRef.current}
+            ,
+            className: "filter-item-control"
+          })
+        );
+      case 'CheckboxDropdown':
+        return /*#__PURE__*/React.createElement(TreeSelect, {
+          showSearch: true,
+          style: {
+            width: '100%'
+          },
+          value: valueFilter,
+          multiple: true,
+          treeCheckable: true,
+          dropdownStyle: {
+            maxHeight: 400,
+            overflow: 'auto',
+            zIndex: 9999
+          },
+          placeholder: "Please select",
+          allowClear: true,
+          maxTagCount: 'responsive',
+          onChange: val => {
+            console.log(val);
+            // onChangeValueFilter(column, val, true)
+          },
+          treeData: options,
+          popupClassName: 'adv-popup-container checkbox-dropdown'
+          // getPopupContainer={() => menuRef.current}
+        });
+      case 'DateRange':
+        return /*#__PURE__*/React.createElement(RangePicker, {
+          format: {
+            format: column.format?.dateFormat ?? 'DD/MM/YYYY',
+            type: 'mask'
+          },
+          defaultValue: valueFilter,
+          value: valueFilter,
+          placeholder: ['Ngày bắt đầu', 'Ngày kết thúc'],
+          popupStyle: {
+            zIndex: 9999
+          },
+          onChange: (value, dateString) => {
+            const newDateRangeValue = [dateString[0] ? convertDayjsToDate(dateString[0], column.format?.dateFormat ?? 'DD/MM/YYYY') : '', dateString[1] ? convertDayjsToDate(dateString[1], column.format?.dateFormat ?? 'DD/MM/YYYY') : ''];
+            console.log(newDateRangeValue);
+
+            // onChangeValueFilter(column, newDateRangeValue)
+          },
+          style: {
+            width: '100%'
+          },
+          popupClassName: 'adv-popup-container'
+          // getPopupContainer={() => menuRef.current}
+        });
+      case 'Date':
+        const dateValue = valueFilter ? convertDateToDayjs(valueFilter, column.format?.dateFormat ?? 'DD/MM/YYYY') : null;
+        return /*#__PURE__*/React.createElement(DatePicker, {
+          format: {
+            format: column.format?.dateFormat ?? 'DD/MM/YYYY',
+            type: 'mask'
+          },
+          style: {
+            width: '100%'
+          },
+          defaultValue: dateValue,
+          value: dateValue,
+          placeholder: 'Chọn ngày',
+          onChange: (val, dateString) => {
+            const newDateTimeValue = dateString ? convertDayjsToDate(dateString, column.format?.dateFormat ?? 'DD/MM/YYYY') : null;
+            // onChangeValueFilter(column, newDateTimeValue)
+            console.log(newDateTimeValue);
+          },
+          popupStyle: {
+            zIndex: 9999
+          },
+          popupClassName: 'adv-popup-container'
+          // getPopupContainer={() => menuRef.current}
+        });
+      case 'Datetime':
+        const dateTimeValue = valueFilter ? convertDateToDayjs(valueFilter, column.format?.dateFormat ?? 'DD/MM/YYYY HH:mm') : null;
+        return /*#__PURE__*/React.createElement(DatePicker, {
+          format: {
+            format: column.format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm',
+            type: 'mask'
+          },
+          style: {
+            width: '100%'
+          },
+          showTime: column.typeFilter === 'Datetime',
+          defaultValue: dateTimeValue,
+          value: dateTimeValue,
+          placeholder: 'Chọn ngày',
+          onChange: (val, dateString) => {
+            const newDateTimeValue = dateString ? convertDayjsToDate(dateString, column.format?.datetimeFormat ?? 'DD/MM/YYYY HH:mm') : null;
+            console.log('newDateTimeValue', newDateTimeValue);
+            // onChangeValueFilter(column, newDateTimeValue)
+          },
+          popupStyle: {
+            zIndex: 9999
+          },
+          popupClassName: 'adv-popup-container'
+        });
+      case 'DropTree':
+        return /*#__PURE__*/React.createElement(TreeSelect, {
+          showSearch: true,
+          style: {
+            width: '100%'
+          },
+          value: valueFilter,
+          multiple: tmpColumn.filterOption?.multiple,
+          treeCheckable: tmpColumn.filterOption?.treeCheckable,
+          dropdownStyle: {
+            maxHeight: 400,
+            overflow: 'auto',
+            zIndex: 9999
+          },
+          placeholder: "Please select",
+          allowClear: true,
+          onChange: () => {
+            // onChangeValueFilter(column, val, tmpColumn.filterOption?.multiple)
+          },
+          treeData: options,
+          maxTagCount: 'responsive',
+          popupClassName: 'adv-popup-container'
+        });
+      case 'Time':
+        return /*#__PURE__*/React.createElement(TimePicker, {
+          format: {
+            format: column.format?.timeFormat ?? 'HH:mm',
+            type: 'mask'
+          },
+          defaultValue: valueFilter ?? null,
+          onChange: (values, timeString) => {
+            const newTimeValue = timeString ? timeString : null;
+            console.log(newTimeValue);
+            // onChangeValueFilter(column, newTimeValue)
+          },
+          style: {
+            width: '100%'
+          },
+          popupStyle: {
+            zIndex: 9999
+          },
+          popupClassName: 'adv-popup-container'
+        });
+      case 'Number':
+        const thousandSeparator = column.format?.thousandSeparator ? column.format?.thousandSeparator : format?.thousandSeparator;
+        const decimalSeparator = column.format?.decimalSeparator ? column.format?.decimalSeparator : format?.decimalSeparator;
+        const numericFormatProps = {
+          thousandSeparator: checkThousandSeparator(thousandSeparator, decimalSeparator),
+          decimalSeparator: checkDecimalSeparator(thousandSeparator, decimalSeparator),
+          decimalScale: !isObjEmpty(column.format?.decimalScale) ? column.format?.decimalScale : undefined,
+          fixedDecimalScale: !isEmpty(column.format?.fixedDecimalScale) ? column.format?.fixedDecimalScale : false,
+          allowNegative: column.format?.allowNegative ?? false,
+          prefix: column.format?.prefix ?? undefined,
+          suffix: column.format?.suffix ?? undefined
+        };
+        const valueNumeric = valueFilter || valueFilter === 0 ? valueFilter.toString() : '';
+        return /*#__PURE__*/React.createElement(NumericFormat, _extends({}, numericFormatProps, {
+          value: valueNumeric,
+          customInput: Input
+          // valueIsNumericString={true}
+          ,
+          autoComplete: 'off',
+          className: classnames('adv-form-input form-control', {}),
+          onValueChange: values => {
+            console.log('values', values);
+            // onChangeValueFilter(column as any, values.floatValue)
+          }
+        }));
+      default:
+        return /*#__PURE__*/React.createElement(Input, {
+          placeholder: 'Nhập giá trị',
+          value: valueFilter ? valueFilter : '',
+          style: {
+            padding: '0.3rem 0.5rem',
+            lineHeight: '1.25'
+          },
+          autoFocus: index === 0,
+          onChange: val => {
+            console.log(val);
+            // onChangeValueFilter(column as any, val.target.value)
+          },
+          className: "adv-form-input"
+        });
+    }
+  };
+  const content = /*#__PURE__*/React.createElement("div", {
+    ref: menuRef,
+    className: 'd-flex flex-column'
+  }, /*#__PURE__*/React.createElement(MainFilter, {
+    leftFilterWidth: leftFilterWidth,
+    className: 'd-flex pb-1'
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      flex: 1
+    }
+  }, /*#__PURE__*/React.createElement(GridFilter, {
+    className: 'grid-filter'
+  }, columns.map((it, index) => {
+    return /*#__PURE__*/React.createElement("div", {
+      className: 'grid-item-filter',
+      key: index
+    }, /*#__PURE__*/React.createElement("p", {
+      className: 'm-0',
       style: {
-        minWidth: 250
+        minHeight: 21
       }
-    }, /*#__PURE__*/React.createElement(Input, {
-      style: {
-        marginBottom: 8
-      },
-      placeholder: t ? t("Search") : 'Search',
-      prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
-      onChange: onChange
-    }), /*#__PURE__*/React.createElement(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),
-      multiple: true,
-      checkedKeys: selectedKeys,
-      defaultCheckedKeys: selectedKeys
-      // defaultCheckedKeys={defaultSelectedKeys}
-      ,
-      selectedKeys: [],
-      height: window.innerHeight - 200
-    }), /*#__PURE__*/React.createElement(BoxAction, {
-      className: 'px-1'
-    }, /*#__PURE__*/React.createElement(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.createElement(Button, {
-      className: 'btn-action btn-action-cancel',
-      onClick: handleCancel
-    }, t ? t('Cancel') : 'Cancel'))),
+    }, t ? t(it.headerText ?? '') : it.headerText), renderFilter(it, index));
+  })))), /*#__PURE__*/React.createElement(BoxAction, {
+    className: ''
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: 'btn-action btn-action-cancel',
+    variant: "outlined",
+    onClick: handleReset
+  }, t ? t('Reset') : 'Reset'), /*#__PURE__*/React.createElement(Button, {
+    className: 'btn-action btn-action-cancel',
+    variant: "outlined",
+    onClick: handleCancel
+  }, t ? t('Cancel') : 'Cancel'), /*#__PURE__*/React.createElement(Button, {
+    className: classnames('btn-action btn-action-submit', {
+      disable: !columns.find(item => item.visible !== false || item.visible)
+    }),
+    variant: "outlined",
+    onClick: handleAccept,
+    disabled: !columns.find(item => item.visible !== false || item.visible)
+  }, t ? t('Accept') : 'Accept')));
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Popover, {
+    placement: 'bottomLeft'
+    // content={
+    //   <div style={{minWidth: 250}}>
+    //
+    //   </div>
+    // }
+    ,
+    content: content,
     trigger: "click",
     open: clicked,
     onOpenChange: handleClickChange,
@@ -540,5 +435,20 @@ export const ColumnsChoose = props => {
   }, /*#__PURE__*/React.createElement(Tooltip, {
     arrow: false,
     title: 'Cài đặt'
-  }, /*#__PURE__*/React.createElement(SettingOutlined, null))));
-};
+  }, count > 0 ? /*#__PURE__*/React.createElement(Badge, {
+    size: "small",
+    count: count,
+    color: "danger"
+  }, /*#__PURE__*/React.createElement(Filter, {
+    fontSize: 16,
+    style: {
+      cursor: 'pointer'
+    }
+  })) : /*#__PURE__*/React.createElement(Filter, {
+    fontSize: 16,
+    style: {
+      cursor: 'pointer'
+    }
+  }))));
+};
+export default AdvanceFilter;