es-grid-template
Version:
es-grid-template
316 lines (306 loc) • 12 kB
JavaScript
import * as React from 'react';
// import type {Key} from 'react';
import { Fragment, useCallback } from 'react';
// import Command from "../Command";
import { Button, Space } from "antd";
import { Select } from "rc-master-ui";
import { findItemPath, getFormat, getTypeFilter } from "./utils";
import { booleanOperator, numberOperator, stringOperator, translateOption } from "./constant";
import { flatColumns2, renderContent, renderFilter } from "./columns";
import { SearchOutlined } from "@ant-design/icons";
import { ArrowDown, ArrowUp, FilterFill } from "becoxy-icons";
import classNames from "classnames";
import HeaderContent from "./content/HeaderContent";
const ASCEND = 'ascend';
const DESCEND = 'descend';
export const SELECTION_COLUMN = {};
// const EMPTY_LIST: React.Key[] = [];
const useColumns = config => {
// const {
// preserveSelectedRowKeys,
// selectedRowKeys,
// defaultSelectedRowKeys,
// onSelectMultiple,
// columnWidth: selectionColWidth,
// type: selectionType,
// selections,
// fixed,
// } = rowSelection || {};
const {
t,
dataSourceFilter,
buddhistLocale,
locale,
sortMultiple,
format,
handleResize,
// onMouseHover,
groupAble,
groupColumns,
groupSetting,
dataSource,
rowKey
} = config;
// const mergedColumns = React.useMemo(
// () => getMergedColumns<RecordType>(rawMergedColumns || []),
// [rawMergedColumns],
// );
//
// const [filterStates, setFilterStates] = React.useState<FilterState<RecordType>[]>(() =>
// collectFilterStates(mergedColumns, true),
// );
// ====================== Selections ======================
// const handleSearch = (
// selectedKeys: string[],
// confirm: any,
// ) => {
//
// confirm()
//
// }
const getColumnSearchProps = useCallback(column => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
// close,
setOperatorKey,
operatorKey,
visible,
searchValue,
setSearchValue
}) => {
const type = getTypeFilter(column);
// const operatorOptions = !type || type === 'Text' ? stringOperator : numberOperator
// const operatorOptions = type === 'Checkbox' || type === 'Dropdown' || type === 'DropTree' || ty
const operatorOptions = type === ('Checkbox' || 'Dropdown' || 'DropTree' || 'CheckboxDropdown') ? booleanOperator : !type || type === 'Text' ? stringOperator : numberOperator;
return /*#__PURE__*/React.createElement("div", {
style: {
padding: 8,
minWidth: 275
},
onKeyDown: e => e.stopPropagation()
}, column?.showOperator !== false && column?.typeFilter !== 'DateRange' && column?.typeFilter !== 'NumberRange' && /*#__PURE__*/React.createElement("div", {
className: 'mb-1'
}, /*#__PURE__*/React.createElement(Select, {
options: translateOption(operatorOptions, t),
style: {
width: '100%',
marginBottom: 8
},
value: operatorKey,
onChange: val => {
setOperatorKey(val);
}
})), /*#__PURE__*/React.createElement("div", {
style: {
marginBottom: 8
}
}, renderFilter(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(Space, {
style: {
justifyContent: 'end',
width: '100%'
}
}, /*#__PURE__*/React.createElement(Button, {
type: "primary",
onClick: () => {
// confirm({closeDropdown: false})
confirm();
// handleSearch(selectedKeys as string[], confirm)
},
icon: /*#__PURE__*/React.createElement(SearchOutlined, null),
size: "small",
style: {
width: 90
}
}, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(Button, {
type: "link",
size: "small",
onClick: () => {
// setSearchValue('')
setSelectedKeys([]);
confirm();
// handleSearch()
// close()
}
}, t ? t("Clear") : 'Clear')));
},
filterIcon: filtered => /*#__PURE__*/React.createElement(FilterFill, {
fontSize: 12
// onClick={() => {
// onFilterClick?.(column, onFilterCallback)
// }}
,
style: {
color: filtered ? '#E3165B' : '#283046'
}
}),
filterDropdownProps: {
onOpenChange(open) {
if (open) {
// setTimeout(() => searchInput.current?.select(), 100)
}
}
}
}), [buddhistLocale, dataSourceFilter, locale, t]);
// ======================= Columns ========================
const transformColumns = useCallback(columns => {
// >>>>>>>>>>> Support selection
const cloneColumns = [...columns];
const firstNonGroupColumn = flatColumns2(cloneColumns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
const nonGroupColumns = flatColumns2(cloneColumns).filter(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
// ===================== Render =====================
const convertColumns = cols => {
return cols.map(col => {
const colIndex = flatColumns2(cols).findIndex(it => it.field === col.field);
if (col === SELECTION_COLUMN) {
return SELECTION_COLUMN;
}
const transformedColumn = {
...col,
dataIndex: col.field ?? col.dataIndex,
key: col.field ?? col.dataIndex ?? col.key,
// title: t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title,
// title: () => (<span>aaa</span>),
title: () => /*#__PURE__*/React.createElement(HeaderContent, {
column: {
...col
},
t: t
}),
// title: () => (<span>{t ? t(col.columnGroupText ?? col.headerText ?? col.title) : col.columnGroupText ?? col.headerText ?? col.title}</span>),
ellipsis: col.ellipsis !== false,
align: col.textAlign ?? col.align,
fixed: col.fixedType ?? col.fixed,
isSummary: col.isSummary ?? col.haveSum,
hidden: col.hidden ?? col.visible === false
// hidden: true
};
if (transformedColumn.children && transformedColumn.children?.length) {
return {
...transformedColumn,
children: convertColumns(transformedColumn.children)
};
}
if (transformedColumn.field === '#') {
return {
...transformedColumn,
onCell: () => ({
className: 'cell-number'
}),
render: (val, record) => {
return findItemPath(dataSource, record, rowKey);
}
};
}
if (transformedColumn.field === 'command') {
return {
...transformedColumn,
onCell: () => ({
className: 'cell-number',
style: {
padding: '2px 8px'
}
})
};
}
return {
...transformedColumn,
...(transformedColumn.allowFiltering === false ? {} : {
...getColumnSearchProps(col)
}),
sorter: col.sorter === false ? undefined : {
compare: a => a,
multiple: sortMultiple ? colIndex : undefined
},
sortIcon: args => {
const {
sortOrder
} = args;
return /*#__PURE__*/React.createElement(Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(ArrowUp, {
fontSize: 15,
style: {
display: 'flex',
opacity: 0,
marginLeft: 4
},
className: classNames(`ui-rc-table-column-sorter-up`, {
active: true
})
}), sortOrder === ASCEND && /*#__PURE__*/React.createElement("span", {
className: classNames(`ui-rc-table-column-sorter-up`, {
active: sortOrder === ASCEND
}),
style: {
display: 'flex',
marginLeft: 4
}
}, /*#__PURE__*/React.createElement(ArrowUp, {
fontSize: 15,
color: '#000'
})), sortOrder === DESCEND && /*#__PURE__*/React.createElement("span", {
className: classNames(`ui-rc-table-column-sorter-up`, {
active: sortOrder === DESCEND
}),
style: {
display: 'flex',
marginLeft: 4
}
}, /*#__PURE__*/React.createElement(ArrowDown, {
fontSize: 15,
color: '#000'
})));
},
onHeaderCell: () => ({
id: `${col.field}`,
width: col.width,
onResize: handleResize?.(col),
className: col.headerTextAlign === 'center' ? 'head-align-center' : col.headerTextAlign === 'right' ? 'head-align-right' : ''
}),
onCell: (data, index) => {
return {
id: `${col.field}`,
colSpan: groupColumns && data.children && col.field === firstNonGroupColumn?.field ? 2 : groupColumns && data.children && nonGroupColumns[1].field === col.field ? 0 : 1,
zIndex: data.children && col.field === firstNonGroupColumn?.field ? 11 : undefined,
...transformedColumn?.onCell?.(data, index),
className: classNames(transformedColumn?.onCell?.(data, index).className ?? '', {
'cell-group': groupColumns && data.children,
'cell-group-fixed': groupColumns && data.children && col.field === firstNonGroupColumn?.field
})
// onMouseEnter: () => {
// onMouseHover(data, col as any)
// },
};
},
render: (value, record, rowIndex) => {
const colFormat = typeof col.format === 'function' ? col.format(record) : col.format;
const cellFormat = getFormat(colFormat, format);
if (groupSetting && groupSetting.hiddenColumnGroup === false) {
if (record.children) {
return renderContent(col, value, record, rowIndex, cellFormat);
}
if (groupColumns?.includes(col.field)) {
return '';
}
return renderContent(col, value, record, rowIndex, cellFormat);
}
if (col.field === firstNonGroupColumn?.field && record.children) {
const currentGroupColumn = flatColumns2(cols).find(it => it.field === record.field);
if (currentGroupColumn?.template) {
return renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
}
return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", renderContent(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
}
return renderContent(col, value, record, rowIndex, cellFormat);
},
hidden: groupSetting && groupSetting.hiddenColumnGroup === false ? transformedColumn.hidden : groupAble && groupColumns && groupColumns.includes(col.field) ? true : transformedColumn.hidden
};
});
};
return convertColumns(cloneColumns);
}, [groupColumns, getColumnSearchProps, sortMultiple, groupSetting, groupAble, t, dataSource, rowKey, handleResize, format]
// format, getColumnSearchProps, sortMultiple, groupSetting, groupAble, t, groupColumns, , handleResize, , t, cellHover
);
return [transformColumns];
};
export default useColumns;