@panneau/element-menu 1.0.3-alpha.1 → 1.0.3-alpha.4

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.
Files changed (3) hide show
  1. package/es/index.js +48 -53
  2. package/lib/index.js +52 -57
  3. package/package.json +6 -6
package/es/index.js CHANGED
@@ -2,13 +2,13 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
2
2
  import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
3
3
  import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
4
4
  import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
5
- import React, { useState } from 'react';
6
- import PropTypes$1 from 'prop-types';
7
5
  import classNames from 'classnames';
6
+ import PropTypes$1 from 'prop-types';
7
+ import React, { useState } from 'react';
8
8
  import { PropTypes } from '@panneau/core';
9
- import Link from '@panneau/element-link';
10
- import Label from '@panneau/element-label';
11
9
  import Dropdown from '@panneau/element-dropdown';
10
+ import Label from '@panneau/element-label';
11
+ import Link from '@panneau/element-link';
12
12
 
13
13
  var _excluded = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
14
14
  var propTypes = {
@@ -49,63 +49,58 @@ var defaultProps = {
49
49
  dropdownLinkClassName: null,
50
50
  dropdownAlign: null
51
51
  };
52
-
53
52
  var Menu = function Menu(_ref) {
54
53
  var items = _ref.items,
55
- tagName = _ref.tagName,
56
- itemTagName = _ref.itemTagName,
57
- children = _ref.children,
58
- linkAsItem = _ref.linkAsItem,
59
- className = _ref.className,
60
- itemClassName = _ref.itemClassName,
61
- linkClassName = _ref.linkClassName,
62
- hasSubMenuClassName = _ref.hasSubMenuClassName,
63
- subMenuClassName = _ref.subMenuClassName,
64
- subMenuItemClassName = _ref.subMenuItemClassName,
65
- subMenuLinkClassName = _ref.subMenuLinkClassName,
66
- hasDropdownClassName = _ref.hasDropdownClassName,
67
- dropdownClassName = _ref.dropdownClassName,
68
- dropdownItemClassName = _ref.dropdownItemClassName,
69
- dropdownLinkClassName = _ref.dropdownLinkClassName,
70
- dropdownAlign = _ref.dropdownAlign;
71
-
54
+ tagName = _ref.tagName,
55
+ itemTagName = _ref.itemTagName,
56
+ children = _ref.children,
57
+ linkAsItem = _ref.linkAsItem,
58
+ className = _ref.className,
59
+ itemClassName = _ref.itemClassName,
60
+ linkClassName = _ref.linkClassName,
61
+ hasSubMenuClassName = _ref.hasSubMenuClassName,
62
+ subMenuClassName = _ref.subMenuClassName,
63
+ subMenuItemClassName = _ref.subMenuItemClassName,
64
+ subMenuLinkClassName = _ref.subMenuLinkClassName,
65
+ hasDropdownClassName = _ref.hasDropdownClassName,
66
+ dropdownClassName = _ref.dropdownClassName,
67
+ dropdownItemClassName = _ref.dropdownItemClassName,
68
+ dropdownLinkClassName = _ref.dropdownLinkClassName,
69
+ dropdownAlign = _ref.dropdownAlign;
72
70
  var _useState = useState(items.map(function () {
73
- return false;
74
- })),
75
- _useState2 = _slicedToArray(_useState, 2),
76
- dropdownsVisible = _useState2[0],
77
- setDropdownsVisible = _useState2[1];
78
-
71
+ return false;
72
+ })),
73
+ _useState2 = _slicedToArray(_useState, 2),
74
+ dropdownsVisible = _useState2[0],
75
+ setDropdownsVisible = _useState2[1];
79
76
  var ListComponent = linkAsItem ? 'div' : tagName;
