@para-ui/core 4.0.85 → 4.0.87
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Cascader/index.js +6 -7
- package/ComboSelect/index.js +2 -3
- package/CycleSelector/index.js +1 -4
- package/DatePicker/index.js +1 -4
- package/DynamicMultiBox/index.js +2 -3
- package/FieldForm/index.js +4 -5
- package/Form/index.js +3 -4
- package/FormItem/index.js +3 -4
- package/Image/index.js +16 -16
- package/Menu/index.js +296 -348
- package/Message/index.js +5 -1
- package/README.md +6 -0
- package/Switch/index.js +2 -2
- package/Table/index.js +1 -2
- package/Tag/index.js +55 -87
- package/TextEditor/index.js +3 -3
- package/TimePicker/index.js +1 -4
- package/Timeline/index.js +1 -2
- package/ToggleButton/index.js +1 -2
- package/Tree/index.js +3 -4
- package/Upload/index.js +4 -5
- package/_verture/{Portal-502bb85e.js → Portal-274c5bd8.js} +2 -2
- package/_verture/{defineProperty-6f62bb2a.js → defineProperty-f0e15205.js} +10 -2
- package/_verture/{index-78f0f0e7.js → index-99b02582.js} +4 -5
- package/_verture/{index-1856bbeb.js → index-9e4b0e32.js} +1 -1
- package/_verture/{index-d068959c.js → index-dfb6ceb9.js} +1 -2
- package/_verture/{isEqual-30b6f859.js → isEqual-38aa74f9.js} +2 -2
- package/_verture/{useState-f2419d68.js → useState-05fc6660.js} +2 -3
- package/index.js +8 -9
- package/package.json +1 -1
- package/umd/Argv.js +1 -1
- package/umd/Menu.js +1 -1
- package/umd/Message.js +1 -1
- package/_verture/typeof-adeedc13.js +0 -11
- /package/_verture/{index-73a11529.js → index-0fafedf4.js} +0 -0
package/Menu/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import React__default, { useState, useEffect, useMemo, createElement, useRef } from 'react';
|
|
3
|
-
import { _ as _toConsumableArray } from '../_verture/toConsumableArray-599cd94a.js';
|
|
4
|
-
import { _ as _slicedToArray } from '../_verture/slicedToArray-61604a6c.js';
|
|
5
3
|
import { createPortal } from 'react-dom';
|
|
6
4
|
import CollapseBox from '../CollapseBox/index.js';
|
|
7
5
|
import Down from '@para-ui/icons/Down';
|
|
@@ -22,24 +20,25 @@ import 'clsx';
|
|
|
22
20
|
import '@para-ui/icons/Forbid';
|
|
23
21
|
import '../_verture/useResizeObserver-edda059a.js';
|
|
24
22
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
expansion =
|
|
28
|
-
render
|
|
29
|
-
className
|
|
23
|
+
const Logo = props => {
|
|
24
|
+
const {
|
|
25
|
+
expansion = true,
|
|
26
|
+
render,
|
|
27
|
+
className
|
|
28
|
+
} = props;
|
|
30
29
|
/**
|
|
31
30
|
* 处理内容
|
|
32
31
|
* @return {ReactNode}
|
|
33
32
|
*/
|
|
34
|
-
|
|
33
|
+
const handContent = () => {
|
|
35
34
|
if (render) return render;
|
|
36
35
|
};
|
|
37
36
|
/**
|
|
38
37
|
* 处理className
|
|
39
38
|
* @return class名
|
|
40
39
|
*/
|
|
41
|
-
|
|
42
|
-
|
|
40
|
+
const handClass = () => {
|
|
41
|
+
let str = 'menu-logo';
|
|
43
42
|
if (className) str += " ".concat(className);
|
|
44
43
|
if (!expansion) str += ' menu-logo-shrink';
|
|
45
44
|
return str;
|
|
@@ -55,9 +54,9 @@ var Logo = function Logo(props) {
|
|
|
55
54
|
* @description 处理菜单标签
|
|
56
55
|
* 默认div,最后一级为a标签
|
|
57
56
|
* */
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
57
|
+
const handMenuEle = children => {
|
|
58
|
+
let Ele = 'div';
|
|
59
|
+
const lastOne = !children || children.length === 0;
|
|
61
60
|
if (lastOne) {
|
|
62
61
|
Ele = 'a';
|
|
63
62
|
}
|
|
@@ -66,11 +65,11 @@ var handMenuEle = function handMenuEle(children) {
|
|
|
66
65
|
/**
|
|
67
66
|
* 处理菜单href地址
|
|
68
67
|
* */
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
68
|
+
const handHref = function () {
|
|
69
|
+
let children = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
|
|
70
|
+
let path = arguments.length > 1 ? arguments[1] : undefined;
|
|
71
|
+
let href = arguments.length > 2 ? arguments[2] : undefined;
|
|
72
|
+
const lastOne = !children || children.length === 0;
|
|
74
73
|
if (lastOne) {
|
|
75
74
|
return {
|
|
76
75
|
href: href ? href : "#".concat(path)
|
|
@@ -79,31 +78,27 @@ var handHref = function handHref() {
|
|
|
79
78
|
return {};
|
|
80
79
|
};
|
|
81
80
|
// 下拉展开
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
level =
|
|
92
|
-
badge
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
openCom = _useState2[0],
|
|
104
|
-
setOpenCom = _useState2[1];
|
|
105
|
-
useEffect(function () {
|
|
106
|
-
var selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
|
|
81
|
+
const VerticalMenuListItem = props => {
|
|
82
|
+
const {
|
|
83
|
+
label,
|
|
84
|
+
type = 'router',
|
|
85
|
+
path,
|
|
86
|
+
href,
|
|
87
|
+
icon,
|
|
88
|
+
children,
|
|
89
|
+
className,
|
|
90
|
+
level = 1,
|
|
91
|
+
badge,
|
|
92
|
+
selectMenu = '',
|
|
93
|
+
idMenuLast,
|
|
94
|
+
onClickMenu,
|
|
95
|
+
shrinkOthers = true,
|
|
96
|
+
jumpIcon,
|
|
97
|
+
onClickJump
|
|
98
|
+
} = props;
|
|
99
|
+
const [openCom, setOpenCom] = useState(false);
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
const selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
|
|
107
102
|
if (selectMenuLast && selectMenuLast.indexOf(path) !== -1 && selectMenuLast.length > 1) {
|
|
108
103
|
setOpenCom(true);
|
|
109
104
|
} else {
|
|
@@ -112,7 +107,7 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
|
|
|
112
107
|
}
|
|
113
108
|
}, [idMenuLast, selectMenu, path]);
|
|
114
109
|
/** 点击菜单 */
|
|
115
|
-
|
|
110
|
+
const clickMenu = e => {
|
|
116
111
|
if (children && children.length > 0) {
|
|
117
112
|
onClickMenu && onClickMenu(false);
|
|
118
113
|
return setOpenCom(!openCom);
|
|
@@ -124,9 +119,9 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
|
|
|
124
119
|
* 处理图标
|
|
125
120
|
* @return {ReactNode}
|
|
126
121
|
*/
|
|
127
|
-
|
|
122
|
+
const handIcon = () => {
|
|
128
123
|
if (icon) {
|
|
129
|
-
|
|
124
|
+
const iconCom = iconList[icon];
|
|
130
125
|
if (iconCom) return jsx("span", Object.assign({
|
|
131
126
|
className: "menu-item-icon"
|
|
132
127
|
}, {
|
|
@@ -140,7 +135,7 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
|
|
|
140
135
|
}
|
|
141
136
|
//return <Down className="opacity-pos-svg"/>; // 占位
|
|
142
137
|
};
|
|
143
|
-
|
|
138
|
+
const clickJumpItem = e => {
|
|
144
139
|
e.stopPropagation();
|
|
145
140
|
e.preventDefault();
|
|
146
141
|
onClickJump === null || onClickJump === void 0 ? void 0 : onClickJump(props);
|
|
@@ -149,7 +144,7 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
|
|
|
149
144
|
* 处理箭头
|
|
150
145
|
* @return {ReactNode}
|
|
151
146
|
*/
|
|
152
|
-
|
|
147
|
+
const handArrow = () => {
|
|
153
148
|
if (children && children.length > 0) return jsx(Down, {});
|
|
154
149
|
if (jumpIcon) return jsx("span", Object.assign({
|
|
155
150
|
className: 'jump-icon',
|
|
@@ -164,7 +159,7 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
|
|
|
164
159
|
/**
|
|
165
160
|
* 处理数量
|
|
166
161
|
* */
|
|
167
|
-
|
|
162
|
+
const handBadge = () => {
|
|
168
163
|
if (badge !== undefined) {
|
|
169
164
|
return jsx("div", Object.assign({
|
|
170
165
|
className: 'menu-item-badge'
|
|
@@ -179,13 +174,13 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
|
|
|
179
174
|
* 处理class
|
|
180
175
|
* @return class名
|
|
181
176
|
*/
|
|
182
|
-
|
|
183
|
-
|
|
177
|
+
const handClass = () => {
|
|
178
|
+
let str = 'vertical-menu-list-item';
|
|
184
179
|
if (openCom) str += ' vertical-menu-list-item-open';
|
|
185
180
|
if (className) str += " ".concat(className);
|
|
186
|
-
|
|
181
|
+
const selectMenuLast = idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
|
|
187
182
|
if (selectMenuLast) {
|
|
188
|
-
|
|
183
|
+
const index = selectMenuLast.indexOf(path);
|
|
189
184
|
if (index !== -1) {
|
|
190
185
|
str += ' vertical-menu-list-item-select'; // 选中
|
|
191
186
|
if (index === selectMenuLast.length - 1) {
|
|
@@ -202,8 +197,8 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
|
|
|
202
197
|
/**
|
|
203
198
|
* 处理样式
|
|
204
199
|
*/
|
|
205
|
-
|
|
206
|
-
|
|
200
|
+
const handStyle = () => {
|
|
201
|
+
const json = {
|
|
207
202
|
paddingRight: '12px',
|
|
208
203
|
paddingLeft: '0px'
|
|
209
204
|
};
|
|
@@ -213,8 +208,8 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
|
|
|
213
208
|
return json;
|
|
214
209
|
};
|
|
215
210
|
// itemMemo
|
|
216
|
-
|
|
217
|
-
|
|
211
|
+
const ItemMemo = useMemo(() => {
|
|
212
|
+
const Ele = handMenuEle(children);
|
|
218
213
|
return jsxs(Ele, Object.assign({
|
|
219
214
|
onClick: clickMenu,
|
|
220
215
|
className: "vertical-menu-list-item-content",
|
|
@@ -238,14 +233,14 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
|
|
|
238
233
|
}));
|
|
239
234
|
}, [children, onClickMenu, openCom, level, icon, label, path, href, jumpIcon]);
|
|
240
235
|
// Collapse
|
|
241
|
-
|
|
236
|
+
const CollapseMemo = useMemo(() => {
|
|
242
237
|
return jsx(CollapseBox, Object.assign({
|
|
243
238
|
in: openCom,
|
|
244
239
|
className: "li-collapse",
|
|
245
240
|
timeout: "auto",
|
|
246
241
|
unmountOnExit: true
|
|
247
242
|
}, {
|
|
248
|
-
children: children && children.length > 0 && children.map(
|
|
243
|
+
children: children && children.length > 0 && children.map((item, index) => {
|
|
249
244
|
return jsx(VerticalMenuListItem, Object.assign({}, item, {
|
|
250
245
|
jumpIcon: jumpIcon || item.jumpIcon,
|
|
251
246
|
onClickJump: onClickJump,
|
|
@@ -265,69 +260,52 @@ var VerticalMenuListItem = function VerticalMenuListItem(props) {
|
|
|
265
260
|
}));
|
|
266
261
|
};
|
|
267
262
|
// 弹出菜单
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
size =
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
296
|
-
childPos = _useState6[0],
|
|
297
|
-
setChildPos = _useState6[1]; // 子级定位元素
|
|
298
|
-
var _useState7 = useState([]),
|
|
299
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
300
|
-
childList = _useState8[0],
|
|
301
|
-
setChildList = _useState8[1]; // 子级列表
|
|
302
|
-
var _useState9 = useState({}),
|
|
303
|
-
_useState10 = _slicedToArray(_useState9, 2),
|
|
304
|
-
posStyle = _useState10[0],
|
|
305
|
-
setPosStyle = _useState10[1]; // 定位元素样式
|
|
306
|
-
var _useState11 = useState({}),
|
|
307
|
-
_useState12 = _slicedToArray(_useState11, 1),
|
|
308
|
-
timerJson = _useState12[0];
|
|
309
|
-
var boxRef = useRef(null);
|
|
310
|
-
useEffect(function () {
|
|
311
|
-
return function () {
|
|
263
|
+
const MenuItemPopper = props => {
|
|
264
|
+
const {
|
|
265
|
+
size = 'large',
|
|
266
|
+
open = false,
|
|
267
|
+
anchorEl,
|
|
268
|
+
idMenuLast,
|
|
269
|
+
selectMenu = '',
|
|
270
|
+
onClickMenu,
|
|
271
|
+
list = [],
|
|
272
|
+
onMouseEnter,
|
|
273
|
+
onMouseLeave,
|
|
274
|
+
onMouseEnterBus,
|
|
275
|
+
onMouseLeaveBus,
|
|
276
|
+
level = 1,
|
|
277
|
+
color,
|
|
278
|
+
className,
|
|
279
|
+
jumpIcon,
|
|
280
|
+
onClickJump
|
|
281
|
+
} = props;
|
|
282
|
+
const [openChild, setOpenChild] = useState(false); // 是否渲染子级
|
|
283
|
+
const [childPos, setChildPos] = useState(''); // 子级定位元素
|
|
284
|
+
const [childList, setChildList] = useState([]); // 子级列表
|
|
285
|
+
const [posStyle, setPosStyle] = useState({}); // 定位元素样式
|
|
286
|
+
const [timerJson] = useState({});
|
|
287
|
+
const boxRef = useRef(null);
|
|
288
|
+
useEffect(() => {
|
|
289
|
+
return () => {
|
|
312
290
|
clearTimeout(timerJson.leaveBox);
|
|
313
291
|
clearTimeout(timerJson.closeTimer);
|
|
314
292
|
clearTimeout(timerJson.styleTimer);
|
|
315
293
|
};
|
|
316
294
|
}, []);
|
|
317
|
-
useEffect(
|
|
295
|
+
useEffect(() => {
|
|
318
296
|
handPosStyle();
|
|
319
297
|
}, [open, anchorEl]);
|
|
320
298
|
/**
|
|
321
299
|
* 设置定位样式
|
|
322
300
|
* */
|
|
323
|
-
|
|
301
|
+
const handPosStyle = () => {
|
|
324
302
|
clearTimeout(timerJson.styleTimer);
|
|
325
|
-
timerJson.styleTimer = setTimeout(
|
|
303
|
+
timerJson.styleTimer = setTimeout(() => {
|
|
326
304
|
if (anchorEl && open && boxRef.current) {
|
|
327
305
|
// 定位容器
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
306
|
+
const anchorElDom = document.querySelector("[data-menu-id=".concat(anchorEl, "]"));
|
|
307
|
+
const reactDom = anchorElDom.getBoundingClientRect();
|
|
308
|
+
let top = reactDom.top;
|
|
331
309
|
// 不是第一级的弹窗向上偏移
|
|
332
310
|
if (level !== 1) {
|
|
333
311
|
top = top - 4;
|
|
@@ -336,8 +314,8 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
336
314
|
if (handTooltip()) {
|
|
337
315
|
top = top + (props.size === 'small' ? 2 : 4);
|
|
338
316
|
}
|
|
339
|
-
|
|
340
|
-
|
|
317
|
+
const bodyHeight = document.body.clientHeight;
|
|
318
|
+
const selfHeight = boxRef.current.clientHeight;
|
|
341
319
|
if (selfHeight + top > bodyHeight) {
|
|
342
320
|
top = top - (selfHeight + top - bodyHeight) - 20; // 多减20的余量
|
|
343
321
|
}
|
|
@@ -356,7 +334,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
356
334
|
/**
|
|
357
335
|
* 判断是否是第一级,且没有子级
|
|
358
336
|
* */
|
|
359
|
-
|
|
337
|
+
const handTooltip = () => {
|
|
360
338
|
return false; // 不要tooltip样式
|
|
361
339
|
// 第一层,长度为1,且没有父级,,子级也没有
|
|
362
340
|
/*if (
|
|
@@ -373,8 +351,8 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
373
351
|
* 处理MenuPopover样式类名
|
|
374
352
|
* @return {string}
|
|
375
353
|
*/
|
|
376
|
-
|
|
377
|
-
|
|
354
|
+
const handPopoverClass = () => {
|
|
355
|
+
let str = "".concat($prefixCls, "-vertical-menu-item-popper");
|
|
378
356
|
if (color) str += " ".concat($prefixCls, "-vertical-menu-item-popper-").concat(color);
|
|
379
357
|
if (size) str += " ".concat($prefixCls, "-vertical-menu-item-popper-").concat(size);
|
|
380
358
|
if (color === 'deep') str += " ".concat($prefixCls, "-scrollbar-small-deep");else str += " ".concat($prefixCls, "-scrollbar-small");
|
|
@@ -389,9 +367,9 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
389
367
|
* @param item {MenuChildrenProps} 子菜单详情
|
|
390
368
|
* @return {string}
|
|
391
369
|
*/
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
370
|
+
const handItemClass = item => {
|
|
371
|
+
let str = 'menu-item-popper-content-item';
|
|
372
|
+
const selectMenuLast = idMenuLast && idMenuLast[selectMenu]; // 当前选中菜单的 所有上下级 一条线
|
|
395
373
|
if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) {
|
|
396
374
|
str += ' menu-item-popper-content-item-select';
|
|
397
375
|
}
|
|
@@ -402,9 +380,9 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
402
380
|
* @param icon 图标信息
|
|
403
381
|
* @return {ReactNode}
|
|
404
382
|
*/
|
|
405
|
-
|
|
383
|
+
const handIcon = icon => {
|
|
406
384
|
if (icon) {
|
|
407
|
-
|
|
385
|
+
const iconCom = iconList[icon];
|
|
408
386
|
if (iconCom) return jsx("span", Object.assign({
|
|
409
387
|
className: "menu-item-icon"
|
|
410
388
|
}, {
|
|
@@ -418,19 +396,17 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
418
396
|
}
|
|
419
397
|
//return <Down className="opacity-pos-svg"/>; // 占位
|
|
420
398
|
};
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
onClickJump === null || onClickJump === void 0 ? void 0 : onClickJump(item);
|
|
426
|
-
};
|
|
399
|
+
const clickJumpItem = item => e => {
|
|
400
|
+
e.stopPropagation();
|
|
401
|
+
e.preventDefault();
|
|
402
|
+
onClickJump === null || onClickJump === void 0 ? void 0 : onClickJump(item);
|
|
427
403
|
};
|
|
428
404
|
/**
|
|
429
405
|
* 处理箭头
|
|
430
406
|
* @param children 详细
|
|
431
407
|
* @return {ReactNode}
|
|
432
408
|
*/
|
|
433
|
-
|
|
409
|
+
const handArrow = (children, item) => {
|
|
434
410
|
if (children && children.length > 0) return jsx(Down, {});
|
|
435
411
|
if (jumpIcon) return jsx("span", Object.assign({
|
|
436
412
|
className: 'jump-icon',
|
|
@@ -445,7 +421,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
445
421
|
/**
|
|
446
422
|
* 处理数量
|
|
447
423
|
* */
|
|
448
|
-
|
|
424
|
+
const handBadge = item => {
|
|
449
425
|
if (item.badge !== undefined && !handTooltip()) {
|
|
450
426
|
return jsx("div", Object.assign({
|
|
451
427
|
className: 'menu-item-badge'
|
|
@@ -461,17 +437,15 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
461
437
|
* @param item {MenuChildrenProps} 当前项参数
|
|
462
438
|
* @param e 当前元素
|
|
463
439
|
*/
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
onClickMenu && onClickMenu(item);
|
|
469
|
-
};
|
|
440
|
+
const clickMenu = item => e => {
|
|
441
|
+
e.preventDefault();
|
|
442
|
+
if (item.children && item.children.length > 0) return;
|
|
443
|
+
onClickMenu && onClickMenu(item);
|
|
470
444
|
};
|
|
471
445
|
/**
|
|
472
446
|
* 鼠标移入大容器
|
|
473
447
|
* */
|
|
474
|
-
|
|
448
|
+
const onMouseEnterBox = () => {
|
|
475
449
|
if (level == 1) {
|
|
476
450
|
// 关闭收缩按钮移出事件
|
|
477
451
|
onMouseEnter && onMouseEnter();
|
|
@@ -482,9 +456,9 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
482
456
|
/**
|
|
483
457
|
* 鼠标移出大容器
|
|
484
458
|
* */
|
|
485
|
-
|
|
459
|
+
const onMouseLeaveBox = () => {
|
|
486
460
|
clearTimeout(timerJson.leaveBox);
|
|
487
|
-
timerJson.leaveBox = setTimeout(
|
|
461
|
+
timerJson.leaveBox = setTimeout(() => {
|
|
488
462
|
if (level === 1) {
|
|
489
463
|
onMouseLeave && onMouseLeave();
|
|
490
464
|
} else {
|
|
@@ -496,7 +470,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
496
470
|
* 移入事件 传递 给子级
|
|
497
471
|
* 用来通知上级
|
|
498
472
|
* */
|
|
499
|
-
|
|
473
|
+
const onMouseEnterBusCom = () => {
|
|
500
474
|
// 移入子级的大容器里面, 需要通知上级不关闭容器, 清楚关闭定时器
|
|
501
475
|
clearTimeout(timerJson.leaveBox);
|
|
502
476
|
};
|
|
@@ -504,7 +478,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
504
478
|
* 移出事件 传递 给子级
|
|
505
479
|
* 用来通知上级
|
|
506
480
|
* */
|
|
507
|
-
|
|
481
|
+
const onMouseLeaveBusCom = () => {
|
|
508
482
|
setOpenChild(false);
|
|
509
483
|
setChildPos('');
|
|
510
484
|
setChildList([]);
|
|
@@ -516,24 +490,22 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
516
490
|
* @param index {number} 移入当前项下标
|
|
517
491
|
* @param e 当前元素
|
|
518
492
|
*/
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
});
|
|
536
|
-
};
|
|
493
|
+
const onMouseEnterChildCom = item => e => {
|
|
494
|
+
handClassItemHover(e.target);
|
|
495
|
+
setOpenChild(false);
|
|
496
|
+
clearTimeout(timerJson.closeTimer);
|
|
497
|
+
timerJson.closeTimer = setTimeout(() => {
|
|
498
|
+
const childListHand = item.children || [];
|
|
499
|
+
if (childListHand.length > 0) {
|
|
500
|
+
setOpenChild(true);
|
|
501
|
+
setChildPos(e.target.getAttribute('data-menu-id'));
|
|
502
|
+
setChildList(item.children || []);
|
|
503
|
+
} else {
|
|
504
|
+
setOpenChild(false);
|
|
505
|
+
setChildPos('');
|
|
506
|
+
setChildList([]);
|
|
507
|
+
}
|
|
508
|
+
});
|
|
537
509
|
};
|
|
538
510
|
/**
|
|
539
511
|
* 移出子级
|
|
@@ -541,18 +513,16 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
541
513
|
* @param index {number} 移入当前项下标
|
|
542
514
|
* @param e 当前元素
|
|
543
515
|
*/
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
//console.log('移出子级')
|
|
547
|
-
};
|
|
516
|
+
const onMouseLeaveChildCom = item => e => {
|
|
517
|
+
//console.log('移出子级')
|
|
548
518
|
};
|
|
549
519
|
/**
|
|
550
520
|
* 处理移入的class
|
|
551
521
|
* */
|
|
552
|
-
|
|
522
|
+
const handClassItemHover = target => {
|
|
553
523
|
if (boxRef) {
|
|
554
|
-
|
|
555
|
-
|
|
524
|
+
const boxDom = boxRef.current;
|
|
525
|
+
const hoverDom = boxDom.querySelector('.menu-item-popper-content-item-hover');
|
|
556
526
|
if (hoverDom) {
|
|
557
527
|
hoverDom.classList.remove('menu-item-popper-content-item-hover');
|
|
558
528
|
}
|
|
@@ -562,15 +532,15 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
562
532
|
}
|
|
563
533
|
};
|
|
564
534
|
/** 内容 */
|
|
565
|
-
|
|
535
|
+
const ContentMemo = useMemo(() => {
|
|
566
536
|
return jsx("div", Object.assign({
|
|
567
537
|
className: "menu-item-popper-content",
|
|
568
538
|
onMouseEnter: onMouseEnterBox,
|
|
569
539
|
onMouseLeave: onMouseLeaveBox,
|
|
570
540
|
ref: boxRef
|
|
571
541
|
}, {
|
|
572
|
-
children: list.map(
|
|
573
|
-
|
|
542
|
+
children: list.map((item, index) => {
|
|
543
|
+
const Ele = handMenuEle(item.children);
|
|
574
544
|
return jsx("div", Object.assign({
|
|
575
545
|
className: handItemClass(item),
|
|
576
546
|
onMouseEnter: onMouseEnterChildCom(item),
|
|
@@ -602,7 +572,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
602
572
|
}));
|
|
603
573
|
}, [list, onClickMenu, idMenuLast, selectMenu, onClickMenu, onMouseEnter, onMouseLeave, level, onClickJump, jumpIcon]);
|
|
604
574
|
// 计算定位
|
|
605
|
-
|
|
575
|
+
const MenuPopover = () => {
|
|
606
576
|
return jsx("div", Object.assign({
|
|
607
577
|
className: handPopoverClass(),
|
|
608
578
|
style: posStyle
|
|
@@ -610,7 +580,7 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
610
580
|
children: ContentMemo
|
|
611
581
|
}));
|
|
612
582
|
};
|
|
613
|
-
|
|
583
|
+
const MenuPortalMemo = useMemo(() => {
|
|
614
584
|
return jsx(Fragment, {
|
|
615
585
|
children: /*#__PURE__*/createPortal(jsx(MenuPopover, {}), document.getElementsByTagName('body')[0])
|
|
616
586
|
});
|
|
@@ -640,103 +610,76 @@ var MenuItemPopper = function MenuItemPopper(props) {
|
|
|
640
610
|
* @param transform {string}
|
|
641
611
|
* @return {number}
|
|
642
612
|
*/
|
|
643
|
-
|
|
613
|
+
const getTransformY = transform => {
|
|
644
614
|
if (!transform) return 0;
|
|
645
615
|
try {
|
|
646
|
-
|
|
616
|
+
const transformY = transform.match(/translate3d\((.*)px, (.*)px, (.*)px\)/);
|
|
647
617
|
return Number(transformY && transformY[2]);
|
|
648
618
|
} catch (e) {}
|
|
649
619
|
return 0;
|
|
650
620
|
};
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
expansion =
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
onClickJump = props.onClickJump,
|
|
665
|
-
color = props.color;
|
|
621
|
+
const VerticalMenuList = props => {
|
|
622
|
+
const {
|
|
623
|
+
list,
|
|
624
|
+
expansion = true,
|
|
625
|
+
selectMenu = '',
|
|
626
|
+
onClickMenu,
|
|
627
|
+
className,
|
|
628
|
+
shrinkOthers = true,
|
|
629
|
+
size = 'large',
|
|
630
|
+
jumpIcon,
|
|
631
|
+
onClickJump,
|
|
632
|
+
color
|
|
633
|
+
} = props;
|
|
666
634
|
// const classes: any = useStyles(props);
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
openChild = _useState16[0],
|
|
674
|
-
setOpenChild = _useState16[1]; // 侧边展开子菜单
|
|
675
|
-
var _useState17 = useState(null),
|
|
676
|
-
_useState18 = _slicedToArray(_useState17, 2),
|
|
677
|
-
openChildIndex = _useState18[0],
|
|
678
|
-
setOpenChildIndex = _useState18[1]; // 侧边菜单第几项
|
|
679
|
-
var _useState19 = useState(''),
|
|
680
|
-
_useState20 = _slicedToArray(_useState19, 2),
|
|
681
|
-
childPos = _useState20[0],
|
|
682
|
-
setChildPos = _useState20[1]; // 侧边子菜单定位
|
|
683
|
-
var _useState21 = useState([]),
|
|
684
|
-
_useState22 = _slicedToArray(_useState21, 2),
|
|
685
|
-
childList = _useState22[0],
|
|
686
|
-
setChildList = _useState22[1]; // 侧边子菜单数据
|
|
687
|
-
var _useState23 = useState(''),
|
|
688
|
-
_useState24 = _slicedToArray(_useState23, 2),
|
|
689
|
-
selectMenuCom = _useState24[0],
|
|
690
|
-
setSelectMenuCom = _useState24[1]; // 当前选中菜单id
|
|
635
|
+
const [listCom, setListCom] = useState([]); // 菜单数据
|
|
636
|
+
const [openChild, setOpenChild] = useState(false); // 侧边展开子菜单
|
|
637
|
+
const [openChildIndex, setOpenChildIndex] = useState(null); // 侧边菜单第几项
|
|
638
|
+
const [childPos, setChildPos] = useState(''); // 侧边子菜单定位
|
|
639
|
+
const [childList, setChildList] = useState([]); // 侧边子菜单数据
|
|
640
|
+
const [selectMenuCom, setSelectMenuCom] = useState(''); // 当前选中菜单id
|
|
691
641
|
//const [jsonMenu, setJsonMenu] = useState<any>({}); // 菜单map
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
flipDisable = _useState28[0],
|
|
702
|
-
setFlipDisable = _useState28[1];
|
|
703
|
-
var _useState29 = useState({}),
|
|
704
|
-
_useState30 = _slicedToArray(_useState29, 1),
|
|
705
|
-
timerJson = _useState30[0];
|
|
706
|
-
var listRef = React__default.useRef();
|
|
707
|
-
useEffect(function () {
|
|
708
|
-
return function () {
|
|
642
|
+
const [idMenuLast, setIdMenuLast] = useState({}); // 最后一级菜单所有层级id
|
|
643
|
+
const [flipDisable, setFlipDisable] = useState({
|
|
644
|
+
prev: false,
|
|
645
|
+
next: false
|
|
646
|
+
});
|
|
647
|
+
const [timerJson] = useState({});
|
|
648
|
+
const listRef = React__default.useRef();
|
|
649
|
+
useEffect(() => {
|
|
650
|
+
return () => {
|
|
709
651
|
// 防止组件销毁设置元素报错
|
|
710
652
|
clearTimeout(timerJson.arrowTimer);
|
|
711
653
|
clearTimeout(timerJson.leaveTimer);
|
|
712
654
|
clearTimeout(timerJson.enterTimer);
|
|
713
655
|
};
|
|
714
656
|
}, []);
|
|
715
|
-
useEffect(
|
|
657
|
+
useEffect(() => {
|
|
716
658
|
// 浅拷贝一层,防止数据外部使用用了同一份数据,导致收缩的时候定位错误
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
for (
|
|
720
|
-
|
|
659
|
+
const listArr = list || [];
|
|
660
|
+
const arr = [];
|
|
661
|
+
for (let i = 0, l = listArr.length; i < l; i++) {
|
|
662
|
+
const item = listArr[i];
|
|
721
663
|
arr.push(Object.assign({}, item));
|
|
722
664
|
}
|
|
723
665
|
handList(arr);
|
|
724
666
|
}, [list]);
|
|
725
|
-
useEffect(
|
|
667
|
+
useEffect(() => {
|
|
726
668
|
isShowArrow();
|
|
727
669
|
}, [listCom]);
|
|
728
|
-
useEffect(
|
|
670
|
+
useEffect(() => {
|
|
729
671
|
if (selectMenu !== selectMenuCom) setSelectMenuCom(selectMenu);
|
|
730
672
|
isShowArrow();
|
|
731
673
|
}, [selectMenu]);
|
|
732
674
|
/** 初始化判断是否显示箭头 */
|
|
733
|
-
|
|
675
|
+
const isShowArrow = () => {
|
|
734
676
|
clearTimeout(timerJson.arrowTimer);
|
|
735
|
-
timerJson.arrowTimer = setTimeout(
|
|
736
|
-
|
|
737
|
-
min
|
|
738
|
-
max
|
|
739
|
-
|
|
677
|
+
timerJson.arrowTimer = setTimeout(() => {
|
|
678
|
+
const {
|
|
679
|
+
min,
|
|
680
|
+
max
|
|
681
|
+
} = getLimit();
|
|
682
|
+
const y = getTransformY(listRef.current.style.transform);
|
|
740
683
|
setFlipDisable({
|
|
741
684
|
prev: y !== min,
|
|
742
685
|
next: y > max
|
|
@@ -747,10 +690,12 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
747
690
|
* 鼠标滚动应用列表
|
|
748
691
|
* @param e 元素
|
|
749
692
|
*/
|
|
750
|
-
|
|
693
|
+
const handleScroll = e => {
|
|
751
694
|
listRef.current.style.transition = 'none';
|
|
752
|
-
|
|
753
|
-
|
|
695
|
+
const {
|
|
696
|
+
deltaY
|
|
697
|
+
} = e;
|
|
698
|
+
let y = getTransformY(listRef.current.style.transform);
|
|
754
699
|
y -= deltaY;
|
|
755
700
|
setTransform(y);
|
|
756
701
|
};
|
|
@@ -758,29 +703,28 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
758
703
|
* 翻页点击
|
|
759
704
|
* @param type {'prev' | 'next'} 点击类型
|
|
760
705
|
*/
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
764
|
-
|
|
765
|
-
|
|
766
|
-
|
|
767
|
-
|
|
768
|
-
|
|
769
|
-
|
|
770
|
-
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
setTransform(y);
|
|
774
|
-
};
|
|
706
|
+
const flip = type => () => {
|
|
707
|
+
const height = 100;
|
|
708
|
+
let y = getTransformY(listRef.current.style.transform);
|
|
709
|
+
switch (type) {
|
|
710
|
+
case 'next':
|
|
711
|
+
y -= height;
|
|
712
|
+
break;
|
|
713
|
+
case 'prev':
|
|
714
|
+
y += height;
|
|
715
|
+
break;
|
|
716
|
+
}
|
|
717
|
+
setTransform(y);
|
|
775
718
|
};
|
|
776
719
|
/**
|
|
777
720
|
* 设置上下平移
|
|
778
721
|
* @param y {number} 滚动距离
|
|
779
722
|
*/
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
min
|
|
783
|
-
max
|
|
723
|
+
const setTransform = y => {
|
|
724
|
+
const {
|
|
725
|
+
min,
|
|
726
|
+
max
|
|
727
|
+
} = getLimit();
|
|
784
728
|
if (y > min) y = min;
|
|
785
729
|
if (y < max) y = max;
|
|
786
730
|
setFlipDisable({
|
|
@@ -794,34 +738,34 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
794
738
|
* 返回滚动限制
|
|
795
739
|
* @return {object} 滚动限制
|
|
796
740
|
*/
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
800
|
-
|
|
741
|
+
const getLimit = () => {
|
|
742
|
+
const parentHeight = listRef.current.parentNode.getBoundingClientRect().height;
|
|
743
|
+
const min = 0;
|
|
744
|
+
let max = -(listRef.current.getBoundingClientRect().height - parentHeight);
|
|
801
745
|
if (parentHeight > listRef.current.getBoundingClientRect().height) {
|
|
802
746
|
max = 0;
|
|
803
747
|
}
|
|
804
748
|
return {
|
|
805
|
-
min
|
|
806
|
-
max
|
|
749
|
+
min,
|
|
750
|
+
max
|
|
807
751
|
};
|
|
808
752
|
};
|
|
809
753
|
/**
|
|
810
754
|
* 处理菜单数据
|
|
811
755
|
* @param dataArr {MenuChildrenProps} 菜单数据
|
|
812
756
|
*/
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
for (
|
|
818
|
-
|
|
819
|
-
|
|
757
|
+
const handList = dataArr => {
|
|
758
|
+
const idMap = {}; // 所有id,层级map
|
|
759
|
+
const idMapLast = {}; // 最后一层菜单,层级map
|
|
760
|
+
const recurrenceFunc = (daraChildArr, parent) => {
|
|
761
|
+
for (let i = 0, l = daraChildArr.length; i < l; i++) {
|
|
762
|
+
const item = daraChildArr[i];
|
|
763
|
+
const path = item.path;
|
|
820
764
|
item._paraui_menu_id = "_paraui_menu_id_".concat(UUID()); // 设置唯一id
|
|
821
765
|
if (parent) {
|
|
822
|
-
|
|
766
|
+
const idList = DeepClone(idMap[parent.path] || []);
|
|
823
767
|
idList.push(path);
|
|
824
|
-
idMap[path] =
|
|
768
|
+
idMap[path] = [...idList];
|
|
825
769
|
} else {
|
|
826
770
|
// 不存在parent,第一级
|
|
827
771
|
idMap[path] = [path];
|
|
@@ -845,52 +789,48 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
845
789
|
* @param index {number} 移入当前项下标
|
|
846
790
|
* @param e 当前元素
|
|
847
791
|
*/
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
timerJson.
|
|
853
|
-
|
|
854
|
-
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
|
|
862
|
-
});
|
|
863
|
-
};
|
|
792
|
+
const mouseEnterShrinkFunc = (item, index) => e => {
|
|
793
|
+
setOpenChild(false);
|
|
794
|
+
clearTimeout(timerJson.enterTimer);
|
|
795
|
+
timerJson.enterTimer = setTimeout(() => {
|
|
796
|
+
clearTimeout(timerJson.leaveTimer);
|
|
797
|
+
let childListHand = [item];
|
|
798
|
+
if (item.children && item.children.length > 0) {
|
|
799
|
+
childListHand = item.children;
|
|
800
|
+
}
|
|
801
|
+
setOpenChildIndex(index);
|
|
802
|
+
setChildPos(e.target.getAttribute('data-menu-id'));
|
|
803
|
+
setChildList(childListHand);
|
|
804
|
+
setOpenChild(true);
|
|
805
|
+
});
|
|
864
806
|
};
|
|
865
807
|
/**
|
|
866
808
|
* 鼠标移出收缩
|
|
867
809
|
* @param item {MenuChildrenProps} 移出当前项参数
|
|
868
810
|
* @param e 当前元素
|
|
869
811
|
*/
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
leaveFunc();
|
|
873
|
-
};
|
|
812
|
+
const mouseLeaveShrinkFunc = item => e => {
|
|
813
|
+
leaveFunc();
|
|
874
814
|
};
|
|
875
815
|
/** 移出事件 */
|
|
876
|
-
|
|
816
|
+
const leaveFunc = () => {
|
|
877
817
|
clearTimeout(timerJson.leaveTimer);
|
|
878
|
-
timerJson.leaveTimer = setTimeout(
|
|
818
|
+
timerJson.leaveTimer = setTimeout(() => {
|
|
879
819
|
closeShrink();
|
|
880
820
|
}, 50);
|
|
881
821
|
};
|
|
882
822
|
/** 移入子菜单 */
|
|
883
|
-
|
|
823
|
+
const onMouseEnterChild = () => {
|
|
884
824
|
clearTimeout(timerJson.leaveTimer);
|
|
885
825
|
};
|
|
886
826
|
/** 移出子菜单 */
|
|
887
|
-
|
|
827
|
+
const onMouseLeaveChild = () => {
|
|
888
828
|
leaveFunc();
|
|
889
829
|
};
|
|
890
830
|
/**
|
|
891
831
|
* 关闭收缩弹窗
|
|
892
832
|
* */
|
|
893
|
-
|
|
833
|
+
const closeShrink = () => {
|
|
894
834
|
setOpenChild(false);
|
|
895
835
|
setChildPos('');
|
|
896
836
|
setChildList([]);
|
|
@@ -901,11 +841,13 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
901
841
|
* @param item {MenuChildrenProps} 当前项参数
|
|
902
842
|
* @return {ReactNode}
|
|
903
843
|
*/
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
844
|
+
const handShrink = item => {
|
|
845
|
+
const {
|
|
846
|
+
icon,
|
|
847
|
+
label
|
|
848
|
+
} = item;
|
|
907
849
|
if (icon) {
|
|
908
|
-
|
|
850
|
+
const iconCom = iconList[icon];
|
|
909
851
|
if (iconCom) return iconCom();
|
|
910
852
|
return icon;
|
|
911
853
|
}
|
|
@@ -918,7 +860,7 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
918
860
|
/**
|
|
919
861
|
* 处理数量
|
|
920
862
|
* */
|
|
921
|
-
|
|
863
|
+
const handBadge = item => {
|
|
922
864
|
if (item.badge !== undefined) {
|
|
923
865
|
return jsx("div", Object.assign({
|
|
924
866
|
className: 'menu-item-shrink-badge'
|
|
@@ -932,26 +874,24 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
932
874
|
/**
|
|
933
875
|
* 点击收缩菜单时候的按钮
|
|
934
876
|
* */
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
e.preventDefault();
|
|
943
|
-
};
|
|
877
|
+
const clickShrinkMenu = item => e => {
|
|
878
|
+
if (!item.children || item.children.length === 0) {
|
|
879
|
+
const handItem = Object.assign({}, item);
|
|
880
|
+
delete handItem._paraui_menu_id;
|
|
881
|
+
onClickMenu && onClickMenu(handItem);
|
|
882
|
+
}
|
|
883
|
+
e.preventDefault();
|
|
944
884
|
};
|
|
945
885
|
/**
|
|
946
886
|
* 点击菜单
|
|
947
887
|
* @param item {MenuChildrenProps | false} 当前项参数
|
|
948
888
|
*/
|
|
949
|
-
|
|
889
|
+
const clickMenu = item => {
|
|
950
890
|
if (item === false) {
|
|
951
891
|
return isShowArrow();
|
|
952
892
|
}
|
|
953
893
|
closeShrink();
|
|
954
|
-
|
|
894
|
+
const handItem = Object.assign({}, item);
|
|
955
895
|
delete handItem._paraui_menu_id;
|
|
956
896
|
onClickMenu && onClickMenu(handItem);
|
|
957
897
|
};
|
|
@@ -961,9 +901,9 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
961
901
|
* @param index {number} 下标
|
|
962
902
|
* @return {string} 返回图标元素
|
|
963
903
|
*/
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
904
|
+
const handShrinkClass = (item, index) => {
|
|
905
|
+
let str = 'vertical-menu-list-item-shrink';
|
|
906
|
+
const selectMenuLast = idMenuLast[selectMenuCom]; // 当前选中菜单的 所有上下级 一条线
|
|
967
907
|
if (selectMenuLast && selectMenuLast.indexOf(item.path) !== -1) str += ' vertical-menu-list-item-shrink-select';
|
|
968
908
|
if (openChildIndex === index) str += ' vertical-menu-list-item-shrink-hover';
|
|
969
909
|
return str;
|
|
@@ -972,15 +912,15 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
972
912
|
* 处理class
|
|
973
913
|
* @return {string} class名
|
|
974
914
|
*/
|
|
975
|
-
|
|
976
|
-
|
|
915
|
+
const handClass = () => {
|
|
916
|
+
let str = 'vertical-menu-list';
|
|
977
917
|
if (className) str += " ".concat(className);
|
|
978
918
|
return str;
|
|
979
919
|
};
|
|
980
920
|
/** 展开memo */
|
|
981
|
-
|
|
921
|
+
const ExpansionMemo = useMemo(() => {
|
|
982
922
|
if (expansion) {
|
|
983
|
-
return listCom.map(
|
|
923
|
+
return listCom.map((item, index) => {
|
|
984
924
|
return /*#__PURE__*/createElement(VerticalMenuListItem, Object.assign({}, item, {
|
|
985
925
|
key: index,
|
|
986
926
|
level: 1,
|
|
@@ -995,16 +935,25 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
995
935
|
}
|
|
996
936
|
}, [expansion, listCom, idMenuLast, selectMenuCom, onClickMenu, shrinkOthers, jumpIcon, onClickJump]);
|
|
997
937
|
/** 收缩memo */
|
|
998
|
-
|
|
938
|
+
const ShrinkMemo = useMemo(() => {
|
|
999
939
|
if (expansion) return null;
|
|
1000
|
-
return listCom.map(
|
|
1001
|
-
|
|
940
|
+
return listCom.map((item, index) => {
|
|
941
|
+
const Ele = handMenuEle(item.children);
|
|
942
|
+
// 收缩态只剩图标,label 必须以 aria-label/title 暴露:否则可访问性树里是一排
|
|
943
|
+
// 无名 img,屏幕阅读器与 UI 自动化(getByRole name 定位)都无法识别菜单项。
|
|
944
|
+
// 有子级时 Ele 是 div,裸 div 的 aria-label 不进可访问性树,需要 role="button"
|
|
945
|
+
// (该节点本就挂着 onClick,语义成立);叶子是 a 标签,天然 link role。
|
|
946
|
+
const shrinkLabel = typeof item.label === 'string' ? item.label : undefined;
|
|
947
|
+
const shrinkRole = Ele === 'div' ? 'button' : undefined;
|
|
1002
948
|
return jsx(Ele, Object.assign({
|
|
1003
949
|
className: handShrinkClass(item, index),
|
|
1004
950
|
onMouseEnter: mouseEnterShrinkFunc(item, index),
|
|
1005
951
|
onMouseLeave: mouseLeaveShrinkFunc(),
|
|
1006
952
|
"data-menu-id": item._paraui_menu_id,
|
|
1007
|
-
onClick: clickShrinkMenu(item)
|
|
953
|
+
onClick: clickShrinkMenu(item),
|
|
954
|
+
role: shrinkRole,
|
|
955
|
+
"aria-label": shrinkLabel,
|
|
956
|
+
title: shrinkLabel
|
|
1008
957
|
}, handHref(item.children, item.path, item.href), {
|
|
1009
958
|
children: jsxs("span", Object.assign({
|
|
1010
959
|
className: 'vertical-menu-list-item-shrink-content'
|
|
@@ -1015,7 +964,7 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
1015
964
|
});
|
|
1016
965
|
}, [expansion, listCom, idMenuLast, selectMenuCom, openChildIndex]);
|
|
1017
966
|
/** 向上翻页 */
|
|
1018
|
-
|
|
967
|
+
const PrevScroll = useMemo(() => {
|
|
1019
968
|
return jsx(Fragment, {
|
|
1020
969
|
children: flipDisable.prev && jsx("div", Object.assign({
|
|
1021
970
|
className: "scroll-top"
|
|
@@ -1029,7 +978,7 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
1029
978
|
});
|
|
1030
979
|
}, [flipDisable]);
|
|
1031
980
|
/** 向下翻页 */
|
|
1032
|
-
|
|
981
|
+
const NextScroll = useMemo(() => {
|
|
1033
982
|
return jsx(Fragment, {
|
|
1034
983
|
children: flipDisable.next && jsx("div", Object.assign({
|
|
1035
984
|
className: "scroll-bottom"
|
|
@@ -1043,7 +992,7 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
1043
992
|
});
|
|
1044
993
|
}, [flipDisable]);
|
|
1045
994
|
/** 收缩弹出框菜单 */
|
|
1046
|
-
|
|
995
|
+
const MenuItemPopperMemo = useMemo(() => {
|
|
1047
996
|
return jsx(Fragment, {
|
|
1048
997
|
children: openChild && jsx(MenuItemPopper, {
|
|
1049
998
|
open: openChild,
|
|
@@ -1065,9 +1014,7 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
1065
1014
|
return jsxs(Fragment, {
|
|
1066
1015
|
children: [jsxs("div", Object.assign({
|
|
1067
1016
|
className: handClass(),
|
|
1068
|
-
onWheel:
|
|
1069
|
-
return handleScroll(e);
|
|
1070
|
-
}
|
|
1017
|
+
onWheel: e => handleScroll(e)
|
|
1071
1018
|
}, {
|
|
1072
1019
|
children: [PrevScroll, jsx("div", Object.assign({
|
|
1073
1020
|
className: "vertical-menu-list-box"
|
|
@@ -1083,28 +1030,29 @@ var VerticalMenuList = function VerticalMenuList(props) {
|
|
|
1083
1030
|
});
|
|
1084
1031
|
};
|
|
1085
1032
|
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
expansion =
|
|
1089
|
-
expandIcon
|
|
1090
|
-
shrinkIcon
|
|
1091
|
-
customizeContent
|
|
1092
|
-
clickExpansion
|
|
1093
|
-
version
|
|
1094
|
-
render
|
|
1095
|
-
className
|
|
1033
|
+
const FooterExpansion = props => {
|
|
1034
|
+
const {
|
|
1035
|
+
expansion = true,
|
|
1036
|
+
expandIcon,
|
|
1037
|
+
shrinkIcon,
|
|
1038
|
+
customizeContent,
|
|
1039
|
+
clickExpansion,
|
|
1040
|
+
version,
|
|
1041
|
+
render,
|
|
1042
|
+
className
|
|
1043
|
+
} = props;
|
|
1096
1044
|
/** 点击展开/收起按钮 */
|
|
1097
|
-
|
|
1045
|
+
const clickExpansionCom = () => {
|
|
1098
1046
|
clickExpansion && clickExpansion(!expansion);
|
|
1099
1047
|
};
|
|
1100
1048
|
/**
|
|
1101
1049
|
* 处理内容
|
|
1102
1050
|
* @return {ReactNode}
|
|
1103
1051
|
*/
|
|
1104
|
-
|
|
1052
|
+
const handContent = () => {
|
|
1105
1053
|
if (render) return render;
|
|
1106
1054
|
if (customizeContent) return customizeContent;
|
|
1107
|
-
|
|
1055
|
+
const handIcon = () => {
|
|
1108
1056
|
if (expansion) {
|
|
1109
1057
|
if (expandIcon) return expandIcon;
|
|
1110
1058
|
return jsx("span", Object.assign({
|
|
@@ -1134,8 +1082,8 @@ var FooterExpansion = function FooterExpansion(props) {
|
|
|
1134
1082
|
});
|
|
1135
1083
|
};
|
|
1136
1084
|
// 处理className
|
|
1137
|
-
|
|
1138
|
-
|
|
1085
|
+
const handClass = () => {
|
|
1086
|
+
let str = 'footer-expansion';
|
|
1139
1087
|
if (className) str += " ".concat(className);
|
|
1140
1088
|
if (!expansion) str += ' footer-expansion-shrink';
|
|
1141
1089
|
return str;
|