es-grid-template
Version:
es-grid-template
263 lines (259 loc) • 10.3 kB
JavaScript
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 { extendsObject, getCommonPinningHeaderStyles, getDefaultOperator, getTypeFilter } from "../hook/utils";
import { renderFilter } from "./renderFilter";
import ReactDOMServer from 'react-dom/server';
import { TableContext } from "../useContext";
import { booleanOperator, nonActionColumn, numberOperator, stringOperator, translateOption } from "../../grid-component/hooks";
const TableHeadCell = props => {
const {
header,
getPopupContainer,
table,
colSpan,
rowSpan,
rowIndex
} = 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 [currentFilter, setCurrentFilter] = React.useState({});
const column = header.column.columnDef;
const originalColumn = header.column.columnDef.meta ?? {};
const filterValue = header.column.getFilterValue() ?? [];
const operatorValue = header.column.getFilterOperator() ?? getDefaultOperator(column?.meta ?? {});
const {
filterIcon
} = 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;
React.useEffect(() => {
setCurrentFilter(prev => ({
...prev,
ope: operatorValue
}));
}, []);
React.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.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 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 = 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 = getTypeFilter(originalColumn);
// const operatorValue = (header.column.getFilterOperator() ?? getDefaultOperator(originalColumn)) as string
const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
return /*#__PURE__*/React.createElement("div", {
className: classNames(`${prefix}-grid-filter-dropdown`, {}),
style: {}
}, /*#__PURE__*/React.createElement("div", {
style: {
minWidth: 275,
padding: '8px'
}
}, 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}
,
value: currentFilter.ope,
onChange: val => {
setCurrentFilter(prev => ({
...prev,
ope: val
}));
// header.column.setFilterOperator(val)
}
})), /*#__PURE__*/React.createElement("div", {
style: {
marginBottom: 8
}
}, renderFilter({
column: column,
selectedKeys,
setSelectedKeys
})), /*#__PURE__*/React.createElement(Space, {
style: {
justifyContent: 'end',
width: '100%'
}
}, /*#__PURE__*/React.createElement(Button, {
type: "primary",
onClick: () => {
doFilter(true);
},
size: "small",
style: {
width: 90
}
}, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
type: "link",
size: "small",
onClick: () => {
setSelectedKeys([]);
doFilter(false);
}
}, t ? t('Clear') : 'Clear'))));
}
});
return /*#__PURE__*/React.createElement("th", {
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: {
width: header.getSize(),
...getCommonPinningHeaderStyles(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-content`,
"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-content": locale?.table?.cancelSort ?? 'Click to cancel sorting'
}) : /*#__PURE__*/React.createElement(SortCancel, {
"data-tooltip-id": `${id}-tooltip-content`,
"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(),
className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`
}));
};
export default TableHeadCell;