80
77
  return /*#__PURE__*/React.createElement(ListComponent, {
81
78
  className: className
82
79
  }, children !== null ? children : items.map(function (it, index) {
83
80
  var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6, _classNames7;
84
-
85
81
  var id = it.id,
86
- _it$className = it.className,
87
- customClassName = _it$className === void 0 ? null : _it$className,
88
- _it$linkClassName = it.linkClassName,
89
- customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
90
- _it$href = it.href,
91
- href = _it$href === void 0 ? null : _it$href,
92
- label = it.label,
93
- _it$external = it.external,
94
- external = _it$external === void 0 ? false : _it$external,
95
- _it$items = it.items,
96
- subItems = _it$items === void 0 ? null : _it$items,
97
- _it$dropdown = it.dropdown,
98
- dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
99
- _it$active = it.active,
100
- active = _it$active === void 0 ? false : _it$active,
101
- _it$onClick = it.onClick,
102
- customOnClick = _it$onClick === void 0 ? null : _it$onClick,
103
- itemProps = _objectWithoutProperties(it, _excluded);
104
-
82
+ _it$className = it.className,
83
+ customClassName = _it$className === void 0 ? null : _it$className,
84
+ _it$linkClassName = it.linkClassName,
85
+ customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
86
+ _it$href = it.href,
87
+ href = _it$href === void 0 ? null : _it$href,
88
+ label = it.label,
89
+ _it$external = it.external,
90
+ external = _it$external === void 0 ? false : _it$external,
91
+ _it$items = it.items,
92
+ subItems = _it$items === void 0 ? null : _it$items,
93
+ _it$dropdown = it.dropdown,
94
+ dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
95
+ _it$active = it.active,
96
+ active = _it$active === void 0 ? false : _it$active,
97
+ _it$onClick = it.onClick,
98
+ customOnClick = _it$onClick === void 0 ? null : _it$onClick,
99
+ itemProps = _objectWithoutProperties(it, _excluded);
105
100
  var onClickItem = dropdown !== null ? function (e) {
106
101
  e.preventDefault();
102
+ e.stopPropagation();
107
103
  setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [!(dropdownsVisible[index] || false)], _toConsumableArray(dropdownsVisible.slice(index + 1))));
108
-
109
104
  if (customOnClick !== null) {
110
105
  customOnClick(e);
111
106
  }
@@ -114,6 +109,7 @@ var Menu = function Menu(_ref) {
114
109
  setDropdownsVisible([].concat(_toConsumableArray(dropdownsVisible.slice(0, index)), [false], _toConsumableArray(dropdownsVisible.slice(index + 1))));
115
110
  } : null;
116
111
  var ItemComponent = itemTagName;
112
+ var dropdownVisible = dropdownsVisible[index] || false;
117
113
  return linkAsItem ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
118
114
  key: "item-".concat(id || index),
119
115
  onClick: onClickItem,
@@ -128,9 +124,9 @@ var Menu = function Menu(_ref) {
128
124
  dropdown: dropdown !== null,
129
125
  active: active
130
126
  }, _defineProperty(_classNames2, itemClassName, itemClassName !== null), _defineProperty(_classNames2, customClassName, customClassName !== null), _defineProperty(_classNames2, hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), _defineProperty(_classNames2, hasDropdownClassName, subItems !== null && hasDropdownClassName !== null), _classNames2))
131
- }, href !== null ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
127
+ }, href !== null || dropdown !== null ? /*#__PURE__*/React.createElement(Link, Object.assign({}, itemProps, {
132
128
  onClick: onClickItem,
133
- href: href,
129
+ href: href || '#',
134
130
  external: external,
135
131
  className: classNames((_classNames3 = {}, _defineProperty(_classNames3, linkClassName, linkClassName !== null), _defineProperty(_classNames3, 'dropdown-toggle', dropdown !== null), _defineProperty(_classNames3, customLinkClassName, customLinkClassName !== null), _classNames3))
136
132
  }), label) : /*#__PURE__*/React.createElement(Label, itemProps, label), subItems !== null ? /*#__PURE__*/React.createElement(Menu, {
@@ -140,7 +136,7 @@ var Menu = function Menu(_ref) {
140
136
  linkClassName: classNames((_classNames5 = {}, _defineProperty(_classNames5, subMenuLinkClassName, subMenuLinkClassName !== null), _defineProperty(_classNames5, linkClassName, subMenuLinkClassName === null && linkClassName !== null), _classNames5))
141
137
  }) : null, dropdown !== null ? /*#__PURE__*/React.createElement(Dropdown, {
142
138
  items: dropdown,
143
- visible: dropdownsVisible[index] || false,
139
+ visible: dropdownVisible,
144
140
  className: dropdownClassName,
145
141
  itemClassName: classNames((_classNames6 = {}, _defineProperty(_classNames6, dropdownItemClassName, dropdownItemClassName !== null), _defineProperty(_classNames6, itemClassName, dropdownItemClassName === null && itemClassName !== null), _classNames6)),
146
142
  linkClassName: classNames((_classNames7 = {}, _defineProperty(_classNames7, dropdownLinkClassName, dropdownLinkClassName !== null), _defineProperty(_classNames7, linkClassName, dropdownLinkClassName === null && linkClassName !== null), _classNames7)),
@@ -150,7 +146,6 @@ var Menu = function Menu(_ref) {
150
146
  }) : null);
151
147
  }));
