es-grid-template/lib/ali-table/pipeline/features/columnCustom.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.columnCustom = columnCustom;
var _react = _interopRequireDefault(require("react"));
var _internals = require("../../internals");
var _utils = require("../../utils");
var _ColumnResizer = _interopRequireDefault(require("../../base-table/ColumnResizer"));
var _becoxyIcons = require("becoxy-icons");
var _hooks = require("../../../grid-component/hooks");
var _classnames = _interopRequireDefault(require("classnames"));
var _antd = require("antd");
var _rcMasterUi = require("rc-master-ui");
var _utils2 = require("../../../table-component/hook/utils");
var _renderFilter = require("../../base-table/renderFilter");
var _useColumns = require("../../../table-component/hook/useColumns");
function clamp(min, x, max) {
  return Math.max(min, Math.min(max, x));
}
function columnCustom(opts) {
  const stateKeyResize = 'columnResize';
  const stateKeyFilter = 'columnsFilter';
  const stateKeySorter = 'columnsSorter';
  const stateKeyVisible = 'visible';
  const stateKeyTooltip = 'tooltip';
  const stateKey = 'pagination';
  const stateKeyColumnFilter = 'columnFilter';

  // const disableUserSelectWhenResizing = opts.disableUserSelectWhenResizing ?? true
  const minSize = opts.minSize ?? 50;
  const fallbackSize = opts.fallbackSize ?? 150;
  const maxSize = opts.maxSize ?? 1000;
  const allowFiltering = opts.allowFiltering !== false;
  const allowSortering = opts.allowSortering !== false;
  const allowResizing = opts.allowResizing !== false;
  const {
    prefix,
    id,
    t,
    locale,
    tableLocal,
    format,
    dataSourceFilter,
    onFilter,
    stopClickEventPropagation = true,
    wrapSettings,
    // ignoreAccents,
    dataSource,
    isDataTree,
    defaultSorter,
    defaultFilter

    // currentPage = 1,
    // pageSize
  } = opts;
  const {
    orders = ['descend', 'ascend', 'none'],
    mode = 'multiple',
    onSorter
  } = opts;
  return function columnResizeFeature(pipeline) {
    const sizes = opts.sizes ?? pipeline.getStateAtKey(stateKeyResize) ?? opts.defaultSizes ?? [];
    const filterState = pipeline.getStateAtKey(stateKeyFilter) ?? defaultFilter ?? [];
    const visible = pipeline.getStateAtKey(stateKeyVisible) ?? '';
    const isOpenTooltip = pipeline.getStateAtKey(stateKeyTooltip) ?? false;
    const pageSize = opts?.pageSize ?? pipeline.getStateAtKey(stateKey)?.pageSize ?? _hooks.pageSizeOptions[0];
    const currentPage = opts?.currentPage ?? pipeline.getStateAtKey(stateKey)?.currentPage ?? 1;

    // const data = pipeline.getDataSource()

    const filterColumnState = pipeline.getStateAtKey(stateKeyColumnFilter) ?? {}; // {operator: any, filteredKeys: any[], field: any, column: COlumn }

    // const fieldOriginalKey = filterColumnState?.column?.fieldOriginal

    // const fieldOriginal = fieldOriginalKey ? columns.find((it) => it.field === fieldOriginalKey) : undefined

    // const sorterStates = pipeline.getStateAtKey(stateKeySorter) ?? []
    const sorterStates = pipeline.getStateAtKey(stateKeySorter) ?? defaultSorter ?? [];
    const activeSorts = sorterStates.filter(s => s.order !== 'none');
    const sorts = mode === 'multiple' ? activeSorts : activeSorts.slice(0, 1);
    const leafColumns = (0, _utils.collectNodes)(pipeline.getColumns(), 'leaf-only');
    leafColumns.forEach((col, colIndex) => {
      if (sizes[colIndex] == null) {
        if (typeof col.width === 'number') {
          sizes[colIndex] = col.width;
        } else {
          sizes[colIndex] = fallbackSize;
        }
      }
    });

    // const onColumnResizeStop = (w: any, columnKey: any, startIndex: any, endIndex: any) => {

    //   // const columns = opts.columns

    //   // const findColumn  = findItemByKey(columns, 'field', columnKey)

    //   // const newColumn  =  {...findColumn, with: w}
    //   // const newColumns  =  updateArrayByKey(columns, newColumn, 'field')

    //   const nextSize = [...sizes]

    //   // nextSize[startIndex] = w
    //   // nextSize[endIndex - 1] = w
    //   nextSize[endIndex - 1] = clamp(minSize, w, maxSize)

    //   pipeline.setStateAtKey(stateKeyResize, nextSize)

    // }

    const onResize = (w, columnKey, startIndex, endIndex) => {
      const nextSize = [...sizes];

      // nextSize[startIndex] = w
      // nextSize[endIndex - 1] = w

      nextSize[endIndex - 1] = clamp(minSize, w, maxSize);
      pipeline.setStateAtKey(stateKeyResize, nextSize);
    };
    const triggerVisible = (val, field) => {
      if (val) {
        pipeline.setStateAtKey(stateKeyVisible, field);
      } else {
        pipeline.setStateAtKey(stateKeyVisible, '');
      }
    };
    const onVisibleChange = (newVisible, info, column) => {
      if (info.source === 'trigger') {
        if (newVisible) {
          const defaultFilterOption = defaultFilter?.find(it => it.field === column.field);
          const filterValue = filterColumnState.filteredKeys === null ? [] : filterColumnState.filteredKeys ?? defaultFilterOption?.filteredKeys ?? [];
          const operator = filterColumnState.operator;
          const operatorValue = operator ?? defaultFilterOption?.operator ?? (0, _utils2.getDefaultOperator)(column);
          pipeline.setStateAtKey(stateKeyColumnFilter, {
            operator: operatorValue,
            filteredKeys: filterValue,
            field: column.field,
            column
          });

          // if (fieldOriginal) {
          //   fieldOriginal.setFilterOperator?.(operatorValue)
          // } else {
          //   column.setFilterOperator?.(operatorValue)
          // }

          setTimeout(() => {
            const inputFilter = document.querySelector('.filter-input');
            if (inputFilter) {
              inputFilter.focus();
            }
          }, 200);
        } else {}
        triggerVisible(newVisible, column.field);
      }
    };
    const doFilter = type => {
      if (type) {
        const currentFilter = {
          field: filterColumnState.field,
          key: filterColumnState.field,
          column: filterColumnState.column,
          filteredKeys: filterColumnState.filteredKeys,
          operator: filterColumnState.operator ?? undefined
        };

        // tìm column đang filter trong filterState
        const find = filterState.find(it => it.field === filterColumnState.field);
        let newFilterState = [];
        if (find) {
          const rs = (0, _hooks.updateArrayByKey)(filterState, currentFilter, 'field');
          pipeline.setStateAtKey(stateKeyFilter, rs);
          newFilterState = (0, _utils2.convertFilters)([...rs]);
        } else {
          const rs = [...filterState, currentFilter];
          pipeline.setStateAtKey(stateKeyFilter, [...rs]);
          newFilterState = (0, _utils2.convertFilters)([...rs]);
        }
        if (onFilter) {
          onFilter(newFilterState);
        } else {

          // const newData = filterDataByColumns(data, newFilterState, sorterStates, [], ignoreAccents)

          // pipeline.dataSource(newData)
        }

        // if (fieldOriginal) {
        //   fieldOriginal.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)

        // } else {
        //   column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)

        // }
      } else {
        // if (fieldOriginal) {
        //   fieldOriginal.setFilterValue(undefined)
        // } else {
        //   column.setFilterValue(undefined)
        // }

        // xóa column đang filter trong filterState

        const newFilterState = filterState.filter(it => it.field !== filterColumnState.field);
        const currentFilter = {
          field: filterColumnState.field,
          key: filterColumnState.field,
          column: filterColumnState.column,
          filteredKeys: null,
          operator: filterColumnState.operator ?? undefined
        };
        const rs = (0, _hooks.updateArrayByKey)(filterState, currentFilter, 'field');
        pipeline.setStateAtKey(stateKeyColumnFilter, {
          ...currentFilter
        });

        // pipeline.setStateAtKey(stateKeyFilter, [...newFilterState])
        pipeline.setStateAtKey(stateKeyFilter, rs);
        if (onFilter) {
          onFilter((0, _utils2.convertFilters)([...newFilterState]));
        } else {

          // const newData = filterDataByColumns(data, newFilterState, sorterStates, [], false)

          // pipeline.dataSource(newData)
        }
      }
      triggerVisible(false, '');
    };
    const onChangeSortsInMultipleMode = nextSorts => {
      pipeline.setStateAtKey(stateKeySorter, nextSorts);
      if (onSorter) {
        onSorter(nextSorts);
      } else {
        // const newData = filterDataByColumns(data, filterState, nextSorts, [], ignoreAccents)

        // pipeline.dataSource(newData)
        pipeline.setStateAtKey(stateKeySorter, nextSorts);
      }
    };
    const onChangeSorts = mode === 'multiple' ? onChangeSortsInMultipleMode : nextSorts => {
      const len = nextSorts.length;
      onChangeSortsInMultipleMode(nextSorts.slice(len - 1));
    };
    const sortMap = new Map(sorts.map((sort, index) => [sort.field, {
      index,
      ...sort
    }]));
    pipeline.mapColumns((0, _utils.makeRecursiveMapper)((col, {
      startIndex,
      endIndex
    }) => {
      const prevTitle = _internals.internals.safeRenderHeader(col);

      // const prevTitleContent = internals.safeRenderHeaderContent(col, t)

      // col: flat columns tính cả column cha

      const filterIcon = col?.filterIcon;
      const canSort = allowSortering && col.allowSortering !== false;
      const canFilter = allowFiltering && col.allowFiltering !== false;
      const isSorted = sortMap.has(col.field);
      const {
        order
      } = isSorted && sortMap.get(col.field);
      const find = filterState.find(it => it.field === col.field);

      // const filtered = !!filterState.find((it) => it.field === col.field)
      const filtered = !!find && find.filteredKeys !== null;
      const getDropdownTrigger = () => {
        let iconFilter;
        if (typeof filterIcon === 'function') {
          iconFilter = filterIcon(filtered);
        } else if (filterIcon) {
          iconFilter = filterIcon;
        } else {
          iconFilter = /*#__PURE__*/_react.default.createElement(_becoxyIcons.FilterFill, {
            style: {
              color: filtered ? '#E3165B' : '#283046'
            },
            fontSize: 12
          });
        }
        return /*#__PURE__*/_react.default.createElement("span", {
          role: "button",
          tabIndex: -1,
          className: (0, _classnames.default)(`${prefix}-trigger`, {
            active: filtered
          })
          // onMouseEnter={(e) => {
          //   e.stopPropagation()

          // }}
          ,
          onClick: e => {
            if (stopClickEventPropagation) {
              e.stopPropagation();
            }
          },
          "data-tooltip-id": `${id}-tooltip-content`,
          "data-tooltip-content": ''
        }, iconFilter);
      };
      const mergedDropdownProps = (0, _utils2.extendsObject)({
        trigger: ['click'],
        placement: 'bottomRight',
        // placement: direction === 'rtl' ? 'bottomLeft' : 'bottomRight',
        children: getDropdownTrigger()
        // getPopupContainer
      }, {
        // ...filterDropdownProps,
        // rootClassName: classNames(rootClassName, filterDropdownProps.rootClassName),
        open: visible === col.field,
        // onOpenChange: onVisibleChange,
        onOpenChange: (open, info) => {
          onVisibleChange(open, info, col);
        },
        destroyPopupOnHide: true,
        dropdownRender: () => {
          const type = (0, _utils2.getTypeFilter)(col);
          const operatorValue = filterColumnState.operator ?? (0, _utils2.getDefaultOperator)(col);
          const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
          return /*#__PURE__*/_react.default.createElement("div", {
            className: (0, _classnames.default)(`${prefix}-grid-filter-dropdown`, {}),
            style: {}
          }, /*#__PURE__*/_react.default.createElement("div", {
            style: {
              minWidth: 275,
              padding: '8px'
            }
          }, /*#__PURE__*/_react.default.createElement("div", null), col.hideOperator !== true && col.typeFilter !== 'DateRange' && col.typeFilter !== 'NumberRange' && /*#__PURE__*/_react.default.createElement("div", {
            className: 'mb-1'
          }, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Select, {
            options: (0, _hooks.translateOption)(operatorOptions, t),
            style: {
              width: '100%',
              marginBottom: 8
            },
            value: operatorValue
            // value={filterColumnState.operator}
            ,
            onChange: val => {
              pipeline.setStateAtKey(stateKeyColumnFilter, {
                ...filterColumnState,
                operator: val
              });
            }
          })), /*#__PURE__*/_react.default.createElement("div", {
            style: {
              marginBottom: 8
            }
          }, (0, _renderFilter.renderFilter)({
            t,
            column: col,
            selectedKeys: filterColumnState.filteredKeys,
            setSelectedKeys: vals => {
              pipeline.setStateAtKey(stateKeyColumnFilter, {
                ...filterColumnState,
                filteredKeys: vals
              });
            },
            doFilter,
            format,
            dataSourceFilter,
            tableLocal
          })), /*#__PURE__*/_react.default.createElement(_rcMasterUi.Space, {
            style: {
              justifyContent: 'end',
              width: '100%'
            }
          }, /*#__PURE__*/_react.default.createElement(_antd.Button, {
            type: "primary",
            onClick: () => {
              doFilter(true);
            },
            size: "small",
            style: {
              width: 90
            }
          }, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
            type: "link",
            size: "small",
            onClick: () => {
              // setSelectedKeys([])

              doFilter(false);
            }
          }, t ? t('Clear') : 'Clear'))));

          // if (typeof filterDropdownProps?.dropdownRender === 'function') {
          //   return filterDropdownProps.dropdownRender(dropdownContent);
          // }
          // return dropdownContent;
        }
      });

      // cell Index
      if (col.field === '#') {
        const prevContent = col.template;
        return {
          ...col,
          lock: !!col.fixed,
          width: sizes[startIndex],
          title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle), allowResizing && /*#__PURE__*/_react.default.createElement(_ColumnResizer.default, {
            width: col.width,
            columnKey: col.field,
            columnIndex: startIndex
            // onMouseDown={onMouseDown}
            // onResizeStop={(w: any, columnKey: any) => onColumnResizeStop(w, columnKey, startIndex, endIndex)}
            // onResize={(w: any, columnKey: any) => onResize(w, columnKey, startIndex, endIndex)}
            ,
            onResizeChange: (w, columnKey) => onResize(w, columnKey, startIndex, endIndex)
          })),
          template: args => {
            const {
              index,
              rowData
            } = args;
            const a = currentPage && pageSize ? (currentPage - 1) * pageSize + index + 1 : index + 1;
            const b = () => {
              return (0, _hooks.findItemPath)(dataSource, rowData, 'rowId', currentPage, pageSize);
            };
            return /*#__PURE__*/_react.default.createElement("div", {
              style: {
                display: 'flex'
              }
            }, prevContent?.(args), /*#__PURE__*/_react.default.createElement("span", null, isDataTree ? b() : a));
          },
          headerCellProps: (0, _utils.mergeCellProps)(col.headerCellProps ?? {}, {
            style: {
              overflow: 'visible',
              position: 'relative'
            }
          })
        };
      }

      //  cell đặc biệt: STT, column selection, column command => không có filter và sort, và không hiển thị trigger filter
      if (_hooks.nonActionColumn.includes(col.field) && !col?.children || col?.children && col?.children.length < 1) {
        return {
          ...col,
          lock: !!col.fixed,
          width: sizes[startIndex],
          title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle), allowResizing && /*#__PURE__*/_react.default.createElement(_ColumnResizer.default, {
            width: col.width,
            columnKey: col.field,
            columnIndex: startIndex
            // onMouseDown={onMouseDown}
            // onResizeStop={(w: any, columnKey: any) => onColumnResizeStop(w, columnKey, startIndex, endIndex)}
            // onResize={(w: any, columnKey: any) => onResize(w, columnKey, startIndex, endIndex)}
            ,
            onResizeChange: (w, columnKey) => onResize(w, columnKey, startIndex, endIndex)
          })),
          headerCellProps: (0, _utils.mergeCellProps)(col.headerCellProps ?? {}, {
            style: {
              overflow: 'visible',
              position: 'relative'
            }
          })
        };
      }
      const prevGetCellProps = col?.getCellProps;
      const headerCustomTooltip = col?.headerTooltip ?? (t ? t(col?.headerText) : col?.headerText);
      const htmlTooltip = headerCustomTooltip;

      //  Cell thường có thể filter và sort được
      return {
        ...col,
        lock: !!col.fixed,
        width: sizes[startIndex],
        title: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
          className: "ui-rc-grid-filter-column d-flex",
          style: {
            justifyContent: 'space-between',
            alignItems: 'center'
          }
        }, /*#__PURE__*/_react.default.createElement("span", {
          className: "ui-rc-table-column-title",
          style: {}
        }, /*#__PURE__*/_react.default.createElement("div", {
          className: (0, _classnames.default)(`${prefix}-grid-cell`, {
            [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
            [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header'),
            [`${prefix}-grid-cell-text-center`]: (col?.headerTextAlign ?? col?.textAlign) === 'center',
            [`${prefix}-grid-cell-text-right`]: (col?.headerTextAlign ?? col.textAlign) === 'right'
          })
        }, col.headerTemplate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, typeof col.headerTemplate === 'function' ? col.headerTemplate(col) : col.headerTemplate) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, prevTitle))), (!_hooks.nonActionColumn.includes(col.field) && !col?.children || col?.children && col?.children.length < 1) && /*#__PURE__*/_react.default.createElement("span", {
          className: "ui-rc-header-trigger d-flex gap-50"
        }, canSort && /*#__PURE__*/_react.default.createElement("div", {
          style: {
            marginInlineEnd: 6,
            cursor: 'pointer'
          },
          onClick: e => {
            if (stopClickEventPropagation) {
              e.stopPropagation();
            }
            toggle(col.field);
          }
        }, isSorted ? order === 'ascend' ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowDown, {
          fontSize: 14,
          color: '#000',
          className: "toolbar-icon",
          "data-tooltip-id": `${id}-tooltip-content`,
          "data-tooltip-content": locale?.table?.cancelSort ?? tableLocal?.cancelSort,
          "data-tooltip-sort": locale?.table?.cancelSort ?? tableLocal?.cancelSort
        }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowUp, {
          fontSize: 14,
          color: '#000',
          className: "toolbar-icon",
          "data-tooltip-id": `${id}-tooltip-content`,
          "data-tooltip-content": locale?.table?.triggerAsc ?? tableLocal?.triggerAsc,
          "data-tooltip-sort": locale?.table?.triggerAsc ?? tableLocal?.triggerAsc
        }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.SortCancel, {
          "data-tooltip-id": `${id}-tooltip-content`,
          "data-tooltip-content": locale?.table?.triggerDesc ?? tableLocal?.triggerDesc,
          "data-tooltip-sort": locale?.table?.triggerDesc ?? tableLocal?.triggerDesc,
          fontSize: 15,
          style: {
            display: 'flex'
          },
          className: (0, _classnames.default)(`ui-rc-table-column-sorter-cancel toolbar-icon`, {
            active: true
          })
        })), canFilter && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown, mergedDropdownProps)))), allowResizing && /*#__PURE__*/_react.default.createElement(_ColumnResizer.default, {
          width: col.width,
          columnKey: col.field,
          columnIndex: startIndex
          // onMouseDown={onMouseDown}
          // onResizeStop={(w: any, columnKey: any) => onColumnResizeStop(w, columnKey, startIndex, endIndex)}
          // onResize={(w: any, columnKey: any) => onResize(w, columnKey, startIndex, endIndex)}
          ,
          onResizeChange: (w, columnKey) => onResize(w, columnKey, startIndex, endIndex)
        })),
        headerCellProps: (0, _utils.mergeCellProps)(col.headerCellProps ?? {}, {
          'data-tooltip-id': `${id}-tooltip-content`,
          'data-tooltip-content': htmlTooltip,
          style: {
            overflow: 'visible',
            position: 'relative'
          }
        }),
        getCellProps(value, record, rowIndex) {
          const prevCellProps = prevGetCellProps?.(value, record, rowIndex);
          const cellStyles = typeof col.onCellStyles === 'function' ? col.onCellStyles(value, col) : col.onCellStyles;
          const fomatedValue = ['color', 'checkbox', 'field'].includes(col.type ?? '') ? '' : (0, _useColumns.renderValueCell)(col, value, record, rowIndex, 0, format, false);
          const tooltipContent = isOpenTooltip === false ? '' : col?.tooltipDescription ? typeof col.tooltipDescription === 'function' ? col.tooltipDescription({
            value,
            rowData: record
          }) : col.tooltipDescription : fomatedValue;
          return (0, _utils.mergeCellProps)(prevCellProps, {
            // @ts-ignore
            'data-col-key': col.field,
            'data-tooltip-id': `${id}-tooltip-content`,
            'data-tooltip-content': tooltipContent,
            style: {
              ...prevCellProps?.style,
              ...cellStyles
            },
            className: (0, _classnames.default)(prevCellProps?.className, `${prefix}-grid-cell`, {
              [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content')),
              [`${prefix}-grid-cell-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Content'),
              [`${prefix}-grid-cell-text-center`]: col?.textAlign === 'center',
              [`${prefix}-grid-cell-text-right`]: col?.textAlign === 'right' || col.type === 'number'
            }),
            onMouseEnter: e => {
              if (e.target?.clientWidth < e.target?.scrollWidth || e.target.firstChild?.clientWidth < e.target.firstChild?.scrollWidth) {
                pipeline.setStateAtKey(stateKeyTooltip, true);
              }
            },
            onMouseLeave: () => {
              if (isOpenTooltip) {
                pipeline.setStateAtKey(stateKeyTooltip, false);
              }
            }
          });
        }
      };
    }));

    // pipeline.dataSource(processDataSource(dataSource))
    // pipeline.mapDataSource

    return pipeline;

    // function processDataSource(rowsData: any[]) {

    //   const mergedFilter = convertFilters(filterState)

    //   const newData = filterDataByColumns(rowsData, mergedFilter, sorterStates, undefined, ignoreAccents)

    //   return newData

    // }

    function toggle(field) {
      const sort = sortMap.get(field);
      if (!sort) {
        onChangeSorts(sorts.concat([{
          columnKey: field,
          field,
          order: orders[0]
        }]));
      } else {
        const index = sorts.findIndex(s => s.field === field);
        const nextSorts = [...sorts];
        const nextOrder = getNextOrder(sort.order);
        if (nextOrder === 'none') {
          const newRs = nextSorts.filter(it => it.field !== sort.field);
          onChangeSorts(newRs);
        } else {
          nextSorts[index] = {
            ...nextSorts[index],
            order: nextOrder
          };
          onChangeSorts(nextSorts);
        }
      }
    }
    function getNextOrder(order) {
      const idx = orders.indexOf(order);
      return orders[idx === orders.length - 1 ? 0 : idx + 1];
    }
  };
}