es-grid-template
Version:
es-grid-template
327 lines (314 loc) • 13.4 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.SELECTION_COLUMN = void 0;
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _antd = require("antd");
var _rcMasterUi = require("rc-master-ui");
var _utils = require("./utils");
var _constant = require("./constant");
var _columns = require("./columns");
var _icons = require("@ant-design/icons");
var _becoxyIcons = require("becoxy-icons");
var _classnames = _interopRequireDefault(require("classnames"));
var _HeaderContent = _interopRequireDefault(require("./content/HeaderContent"));
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; }
// import type {Key} from 'react';
// import Command from "../Command";
const ASCEND = 'ascend';
const DESCEND = 'descend';
const SELECTION_COLUMN = exports.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 = (0, _react.useCallback)(column => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
// close,
setOperatorKey,
operatorKey,
visible,
searchValue,
setSearchValue
}) => {
const type = (0, _utils.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') ? _constant.booleanOperator : !type || type === 'Text' ? _constant.stringOperator : _constant.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(_rcMasterUi.Select, {
options: (0, _constant.translateOption)(operatorOptions, t),
style: {
width: '100%',
marginBottom: 8
},
value: operatorKey,
onChange: val => {
setOperatorKey(val);
}
})), /*#__PURE__*/React.createElement("div", {
style: {
marginBottom: 8
}
}, (0, _columns.renderFilter)(column, selectedKeys, setSelectedKeys, confirm, visible, searchValue, setSearchValue, dataSourceFilter, buddhistLocale, locale, t)), /*#__PURE__*/React.createElement(_antd.Space, {
style: {
justifyContent: 'end',
width: '100%'
}
}, /*#__PURE__*/React.createElement(_antd.Button, {
type: "primary",
onClick: () => {
// confirm({closeDropdown: false})
confirm();
// handleSearch(selectedKeys as string[], confirm)
},
icon: /*#__PURE__*/React.createElement(_icons.SearchOutlined, null),
size: "small",
style: {
width: 90
}
}, t ? t('Filter') : 'Filter'), /*#__PURE__*/React.createElement(_antd.Button, {
type: "link",
size: "small",
onClick: () => {
// setSearchValue('')
setSelectedKeys([]);
confirm();
// handleSearch()
// close()
}
}, t ? t("Clear") : 'Clear')));
},
filterIcon: filtered => /*#__PURE__*/React.createElement(_becoxyIcons.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 = (0, _react.useCallback)(columns => {
// >>>>>>>>>>> Support selection
const cloneColumns = [...columns];
const firstNonGroupColumn = (0, _columns.flatColumns2)(cloneColumns).find(col => col.field && col.field !== '#' && !groupColumns?.includes(col.field) && col.hidden !== true);
const nonGroupColumns = (0, _columns.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 = (0, _columns.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.default, {
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 (0, _utils.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(_react.Fragment, null, !sortOrder && /*#__PURE__*/React.createElement(_becoxyIcons.ArrowUp, {
fontSize: 15,
style: {
display: 'flex',
opacity: 0,
marginLeft: 4
},
className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
active: true
})
}), sortOrder === ASCEND && /*#__PURE__*/React.createElement("span", {
className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
active: sortOrder === ASCEND
}),
style: {
display: 'flex',
marginLeft: 4
}
}, /*#__PURE__*/React.createElement(_becoxyIcons.ArrowUp, {
fontSize: 15,
color: '#000'
})), sortOrder === DESCEND && /*#__PURE__*/React.createElement("span", {
className: (0, _classnames.default)(`ui-rc-table-column-sorter-up`, {
active: sortOrder === DESCEND
}),
style: {
display: 'flex',
marginLeft: 4
}
}, /*#__PURE__*/React.createElement(_becoxyIcons.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: (0, _classnames.default)(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 = (0, _utils.getFormat)(colFormat, format);
if (groupSetting && groupSetting.hiddenColumnGroup === false) {
if (record.children) {
return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);
}
if (groupColumns?.includes(col.field)) {
return '';
}
return (0, _columns.renderContent)(col, value, record, rowIndex, cellFormat);
}
if (col.field === firstNonGroupColumn?.field && record.children) {
const currentGroupColumn = (0, _columns.flatColumns2)(cols).find(it => it.field === record.field);
if (currentGroupColumn?.template) {
return (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat);
}
return /*#__PURE__*/React.createElement("span", null, currentGroupColumn?.headerText, ": ", (0, _columns.renderContent)(currentGroupColumn, record[record.field], record, rowIndex, cellFormat));
}
return (0, _columns.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];
};
var _default = exports.default = useColumns;