es-grid-template 1.3.1 → 1.3.2

package/es/grid-component/CheckboxFilter.js

@@ -79,6 +79,7 @@ const CheckboxFilter = props => {
 
   // const [searchValue, setSearchValue] = React.useState('');
 
+  console.log('options', options);
   const [openKeys, setOpenKeys] = React.useState([]);
 
   // clear search value after close filter dropdown
@@ -171,6 +172,9 @@ const CheckboxFilter = props => {
       onSelect?.(keys);
     }
   };
+  console.log('getTreeData({ filters: options })', getTreeData({
+    filters: options
+  }));
   if (filterMode === 'tree') {
     return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(FilterSearch, {
       filterSearch: filterSearch,

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { TableLocale } from "rc-master-ui/es/table/interface";
+type Props = {
+    options: any[];
+    filterSearch?: boolean;
+    open?: boolean;
+    tablePrefixCls?: string;
+    prefixCls?: string;
+    dropdownPrefixCls?: string;
+    filterMultiple: boolean;
+    showFilter?: boolean;
+    onSelect?: (value: any) => void;
+    selectedKeys: string[];
+    locale?: TableLocale;
+    filterMode?: 'menu' | 'tree';
+    searchValue: string;
+    setSearchValue: (value: any) => void;
+};
+declare const CheckboxFilter: (props: Props) => React.JSX.Element;
+export default CheckboxFilter;

package/es/grid-component/CheckboxFilter2.js

@@ -0,0 +1,248 @@
+import * as React from "react";
+import classNames from "classnames";
+import FilterSearch from "./FilterSearch";
+import { Checkbox, Menu, Radio, Empty } from "rc-master-ui";
+import { Tree } from "antd";
+import { flattenKeys } from "rc-master-ui/es/table/hooks/useFilter";
+// import Tree from "rc-master-ui/es/tree";
+
+function searchValueMatched(searchValue, text) {
+  if (typeof text === 'string' || typeof text === 'number') {
+    return text?.toString().toLowerCase().includes(searchValue.trim().toLowerCase());
+  }
+  return false;
+}
+function renderFilterItems({
+  filters,
+  prefixCls,
+  filteredKeys,
+  filterMultiple,
+  searchValue,
+  filterSearch
+}) {
+  return filters.map((filter, index) => {
+    const key = String(filter.value);
+    if (filter.children) {
+      return {
+        key: key || index,
+        label: filter.text,
+        popupClassName: `${prefixCls}-dropdown-submenu`,
+        children: renderFilterItems({
+          filters: filter.children,
+          prefixCls,
+          filteredKeys,
+          filterMultiple,
+          searchValue,
+          filterSearch
+        })
+      };
+    }
+    const Component = filterMultiple ? Checkbox : Radio;
+    const item = {
+      key: filter.value !== undefined ? key : index,
+      label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Component, {
+        checked: filteredKeys.includes(key)
+      }), /*#__PURE__*/React.createElement("span", null, filter.text))
+    };
+    if (searchValue.trim()) {
+      if (typeof filterSearch === 'function') {
+        return filterSearch(searchValue, filter) ? item : null;
+      }
+      return searchValueMatched(searchValue, filter.text) ? item : null;
+    }
+    return item;
+  });
+}
+function hasSubMenu(filters) {
+  return filters.some(({
+    children
+  }) => children);
+}
+const CheckboxFilter = props => {
+  const {
+    // column,
+    filterSearch = true,
+    tablePrefixCls = 'ui-rc-table',
+    prefixCls = 'ui-rc-table-filter',
+    dropdownPrefixCls = 'ui-rc-dropdown',
+    filterMultiple,
+    selectedKeys,
+    locale,
+    options,
+    filterMode = 'tree',
+    // open,
+    searchValue,
+    showFilter,
+    setSearchValue,
+    onSelect
+  } = props;
+
+  // const [searchValue, setSearchValue] = React.useState('');
+
+  console.log('options', options);
+  const [openKeys, setOpenKeys] = React.useState([]);
+
+  // clear search value after close filter dropdown
+  // React.useEffect(() => {
+  //   // if (visible) {
+  //     setSearchValue('');
+  //   // }
+  // }, [open]);
+
+  const onOpenChange = keys => {
+    setOpenKeys(keys);
+  };
+  const items = renderFilterItems({
+    // filters: column.filters || [],
+    filters: options || [],
+    filterSearch,
+    prefixCls,
+    filteredKeys: selectedKeys ?? [],
+    filterMultiple,
+    searchValue
+  });
+  const dropdownMenuClass = classNames({
+    // [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(column.filters || []),
+    [`${dropdownPrefixCls}-menu-without-submenu`]: !hasSubMenu(options || [])
+  });
+  const empty = /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE,
+    description: locale?.filterEmptyText,
+    imageStyle: {
+      height: 24
+    },
+    style: {
+      margin: 0,
+      padding: '16px 0'
+    }
+  });
+  const isEmpty = items.every(item => item === null);
+  const onSearch = e => {
+    const {
+      value
+    } = e.target;
+    setSearchValue(value);
+  };
+
+  // if ((column.filters || []).length === 0) {
+  //   return empty;
+  // }
+
+  const getTreeData = ({
+    filters
+  }) => (filters || []).map((filter, index) => {
+    const key = String(filter.value);
+    const item = {
+      title: filter.text,
+      key: filter.value !== undefined ? key : String(index)
+    };
+    if (filter.children) {
+      item.children = getTreeData({
+        filters: filter.children
+      });
+    }
+    return item;
+  });
+  const getFilterData = node => ({
+    ...node,
+    text: node.title,
+    value: node.key,
+    children: node.children?.map(item => getFilterData(item)) || []
+  });
+  const onCheckAll = e => {
+    if (e.target.checked) {
+      const allFilterKeys = flattenKeys(options).map(key => String(key));
+
+      // setFilteredKeysSync(allFilterKeys);
+      onSelect?.(allFilterKeys);
+    } else {
+      onSelect?.([]);
+      // setFilteredKeysSync([]);
+    }
+  };
+  const onCheck = (keys, {
+    node,
+    checked
+  }) => {
+    if (!filterMultiple) {
+      // onSelectKeys({ selectedKeys: checked && node.key ? [node.key] : [] });
+      onSelect?.(checked && node.key ? [node.key] : []);
+    } else {
+      // onSelectKeys({ selectedKeys: keys });
+      onSelect?.(keys);
+    }
+  };
+  console.log('getTreeData({ filters: options })', getTreeData({
+    filters: options
+  }));
+  if (filterMode === 'tree') {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, showFilter && /*#__PURE__*/React.createElement(FilterSearch, {
+      filterSearch: filterSearch,
+      value: searchValue,
+      onChange: onSearch,
+      tablePrefixCls: tablePrefixCls,
+      locale: locale
+    }), /*#__PURE__*/React.createElement("div", {
+      className: `${tablePrefixCls}-filter-dropdown-tree`
+    }, filterMultiple && options.length > 0 ? /*#__PURE__*/React.createElement(Checkbox
+    // checked={selectedKeys.length === flattenKeys(column.filters).length}
+    , {
+      checked: selectedKeys.length === flattenKeys(options).length
+      // indeterminate={
+      //   selectedKeys.length > 0 &&
+      //   selectedKeys.length < flattenKeys(column.filters).length
+      // }
+      ,
+
+      indeterminate: selectedKeys.length > 0 && selectedKeys.length < flattenKeys(options).length,
+      className: `${tablePrefixCls}-filter-dropdown-checkall`,
+      onChange: onCheckAll
+    }, locale?.filterCheckall) : /*#__PURE__*/React.createElement(Empty, null), /*#__PURE__*/React.createElement(Tree, {
+      checkable: true,
+      selectable: false,
+      blockNode: true,
+      multiple: filterMultiple,
+      checkStrictly: !filterMultiple,
+      className: `${dropdownPrefixCls}-menu`,
+      onCheck: onCheck,
+      checkedKeys: selectedKeys,
+      selectedKeys: selectedKeys,
+      showIcon: false
+      // treeData={getTreeData({ filters: column.filters })}
+      ,
+      treeData: getTreeData({
+        filters: options
+      }),
+      autoExpandParent: true,
+      defaultExpandAll: true,
+      filterTreeNode: searchValue.trim() ? node => {
+        if (typeof filterSearch === 'function') {
+          // @ts-ignore
+          return filterSearch(searchValue, getFilterData(node));
+        }
+        return searchValueMatched(searchValue, node.title);
+      } : undefined
+    })));
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilterSearch, {
+    filterSearch: filterSearch,
+    value: searchValue,
+    onChange: onSearch,
+    tablePrefixCls: tablePrefixCls,
+    locale: locale
+  }), isEmpty ? empty : /*#__PURE__*/React.createElement(Menu, {
+    selectable: true,
+    multiple: filterMultiple,
+    prefixCls: `${dropdownPrefixCls}-menu`,
+    className: dropdownMenuClass,
+    onSelect: onSelect,
+    onDeselect: onSelect,
+    selectedKeys: selectedKeys
+    // getPopupContainer={getPopupContainer}
+    ,
+    openKeys: openKeys,
+    onOpenChange: onOpenChange,
+    items: items
+  }));
+};
+export default CheckboxFilter;

