es-grid-template/lib/table-virtuoso/header/TableHeadCell.js

es-grid-template

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _reactTable = require("@tanstack/react-table");
var _react = _interopRequireWildcard(require("react"));
var _antd = require("antd");
var _becoxyIcons = require("becoxy-icons");
var _classnames = _interopRequireDefault(require("classnames"));
var _rcMasterUi = require("rc-master-ui");
var _utils = require("../hook/utils");
var _renderFilter = require("./renderFilter");
var _server = _interopRequireDefault(require("react-dom/server"));
var _useContext = require("../useContext");
var _hooks = require("../../grid-component/hooks");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const TableHeadCell = props => {
  const {
    header,
    getPopupContainer,
    table,
    colSpan,
    rowSpan,
    rowIndex
  } = props;
  const {
    t,
    prefix,
    setSorterChange,
    setFilterChange,
    wrapSettings,
    selectionSettings,
    setIsSelectionChange,
    id,
    locale
  } = (0, _react.useContext)(_useContext.TableContext);
  const isPinned = header.column.getIsPinned();
  const isLastLeftPinnedColumn = isPinned === 'left' && header.column.getIsLastColumn('left');
  const isFirstRightPinnedColumn = isPinned === 'right' && header.column.getIsFirstColumn('right');
  const [selectedKeys, setSelectedKeys] = _react.default.useState([]);
  const [currentFilter, setCurrentFilter] = _react.default.useState({});
  const column = header.column.columnDef;
  const originalColumn = header.column.columnDef.meta ?? {};
  const filterValue = header.column.getFilterValue() ?? [];
  const operatorValue = header.column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(column?.meta ?? {});
  const {
    filterIcon
  } = header.column.columnDef.meta ?? {};
  const filtered = (header.column.getFilterValue() ?? []).length > 0;
  const cellContent = (0, _reactTable.flexRender)(header.column.columnDef.header, header.getContext());
  const html = _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, cellContent));
  const hasValue = html.trim().length > 0;
  _react.default.useEffect(() => {
    setCurrentFilter(prev => ({
      ...prev,
      ope: operatorValue
    }));
  }, []);
  _react.default.useEffect(() => {
    setSelectedKeys(filterValue);
  }, []);
  const style = {
    transition: 'width transform 0.2s ease-in-out',
    whiteSpace: 'nowrap',
    borderTopWidth: rowIndex > 0 ? 0 : undefined
  };
  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
      }),
      onClick: e => {
        e.stopPropagation();
      }
    }, iconFilter);
  };
  const doFilter = type => {
    if (type) {
      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
      header.column.setFilterOperator?.(currentFilter.ope);
    } else {
      header.column.setFilterValue(undefined);
      setSelectedKeys([]);
    }
    setFilterChange(true);
    setTimeout(() => {
      setFilterChange(false);
    }, 10);
  };
  const mergedDropdownProps = (0, _utils.extendsObject)({
    trigger: ['click'],
    placement: 'bottomRight',
    children: getDropdownTrigger(),
    getPopupContainer
  }, {
    // open: visible,
    // open: visible.visible && visible.column === header.column.id,
    // onOpenChange: onVisibleChange,

    destroyPopupOnHide: true,
    dropdownRender: () => {
      const type = (0, _utils.getTypeFilter)(originalColumn);

      // const operatorValue = (header.column.getFilterOperator() ?? getDefaultOperator(originalColumn)) as string

      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'
        }
      }, column.meta?.hideOperator !== true && column.meta?.typeFilter !== 'DateRange' && column.meta?.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: currentFilter.ope,
        onChange: val => {
          setCurrentFilter(prev => ({
            ...prev,
            ope: val
          }));
          // header.column.setFilterOperator(val)
        }
      })), /*#__PURE__*/_react.default.createElement("div", {
        style: {
          marginBottom: 8
        }
      }, (0, _renderFilter.renderFilter)({
        column: column,
        selectedKeys,
        setSelectedKeys
      })), /*#__PURE__*/_react.default.createElement(_antd.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'))));
    }
  });
  return /*#__PURE__*/_react.default.createElement("th", {
    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-fix-left-last`]: isLastLeftPinnedColumn,
      [`${prefix}-grid-cell-fix-right-first`]: isFirstRightPinnedColumn,
      [`${prefix}-grid-cell-text-center`]: (originalColumn?.headerTextAlign ?? originalColumn?.textAlign) === 'center',
      [`${prefix}-grid-cell-text-right`]: (originalColumn?.headerTextAlign ?? originalColumn.textAlign) === 'right'
    }),
    colSpan: colSpan,
    rowSpan: rowSpan,
    key: header.id,
    style: {
      width: header.getSize(),
      ...(0, _utils.getCommonPinningHeaderStyles)(header.column),
      ...style
    },
    "data-tooltip-id": `${id}-tooltip-content`,
    "data-tooltip-html": !hasValue ? '' : _server.default.renderToStaticMarkup( /*#__PURE__*/_react.default.createElement("div", null, cellContent))
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('', {
      [`${prefix}-grid-filter-column`]: header.column.id !== 'selection_column',
      [`${prefix}-grid-selection-column`]: header.column.id === 'selection_column'
    })
  }, header.column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== false && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
    checked: table.getIsAllRowsSelected(),
    indeterminate: table.getIsSomeRowsSelected(),
    onChange: e => {
      setIsSelectionChange({
        isChange: true,
        type: 'all',
        rowData: {},
        rowsData: []
      });
      table.getToggleAllRowsSelectedHandler()(e);
    }
  }), header.column.id !== 'selection_column' && /*#__PURE__*/_react.default.createElement("span", {
    className: "ui-rc-table-column-title",
    style: {
      flex: 1
    }
  }, /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _classnames.default)('', {
      [`${prefix}-grid-cell-ellipsis`]: !wrapSettings || !(wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')),
      [`${prefix}-grid-cell-text-wrap`]: wrapSettings && (wrapSettings.wrapMode === 'Both' || wrapSettings.wrapMode === 'Header')
    })
  }, cellContent)), !_hooks.nonActionColumn.includes(header.column.id) && header.subHeaders.length < 2 && /*#__PURE__*/_react.default.createElement("span", {
    className: "ui-rc-header-trigger"
  }, header.column.getCanSort() && /*#__PURE__*/_react.default.createElement("div", {
    style: {
      marginInlineEnd: 6,
      cursor: 'pointer'
    },
    onClick: e => {
      setSorterChange(true);
      const toggleSortingHandler = header.column.getToggleSortingHandler();
      if (typeof toggleSortingHandler === 'function') {
        toggleSortingHandler(e);
      }
    }
  }, header.column.getIsSorted() ? header.column.getIsSorted() === 'asc' ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowUp, {
    fontSize: 15,
    color: '#000',
    "data-tooltip-id": `${id}-tooltip-content`,
    "data-tooltip-content": locale?.table?.triggerDesc ?? 'Click to sort descending'
  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowDown, {
    fontSize: 15,
    color: '#000',
    "data-tooltip-id": `${id}-tooltip-content`,
    "data-tooltip-content": locale?.table?.cancelSort ?? 'Click to cancel sorting'
  }) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.SortCancel, {
    "data-tooltip-id": `${id}-tooltip-content`,
    "data-tooltip-content": locale?.table?.triggerAsc ?? 'Click to sort ascending',
    fontSize: 15,
    style: {
      display: 'flex'
    },
    className: (0, _classnames.default)(`ui-rc-table-column-sorter-cancel`, {
      active: true
    })
  })), header.column.getCanFilter() && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown, mergedDropdownProps)))), header.column.getCanResize() && /*#__PURE__*/_react.default.createElement("div", {
    onDoubleClick: () => header.column.resetSize(),
    onMouseDown: header.getResizeHandler(),
    onTouchStart: header.getResizeHandler(),
    className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`
  }));
};
var _default = exports.default = TableHeadCell;