es-grid-template/es/grid-component/CheckboxFilter2.js

es-grid-template

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;