152
148
  };
153
-
154
149
  Menu.propTypes = propTypes;
155
150
  Menu.defaultProps = defaultProps;
156
151
 
package/lib/index.js CHANGED
@@ -6,13 +6,13 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
6
6
  var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
7
7
  var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
8
8
  var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
9
- var React = require('react');
10
- var PropTypes = require('prop-types');
11
9
  var classNames = require('classnames');
10
+ var PropTypes = require('prop-types');
11
+ var React = require('react');
12
12
  var core = require('@panneau/core');
13
- var Link = require('@panneau/element-link');
14
- var Label = require('@panneau/element-label');
15
13
  var Dropdown = require('@panneau/element-dropdown');
14
+ var Label = require('@panneau/element-label');
15
+ var Link = require('@panneau/element-link');
16
16
 
17
17
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
18
 
@@ -20,12 +20,12 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
20
20
  var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
21
21
  var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
22
22
  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
23
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
24
- var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
25
23
  var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
26
- var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
27
- var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
24
+ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
25
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
28
26
  var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
27
+ var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
28
+ var Link__default = /*#__PURE__*/_interopDefaultLegacy(Link);
29
29
 
30
30
  var _excluded = ["id", "className", "linkClassName", "href", "label", "external", "items", "dropdown", "active", "onClick"];
31
31
  var propTypes = {
@@ -66,63 +66,58 @@ var defaultProps = {
66
66
  dropdownLinkClassName: null,
67
67
  dropdownAlign: null
68
68
  };
69
-
70
69
  var Menu = function Menu(_ref) {
71
70
  var items = _ref.items,
72
- tagName = _ref.tagName,
73
- itemTagName = _ref.itemTagName,
74
- children = _ref.children,
75
- linkAsItem = _ref.linkAsItem,
76
- className = _ref.className,
77
- itemClassName = _ref.itemClassName,
78
- linkClassName = _ref.linkClassName,
79
- hasSubMenuClassName = _ref.hasSubMenuClassName,
80
- subMenuClassName = _ref.subMenuClassName,
81
- subMenuItemClassName = _ref.subMenuItemClassName,
82
- subMenuLinkClassName = _ref.subMenuLinkClassName,
83
- hasDropdownClassName = _ref.hasDropdownClassName,
84
- dropdownClassName = _ref.dropdownClassName,
85
- dropdownItemClassName = _ref.dropdownItemClassName,
86
- dropdownLinkClassName = _ref.dropdownLinkClassName,
87
- dropdownAlign = _ref.dropdownAlign;
88
-
71
+ tagName = _ref.tagName,
72
+ itemTagName = _ref.itemTagName,
73
+ children = _ref.children,
74
+ linkAsItem = _ref.linkAsItem,
75
+ className = _ref.className,
76
+ itemClassName = _ref.itemClassName,
77
+ linkClassName = _ref.linkClassName,
78
+ hasSubMenuClassName = _ref.hasSubMenuClassName,
79
+ subMenuClassName = _ref.subMenuClassName,
80
+ subMenuItemClassName = _ref.subMenuItemClassName,
81
+ subMenuLinkClassName = _ref.subMenuLinkClassName,
82
+ hasDropdownClassName = _ref.hasDropdownClassName,
83
+ dropdownClassName = _ref.dropdownClassName,
84
+ dropdownItemClassName = _ref.dropdownItemClassName,
85
+ dropdownLinkClassName = _ref.dropdownLinkClassName,
86
+ dropdownAlign = _ref.dropdownAlign;
89
87
  var _useState = React.useState(items.map(function () {
90
- return false;
91
- })),
92
- _useState2 = _slicedToArray__default["default"](_useState, 2),
93
- dropdownsVisible = _useState2[0],
94
- setDropdownsVisible = _useState2[1];
95
-
88
+ return false;
89
+ })),
90
+ _useState2 = _slicedToArray__default["default"](_useState, 2),
91
+ dropdownsVisible = _useState2[0],
92
+ setDropdownsVisible = _useState2[1];
96
93
  var ListComponent = linkAsItem ? 'div' : tagName;
