448 lines
18 KiB
JavaScript
448 lines
18 KiB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
||
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
||
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
||
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
||
var _excluded = ["key", "dataIndex", "children"],
|
||
_excluded2 = ["disabled"];
|
||
import { SettingOutlined, VerticalAlignBottomOutlined, VerticalAlignMiddleOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
|
||
import { ProProvider, useIntl } from '@ant-design/pro-provider';
|
||
import { runFunction, useRefFunction } from '@ant-design/pro-utils';
|
||
import { Checkbox, ConfigProvider, Popover, Space, Tooltip, Tree, Typography } from 'antd';
|
||
import classNames from 'classnames';
|
||
import omit from "rc-util/es/omit";
|
||
import React, { useContext, useEffect, useMemo, useRef } from 'react';
|
||
import { TableContext } from "../../Store/Provide";
|
||
import { genColumnKey } from "../../utils/index";
|
||
import { useStyle } from "./style";
|
||
import { jsx as _jsx } from "react/jsx-runtime";
|
||
import { jsxs as _jsxs } from "react/jsx-runtime";
|
||
import { Fragment as _Fragment } from "react/jsx-runtime";
|
||
var ToolTipIcon = function ToolTipIcon(_ref) {
|
||
var title = _ref.title,
|
||
show = _ref.show,
|
||
children = _ref.children,
|
||
columnKey = _ref.columnKey,
|
||
fixed = _ref.fixed;
|
||
var _useContext = useContext(TableContext),
|
||
columnsMap = _useContext.columnsMap,
|
||
setColumnsMap = _useContext.setColumnsMap;
|
||
if (!show) {
|
||
return null;
|
||
}
|
||
return /*#__PURE__*/_jsx(Tooltip, {
|
||
title: title,
|
||
children: /*#__PURE__*/_jsx("span", {
|
||
onClick: function onClick(e) {
|
||
e.stopPropagation();
|
||
e.preventDefault();
|
||
var config = columnsMap[columnKey] || {};
|
||
var columnKeyMap = _objectSpread(_objectSpread({}, columnsMap), {}, _defineProperty({}, columnKey, _objectSpread(_objectSpread({}, config), {}, {
|
||
fixed: fixed
|
||
})));
|
||
setColumnsMap(columnKeyMap);
|
||
},
|
||
children: children
|
||
})
|
||
});
|
||
};
|
||
var CheckboxListItem = function CheckboxListItem(_ref2) {
|
||
var columnKey = _ref2.columnKey,
|
||
isLeaf = _ref2.isLeaf,
|
||
title = _ref2.title,
|
||
className = _ref2.className,
|
||
fixed = _ref2.fixed,
|
||
showListItemOption = _ref2.showListItemOption;
|
||
var intl = useIntl();
|
||
var _useContext2 = useContext(ProProvider),
|
||
hashId = _useContext2.hashId;
|
||
var dom = /*#__PURE__*/_jsxs("span", {
|
||
className: "".concat(className, "-list-item-option ").concat(hashId).trim(),
|
||
children: [/*#__PURE__*/_jsx(ToolTipIcon, {
|
||
columnKey: columnKey,
|
||
fixed: "left",
|
||
title: intl.getMessage('tableToolBar.leftPin', '固定在列首'),
|
||
show: fixed !== 'left',
|
||
children: /*#__PURE__*/_jsx(VerticalAlignTopOutlined, {})
|
||
}), /*#__PURE__*/_jsx(ToolTipIcon, {
|
||
columnKey: columnKey,
|
||
fixed: undefined,
|
||
title: intl.getMessage('tableToolBar.noPin', '不固定'),
|
||
show: !!fixed,
|
||
children: /*#__PURE__*/_jsx(VerticalAlignMiddleOutlined, {})
|
||
}), /*#__PURE__*/_jsx(ToolTipIcon, {
|
||
columnKey: columnKey,
|
||
fixed: "right",
|
||
title: intl.getMessage('tableToolBar.rightPin', '固定在列尾'),
|
||
show: fixed !== 'right',
|
||
children: /*#__PURE__*/_jsx(VerticalAlignBottomOutlined, {})
|
||
})]
|
||
});
|
||
return /*#__PURE__*/_jsxs("span", {
|
||
className: "".concat(className, "-list-item ").concat(hashId).trim(),
|
||
children: [/*#__PURE__*/_jsx("div", {
|
||
className: "".concat(className, "-list-item-title ").concat(hashId).trim(),
|
||
children: title
|
||
}), showListItemOption && !isLeaf ? dom : null]
|
||
}, columnKey);
|
||
};
|
||
var CheckboxList = function CheckboxList(_ref3) {
|
||
var _treeDataConfig$list, _treeDataConfig$list2, _treeDataConfig$list3;
|
||
var list = _ref3.list,
|
||
draggable = _ref3.draggable,
|
||
checkable = _ref3.checkable,
|
||
showListItemOption = _ref3.showListItemOption,
|
||
className = _ref3.className,
|
||
_ref3$showTitle = _ref3.showTitle,
|
||
showTitle = _ref3$showTitle === void 0 ? true : _ref3$showTitle,
|
||
listTitle = _ref3.title,
|
||
_ref3$listHeight = _ref3.listHeight,
|
||
listHeight = _ref3$listHeight === void 0 ? 280 : _ref3$listHeight;
|
||
var _useContext3 = useContext(ProProvider),
|
||
hashId = _useContext3.hashId;
|
||
var _useContext4 = useContext(TableContext),
|
||
columnsMap = _useContext4.columnsMap,
|
||
setColumnsMap = _useContext4.setColumnsMap,
|
||
sortKeyColumns = _useContext4.sortKeyColumns,
|
||
setSortKeyColumns = _useContext4.setSortKeyColumns;
|
||
var show = list && list.length > 0;
|
||
var treeDataConfig = useMemo(function () {
|
||
if (!show) return {};
|
||
var checkedKeys = [];
|
||
var treeMap = new Map();
|
||
var loopData = function loopData(data, parentConfig) {
|
||
return data.map(function (_ref4) {
|
||
var _config$disable;
|
||
var key = _ref4.key,
|
||
dataIndex = _ref4.dataIndex,
|
||
children = _ref4.children,
|
||
rest = _objectWithoutProperties(_ref4, _excluded);
|
||
var columnKey = genColumnKey(key, [parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.columnKey, rest.index].filter(Boolean).join('-'));
|
||
var config = columnsMap[columnKey || 'null'] || {
|
||
show: true
|
||
};
|
||
if (config.show !== false && !children) {
|
||
checkedKeys.push(columnKey);
|
||
}
|
||
var item = _objectSpread(_objectSpread({
|
||
key: columnKey
|
||
}, omit(rest, ['className'])), {}, {
|
||
selectable: false,
|
||
disabled: config.disable === true,
|
||
disableCheckbox: typeof config.disable === 'boolean' ? config.disable : (_config$disable = config.disable) === null || _config$disable === void 0 ? void 0 : _config$disable.checkbox,
|
||
isLeaf: parentConfig ? true : undefined
|
||
});
|
||
if (children) {
|
||
var _item$children;
|
||
item.children = loopData(children, _objectSpread(_objectSpread({}, config), {}, {
|
||
columnKey: columnKey
|
||
}));
|
||
// 如果children 已经全部是show了，把自己也设置为show
|
||
if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.every(function (childrenItem) {
|
||
return checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.includes(childrenItem.key);
|
||
})) {
|
||
checkedKeys.push(columnKey);
|
||
}
|
||
}
|
||
treeMap.set(key, item);
|
||
return item;
|
||
});
|
||
};
|
||
return {
|
||
list: loopData(list),
|
||
keys: checkedKeys,
|
||
map: treeMap
|
||
};
|
||
}, [columnsMap, list, show]);
|
||
|
||
/** 移动到指定的位置 */
|
||
var move = useRefFunction(function (id, targetId, dropPosition) {
|
||
var newMap = _objectSpread({}, columnsMap);
|
||
var newColumns = _toConsumableArray(sortKeyColumns);
|
||
var findIndex = newColumns.findIndex(function (columnKey) {
|
||
return columnKey === id;
|
||
});
|
||
var targetIndex = newColumns.findIndex(function (columnKey) {
|
||
return columnKey === targetId;
|
||
});
|
||
var isDownWard = dropPosition >= findIndex;
|
||
if (findIndex < 0) return;
|
||
var targetItem = newColumns[findIndex];
|
||
newColumns.splice(findIndex, 1);
|
||
if (dropPosition === 0) {
|
||
newColumns.unshift(targetItem);
|
||
} else {
|
||
newColumns.splice(isDownWard ? targetIndex : targetIndex + 1, 0, targetItem);
|
||
}
|
||
// 重新生成排序数组
|
||
newColumns.forEach(function (key, order) {
|
||
newMap[key] = _objectSpread(_objectSpread({}, newMap[key] || {}), {}, {
|
||
order: order
|
||
});
|
||
});
|
||
// 更新数组
|
||
setColumnsMap(newMap);
|
||
setSortKeyColumns(newColumns);
|
||
});
|
||
|
||
/** 选中反选功能 */
|
||
var onCheckTree = useRefFunction(function (e) {
|
||
var newColumnMap = _objectSpread({}, columnsMap);
|
||
var loopSetShow = function loopSetShow(key) {
|
||
var _treeDataConfig$map;
|
||
var newSetting = _objectSpread({}, newColumnMap[key]);
|
||
newSetting.show = e.checked;
|
||
// 如果含有子节点，也要选中
|
||
if ((_treeDataConfig$map = treeDataConfig.map) !== null && _treeDataConfig$map !== void 0 && (_treeDataConfig$map = _treeDataConfig$map.get(key)) !== null && _treeDataConfig$map !== void 0 && _treeDataConfig$map.children) {
|
||
var _treeDataConfig$map$g;
|
||
(_treeDataConfig$map$g = treeDataConfig.map.get(key)) === null || _treeDataConfig$map$g === void 0 || (_treeDataConfig$map$g = _treeDataConfig$map$g.children) === null || _treeDataConfig$map$g === void 0 || _treeDataConfig$map$g.forEach(function (item) {
|
||
return loopSetShow(item.key);
|
||
});
|
||
}
|
||
newColumnMap[key] = newSetting;
|
||
};
|
||
loopSetShow(e.node.key);
|
||
setColumnsMap(_objectSpread({}, newColumnMap));
|
||
});
|
||
if (!show) {
|
||
return null;
|
||
}
|
||
var listDom = /*#__PURE__*/_jsx(Tree, {
|
||
itemHeight: 24,
|
||
draggable: draggable && !!((_treeDataConfig$list = treeDataConfig.list) !== null && _treeDataConfig$list !== void 0 && _treeDataConfig$list.length) && ((_treeDataConfig$list2 = treeDataConfig.list) === null || _treeDataConfig$list2 === void 0 ? void 0 : _treeDataConfig$list2.length) > 1,
|
||
checkable: checkable,
|
||
onDrop: function onDrop(info) {
|
||
var dropKey = info.node.key;
|
||
var dragKey = info.dragNode.key;
|
||
var dropPosition = info.dropPosition,
|
||
dropToGap = info.dropToGap;
|
||
var position = dropPosition === -1 || !dropToGap ? dropPosition + 1 : dropPosition;
|
||
move(dragKey, dropKey, position);
|
||
},
|
||
blockNode: true,
|
||
onCheck: function onCheck(_, e) {
|
||
return onCheckTree(e);
|
||
},
|
||
checkedKeys: treeDataConfig.keys,
|
||
showLine: false,
|
||
titleRender: function titleRender(_node) {
|
||
var node = _objectSpread(_objectSpread({}, _node), {}, {
|
||
children: undefined
|
||
});
|
||
if (!node.title) return null;
|
||
var normalizedTitle = runFunction(node.title, node);
|
||
var wrappedTitle = /*#__PURE__*/_jsx(Typography.Text, {
|
||
style: {
|
||
width: 80
|
||
},
|
||
ellipsis: {
|
||
tooltip: normalizedTitle
|
||
},
|
||
children: normalizedTitle
|
||
});
|
||
return /*#__PURE__*/_jsx(CheckboxListItem, _objectSpread(_objectSpread({
|
||
className: className
|
||
}, omit(node, ['key'])), {}, {
|
||
showListItemOption: showListItemOption,
|
||
title: wrappedTitle,
|
||
columnKey: node.key
|
||
}));
|
||
},
|
||
height: listHeight,
|
||
treeData: (_treeDataConfig$list3 = treeDataConfig.list) === null || _treeDataConfig$list3 === void 0 ? void 0 : _treeDataConfig$list3.map(function (_ref5) {
|
||
var disabled = _ref5.disabled,
|
||
config = _objectWithoutProperties(_ref5, _excluded2);
|
||
return config;
|
||
})
|
||
});
|
||
return /*#__PURE__*/_jsxs(_Fragment, {
|
||
children: [showTitle && /*#__PURE__*/_jsx("span", {
|
||
className: "".concat(className, "-list-title ").concat(hashId).trim(),
|
||
children: listTitle
|
||
}), listDom]
|
||
});
|
||
};
|
||
var GroupCheckboxList = function GroupCheckboxList(_ref6) {
|
||
var localColumns = _ref6.localColumns,
|
||
className = _ref6.className,
|
||
draggable = _ref6.draggable,
|
||
checkable = _ref6.checkable,
|
||
showListItemOption = _ref6.showListItemOption,
|
||
listsHeight = _ref6.listsHeight;
|
||
var _useContext5 = useContext(ProProvider),
|
||
hashId = _useContext5.hashId;
|
||
var rightList = [];
|
||
var leftList = [];
|
||
var list = [];
|
||
var intl = useIntl();
|
||
localColumns.forEach(function (item) {
|
||
/** 不在 setting 中展示的 */
|
||
if (item.hideInSetting) {
|
||
return;
|
||
}
|
||
var fixed = item.fixed;
|
||
if (fixed === 'left') {
|
||
leftList.push(item);
|
||
return;
|
||
}
|
||
if (fixed === 'right') {
|
||
rightList.push(item);
|
||
return;
|
||
}
|
||
list.push(item);
|
||
});
|
||
var showRight = rightList && rightList.length > 0;
|
||
var showLeft = leftList && leftList.length > 0;
|
||
return /*#__PURE__*/_jsxs("div", {
|
||
className: classNames("".concat(className, "-list"), hashId, _defineProperty({}, "".concat(className, "-list-group"), showRight || showLeft)),
|
||
children: [/*#__PURE__*/_jsx(CheckboxList, {
|
||
title: intl.getMessage('tableToolBar.leftFixedTitle', '固定在左侧'),
|
||
list: leftList,
|
||
draggable: draggable,
|
||
checkable: checkable,
|
||
showListItemOption: showListItemOption,
|
||
className: className,
|
||
listHeight: listsHeight
|
||
}), /*#__PURE__*/_jsx(CheckboxList, {
|
||
list: list,
|
||
draggable: draggable,
|
||
checkable: checkable,
|
||
showListItemOption: showListItemOption,
|
||
title: intl.getMessage('tableToolBar.noFixedTitle', '不固定'),
|
||
showTitle: showLeft || showRight,
|
||
className: className,
|
||
listHeight: listsHeight
|
||
}), /*#__PURE__*/_jsx(CheckboxList, {
|
||
title: intl.getMessage('tableToolBar.rightFixedTitle', '固定在右侧'),
|
||
list: rightList,
|
||
draggable: draggable,
|
||
checkable: checkable,
|
||
showListItemOption: showListItemOption,
|
||
className: className,
|
||
listHeight: listsHeight
|
||
})]
|
||
});
|
||
};
|
||
function ColumnSetting(props) {
|
||
var _props$checkable, _props$draggable, _props$showListItemOp, _props$settingIcon;
|
||
var columnRef = useRef(null);
|
||
// 获得当前上下文的 hashID
|
||
var counter = useContext(TableContext);
|
||
var localColumns = props.columns;
|
||
var _props$checkedReset = props.checkedReset,
|
||
checkedReset = _props$checkedReset === void 0 ? true : _props$checkedReset;
|
||
var columnsMap = counter.columnsMap,
|
||
setColumnsMap = counter.setColumnsMap,
|
||
clearPersistenceStorage = counter.clearPersistenceStorage;
|
||
useEffect(function () {
|
||
var _counter$propsRef$cur;
|
||
if ((_counter$propsRef$cur = counter.propsRef.current) !== null && _counter$propsRef$cur !== void 0 && (_counter$propsRef$cur = _counter$propsRef$cur.columnsState) !== null && _counter$propsRef$cur !== void 0 && _counter$propsRef$cur.value) {
|
||
var _counter$propsRef$cur2;
|
||
columnRef.current = JSON.parse(JSON.stringify(((_counter$propsRef$cur2 = counter.propsRef.current) === null || _counter$propsRef$cur2 === void 0 || (_counter$propsRef$cur2 = _counter$propsRef$cur2.columnsState) === null || _counter$propsRef$cur2 === void 0 ? void 0 : _counter$propsRef$cur2.value) || {}));
|
||
}
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, []);
|
||
|
||
/**
|
||
* 设置全部选中，或全部未选中
|
||
*
|
||
* @param show
|
||
*/
|
||
var setAllSelectAction = useRefFunction(function () {
|
||
var show = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
|
||
var columnKeyMap = {};
|
||
var loopColumns = function loopColumns(columns) {
|
||
columns.forEach(function (_ref7) {
|
||
var key = _ref7.key,
|
||
fixed = _ref7.fixed,
|
||
index = _ref7.index,
|
||
children = _ref7.children,
|
||
disable = _ref7.disable;
|
||
var columnKey = genColumnKey(key, index);
|
||
if (columnKey) {
|
||
var _columnsMap$columnKey, _columnsMap$columnKey2;
|
||
columnKeyMap[columnKey] = {
|
||
// 子节点 disable 时，不修改节点显示状态
|
||
show: disable ? (_columnsMap$columnKey = columnsMap[columnKey]) === null || _columnsMap$columnKey === void 0 ? void 0 : _columnsMap$columnKey.show : show,
|
||
fixed: fixed,
|
||
disable: disable,
|
||
order: (_columnsMap$columnKey2 = columnsMap[columnKey]) === null || _columnsMap$columnKey2 === void 0 ? void 0 : _columnsMap$columnKey2.order
|
||
};
|
||
}
|
||
if (children) {
|
||
loopColumns(children);
|
||
}
|
||
});
|
||
};
|
||
loopColumns(localColumns);
|
||
setColumnsMap(columnKeyMap);
|
||
});
|
||
|
||
/** 全选和反选 */
|
||
var checkedAll = useRefFunction(function (e) {
|
||
if (e.target.checked) {
|
||
setAllSelectAction();
|
||
} else {
|
||
setAllSelectAction(false);
|
||
}
|
||
});
|
||
|
||
/** 重置项目 */
|
||
var clearClick = useRefFunction(function () {
|
||
var _counter$propsRef$cur3;
|
||
clearPersistenceStorage === null || clearPersistenceStorage === void 0 || clearPersistenceStorage();
|
||
setColumnsMap(((_counter$propsRef$cur3 = counter.propsRef.current) === null || _counter$propsRef$cur3 === void 0 || (_counter$propsRef$cur3 = _counter$propsRef$cur3.columnsState) === null || _counter$propsRef$cur3 === void 0 ? void 0 : _counter$propsRef$cur3.defaultValue) || columnRef.current || counter.defaultColumnKeyMap);
|
||
});
|
||
|
||
// 未选中的 key 列表
|
||
var unCheckedKeys = Object.values(columnsMap).filter(function (value) {
|
||
return !value || value.show === false;
|
||
});
|
||
|
||
// 是否已经选中
|
||
var indeterminate = unCheckedKeys.length > 0 && unCheckedKeys.length !== localColumns.length;
|
||
var intl = useIntl();
|
||
var _useContext6 = useContext(ConfigProvider.ConfigContext),
|
||
getPrefixCls = _useContext6.getPrefixCls;
|
||
var className = getPrefixCls('pro-table-column-setting');
|
||
var _useStyle = useStyle(className),
|
||
wrapSSR = _useStyle.wrapSSR,
|
||
hashId = _useStyle.hashId;
|
||
return wrapSSR( /*#__PURE__*/_jsx(Popover, {
|
||
arrow: false,
|
||
title: /*#__PURE__*/_jsxs("div", {
|
||
className: "".concat(className, "-title ").concat(hashId).trim(),
|
||
children: [props.checkable === false ? /*#__PURE__*/_jsx("div", {}) : /*#__PURE__*/_jsx(Checkbox, {
|
||
indeterminate: indeterminate,
|
||
checked: unCheckedKeys.length === 0 && unCheckedKeys.length !== localColumns.length,
|
||
onChange: function onChange(e) {
|
||
checkedAll(e);
|
||
},
|
||
children: intl.getMessage('tableToolBar.columnDisplay', '列展示')
|
||
}), checkedReset ? /*#__PURE__*/_jsx("a", {
|
||
onClick: clearClick,
|
||
className: "".concat(className, "-action-rest-button ").concat(hashId).trim(),
|
||
children: intl.getMessage('tableToolBar.reset', '重置')
|
||
}) : null, props !== null && props !== void 0 && props.extra ? /*#__PURE__*/_jsx(Space, {
|
||
size: 12,
|
||
align: "center",
|
||
children: props.extra
|
||
}) : null]
|
||
}),
|
||
overlayClassName: "".concat(className, "-overlay ").concat(hashId).trim(),
|
||
trigger: "click",
|
||
placement: "bottomRight",
|
||
content: /*#__PURE__*/_jsx(GroupCheckboxList, {
|
||
checkable: (_props$checkable = props.checkable) !== null && _props$checkable !== void 0 ? _props$checkable : true,
|
||
draggable: (_props$draggable = props.draggable) !== null && _props$draggable !== void 0 ? _props$draggable : true,
|
||
showListItemOption: (_props$showListItemOp = props.showListItemOption) !== null && _props$showListItemOp !== void 0 ? _props$showListItemOp : true,
|
||
className: className,
|
||
localColumns: localColumns,
|
||
listsHeight: props.listsHeight
|
||
}),
|
||
children: props.children || /*#__PURE__*/_jsx(Tooltip, {
|
||
title: intl.getMessage('tableToolBar.columnSetting', '列设置'),
|
||
children: (_props$settingIcon = props.settingIcon) !== null && _props$settingIcon !== void 0 ? _props$settingIcon : /*#__PURE__*/_jsx(SettingOutlined, {})
|
||
})
|
||
}));
|
||
}
|
||
export default ColumnSetting; |