@panneau/element-menu 4.0.39 → 4.0.40-alpha.3
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/dist/index.js +69 -89
- package/package.json +6 -6
package/dist/index.js
CHANGED
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
2
|
-
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
3
|
-
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
|
|
4
|
-
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
|
|
5
|
-
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
|
|
6
1
|
import classNames from 'classnames';
|
|
7
2
|
import { useState, createElement } from 'react';
|
|
8
3
|
import Dropdown from '@panneau/element-dropdown';
|
|
@@ -10,100 +5,78 @@ import Label from '@panneau/element-label';
|
|
|
10
5
|
import Link from '@panneau/element-link';
|
|
11
6
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
12
7
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
subMenuClassName = _ref$subMenuClassName === void 0 ? null : _ref$subMenuClassName,
|
|
36
|
-
_ref$subMenuItemClass = _ref.subMenuItemClassName,
|
|
37
|
-
subMenuItemClassName = _ref$subMenuItemClass === void 0 ? null : _ref$subMenuItemClass,
|
|
38
|
-
_ref$subMenuLinkClass = _ref.subMenuLinkClassName,
|
|
39
|
-
subMenuLinkClassName = _ref$subMenuLinkClass === void 0 ? null : _ref$subMenuLinkClass,
|
|
40
|
-
_ref$hasDropdownClass = _ref.hasDropdownClassName,
|
|
41
|
-
hasDropdownClassName = _ref$hasDropdownClass === void 0 ? null : _ref$hasDropdownClass,
|
|
42
|
-
_ref$dropdownClassNam = _ref.dropdownClassName,
|
|
43
|
-
dropdownClassName = _ref$dropdownClassNam === void 0 ? null : _ref$dropdownClassNam,
|
|
44
|
-
_ref$dropdownItemClas = _ref.dropdownItemClassName,
|
|
45
|
-
dropdownItemClassName = _ref$dropdownItemClas === void 0 ? null : _ref$dropdownItemClas;
|
|
46
|
-
_ref.dropdownLinkClassName;
|
|
47
|
-
var _ref$dropdownAlign = _ref.dropdownAlign,
|
|
48
|
-
dropdownAlign = _ref$dropdownAlign === void 0 ? null : _ref$dropdownAlign;
|
|
49
|
-
var _useState = useState(items.map(function () {
|
|
50
|
-
return false;
|
|
51
|
-
})),
|
|
52
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
53
|
-
dropdownsVisible = _useState2[0],
|
|
54
|
-
setDropdownsVisible = _useState2[1];
|
|
55
|
-
var ListComponent = linkAsItem ? 'div' : tagName;
|
|
8
|
+
const DEFAULT_ITEMS = [];
|
|
9
|
+
function Menu({
|
|
10
|
+
items = DEFAULT_ITEMS,
|
|
11
|
+
tagName = 'ul',
|
|
12
|
+
itemTagName = 'li',
|
|
13
|
+
children = null,
|
|
14
|
+
linkAsItem = false,
|
|
15
|
+
className = null,
|
|
16
|
+
itemClassName = null,
|
|
17
|
+
linkClassName = null,
|
|
18
|
+
hasSubMenuClassName = null,
|
|
19
|
+
subMenuClassName = null,
|
|
20
|
+
subMenuItemClassName = null,
|
|
21
|
+
subMenuLinkClassName = null,
|
|
22
|
+
hasDropdownClassName = null,
|
|
23
|
+
dropdownClassName = null,
|
|
24
|
+
dropdownItemClassName = null,
|
|
25
|
+
dropdownLinkClassName = null,
|
|
26
|
+
dropdownAlign = null
|
|
27
|
+
}) {
|
|
28
|
+
const [dropdownsVisible, setDropdownsVisible] = useState(items.map(() => false));
|
|
29
|
+
const ListComponent = linkAsItem ? 'div' : tagName;
|
|
56
30
|
return /*#__PURE__*/jsx(ListComponent, {
|
|
57
31
|
className: className,
|
|
58
|
-
children: children !== null ? children : items.map(
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
customClassName =
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
_it$active = it.active,
|
|
74
|
-
active = _it$active === void 0 ? false : _it$active,
|
|
75
|
-
_it$onClick = it.onClick,
|
|
76
|
-
customOnClick = _it$onClick === void 0 ? null : _it$onClick,
|
|
77
|
-
itemProps = _objectWithoutProperties(it, _excluded);
|
|
78
|
-
var onClickItem = dropdown !== null ? function (e) {
|
|
32
|
+
children: children !== null ? children : items.map((it, index) => {
|
|
33
|
+
const {
|
|
34
|
+
id,
|
|
35
|
+
className: customClassName = null,
|
|
36
|
+
linkClassName: customLinkClassName = null,
|
|
37
|
+
href = null,
|
|
38
|
+
label,
|
|
39
|
+
external = false,
|
|
40
|
+
items: subItems = null,
|
|
41
|
+
dropdown = null,
|
|
42
|
+
active = false,
|
|
43
|
+
onClick: customOnClick = null,
|
|
44
|
+
...itemProps
|
|
45
|
+
} = it;
|
|
46
|
+
const onClickItem = dropdown !== null ? e => {
|
|
79
47
|
e.preventDefault();
|
|
80
48
|
e.stopPropagation();
|
|
81
|
-
setDropdownsVisible([
|
|
49
|
+
setDropdownsVisible([...dropdownsVisible.slice(0, index), !(dropdownsVisible[index] || false), ...dropdownsVisible.slice(index + 1)]);
|
|
82
50
|
if (customOnClick !== null) {
|
|
83
51
|
customOnClick(e);
|
|
84
52
|
}
|
|
85
53
|
} : customOnClick;
|
|
86
|
-
|
|
87
|
-
setDropdownsVisible([
|
|
54
|
+
const closeDropdown = dropdown !== null ? () => {
|
|
55
|
+
setDropdownsVisible([...dropdownsVisible.slice(0, index), false, ...dropdownsVisible.slice(index + 1)]);
|
|
88
56
|
} : null;
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
return linkAsItem ? /*#__PURE__*/createElement(Link,
|
|
92
|
-
|
|
57
|
+
const ItemComponent = itemTagName;
|
|
58
|
+
const dropdownVisible = dropdownsVisible[index] || false;
|
|
59
|
+
return linkAsItem ? /*#__PURE__*/createElement(Link, {
|
|
60
|
+
...itemProps,
|
|
61
|
+
key: `item-${id || index}`,
|
|
93
62
|
onClick: onClickItem,
|
|
94
63
|
href: href,
|
|
95
64
|
external: external,
|
|
96
65
|
className: classNames(itemClassName, customClassName, linkClassName, customLinkClassName, [{
|
|
97
|
-
active
|
|
66
|
+
active
|
|
98
67
|
}])
|
|
99
|
-
}
|
|
68
|
+
}, /*#__PURE__*/jsx(Label, {
|
|
69
|
+
...itemProps,
|
|
100
70
|
children: label
|
|
101
|
-
}))
|
|
102
|
-
className: classNames([
|
|
71
|
+
})) : /*#__PURE__*/jsxs(ItemComponent, {
|
|
72
|
+
className: classNames([{
|
|
103
73
|
dropdown: dropdown !== null,
|
|
104
|
-
active
|
|
105
|
-
|
|
106
|
-
|
|
74
|
+
active,
|
|
75
|
+
[hasSubMenuClassName]: subItems !== null && hasSubMenuClassName !== null,
|
|
76
|
+
[hasDropdownClassName]: subItems !== null && hasDropdownClassName !== null
|
|
77
|
+
}, itemClassName, customClassName]),
|
|
78
|
+
children: [href !== null || dropdown !== null ? /*#__PURE__*/jsx(Link, {
|
|
79
|
+
...itemProps,
|
|
107
80
|
onClick: onClickItem,
|
|
108
81
|
href: href || '#',
|
|
109
82
|
external: external,
|
|
@@ -111,23 +84,30 @@ function Menu(_ref) {
|
|
|
111
84
|
'dropdown-toggle': dropdown !== null
|
|
112
85
|
}, linkClassName, customLinkClassName]),
|
|
113
86
|
children: label
|
|
114
|
-
})
|
|
87
|
+
}) : /*#__PURE__*/jsx(Label, {
|
|
88
|
+
...itemProps,
|
|
115
89
|
children: label
|
|
116
|
-
})
|
|
90
|
+
}), subItems !== null ? /*#__PURE__*/jsx(Menu, {
|
|
117
91
|
items: subItems,
|
|
118
92
|
className: subMenuClassName,
|
|
119
|
-
itemClassName: classNames([subMenuItemClassName,
|
|
120
|
-
|
|
93
|
+
itemClassName: classNames([subMenuItemClassName, {
|
|
94
|
+
[itemClassName]: subMenuItemClassName === null && itemClassName !== null
|
|
95
|
+
}]),
|
|
96
|
+
linkClassName: classNames([subMenuLinkClassName, {
|
|
97
|
+
[linkClassName]: subMenuLinkClassName === null && linkClassName !== null
|
|
98
|
+
}])
|
|
121
99
|
}) : null, dropdown !== null ? /*#__PURE__*/jsx(Dropdown, {
|
|
122
100
|
items: dropdown,
|
|
123
101
|
visible: dropdownVisible,
|
|
124
102
|
className: dropdownClassName,
|
|
125
|
-
itemClassName: classNames([dropdownItemClassName,
|
|
103
|
+
itemClassName: classNames([dropdownItemClassName, {
|
|
104
|
+
[itemClassName]: dropdownItemClassName === null && itemClassName !== null
|
|
105
|
+
}]),
|
|
126
106
|
align: dropdownAlign,
|
|
127
107
|
onClickItem: closeDropdown,
|
|
128
108
|
onClickOutside: closeDropdown
|
|
129
109
|
}) : null]
|
|
130
|
-
},
|
|
110
|
+
}, `item-${id || index}`);
|
|
131
111
|
})
|
|
132
112
|
});
|
|
133
113
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@panneau/element-menu",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.40-alpha.3",
|
|
4
4
|
"description": "Menu element",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"javascript"
|
|
@@ -60,15 +60,15 @@
|
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
62
|
"@babel/runtime": "^7.28.6",
|
|
63
|
-
"@panneau/core": "^4.0.
|
|
64
|
-
"@panneau/element-dropdown": "^4.0.
|
|
65
|
-
"@panneau/element-label": "^4.0.
|
|
66
|
-
"@panneau/element-link": "^4.0.
|
|
63
|
+
"@panneau/core": "^4.0.40-alpha.3",
|
|
64
|
+
"@panneau/element-dropdown": "^4.0.40-alpha.3",
|
|
65
|
+
"@panneau/element-label": "^4.0.40-alpha.3",
|
|
66
|
+
"@panneau/element-link": "^4.0.40-alpha.3",
|
|
67
67
|
"classnames": "^2.5.1",
|
|
68
68
|
"react-intl": "^6.0.0 || ^7.0.0 || ^8.0.0 || ^10.0.0"
|
|
69
69
|
},
|
|
70
70
|
"publishConfig": {
|
|
71
71
|
"access": "public"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "1735964a2702ae0480b642225286e4184f36680d"
|
|
74
74
|
}
|