@elliemae/ds-menu 2.2.0-alpha.4 → 3.0.0-next.2
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/cjs/Menu.js +181 -137
- package/cjs/MenuCombobox.js +53 -67
- package/cjs/MenuContext.js +11 -38
- package/cjs/MenuItems/CheckboxGroup.js +42 -49
- package/cjs/MenuItems/MenuItem.js +163 -116
- package/cjs/MenuItems/MenuItemCheckable.js +108 -77
- package/cjs/MenuItems/MenuItemCheckbox.js +41 -47
- package/cjs/MenuItems/MenuItemRadio.js +38 -50
- package/cjs/MenuItems/RadioGroup.js +39 -48
- package/cjs/MenuItems/SearchableGroup.js +92 -88
- package/cjs/MenuItems/SearchableList.js +95 -92
- package/cjs/MenuItems/SelectionGroup.js +90 -85
- package/cjs/MenuItems/Separator.js +40 -55
- package/cjs/MenuItems/SubMenu.js +160 -143
- package/cjs/MenuItems/menuItemFactory.js +68 -38
- package/cjs/VirtualMenuList.js +39 -69
- package/cjs/index.js +36 -63
- package/cjs/utils/useHeightByAmountOfItems.js +14 -43
- package/esm/Menu.js +149 -91
- package/esm/MenuCombobox.js +45 -38
- package/esm/MenuContext.js +5 -9
- package/esm/MenuItems/CheckboxGroup.js +31 -19
- package/esm/MenuItems/MenuItem.js +148 -84
- package/esm/MenuItems/MenuItemCheckable.js +96 -47
- package/esm/MenuItems/MenuItemCheckbox.js +33 -18
- package/esm/MenuItems/MenuItemRadio.js +28 -20
- package/esm/MenuItems/RadioGroup.js +28 -18
- package/esm/MenuItems/SearchableGroup.js +76 -53
- package/esm/MenuItems/SearchableList.js +82 -59
- package/esm/MenuItems/SelectionGroup.js +78 -54
- package/esm/MenuItems/Separator.js +29 -26
- package/esm/MenuItems/SubMenu.js +140 -107
- package/esm/MenuItems/menuItemFactory.js +60 -10
- package/esm/VirtualMenuList.js +32 -39
- package/esm/index.js +13 -34
- package/esm/utils/useHeightByAmountOfItems.js +11 -13
- package/package.json +11 -19
- package/types/Menu.d.ts +2 -3
- package/types/MenuContext.d.ts +2 -3
- package/types/MenuItems/CheckboxGroup.d.ts +5 -5
- package/types/MenuItems/MenuItem.d.ts +5 -5
- package/types/MenuItems/MenuItemCheckable.d.ts +15 -15
- package/types/MenuItems/MenuItemCheckbox.d.ts +2 -3
- package/types/MenuItems/MenuItemRadio.d.ts +5 -5
- package/types/MenuItems/RadioGroup.d.ts +5 -5
- package/types/MenuItems/SearchableGroup.d.ts +3 -3
- package/types/MenuItems/SearchableList.d.ts +16 -16
- package/types/MenuItems/SelectionGroup.d.ts +16 -16
- package/types/MenuItems/Separator.d.ts +1 -2
- package/types/MenuItems/SubMenu.d.ts +18 -18
- package/types/MenuItems/menuItemFactory.d.ts +3 -2
- package/types/VirtualMenuList.d.ts +1 -3
- package/types/index.d.ts +2 -3
- package/types/utils/useHeightByAmountOfItems.d.ts +1 -3
- package/cjs/Menu.js.map +0 -7
- package/cjs/MenuCombobox.js.map +0 -7
- package/cjs/MenuContext.js.map +0 -7
- package/cjs/MenuExports.js +0 -28
- package/cjs/MenuExports.js.map +0 -7
- package/cjs/MenuItems/CheckboxGroup.js.map +0 -7
- package/cjs/MenuItems/MenuItem.js.map +0 -7
- package/cjs/MenuItems/MenuItemCheckable.js.map +0 -7
- package/cjs/MenuItems/MenuItemCheckbox.js.map +0 -7
- package/cjs/MenuItems/MenuItemRadio.js.map +0 -7
- package/cjs/MenuItems/RadioGroup.js.map +0 -7
- package/cjs/MenuItems/SearchableGroup.js.map +0 -7
- package/cjs/MenuItems/SearchableList.js.map +0 -7
- package/cjs/MenuItems/SelectionGroup.js.map +0 -7
- package/cjs/MenuItems/Separator.js.map +0 -7
- package/cjs/MenuItems/SubMenu.js.map +0 -7
- package/cjs/MenuItems/menuItemFactory.js.map +0 -7
- package/cjs/MenuItems/renderMenuItems.js +0 -53
- package/cjs/MenuItems/renderMenuItems.js.map +0 -7
- package/cjs/VirtualMenuList.js.map +0 -7
- package/cjs/index.js.map +0 -7
- package/cjs/utils/useHeightByAmountOfItems.js.map +0 -7
- package/esm/Menu.js.map +0 -7
- package/esm/MenuCombobox.js.map +0 -7
- package/esm/MenuContext.js.map +0 -7
- package/esm/MenuExports.js +0 -3
- package/esm/MenuExports.js.map +0 -7
- package/esm/MenuItems/CheckboxGroup.js.map +0 -7
- package/esm/MenuItems/MenuItem.js.map +0 -7
- package/esm/MenuItems/MenuItemCheckable.js.map +0 -7
- package/esm/MenuItems/MenuItemCheckbox.js.map +0 -7
- package/esm/MenuItems/MenuItemRadio.js.map +0 -7
- package/esm/MenuItems/RadioGroup.js.map +0 -7
- package/esm/MenuItems/SearchableGroup.js.map +0 -7
- package/esm/MenuItems/SearchableList.js.map +0 -7
- package/esm/MenuItems/SelectionGroup.js.map +0 -7
- package/esm/MenuItems/Separator.js.map +0 -7
- package/esm/MenuItems/SubMenu.js.map +0 -7
- package/esm/MenuItems/menuItemFactory.js.map +0 -7
- package/esm/MenuItems/renderMenuItems.js +0 -24
- package/esm/MenuItems/renderMenuItems.js.map +0 -7
- package/esm/VirtualMenuList.js.map +0 -7
- package/esm/index.js.map +0 -7
- package/esm/utils/useHeightByAmountOfItems.js.map +0 -7
- package/types/MenuExports.d.ts +0 -1
- package/types/MenuItems/renderMenuItems.d.ts +0 -1
package/cjs/MenuItems/SubMenu.js
CHANGED
|
@@ -1,186 +1,203 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
var
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
var
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
});
|
|
34
|
-
|
|
35
|
-
var
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
rightAddonType,
|
|
59
|
-
disabledAddonInactive,
|
|
60
|
-
checkableProps = {},
|
|
61
|
-
customRenderer,
|
|
62
|
-
onClick,
|
|
63
|
-
closeMenu,
|
|
64
|
-
id
|
|
65
|
-
}) => {
|
|
66
|
-
const itemRef = (0, import_react.useRef)(null);
|
|
67
|
-
const focusOnOpen = (0, import_react.useRef)(false);
|
|
68
|
-
const [isAddonHovered, setIsAddonHovered] = (0, import_react.useState)(false);
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
7
|
+
require('core-js/modules/web.dom-collections.iterator.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
11
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
12
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
13
|
+
var React = require('react');
|
|
14
|
+
var reactDesc = require('react-desc');
|
|
15
|
+
var dsIcons = require('@elliemae/ds-icons');
|
|
16
|
+
var FocusGroup = require('@elliemae/ds-shared/FocusGroup');
|
|
17
|
+
var dsHidden = require('@elliemae/ds-hidden');
|
|
18
|
+
var DSButton = require('@elliemae/ds-button');
|
|
19
|
+
var DSPopper = require('@elliemae/ds-popper');
|
|
20
|
+
var styled = require('styled-components');
|
|
21
|
+
var Menu = require('../Menu.js');
|
|
22
|
+
var MenuItem = require('./MenuItem.js');
|
|
23
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
24
|
+
|
|
25
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
26
|
+
|
|
27
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
28
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
29
|
+
var DSButton__default = /*#__PURE__*/_interopDefaultLegacy(DSButton);
|
|
30
|
+
var DSPopper__default = /*#__PURE__*/_interopDefaultLegacy(DSPopper);
|
|
31
|
+
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
|
|
32
|
+
|
|
33
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
34
|
+
|
|
35
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
36
|
+
const ChevronRightComp = /*#__PURE__*/styled__default["default"].div.withConfig({
|
|
37
|
+
componentId: "sc-1qhp1z-0"
|
|
38
|
+
})(["display:flex;justify-content:center;align-items:center;width:28px;"]);
|
|
39
|
+
|
|
40
|
+
function SubMenu(_ref) {
|
|
41
|
+
let {
|
|
42
|
+
noAddon,
|
|
43
|
+
leftAddon = undefined,
|
|
44
|
+
label = undefined,
|
|
45
|
+
interactionType = 'hover',
|
|
46
|
+
children: subitems,
|
|
47
|
+
rightAddonType,
|
|
48
|
+
disabledAddonInactive,
|
|
49
|
+
checkableProps = {},
|
|
50
|
+
customRenderer,
|
|
51
|
+
onClick,
|
|
52
|
+
closeMenu,
|
|
53
|
+
id
|
|
54
|
+
} = _ref;
|
|
55
|
+
const itemRef = React.useRef(null);
|
|
56
|
+
const focusOnOpen = React.useRef(false);
|
|
57
|
+
const [isAddonHovered, setIsAddonHovered] = React.useState(false);
|
|
69
58
|
const {
|
|
70
59
|
visible = false,
|
|
71
60
|
onShow,
|
|
72
61
|
onHide
|
|
73
|
-
} =
|
|
74
|
-
interaction:
|
|
62
|
+
} = dsHidden.useHiddenController(undefined, {
|
|
63
|
+
interaction: 'click'
|
|
75
64
|
});
|
|
76
|
-
const interaction = rightAddonType ===
|
|
77
|
-
const {
|
|
78
|
-
|
|
65
|
+
const interaction = rightAddonType === 'elipsis' ? 'click' : 'hover';
|
|
66
|
+
const {
|
|
67
|
+
focusItemByNode
|
|
68
|
+
} = FocusGroup.useFocusGroupItem(); // todo: create a menu state to handle all related menu things
|
|
69
|
+
|
|
70
|
+
const handleShowSubItemsWithMouse = e => {
|
|
79
71
|
e.stopPropagation();
|
|
80
72
|
onShow();
|
|
81
73
|
focusOnOpen.current = true;
|
|
82
74
|
};
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
75
|
+
|
|
76
|
+
const handleShowWithMouse = e => {
|
|
77
|
+
if (onClick) onClick(e);
|
|
86
78
|
};
|
|
79
|
+
|
|
87
80
|
const handleShowWithMouseHover = () => {
|
|
88
81
|
setIsAddonHovered(true);
|
|
89
82
|
onShow();
|
|
90
83
|
focusOnOpen.current = false;
|
|
91
84
|
};
|
|
85
|
+
|
|
92
86
|
const handleShowWithKeyboard = () => {
|
|
93
87
|
onShow();
|
|
94
88
|
focusOnOpen.current = true;
|
|
95
89
|
};
|
|
96
|
-
|
|
90
|
+
|
|
91
|
+
const handleOnMouseEnter = React.useCallback(() => {
|
|
97
92
|
setIsAddonHovered(true);
|
|
98
93
|
}, []);
|
|
99
|
-
const handleOnMouseLeave =
|
|
94
|
+
const handleOnMouseLeave = React.useCallback(() => {
|
|
100
95
|
setIsAddonHovered(false);
|
|
101
96
|
}, []);
|
|
102
|
-
const hoverHandlers = interaction ===
|
|
97
|
+
const hoverHandlers = interaction === 'hover' ? {
|
|
103
98
|
onMouseEnter: handleShowWithMouseHover,
|
|
104
99
|
onMouseLeave: () => {
|
|
105
100
|
onHide();
|
|
106
101
|
setIsAddonHovered(false);
|
|
107
102
|
}
|
|
108
|
-
} : {
|
|
109
|
-
|
|
103
|
+
} : {
|
|
104
|
+
onClick: handleShowWithMouse
|
|
105
|
+
};
|
|
106
|
+
const rightAddon = rightAddonType === 'elipsis' ? /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
|
|
110
107
|
"aria-label": "vertical-elipsis",
|
|
111
108
|
"data-testid": "vertical-elipsis",
|
|
112
109
|
buttonType: "text",
|
|
113
|
-
leftIcon:
|
|
110
|
+
leftIcon: /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {
|
|
114
111
|
className: "submenu-arrow",
|
|
115
|
-
color: visible || isAddonHovered ? [
|
|
112
|
+
color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
|
|
116
113
|
size: "s"
|
|
117
114
|
}),
|
|
118
|
-
onClick:
|
|
115
|
+
onClick: e => handleShowSubItemsWithMouse(e),
|
|
119
116
|
size: "m",
|
|
120
|
-
variant:
|
|
121
|
-
}) :
|
|
117
|
+
variant: DSButton.BUTTON_VARIANT.DEFAULT
|
|
118
|
+
}) : /*#__PURE__*/_jsx__default["default"](ChevronRightComp, {}, void 0, /*#__PURE__*/_jsx__default["default"](dsIcons.ChevronSmallRight, {
|
|
122
119
|
"data-testid": "chevron-right",
|
|
123
120
|
className: "submenu-arrow",
|
|
124
|
-
color: visible || isAddonHovered ? [
|
|
121
|
+
color: visible || isAddonHovered ? ['brand-primary', 800] : ['neutral', 500],
|
|
125
122
|
size: "sm"
|
|
126
123
|
}));
|
|
127
|
-
return
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
124
|
+
return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
125
|
+
children: /*#__PURE__*/_jsx__default["default"](DSPopper__default["default"], {
|
|
126
|
+
contentComponent: /*#__PURE__*/jsxRuntime.jsx(Menu.Menu, _objectSpread(_objectSpread({
|
|
127
|
+
focusKeyBindings: {
|
|
128
|
+
ArrowLeft: [() => focusItemByNode(itemRef.current), 'exit']
|
|
129
|
+
},
|
|
130
|
+
focusOnOpen: focusOnOpen.current,
|
|
131
|
+
onExitFocusGroup: onHide
|
|
132
|
+
}, hoverHandlers), {}, {
|
|
133
|
+
closeMenu: closeMenu,
|
|
134
|
+
visible: visible,
|
|
135
|
+
children: subitems
|
|
136
|
+
})),
|
|
137
|
+
interactionType: interactionType,
|
|
138
|
+
isOpen: visible,
|
|
139
|
+
onOpen: opening => opening ? onShow() : onHide(),
|
|
140
|
+
placement: "right-start",
|
|
141
|
+
showArrow: false,
|
|
142
|
+
triggerComponent: /*#__PURE__*/jsxRuntime.jsx(MenuItem["default"], _objectSpread(_objectSpread({
|
|
143
|
+
customRenderer: customRenderer,
|
|
144
|
+
disabledAddonInactive: disabledAddonInactive,
|
|
145
|
+
id: id,
|
|
146
|
+
innerRef: itemRef,
|
|
147
|
+
label: label,
|
|
148
|
+
leftAddon: leftAddon,
|
|
149
|
+
noAddon: noAddon,
|
|
150
|
+
onFocus: handleOnMouseEnter,
|
|
151
|
+
onBlur: handleOnMouseLeave,
|
|
152
|
+
onMouseEnter: handleOnMouseEnter,
|
|
153
|
+
onMouseLeave: handleOnMouseLeave
|
|
154
|
+
}, hoverHandlers), {}, {
|
|
155
|
+
onKeyDown: e => {
|
|
156
|
+
if (e.key === 'ArrowRight' || e.key === 'Enter' || e.keyCode === 32) {
|
|
157
|
+
handleShowWithKeyboard();
|
|
158
|
+
}
|
|
159
|
+
},
|
|
160
|
+
rightAddon: rightAddon
|
|
161
|
+
}, checkableProps))
|
|
163
162
|
})
|
|
164
|
-
})
|
|
165
|
-
}
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
|
|
166
166
|
const props = {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
167
|
+
/** dont show addon for submenu */
|
|
168
|
+
noAddon: reactDesc.PropTypes.bool.description('dont show addon for submenu'),
|
|
169
|
+
|
|
170
|
+
/** left addon */
|
|
171
|
+
leftAddon: reactDesc.PropTypes.node.description('left addon'),
|
|
172
|
+
|
|
173
|
+
/** submenu label */
|
|
174
|
+
label: reactDesc.PropTypes.string.description('submenu label'),
|
|
175
|
+
|
|
176
|
+
/** A type indicating how to open/close the tooltip */
|
|
177
|
+
interactionType: reactDesc.PropTypes.oneOf(DSPopper.interactions).description('A type indicating how to open/close the tooltip'),
|
|
178
|
+
|
|
179
|
+
/** sub menu items */
|
|
180
|
+
children: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.array, reactDesc.PropTypes.node]).description('sub menu items'),
|
|
181
|
+
|
|
182
|
+
/** right addon, ellipsis or undefined */
|
|
183
|
+
rightAddonType: reactDesc.PropTypes.oneOf(['ellipsis']).description('right addon, ellipsis or undefined'),
|
|
184
|
+
disabledAddonInactive: reactDesc.PropTypes.bool.description(''),
|
|
185
|
+
|
|
186
|
+
/** props passed to MenuItem component */
|
|
187
|
+
checkableProps: reactDesc.PropTypes.object.description('props passed to MenuItem component'),
|
|
188
|
+
|
|
189
|
+
/** custom renderer for menu item */
|
|
190
|
+
customRenderer: reactDesc.PropTypes.func.description('custom renderer for menu item'),
|
|
191
|
+
|
|
192
|
+
/** on click handler */
|
|
193
|
+
onClick: reactDesc.PropTypes.func.description('on click handler'),
|
|
194
|
+
closeMenu: reactDesc.PropTypes.any.description(''),
|
|
195
|
+
|
|
196
|
+
/** component id */
|
|
197
|
+
id: reactDesc.PropTypes.string.description('component id')
|
|
179
198
|
};
|
|
180
|
-
|
|
181
|
-
(0, import_menuItemFactory.registerMenuItem)("submenu", SubMenu);
|
|
182
|
-
const DSSubMenuWithSchema = (0, import_react_desc.describe)(SubMenu);
|
|
199
|
+
const DSSubMenuWithSchema = reactDesc.describe(SubMenu);
|
|
183
200
|
DSSubMenuWithSchema.propTypes = props;
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
201
|
+
|
|
202
|
+
exports.DSSubMenuWithSchema = DSSubMenuWithSchema;
|
|
203
|
+
exports["default"] = SubMenu;
|
|
@@ -1,41 +1,71 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _defineProperty = require('@babel/runtime/helpers/defineProperty');
|
|
6
|
+
require('core-js/modules/esnext.async-iterator.map.js');
|
|
7
|
+
require('core-js/modules/esnext.iterator.map.js');
|
|
8
|
+
require('core-js/modules/esnext.async-iterator.filter.js');
|
|
9
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
10
|
+
require('core-js/modules/esnext.iterator.filter.js');
|
|
11
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
12
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
13
|
+
var React = require('react');
|
|
14
|
+
var dsUtilities = require('@elliemae/ds-utilities');
|
|
15
|
+
var Separator = require('./Separator.js');
|
|
16
|
+
var MenuItem = require('./MenuItem.js');
|
|
17
|
+
var SubMenu = require('./SubMenu.js');
|
|
18
|
+
var SelectionGroup = require('./SelectionGroup.js');
|
|
19
|
+
var MenuItemCheckbox = require('./MenuItemCheckbox.js');
|
|
20
|
+
var MenuItemRadio = require('./MenuItemRadio.js');
|
|
21
|
+
|
|
22
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
23
|
+
|
|
24
|
+
var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
|
|
25
|
+
|
|
26
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
27
|
+
|
|
28
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
29
|
+
const itemTypes = {
|
|
30
|
+
separator: Separator["default"],
|
|
31
|
+
menuitem: MenuItem["default"],
|
|
32
|
+
radio: MenuItemRadio["default"],
|
|
33
|
+
checkbox: MenuItemCheckbox,
|
|
34
|
+
submenu: SubMenu["default"],
|
|
35
|
+
'selection-group': SelectionGroup["default"]
|
|
11
36
|
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
for (let key of __getOwnPropNames(module2))
|
|
15
|
-
if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
|
|
16
|
-
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return target;
|
|
37
|
+
const fallback = {
|
|
38
|
+
SelectionGroup: 'selection-group'
|
|
19
39
|
};
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
return (module2, temp) => {
|
|
25
|
-
return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
|
|
26
|
-
};
|
|
27
|
-
})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
|
|
28
|
-
var menuItemFactory_exports = {};
|
|
29
|
-
__export(menuItemFactory_exports, {
|
|
30
|
-
menuItemFactory: () => menuItemFactory,
|
|
31
|
-
registerMenuItem: () => registerMenuItem
|
|
32
|
-
});
|
|
33
|
-
var React = __toESM(require("react"));
|
|
34
|
-
const itemTypes = {};
|
|
35
|
-
const menuItemFactory = (type = "", items, defaultItem = itemTypes.menuitem) => {
|
|
40
|
+
function menuItemFactory() {
|
|
41
|
+
let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
|
|
42
|
+
let items = arguments.length > 1 ? arguments[1] : undefined;
|
|
43
|
+
let defaultItem = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : itemTypes.menuitem;
|
|
36
44
|
const itemsObject = items || itemTypes;
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
45
|
+
const parsedType = fallback[type] || type.toLowerCase();
|
|
46
|
+
return itemsObject[parsedType] || defaultItem;
|
|
47
|
+
}
|
|
48
|
+
function renderMenuItems(options) {
|
|
49
|
+
let factory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : menuItemFactory;
|
|
50
|
+
return options.map((option, index) => {
|
|
51
|
+
if (dsUtilities.isFunction(option.renderer)) {
|
|
52
|
+
return option.renderer({
|
|
53
|
+
key: option.id,
|
|
54
|
+
item: option
|
|
55
|
+
});
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
const ItemComponent = factory(option.type);
|
|
59
|
+
const children = option.subItems && renderMenuItems(option.subItems, factory);
|
|
60
|
+
return /*#__PURE__*/React.createElement(ItemComponent, _objectSpread(_objectSpread({}, option), {}, {
|
|
61
|
+
key: option.id || index,
|
|
62
|
+
item: option,
|
|
63
|
+
onClick: null,
|
|
64
|
+
onMouseDown: option.onClick // onClick callback called in onMouseDown due to events order issue
|
|
65
|
+
|
|
66
|
+
}), children);
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
exports.menuItemFactory = menuItemFactory;
|
|
71
|
+
exports.renderMenuItems = renderMenuItems;
|
package/cjs/VirtualMenuList.js
CHANGED
|
@@ -1,78 +1,48 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
var import_react_window = require("react-window");
|
|
36
|
-
var import_useHeightByAmountOfItems = require("./utils/useHeightByAmountOfItems");
|
|
37
|
-
const MenuItem = ({ data, index, style }) => /* @__PURE__ */ import_react.default.createElement("div", {
|
|
38
|
-
key: index,
|
|
39
|
-
style
|
|
40
|
-
}, data && data[index] ? data[index] : "");
|
|
41
|
-
function resolveComputation(items, cb, timeout = 1e3) {
|
|
42
|
-
return () => new Promise((resolve) => {
|
|
43
|
-
const doResolve = (result2) => {
|
|
44
|
-
cb(result2);
|
|
45
|
-
resolve(result2);
|
|
46
|
-
};
|
|
47
|
-
let result = 0;
|
|
48
|
-
const timer = setTimeout(() => doResolve(result), timeout);
|
|
49
|
-
items.forEach((option) => {
|
|
50
|
-
result = option.props.label.length > result ? option.props.label.length : result;
|
|
51
|
-
});
|
|
52
|
-
clearTimeout(timer);
|
|
53
|
-
doResolve(result);
|
|
54
|
-
});
|
|
55
|
-
}
|
|
56
|
-
function VirtualMenuList({
|
|
57
|
-
items,
|
|
58
|
-
itemHeight = 32,
|
|
59
|
-
amountItemsInWindow = 5,
|
|
60
|
-
width,
|
|
61
|
-
height
|
|
62
|
-
}) {
|
|
63
|
-
const computedListHeight = (0, import_useHeightByAmountOfItems.useHeightByAmountOfItems)({
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var _jsx = require('@babel/runtime/helpers/jsx');
|
|
4
|
+
require('core-js/modules/esnext.async-iterator.for-each.js');
|
|
5
|
+
require('core-js/modules/esnext.iterator.constructor.js');
|
|
6
|
+
require('core-js/modules/esnext.iterator.for-each.js');
|
|
7
|
+
require('react');
|
|
8
|
+
var reactWindow = require('react-window');
|
|
9
|
+
var useHeightByAmountOfItems = require('./utils/useHeightByAmountOfItems.js');
|
|
10
|
+
|
|
11
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
|
+
|
|
13
|
+
var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
|
|
14
|
+
|
|
15
|
+
const MenuItem = _ref => {
|
|
16
|
+
let {
|
|
17
|
+
data,
|
|
18
|
+
index,
|
|
19
|
+
style
|
|
20
|
+
} = _ref;
|
|
21
|
+
return /*#__PURE__*/_jsx__default["default"]("div", {
|
|
22
|
+
style: style
|
|
23
|
+
}, index, data && data[index] ? data[index] : '');
|
|
24
|
+
}; // eslint-disable-next-line no-unused-vars
|
|
25
|
+
|
|
26
|
+
function VirtualMenuList(_ref2) {
|
|
27
|
+
let {
|
|
28
|
+
items,
|
|
29
|
+
itemHeight = 32,
|
|
30
|
+
amountItemsInWindow = 5,
|
|
31
|
+
width,
|
|
32
|
+
height
|
|
33
|
+
} = _ref2;
|
|
34
|
+
const computedListHeight = useHeightByAmountOfItems({
|
|
64
35
|
amountItems: amountItemsInWindow,
|
|
65
36
|
itemHeight,
|
|
66
37
|
items
|
|
67
38
|
});
|
|
68
|
-
return
|
|
39
|
+
return /*#__PURE__*/_jsx__default["default"](reactWindow.FixedSizeList, {
|
|
69
40
|
height: height || computedListHeight,
|
|
70
41
|
itemCount: items.length,
|
|
71
42
|
itemData: items,
|
|
72
43
|
itemSize: itemHeight,
|
|
73
|
-
width
|
|
74
|
-
}, MenuItem);
|
|
44
|
+
width: width
|
|
45
|
+
}, void 0, MenuItem);
|
|
75
46
|
}
|
|
76
|
-
|
|
77
|
-
module.exports =
|
|
78
|
-
//# sourceMappingURL=VirtualMenuList.js.map
|
|
47
|
+
|
|
48
|
+
module.exports = VirtualMenuList;
|