es-grid-template/es/table-component/header/TableHeadCell.js

es-grid-template

import { flexRender } from '@tanstack/react-table';
import React, { useContext } from 'react';
import { Button, Space } from 'antd';
import { ArrowDown, ArrowUp, FilterFill, SortCancel } from 'becoxy-icons';
import classNames from 'classnames';
import { Checkbox, Dropdown, Select } from 'rc-master-ui';
import { booleanOperator, nonActionColumn, numberOperator, stringOperator, translateOption } from "../../grid-component/hooks";
import { extendsObject, getCommonPinningStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
import { TableContext } from "../useContext";
import { renderFilter } from "./renderFilter";
import ReactDOMServer from 'react-dom/server';
const TableHeadCell = props => {
  const {
    header,
    getPopupContainer,
    table
  } = props;
  const {
    t,
    prefix,
    setSorterChange,
    setFilterChange,
    wrapSettings,
    selectionSettings,
    setIsSelectionChange,
    id,
    locale
  } = 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.useState([]);
  const [visible, setVisible] = React.useState(false);
  const {
    filterIcon
  } = header.column.columnDef.meta ?? {};

  // const column = (header.column.columnDef ?? {}) as ColumnTable
  const column = header.column.columnDef;
  const originalColumn = header.column.columnDef.meta ?? {};
  const filtered = (header.column.getFilterValue() ?? []).length > 0;
  const cellContent = flexRender(header.column.columnDef.header, header.getContext());
  const html = ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement(React.Fragment, null, cellContent));
  const hasValue = html.trim().length > 0;

  // const filtered = header.column.getIsFiltered()

  // const { attributes, isDragging, listeners, setNodeRef, transform } =
  //   useSortable({
  //     id: header.column.id,
  //   })

  const style = {
    // opacity: isDragging ? 0.8 : 1,
    // position: 'relative',
    // transform: CSS.Translate.toString(transform), // translate instead of transform to avoid squishing
    transition: 'width transform 0.2s ease-in-out',
    whiteSpace: 'nowrap'
    // width: header.column.getSize(),
    // zIndex: isDragging ? 1 : 0,
  };
  const getDropdownTrigger = () => {
    let iconFilter;
    if (typeof filterIcon === 'function') {
      iconFilter = filterIcon(filtered);
    } else if (filterIcon) {
      iconFilter = filterIcon;
    } else {
      iconFilter = /*#__PURE__*/React.createElement(FilterFill, {
        style: {
          color: filtered ? '#E3165B' : '#283046'
        },
        fontSize: 12
      });
    }
    return /*#__PURE__*/React.createElement("span", {
      role: "button",
      tabIndex: -1,
      className: classNames(`${prefix}-trigger`, {
        active: filtered
      }),
      onClick: e => {
        e.stopPropagation();
      }
    }, iconFilter);
  };
  const triggerVisible = newVisible => {
    setVisible(newVisible);
  };
  const onVisibleChange = (newVisible, info) => {
    if (info.source === 'trigger') {
      if (newVisible) {
        const filterValue = header.column.getFilterValue() ?? [];
        const operatorValue = header.column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
        setSelectedKeys(filterValue);
        header.column.setFilterOperator?.(operatorValue);
      } else {}
      triggerVisible(newVisible);
    }
  };
  const doFilter = type => {
    if (type) {
      header.column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? selectedKeys.length === 0 ? [''] : selectedKeys : selectedKeys);
    } else {
      header.column.setFilterValue(undefined);
      setSelectedKeys([]);
    }
    setFilterChange(true);
    triggerVisible(false);
    setTimeout(() => {
      setFilterChange(false);
    }, 10);
  };
  const mergedDropdownProps = extendsObject({
    trigger: ['click'],
    placement: 'bottomRight',
    // placement: direction === 'rtl' ? 'bottomLeft' : 'bottomRight',
    children: getDropdownTrigger(),
    getPopupContainer
  }, {
    // ...filterDropdownProps,
    // rootClassName: classNames(rootClassName, filterDropdownProps.rootClassName),
    open: visible,
    onOpenChange: onVisibleChange,
    destroyPopupOnHide: true,
    dropdownRender: () => {
      const type = getTypeFilter(originalColumn);
      const operatorValue = header.column.getFilterOperator() ?? getDefaultOperator(originalColumn);
      const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
      return /*#__PURE__*/React.createElement("div", {
        // className='ui-rc-table-filter-dropdown'

        className: classNames(`${prefix}-grid-filter-dropdown`, {}),
        style: {}
      }, /*#__PURE__*/React.createElement("div", {
        style: {
          minWidth: 275,
          padding: '8px'
        }
      }, /*#__PURE__*/React.createElement("div", null), column.meta?.hideOperator !== true && column.meta?.typeFilter !== 'DateRange' && column.meta?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
        className: 'mb-1'
      }, /*#__PURE__*/React.createElement(Select, {
        options: translateOption(operatorOptions, t),
        style: {
          width: '100%',
          marginBottom: 8
        },
        value: operatorValue,
        onChange: val => {
          header.column.setFilterOperator(val);
        }
      })), /*#__PURE__*/React.createElement("div", {
        style: {
          marginBottom: 8
        }
      }, renderFilter({
        column: column,
        selectedKeys,
        setSelectedKeys,
        tableLocal: undefined
      })), /*#__PURE__*/React.createElement(Space, {
        style: {
          justifyContent: 'end',
          width: '100%'
        }
      }, /*#__PURE__*/React.createElement(Button, {
        type: "primary",
        onClick: () => {
          // header.column.setFilterValue(selectedKeys)

          doFilter(true);
        },
        size: "small",
        style: {
          width: 90
        }
      }, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
        type: "link",
        size: "small",
        onClick: () => {
          // header.column.setFilterValue([])
          // header.column.setFilterOperator('')

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

      // if (typeof filterDropdownProps?.dropdownRender === 'function') {
      //   return filterDropdownProps.dropdownRender(dropdownContent);
      // }
      // return dropdownContent;
    }
  });
  return /*#__PURE__*/React.createElement("div", {
    // ref={setNodeRef}
    className: classNames(`${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: {
      // display: 'flex',
      width: header.getSize(),
      minWidth: header.getSize(),
      flex: 1,
      gridColumn: `span ${header.colSpan}`,
      gridRow: `span 2`,
      // maxWidth: header.getSize(),
      ...getCommonPinningStyles(header.column),
      ...style
    },
    "data-tooltip-id": `${id}-tooltip-content`,
    "data-tooltip-html": !hasValue ? '' : ReactDOMServer.renderToStaticMarkup( /*#__PURE__*/React.createElement("div", null, cellContent))
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('', {
      [`${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.createElement(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.createElement("span", {
    className: "ui-rc-table-column-title",
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: classNames('', {
      [`${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)), !nonActionColumn.includes(header.column.id) && header.subHeaders.length < 2 && /*#__PURE__*/React.createElement("span", {
    className: "ui-rc-header-trigger"
  }, header.column.getCanSort() && /*#__PURE__*/React.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.createElement(ArrowUp, {
    fontSize: 15,
    color: '#000'
    // data-tooltip-id={`${id}-tooltip-header-trigger`}
    ,
    "data-tooltip-id": `${id}-tooltip-content`
    // data-tooltip-content='Nhấp để sắp xếp giảm dần'
    ,
    "data-tooltip-content": locale?.table?.triggerDesc ?? 'Click to sort descending'
  }) : /*#__PURE__*/React.createElement(ArrowDown, {
    fontSize: 15,
    color: '#000',
    "data-tooltip-id": `${id}-tooltip-content`
    // data-tooltip-id={`${id}-tooltip-header-trigger`}
    // data-tooltip-content='Nhấp để hủy sắp xếp'
    ,
    "data-tooltip-content": locale?.table?.cancelSort ?? 'Click to cancel sorting'
  }) : /*#__PURE__*/React.createElement(SortCancel
  // data-tooltip-id={`${id}-tooltip-header-trigger`}
  , {
    "data-tooltip-id": `${id}-tooltip-content`
    // data-tooltip-content='Nhấp để sắp xếp tăng dần'
    ,
    "data-tooltip-content": locale?.table?.triggerAsc ?? 'Click to sort ascending',
    fontSize: 15,
    style: {
      display: 'flex'
    },
    className: classNames(`ui-rc-table-column-sorter-cancel`, {
      active: true
    })
  })), header.column.getCanFilter() && /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown, mergedDropdownProps)))), header.column.getCanResize() && /*#__PURE__*/React.createElement("div", {
    onDoubleClick: () => header.column.resetSize(),
    onMouseDown: header.getResizeHandler(),
    onTouchStart: header.getResizeHandler(),
    // onMouseUp: () => {
    //   requestAnimationFrame(() => {
    //     columnVirtualizer.measure()
    //     // rowHeaderVirtualizer.measure()
    //   })
    // },

    className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`
  }));
};
export default TableHeadCell;