97
94
  return /*#__PURE__*/React__default["default"].createElement(ListComponent, {
98
95
  className: className
99
96
  }, children !== null ? children : items.map(function (it, index) {
100
97
  var _classNames, _classNames2, _classNames3, _classNames4, _classNames5, _classNames6, _classNames7;
101
-
102
98
  var id = it.id,
103
- _it$className = it.className,
104
- customClassName = _it$className === void 0 ? null : _it$className,
105
- _it$linkClassName = it.linkClassName,
106
- customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
107
- _it$href = it.href,
108
- href = _it$href === void 0 ? null : _it$href,
109
- label = it.label,
110
- _it$external = it.external,
111
- external = _it$external === void 0 ? false : _it$external,
112
- _it$items = it.items,
113
- subItems = _it$items === void 0 ? null : _it$items,
114
- _it$dropdown = it.dropdown,
115
- dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
116
- _it$active = it.active,
117
- active = _it$active === void 0 ? false : _it$active,
118
- _it$onClick = it.onClick,
119
- customOnClick = _it$onClick === void 0 ? null : _it$onClick,
120
- itemProps = _objectWithoutProperties__default["default"](it, _excluded);
121
-
99
+ _it$className = it.className,
100
+ customClassName = _it$className === void 0 ? null : _it$className,
101
+ _it$linkClassName = it.linkClassName,
102
+ customLinkClassName = _it$linkClassName === void 0 ? null : _it$linkClassName,
103
+ _it$href = it.href,
104
+ href = _it$href === void 0 ? null : _it$href,
105
+ label = it.label,
106
+ _it$external = it.external,
107
+ external = _it$external === void 0 ? false : _it$external,
108
+ _it$items = it.items,
109
+ subItems = _it$items === void 0 ? null : _it$items,
110
+ _it$dropdown = it.dropdown,
111
+ dropdown = _it$dropdown === void 0 ? null : _it$dropdown,
112
+ _it$active = it.active,
113
+ active = _it$active === void 0 ? false : _it$active,
114
+ _it$onClick = it.onClick,
115
+ customOnClick = _it$onClick === void 0 ? null : _it$onClick,
116
+ itemProps = _objectWithoutProperties__default["default"](it, _excluded);
122
117
  var onClickItem = dropdown !== null ? function (e) {
123
118
  e.preventDefault();
119
+ e.stopPropagation();
124
120
  setDropdownsVisible([].concat(_toConsumableArray__default["default"](dropdownsVisible.slice(0, index)), [!(dropdownsVisible[index] || false)], _toConsumableArray__default["default"](dropdownsVisible.slice(index + 1))));
125
-
126
121
  if (customOnClick !== null) {
127
122
  customOnClick(e);
128
123
  }
@@ -131,6 +126,7 @@ var Menu = function Menu(_ref) {
131
126
  setDropdownsVisible([].concat(_toConsumableArray__default["default"](dropdownsVisible.slice(0, index)), [false], _toConsumableArray__default["default"](dropdownsVisible.slice(index + 1))));
132
127
  } : null;
133
128
  var ItemComponent = itemTagName;
129
+ var dropdownVisible = dropdownsVisible[index] || false;
134
130
  return linkAsItem ? /*#__PURE__*/React__default["default"].createElement(Link__default["default"], Object.assign({}, itemProps, {
135
131
  key: "item-".concat(id || index),
136
132
  onClick: onClickItem,
@@ -145,9 +141,9 @@ var Menu = function Menu(_ref) {
145
141
  dropdown: dropdown !== null,
146
142
  active: active
147
143
  }, _defineProperty__default["default"](_classNames2, itemClassName, itemClassName !== null), _defineProperty__default["default"](_classNames2, customClassName, customClassName !== null), _defineProperty__default["default"](_classNames2, hasSubMenuClassName, subItems !== null && hasSubMenuClassName !== null), _defineProperty__default["default"](_classNames2, hasDropdownClassName, subItems !== null && hasDropdownClassName !== null), _classNames2))
148
- }, href !== null ? /*#__PURE__*/React__default["default"].createElement(Link__default["default"], Object.assign({}, itemProps, {
144
+ }, href !== null || dropdown !== null ? /*#__PURE__*/React__default["default"].createElement(Link__default["default"], Object.assign({}, itemProps, {
149
145
  onClick: onClickItem,
150
- href: href,
146
+ href: href || '#',
151
147
  external: external,
152
148
  className: classNames__default["default"]((_classNames3 = {}, _defineProperty__default["default"](_classNames3, linkClassName, linkClassName !== null), _defineProperty__default["default"](_classNames3, 'dropdown-toggle', dropdown !== null), _defineProperty__default["default"](_classNames3, customLinkClassName, customLinkClassName !== null), _classNames3))
153
149
  }), label) : /*#__PURE__*/React__default["default"].createElement(Label__default["default"], itemProps, label), subItems !== null ? /*#__PURE__*/React__default["default"].createElement(Menu, {
@@ -157,7 +153,7 @@ var Menu = function Menu(_ref) {
157
153
  linkClassName: classNames__default["default"]((_classNames5 = {}, _defineProperty__default["default"](_classNames5, subMenuLinkClassName, subMenuLinkClassName !== null), _defineProperty__default["default"](_classNames5, linkClassName, subMenuLinkClassName === null && linkClassName !== null), _classNames5))
158
154
  }) : null, dropdown !== null ? /*#__PURE__*/React__default["default"].createElement(Dropdown__default["default"], {
159
155
  items: dropdown,
160
- visible: dropdownsVisible[index] || false,
156
+ visible: dropdownVisible,
161
157
  className: dropdownClassName,
162
158
  itemClassName: classNames__default["default"]((_classNames6 = {}, _defineProperty__default["default"](_classNames6, dropdownItemClassName, dropdownItemClassName !== null), _defineProperty__default["default"](_classNames6, itemClassName, dropdownItemClassName === null && itemClassName !== null), _classNames6)),
163
159
  linkClassName: classNames__default["default"]((_classNames7 = {}, _defineProperty__default["default"](_classNames7, dropdownLinkClassName, dropdownLinkClassName !== null), _defineProperty__default["default"](_classNames7, linkClassName, dropdownLinkClassName === null && linkClassName !== null), _classNames7)),
@@ -167,7 +163,6 @@ var Menu = function Menu(_ref) {
167
163
  }) : null);
168
164
  }));
169
165
  };
170
-
171
166
  Menu.propTypes = propTypes;
172
167
  Menu.defaultProps = defaultProps;
173
168
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@panneau/element-menu",
3
- "version": "1.0.3-alpha.1",
3
+ "version": "1.0.3-alpha.4",
4
4
  "description": "Menu element",
5
5
  "keywords": [
6
6
  "javascript"
@@ -54,10 +54,10 @@
54
54
  },
55
55
  "dependencies": {
56
56
  "@babel/runtime": "^7.12.5",
57
- "@panneau/core": "^1.0.3-alpha.1",
58
- "@panneau/element-dropdown": "^1.0.3-alpha.1",
59
- "@panneau/element-label": "^1.0.3-alpha.1",
60
- "@panneau/element-link": "^1.0.3-alpha.1",
57
+ "@panneau/core": "^1.0.3-alpha.4",
58
+ "@panneau/element-dropdown": "^1.0.3-alpha.4",
59
+ "@panneau/element-label": "^1.0.3-alpha.4",
60
+ "@panneau/element-link": "^1.0.3-alpha.4",
61
61
  "classnames": "^2.2.6",
62
62
  "prop-types": "^15.7.2",
63
63
  "react-intl": "^5.15.8||^6.0.0"
@@ -65,5 +65,5 @@
65
65
  "publishConfig": {
66
66
  "access": "public"
67
67
  },
68
- "gitHead": "e04e663c7f1eb692f89a0136f2e8f45024fbe355"
68
+ "gitHead": "00807e99b06d8be2b8a8671ce5c29a2a097b7804"
69
69
  }