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