package/es/grid-component/ContextMenu.js

@@ -83,6 +83,7 @@ const ContextMenu = props => {
     React.createElement(Dropdown, {
       placement: 'topRight',
       open: open,
+      overlayClassName: 'be-popup-container',
       overlayStyle: {
         left: `${pos.x}px`,
         top: `${pos.y}px`

package/es/grid-component/InternalTable.js

@@ -3,9 +3,14 @@ import React from 'react';
 import { Resizable } from "react-resizable";
 import 'react-resizable/css/styles.css';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
-import { addRowIdArray, findItemByKey,
+import { addRowIdArray,
+// filterDataByColumns,
+// filterDataByColumns2,
+// filterDataByColumns3,
+findItemByKey,
 // convertFlatColumn,
 removeColumns,
+// removeFieldRecursive,
 // addRowIdArray,
 updateArrayByKey, updateColumnsByGroup, updateData } from "./hooks";
 import dayjs from "dayjs";
@@ -65,7 +70,8 @@ const InternalTable = props => {
     dataSource,
     allowResizing,
     dataSourceFilter: propDataSourceFilter,
-    onFilterClick,
+    // onFilterClick,
+    // onFilter,
     editAble,
     rowKey: propRowKey,
     format,
@@ -94,8 +100,15 @@ const InternalTable = props => {
       ...local.lang
     }
   };
+
+  // const [filterStates, setFilterState] = React.useState<any>(null)
+  // const [isFilter, setIsFilter] = React.useState<boolean>(false);
+
   const mergerdData = React.useMemo(() => {
+    // return filterDataByColumns2(addRowIdArray(dataSource), filterStates)
+    // return filterDataByColumns3(addRowIdArray(dataSource), filterStates)
     return addRowIdArray(dataSource);
+    // return dataSource
   }, [dataSource]);
   const [columns, setColumns] = React.useState([]);
   const tableRef = React.useRef(null);
@@ -140,7 +153,8 @@ const InternalTable = props => {
     locale,
     t,
     rowKey,
-    dataSource: mergerdData,
+    // dataSource: mergerdData,
+    dataSource,
     buddhistLocale,
     dataSourceFilter: propDataSourceFilter,
     format,
@@ -208,7 +222,22 @@ const InternalTable = props => {
     // setData(newData)
     // setMergedData(newData)
     onDataChange?.(newData);
+    // onDataChange?.(removeFieldRecursive(newData, 'isFilterState'))
   };
+
+  // const triggerFilter = (queries: any) => {
+  //   console.log('queries', queries)
+  //   // console.log('data', dataSource)
+  //   setFilterState(queries)
+  //
+  //   if (queries && queries.length > 0) {
+  //     setIsFilter(true)
+  //   } else {
+  //     setIsFilter(false)
+  //   }
+  //
+  // }
+
   const triggerCommandClick = args => {
     const {
       id,
@@ -367,6 +396,7 @@ const InternalTable = props => {
     locale: locale,
     tableRef: tableRef,
     dataSource: mergerdData
+    // dataSource={dataSource}
     // components={components}
     ,
     components: {
@@ -392,6 +422,10 @@ const InternalTable = props => {
     groupAble: groupAble,
     groupColumns: groupColumns,
     commandClick: triggerCommandClick
+    // triggerFilter={triggerFilter}
+    // isFilter={isFilter}
+    // setIsFilter={setIsFilter}
+    // onScroll={onScroll}
   }));
 };
 export default InternalTable;

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

@@ -5,12 +5,15 @@ import type { ColumnsTable, GetRowKey, GridTableProps } from "./type";
 type GridProps<T> = GridTableProps<T> & {
     triggerChangeColumns?: (columns: ColumnsTable<T>, type: string) => void;
     triggerChangeData?: (newData: T[], type: string) => void;
+    triggerFilter?: (queries: any) => void;
     triggerGroupColumns?: (groupedColumns: string[]) => void;
     tableRef: any;
     bottomToolbar?: () => React.ReactElement;
     getRowKey: GetRowKey<T>;
     rowSelection?: any;
     groupToolbar?: () => React.ReactNode;
+    isFilter?: boolean;
+    setIsFilter?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 declare const TableGrid: <RecordType extends object>(props: GridProps<RecordType>) => React.JSX.Element;
 export default TableGrid;

package/es/grid-component/TableGrid.js

@@ -8,6 +8,8 @@ import 'dayjs/locale/vi';
 import ContextMenu from "./ContextMenu";
 import classNames from "classnames";
 import { checkDecimalSeparator, checkThousandSeparator,
+// filterDataByColumns2,
+filterDataByColumns3,
 // convertFlatColumn,
 isEmpty,
 // newGuid,
@@ -22,6 +24,7 @@ import ComponentSpinner from "./LoadingSpinner";
 import { ColumnsChoose } from "./ColumnsChoose";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import AdvanceFilter from "./AdvanceFilter";
+import { Tooltip } from "react-tooltip";
 const convertFilters = filters => {
   const result = [];
   filters.forEach(({
@@ -45,6 +48,40 @@ const convertFilters = filters => {
         predicate: "and",
         operator: "lessthanorequal"
       });
+    } else if (column?.typeFilter === "NumberRange") {
+      if ((filteredKeys[0] || filteredKeys[0] === 0) && !filteredKeys[1]) {
+        result.push({
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[0],
+          predicate: "and",
+          operator: "greaterthanorequal"
+        });
+      }
+      if ((filteredKeys[1] || filteredKeys[1] === 0) && !filteredKeys[0]) {
+        result.push({
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[1],
+          predicate: "and",
+          operator: "lessthanorequal"
+        });
+      }
+      if ((filteredKeys[0] || filteredKeys[0] === 0) && (filteredKeys[1] || filteredKeys[1] === 0)) {
+        result.push({
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[0],
+          predicate: "and",
+          operator: "greaterthanorequal"
+        }, {
+          key,
+          field: column?.dataIndex,
+          value: filteredKeys[1],
+          predicate: "and",
+          operator: "lessthanorequal"
+        });
+      }
     } else if (column?.typeFilter === 'Checkbox') {
       filteredKeys.forEach(value => {
         result.push({
@@ -112,6 +149,7 @@ const TableGrid = props => {
     showColumnChoose,
     showAdvanceFilter,
     onFilter,
+    triggerFilter,
     selectionSettings,
     rowSelection,
     rowSelected,
@@ -133,6 +171,7 @@ const TableGrid = props => {
     groupColumns,
     groupToolbar,
     showEmptyText,
+    setIsFilter,
     ...rest
   } = props;
   const {
@@ -159,6 +198,7 @@ const TableGrid = props => {
     viewportWidth,
     viewportHeight
   });
+  const [filterStates, setFilterState] = React.useState(null);
 
   // const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>(defaultSelected);
 
@@ -295,6 +335,18 @@ const TableGrid = props => {
   const handleChange = sorter => {
     onSorter?.(sorter);
   };
+  const handleOnFilter = queries => {
+    if (onFilter) {
+      onFilter?.(convertFilters(queries));
+    } else {
+      setFilterState(convertFilters(queries));
+      if (queries && queries.length > 0) {
+        setIsFilter?.(true);
+      } else {
+        setIsFilter?.(false);
+      }
+    }
+  };
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(ContextMenu, {
     open: menuVisible,
     pos: position,
@@ -306,7 +358,9 @@ const TableGrid = props => {
   }), /*#__PURE__*/React.createElement(Table, _extends({
     ref: tableRef
   }, rest, {
+    tableLayout: 'fixed'
     // id={newGuid()}
+    ,
     locale: {
       ...locale,
       emptyText: showEmptyText !== false ? /*#__PURE__*/React.createElement(Empty, {
@@ -318,7 +372,8 @@ const TableGrid = props => {
       spinning: columns && columns.length === 0 || loading === true,
       indicator: /*#__PURE__*/React.createElement(ComponentSpinner, null)
     },
-    dataSource: columns && columns.length > 0 && loading !== true ? dataSource : []
+    dataSource: columns && columns.length > 0 && loading !== true ? filterDataByColumns3(dataSource, filterStates) : []
+    // dataSource={columns && columns.length > 0 && loading !== true ? dataSource : []}
     // className={styles.customTable}
     ,
     className: classNames(className, {
@@ -353,10 +408,13 @@ const TableGrid = props => {
       // checkStrictly: false,
 
       hideSelectAll: !type || type === 'single' || selectionSettings?.mode === 'radio' ? true : hideSelectAll ?? type !== 'multiple'
-    },
-    onScroll: () => {
-      setMenuVisible(false);
-    },
+    }
+
+    // onScroll={() => {
+    //   setMenuVisible(false)
+    // }}
+    ,
+
     summary: () => {
       if (typeof summary === 'function') {
         return summary(dataSource);
@@ -395,7 +453,9 @@ const TableGrid = props => {
       ...pagination
     },
     onFilter: val => {
-      onFilter?.(convertFilters(val));
+      handleOnFilter(val);
+      // triggerFilter?.(convertFilters(val))
+      // onFilter?.(convertFilters(val))
     },
     onChange: (paging, filters, sorter) => handleChange(sorter),
     title: showToolbar === false ? undefined : () => {
@@ -457,6 +517,8 @@ const TableGrid = props => {
     // @ts-ignore
     ,
     showTotal: (total, range) => `${range[0]}-${range[1]} / ${total} ${t ? t(pagination?.locale?.items ?? 'items') : 'items'}`
-  }, pagination)), bottomToolbar?.());
+  }, pagination)), bottomToolbar?.(), /*#__PURE__*/React.createElement(Tooltip, {
+    id: "tooltip-header"
+  }));
 };
 export default TableGrid;

package/es/grid-component/hooks/columns/index.js

@@ -6,6 +6,7 @@ import React, { Fragment } from "react";
 import { DatePicker, Empty, Input, Select } from "rc-master-ui";
 import CheckboxFilter from "../../CheckboxFilter";
 import { SELECTION_COLUMN } from "rc-master-ui/es/table/hooks/useSelection";
+import NumberRange from "../../number-range";
 const {
   RangePicker
 } = DatePicker;
@@ -131,11 +132,6 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
   const dateRangeFormat = getDatepickerFormat(column?.type, column) ?? 'DD/MM/YYYY';
   const find = dataSourceFilter?.find(it => it.key === column?.field);
   const options = find ? find.data : [];
-
-  // console.log('dataSourceFilter', dataSourceFilter)
-  // console.log('options', options)
-  // console.log('column', column)
-
   switch (type) {
     case 'Number':
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -155,39 +151,15 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
         }
       }))));
     case 'NumberRange':
-      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-        className: 'mb-1 d-flex flex-column gap-1'
-      }, /*#__PURE__*/React.createElement("div", {
-        style: {
-          marginBottom: 8
+      return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumberRange, {
+        t: t,
+        min: selectedKeys[0],
+        max: selectedKeys[1],
+        onChange: vals => {
+          console.log('NumberRange', vals);
+          setSelectedKeys(vals);
         }
-      }, /*#__PURE__*/React.createElement(NumericFormat, {
-        value: selectedKeys[0]
-        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-        ,
-        allowNegative: true,
-        customInput: Input,
-        className: ' rounded-0 input-element form-control'
-        // onValueChange={(values: any) => {
-        //   onChangeValueFilter(type, values.floatValue, 'min')
-        // }}
-        ,
-        placeholder: t ? t('Min') : 'Min',
-        autoFocus: true
-      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(NumericFormat, {
-        value: selectedKeys[1]
-        // thousandSeparator={checkThousandSeparator(thousandSeparator, decimalSeparator)}
-        // decimalSeparator={checkDecimalSeparator(thousandSeparator, decimalSeparator)}
-        ,
-        allowNegative: true,
-        customInput: Input,
-        className: ' rounded-0 input-element form-control',
-        onValueChange: () => {
-          // onChangeValueFilter(type, values.floatValue, 'max')
-        },
-        placeholder: t ? t('Max') : 'Max'
-      })))));
+      })));
     case 'Date':
       const dateValue = selectedKeys[0] ? convertDateToDayjs(new Date(selectedKeys[0]), dateFormat) : null;
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
@@ -438,16 +410,13 @@ export const renderFilter = (column, selectedKeys, setSelectedKeys, confirm, vis
     case 'Checkbox':
       return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: 'mb-1'
-      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter
-      // locale={{
-      //   filterTitle: 'Chọn tất cả',
-      //   filterCheckall: 'Chọn tất cả'
-      // }}
-      , {
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxFilter, {
         locale: locale,
         selectedKeys: selectedKeys,
-        onSelect: setSelectedKeys,
-        options: options,
+        onSelect: setSelectedKeys
+        // options={options}
+        ,
+        options: column.source ? column.source : options ?? [],
         filterMultiple: true,
         open: visible,
         searchValue: searchValue,