es-grid-template
Version:
es-grid-template
377 lines (370 loc) • 16 kB
JavaScript
"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 _useContext = require("../useContext");
var _renderFilter = require("./renderFilter");
var _server = _interopRequireDefault(require("react-dom/server"));
var _hooks = require("../../grid-component/hooks");
var _locale = require("rc-master-ui/es/locale");
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 TableHeadCell2 = props => {
const {
column,
header,
getPopupContainer,
table,
depth,
colSpan,
rowSpan
} = props;
const {
t,
prefix,
setSorterChange,
setFilterChange,
wrapSettings,
selectionSettings,
isSelectionChange,
setIsSelectionChange,
id,
locale,
format,
dataSourceFilter,
isDataTree,
expanded,
setExpanded,
expandable,
dataSource,
rowKey
} = (0, _react.useContext)(_useContext.TableContext);
const [tableLocal] = (0, _locale.useLocale)('Table');
const visibleCols = table.getVisibleFlatColumns();
const expandIconColumnIndex = expandable?.expandIconColumnIndex ?? 0;
const {
showExpandAll
} = expandable || {};
const isPinned = column.getIsPinned();
const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
const [selectedKeys, setSelectedKeys] = _react.default.useState([]);
const [visible, setVisible] = _react.default.useState(false);
const {
filterIcon
} = column.columnDef.meta ?? {};
const originalColumn = column.columnDef.meta ?? {};
const fieldOriginalKey = originalColumn?.fieldOriginal;
const fieldOriginal = fieldOriginalKey ? visibleCols.find(it => it.id === fieldOriginalKey) : undefined;
const cellStyles = typeof originalColumn.onCellHeaderStyles === 'function' ? originalColumn.onCellHeaderStyles(header) : originalColumn.onCellHeaderStyles;
const filtered = ((fieldOriginal ? fieldOriginal.getFilterValue() : column.getFilterValue()) ?? []).length > 0;
const cellContent = (0, _reactTable.flexRender)(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;
const style = {
transition: 'width transform 0.2s ease-in-out',
whiteSpace: 'nowrap',
...cellStyles
};
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 triggerVisible = newVisible => {
setVisible(newVisible);
};
const onVisibleChange = (newVisible, info) => {
if (info.source === 'trigger') {
if (newVisible) {
const filterValue = column.getFilterValue() ?? [];
const filterValueOrigin = fieldOriginal ? fieldOriginal.getFilterValue() ?? [] : undefined;
const operatorValue = column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(column.columnDef?.meta ?? {});
setSelectedKeys(filterValueOrigin ?? filterValue);
if (fieldOriginal) {
fieldOriginal.setFilterOperator?.(operatorValue);
} else {
column.setFilterOperator?.(operatorValue);
}
setTimeout(() => {
const inputFilter = document.querySelector('.filter-input');
if (inputFilter) {
inputFilter.focus();
}
}, 200);
} else {}
triggerVisible(newVisible);
}
};
const doFilter = type => {
if (type) {
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);
}
// column.setFilterValue(!originalColumn.typeFilter || originalColumn.typeFilter === 'Text' ? (selectedKeys.length === 0 ? [''] : selectedKeys) : selectedKeys)
} else {
if (fieldOriginal) {
fieldOriginal.setFilterValue(undefined);
} else {
column.setFilterValue(undefined);
}
setSelectedKeys([]);
}
setFilterChange(true);
triggerVisible(false);
setTimeout(() => {
setFilterChange(false);
}, 10);
};
const mergedDropdownProps = (0, _utils.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 = (0, _utils.getTypeFilter)(originalColumn);
const operatorValue = column.getFilterOperator() ?? (0, _utils.getDefaultOperator)(originalColumn);
const operatorOptions = ['Checkbox', 'Dropdown', 'DropTree', 'CheckboxDropdown'].includes(type) ? _hooks.booleanOperator : !type || type === 'Text' ? _hooks.stringOperator : _hooks.numberOperator;
return /*#__PURE__*/_react.default.createElement("div", {
// className='ui-rc-table-filter-dropdown'
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), column.columnDef?.meta?.hideOperator !== true && column.columnDef?.meta?.typeFilter !== 'DateRange' && column.columnDef?.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,
onChange: val => {
column.setFilterOperator(val);
}
})), /*#__PURE__*/_react.default.createElement("div", {
style: {
marginBottom: 8
}
}, (0, _renderFilter.renderFilter)({
t,
// column: fieldOriginal ? fieldOriginal.columnDef : column.columnDef,
column: column.columnDef,
selectedKeys,
setSelectedKeys,
doFilter,
format,
dataSourceFilter,
tableLocal
})), /*#__PURE__*/_react.default.createElement(_antd.Space, {
style: {
justifyContent: 'end',
width: '100%'
}
}, /*#__PURE__*/_react.default.createElement(_antd.Button, {
type: "primary",
onClick: () => {
// column.setFilterValue(selectedKeys)
doFilter(true);
},
size: "small",
style: {
width: 90
}
}, t ? t('Filter') : 'Filter'), /*#__PURE__*/_react.default.createElement(_antd.Button, {
type: "link",
size: "small",
onClick: () => {
// column.setFilterValue([])
// column.setFilterOperator('')
setSelectedKeys([]);
doFilter(false);
}
}, t ? t('Clear') : 'Clear'))));
// if (typeof filterDropdownProps?.dropdownRender === 'function') {
// return filterDropdownProps.dropdownRender(dropdownContent);
// }
// return dropdownContent;
}
});
const handleCollapseAllGroup = () => {
setExpanded({});
};
const handleExpandAllGroup = () => {
const allKeys = (0, _utils.findAllChildrenKeys2)(dataSource, rowKey, 'children');
setExpanded((0, _utils.convertToObjTrue)(allKeys));
};
return /*#__PURE__*/_react.default.createElement("div", {
// ref={setNodeRef}
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'
}),
key: column.id,
style: {
...style,
minWidth: column.getSize(),
gridRow: `${depth + 1} / span ${rowSpan}`,
gridColumn: `span ${colSpan}`,
...(0, _utils.getCommonPinningStyles)(column),
width: 'auto'
},
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-delay-show": 500,
"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`]: column.id !== 'selection_column',
[`${prefix}-grid-selection-column`]: column.id === 'selection_column'
})
}, column.getIndex() === expandIconColumnIndex && isDataTree && showExpandAll && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
// onClick: row.getToggleExpandedHandler(),
onClick: e => {
e.stopPropagation();
e.preventDefault();
if (!(0, _utils.isObjEmpty)(expanded)) {
handleCollapseAllGroup();
} else {
handleExpandAllGroup();
}
},
style: {
cursor: "pointer"
},
className: "ui-rc-table-row-expand"
}, !(0, _utils.isObjEmpty)(expanded) ? /*#__PURE__*/_react.default.createElement("span", {
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-expanded"
}) : /*#__PURE__*/_react.default.createElement("span", {
className: "ui-rc-table-row-expand-icon ui-rc-table-row-expand-icon-collapsed"
}))), column.id === 'selection_column' && selectionSettings && selectionSettings.hideSelectAll !== true && selectionSettings.type !== 'single' && selectionSettings.mode !== 'radio' && /*#__PURE__*/_react.default.createElement(_rcMasterUi.Checkbox, {
checked: table.getIsAllRowsSelected(),
indeterminate: table.getIsSomePageRowsSelected(),
onChange: e => {
table.getToggleAllRowsSelectedHandler()(e);
const prevSelected = isSelectionChange?.rowsData ?? [];
const allRowsInPage = table.getRowModel().flatRows;
if (table.getIsAllRowsSelected()) {
const cc = (0, _utils.excludeItems)(prevSelected, allRowsInPage);
setIsSelectionChange({
isChange: true,
type: 'all',
rowData: {},
rowsData: cc
});
} else {
const abc = [...prevSelected, ...allRowsInPage];
const newSeletedRows = (0, _utils.removeDuplicatesByKey)(abc, 'id');
setIsSelectionChange({
isChange: true,
type: 'all',
rowData: {},
rowsData: newSeletedRows
});
}
}
}), 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(column.id) && column.columns.length < 1 && /*#__PURE__*/_react.default.createElement("span", {
className: "ui-rc-header-trigger"
}, column.getCanSort() && /*#__PURE__*/_react.default.createElement("div", {
style: {
marginInlineEnd: 6,
cursor: 'pointer'
},
onClick: e => {
setSorterChange(true);
const toggleSortingHandler = column.getToggleSortingHandler();
if (typeof toggleSortingHandler === 'function') {
toggleSortingHandler(e);
}
}
}, column.getIsSorted() ? column.getIsSorted() === 'asc' ? /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowUp, {
fontSize: 15,
color: '#000',
className: "toolbar-icon",
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": locale?.table?.triggerDesc ?? tableLocal?.triggerDesc
}) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.ArrowDown, {
fontSize: 15,
color: '#000',
className: "toolbar-icon",
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": locale?.table?.cancelSort ?? tableLocal?.cancelSort
}) : /*#__PURE__*/_react.default.createElement(_becoxyIcons.SortCancel, {
"data-tooltip-id": `${id}-tooltip-content`,
"data-tooltip-content": locale?.table?.triggerAsc ?? tableLocal?.triggerAsc,
fontSize: 15,
style: {
display: 'flex'
},
className: (0, _classnames.default)(`ui-rc-table-column-sorter-cancel toolbar-icon`, {
active: true
})
})), column.getCanFilter() && /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_rcMasterUi.Dropdown, mergedDropdownProps)))), column.getCanResize() && /*#__PURE__*/_react.default.createElement("div", {
onDoubleClick: () => column.resetSize(),
onMouseDown: header.getResizeHandler(),
onTouchStart: header.getResizeHandler(),
// onMouseUp: () => {
// requestAnimationFrame(() => {
// columnVirtualizer.measure()
// // rowHeaderVirtualizer.measure()
// })
// },
className: `resizer ${column.getIsResizing() ? 'isResizing' : ''}`
}));
};
var _default = exports.default = TableHeadCell2;