Update from Vibe Studio

This commit is contained in:
Vibe Studio
2026-01-09 14:52:46 +00:00
parent 42a0efe70b
commit 47fa6d98b2
28661 changed files with 2421771 additions and 0 deletions

View File

@@ -0,0 +1,8 @@
import { type TableColumnType } from 'antd';
import React from 'react';
import type { SettingOptionType } from '../ToolBar';
type ColumnSettingProps<T = any> = SettingOptionType & {
columns: TableColumnType<T>[];
};
declare function ColumnSetting<T>(props: ColumnSettingProps<T>): React.JSX.Element;
export default ColumnSetting;

View File

@@ -0,0 +1,448 @@
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;

View File

@@ -0,0 +1,9 @@
/// <reference types="react" />
import type { ProAliasToken } from '@ant-design/pro-provider';
export interface ProToken extends ProAliasToken {
componentCls: string;
}
export declare function useStyle(prefixCls: string): {
wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
hashId: string;
};

View File

@@ -0,0 +1,82 @@
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
var genProStyle = function genProStyle(token) {
return _defineProperty(_defineProperty(_defineProperty({}, token.componentCls, {
width: 'auto',
'&-title': {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
height: '32px'
},
'&-overlay': _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(token.antCls, "-popover-inner-content"), {
width: '200px',
paddingBlock: 0,
paddingInline: 0,
paddingBlockEnd: 8
}), "".concat(token.antCls, "-tree-node-content-wrapper:hover"), {
backgroundColor: 'transparent'
}), "".concat(token.antCls, "-tree-draggable-icon"), {
cursor: 'grab'
}), "".concat(token.antCls, "-tree-treenode"), _defineProperty(_defineProperty({
alignItems: 'center',
'&:hover': _defineProperty({}, "".concat(token.componentCls, "-list-item-option"), {
display: 'block'
})
}, "".concat(token.antCls, "-tree-checkbox"), {
marginInlineEnd: '4px'
}), "".concat(token.antCls, "-tree-title"), {
width: '100%'
}))
}), "".concat(token.componentCls, "-action-rest-button"), {
color: token.colorPrimary
}), "".concat(token.componentCls, "-list"), _defineProperty(_defineProperty(_defineProperty({
display: 'flex',
flexDirection: 'column',
width: '100%',
paddingBlockStart: 8
}, "&".concat(token.componentCls, "-list-group"), {
paddingBlockStart: 0
}), '&-title', {
marginBlockStart: '6px',
marginBlockEnd: '6px',
paddingInlineStart: '24px',
color: token.colorTextSecondary,
fontSize: '12px'
}), '&-item', {
display: 'flex',
alignItems: 'center',
maxHeight: 24,
justifyContent: 'space-between',
'&-title': {
flex: 1,
maxWidth: 80,
textOverflow: 'ellipsis',
overflow: 'hidden',
wordBreak: 'break-all',
whiteSpace: 'nowrap'
},
'&-option': {
display: 'none',
float: 'right',
cursor: 'pointer',
'> span': {
'> span.anticon': {
color: token.colorPrimary
}
},
'> span + span': {
marginInlineStart: 4
}
}
}));
};
export function useStyle(prefixCls) {
return useAntdStyle('ColumnSetting', function (token) {
var proToken = _objectSpread(_objectSpread({}, token), {}, {
componentCls: ".".concat(prefixCls)
});
return [genProStyle(proToken)];
});
}