@panneau/element-menu 4.0.38 → 4.0.40-alpha.1
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 +74 -92
- package/package.json +6 -6
package/dist/index.js
CHANGED
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
import _objectSpread from '@babel/runtime/helpers/objectSpread2';
|
|
2
|
-
import _defineProperty from '@babel/runtime/helpers/defineProperty';
|
|
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,122 +5,109 @@ 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
|
-
className: classNames(
|
|
97
|
-
active
|
|
98
|
-
}
|
|
99
|
-
}
|
|
65
|
+
className: classNames(itemClassName, customClassName, linkClassName, customLinkClassName, [{
|
|
66
|
+
active
|
|
67
|
+
}])
|
|
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,
|
|
110
|
-
className: classNames(
|
|
83
|
+
className: classNames([{
|
|
84
|
+
'dropdown-toggle': dropdown !== null
|
|
85
|
+
}, linkClassName, customLinkClassName]),
|
|
111
86
|
children: label
|
|
112
|
-
})
|
|
87
|
+
}) : /*#__PURE__*/jsx(Label, {
|
|
88
|
+
...itemProps,
|
|
113
89
|
children: label
|
|
114
|
-
})
|
|
90
|
+
}), subItems !== null ? /*#__PURE__*/jsx(Menu, {
|
|
115
91
|
items: subItems,
|
|
116
92
|
className: subMenuClassName,
|
|
117
|
-
itemClassName: classNames(
|
|
118
|
-
|
|
93
|
+
itemClassName: classNames([subMenuItemClassName, {
|
|
94
|
+
[itemClassName]: subMenuItemClassName === null && itemClassName !== null
|
|
95
|
+
}]),
|
|
96
|
+
linkClassName: classNames([subMenuLinkClassName, {
|
|
97
|
+
[linkClassName]: subMenuLinkClassName === null && linkClassName !== null
|
|
98
|
+
}])
|
|
119
99
|
}) : null, dropdown !== null ? /*#__PURE__*/jsx(Dropdown, {
|
|
120
100
|
items: dropdown,
|
|
121
101
|
visible: dropdownVisible,
|
|
122
102
|
className: dropdownClassName,
|
|
123
|
-
itemClassName: classNames(
|
|
103
|
+
itemClassName: classNames([dropdownItemClassName, {
|
|
104
|
+
[itemClassName]: dropdownItemClassName === null && itemClassName !== null
|
|
105
|
+
}]),
|
|
124
106
|
align: dropdownAlign,
|
|
125
107
|
onClickItem: closeDropdown,
|
|
126
108
|
onClickOutside: closeDropdown
|
|
127
109
|
}) : null]
|
|
128
|
-
},
|
|
110
|
+
}, `item-${id || index}`);
|
|
129
111
|
})
|
|
130
112
|
});
|
|
131
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.1",
|
|
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.1",
|
|
64
|
+
"@panneau/element-dropdown": "^4.0.40-alpha.1",
|
|
65
|
+
"@panneau/element-label": "^4.0.40-alpha.1",
|
|
66
|
+
"@panneau/element-link": "^4.0.40-alpha.1",
|
|
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": "66520f92373b3aa371222b354d60ed3cf3d20c96"
|
|
74
74
|
}
|