1 | function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
2 |
|
3 | function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
4 |
|
5 | function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
|
6 |
|
7 | function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
8 |
|
9 | function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
10 |
|
11 | function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
12 |
|
13 | function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
14 |
|
15 | function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
16 |
|
17 | function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
18 |
|
19 | function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
20 |
|
21 | import "core-js/modules/es.object.to-string.js";
|
22 | import "core-js/modules/es.array.iterator.js";
|
23 | import "core-js/modules/web.dom-collections.iterator.js";
|
24 | import "core-js/modules/es.array.map.js";
|
25 | import "core-js/modules/es.string.search.js";
|
26 | import "core-js/modules/es.regexp.exec.js";
|
27 | import "core-js/modules/es.array.filter.js";
|
28 | import "core-js/modules/es.object.entries.js";
|
29 | import "core-js/modules/es.array.concat.js";
|
30 | import "core-js/modules/es.symbol.js";
|
31 | import "core-js/modules/es.symbol.description.js";
|
32 | import "core-js/modules/es.symbol.iterator.js";
|
33 | import "core-js/modules/es.string.iterator.js";
|
34 | import "core-js/modules/es.array.slice.js";
|
35 | import "core-js/modules/es.function.name.js";
|
36 | import "core-js/modules/es.array.from.js";
|
37 | import React, { useMemo } from 'react';
|
38 | import { Badge } from '@storybook/components';
|
39 | import { styled, useTheme } from '@storybook/theming';
|
40 | import { shortcutToHumanString } from '@storybook/api/shortcut';
|
41 | import { MenuItemIcon } from '../components/sidebar/Menu';
|
42 | var focusableUIElements = {
|
43 | storySearchField: 'storybook-explorer-searchfield',
|
44 | storyListMenu: 'storybook-explorer-menu',
|
45 | storyPanelRoot: 'storybook-panel-root'
|
46 | };
|
47 | var Key = styled.code(function (_ref) {
|
48 | var theme = _ref.theme;
|
49 | return {
|
50 | width: 16,
|
51 | height: 16,
|
52 | lineHeight: '17px',
|
53 | textAlign: 'center',
|
54 | fontSize: '11px',
|
55 | background: 'rgba(0,0,0,0.07)',
|
56 | color: theme.color.defaultText,
|
57 | borderRadius: 2,
|
58 | userSelect: 'none',
|
59 | pointerEvents: 'none',
|
60 | '& + &': {
|
61 | marginLeft: 2
|
62 | }
|
63 | };
|
64 | });
|
65 |
|
66 | var Shortcut = function Shortcut(_ref2) {
|
67 | var keys = _ref2.keys;
|
68 | return React.createElement(React.Fragment, null, keys.map(function (key, index) {
|
69 | return (
|
70 |
|
71 |
|
72 | React.createElement(Key, {
|
73 | key: index
|
74 | }, shortcutToHumanString([key]))
|
75 | );
|
76 | }));
|
77 | };
|
78 |
|
79 | export var useMenu = function useMenu(api, isToolshown, isFullscreen, showPanel, showNav, enableShortcuts) {
|
80 | var theme = useTheme();
|
81 | var shortcutKeys = api.getShortcutKeys();
|
82 | var about = useMemo(function () {
|
83 | return {
|
84 | id: 'about',
|
85 | title: 'About your Storybook',
|
86 | onClick: function onClick() {
|
87 | return api.navigateToSettingsPage('/settings/about');
|
88 | },
|
89 | right: api.versionUpdateAvailable() && React.createElement(Badge, {
|
90 | status: "positive"
|
91 | }, "Update"),
|
92 | left: React.createElement(MenuItemIcon, null)
|
93 | };
|
94 | }, [api, enableShortcuts, shortcutKeys]);
|
95 | var releaseNotes = useMemo(function () {
|
96 | return {
|
97 | id: 'release-notes',
|
98 | title: 'Release notes',
|
99 | onClick: function onClick() {
|
100 | return api.navigateToSettingsPage('/settings/release-notes');
|
101 | },
|
102 | left: React.createElement(MenuItemIcon, null)
|
103 | };
|
104 | }, [api, enableShortcuts, shortcutKeys]);
|
105 | var shortcuts = useMemo(function () {
|
106 | return {
|
107 | id: 'shortcuts',
|
108 | title: 'Keyboard shortcuts',
|
109 | onClick: function onClick() {
|
110 | return api.navigateToSettingsPage('/settings/shortcuts');
|
111 | },
|
112 | right: enableShortcuts ? React.createElement(Shortcut, {
|
113 | keys: shortcutKeys.shortcutsPage
|
114 | }) : null,
|
115 | left: React.createElement(MenuItemIcon, null),
|
116 | style: {
|
117 | borderBottom: "4px solid ".concat(theme.appBorderColor)
|
118 | }
|
119 | };
|
120 | }, [api, enableShortcuts, shortcutKeys]);
|
121 | var sidebarToggle = useMemo(function () {
|
122 | return {
|
123 | id: 'S',
|
124 | title: 'Show sidebar',
|
125 | onClick: function onClick() {
|
126 | return api.toggleNav();
|
127 | },
|
128 | right: enableShortcuts ? React.createElement(Shortcut, {
|
129 | keys: shortcutKeys.toggleNav
|
130 | }) : null,
|
131 | left: showNav ? React.createElement(MenuItemIcon, {
|
132 | icon: "check"
|
133 | }) : React.createElement(MenuItemIcon, null)
|
134 | };
|
135 | }, [api, enableShortcuts, shortcutKeys, showNav]);
|
136 | var toolbarToogle = useMemo(function () {
|
137 | return {
|
138 | id: 'T',
|
139 | title: 'Show toolbar',
|
140 | onClick: function onClick() {
|
141 | return api.toggleToolbar();
|
142 | },
|
143 | right: enableShortcuts ? React.createElement(Shortcut, {
|
144 | keys: shortcutKeys.toolbar
|
145 | }) : null,
|
146 | left: isToolshown ? React.createElement(MenuItemIcon, {
|
147 | icon: "check"
|
148 | }) : React.createElement(MenuItemIcon, null)
|
149 | };
|
150 | }, [api, enableShortcuts, shortcutKeys, isToolshown]);
|
151 | var addonsToggle = useMemo(function () {
|
152 | return {
|
153 | id: 'A',
|
154 | title: 'Show addons',
|
155 | onClick: function onClick() {
|
156 | return api.togglePanel();
|
157 | },
|
158 | right: enableShortcuts ? React.createElement(Shortcut, {
|
159 | keys: shortcutKeys.togglePanel
|
160 | }) : null,
|
161 | left: showPanel ? React.createElement(MenuItemIcon, {
|
162 | icon: "check"
|
163 | }) : React.createElement(MenuItemIcon, null)
|
164 | };
|
165 | }, [api, enableShortcuts, shortcutKeys, showPanel]);
|
166 | var addonsOrientationToggle = useMemo(function () {
|
167 | return {
|
168 | id: 'D',
|
169 | title: 'Change addons orientation',
|
170 | onClick: function onClick() {
|
171 | return api.togglePanelPosition();
|
172 | },
|
173 | right: enableShortcuts ? React.createElement(Shortcut, {
|
174 | keys: shortcutKeys.panelPosition
|
175 | }) : null,
|
176 | left: React.createElement(MenuItemIcon, null)
|
177 | };
|
178 | }, [api, enableShortcuts, shortcutKeys]);
|
179 | var fullscreenToggle = useMemo(function () {
|
180 | return {
|
181 | id: 'F',
|
182 | title: 'Go full screen',
|
183 | onClick: function onClick() {
|
184 | return api.toggleFullscreen();
|
185 | },
|
186 | right: enableShortcuts ? React.createElement(Shortcut, {
|
187 | keys: shortcutKeys.fullScreen
|
188 | }) : null,
|
189 | left: isFullscreen ? 'check' : React.createElement(MenuItemIcon, null)
|
190 | };
|
191 | }, [api, enableShortcuts, shortcutKeys, isFullscreen]);
|
192 | var searchToggle = useMemo(function () {
|
193 | return {
|
194 | id: '/',
|
195 | title: 'Search',
|
196 | onClick: function onClick() {
|
197 | return api.focusOnUIElement(focusableUIElements.storySearchField);
|
198 | },
|
199 | right: enableShortcuts ? React.createElement(Shortcut, {
|
200 | keys: shortcutKeys.search
|
201 | }) : null,
|
202 | left: React.createElement(MenuItemIcon, null)
|
203 | };
|
204 | }, [api, enableShortcuts, shortcutKeys]);
|
205 | var up = useMemo(function () {
|
206 | return {
|
207 | id: 'up',
|
208 | title: 'Previous component',
|
209 | onClick: function onClick() {
|
210 | return api.jumpToComponent(-1);
|
211 | },
|
212 | right: enableShortcuts ? React.createElement(Shortcut, {
|
213 | keys: shortcutKeys.prevComponent
|
214 | }) : null,
|
215 | left: React.createElement(MenuItemIcon, null)
|
216 | };
|
217 | }, [api, enableShortcuts, shortcutKeys]);
|
218 | var down = useMemo(function () {
|
219 | return {
|
220 | id: 'down',
|
221 | title: 'Next component',
|
222 | onClick: function onClick() {
|
223 | return api.jumpToComponent(1);
|
224 | },
|
225 | right: enableShortcuts ? React.createElement(Shortcut, {
|
226 | keys: shortcutKeys.nextComponent
|
227 | }) : null,
|
228 | left: React.createElement(MenuItemIcon, null)
|
229 | };
|
230 | }, [api, enableShortcuts, shortcutKeys]);
|
231 | var prev = useMemo(function () {
|
232 | return {
|
233 | id: 'prev',
|
234 | title: 'Previous story',
|
235 | onClick: function onClick() {
|
236 | return api.jumpToStory(-1);
|
237 | },
|
238 | right: enableShortcuts ? React.createElement(Shortcut, {
|
239 | keys: shortcutKeys.prevStory
|
240 | }) : null,
|
241 | left: React.createElement(MenuItemIcon, null)
|
242 | };
|
243 | }, [api, enableShortcuts, shortcutKeys]);
|
244 | var next = useMemo(function () {
|
245 | return {
|
246 | id: 'next',
|
247 | title: 'Next story',
|
248 | onClick: function onClick() {
|
249 | return api.jumpToStory(1);
|
250 | },
|
251 | right: enableShortcuts ? React.createElement(Shortcut, {
|
252 | keys: shortcutKeys.nextStory
|
253 | }) : null,
|
254 | left: React.createElement(MenuItemIcon, null)
|
255 | };
|
256 | }, [api, enableShortcuts, shortcutKeys]);
|
257 | var collapse = useMemo(function () {
|
258 | return {
|
259 | id: 'collapse',
|
260 | title: 'Collapse all',
|
261 | onClick: function onClick() {
|
262 | return api.collapseAll();
|
263 | },
|
264 | right: enableShortcuts ? React.createElement(Shortcut, {
|
265 | keys: shortcutKeys.collapseAll
|
266 | }) : null,
|
267 | left: React.createElement(MenuItemIcon, null)
|
268 | };
|
269 | }, [api, enableShortcuts, shortcutKeys]);
|
270 |
|
271 | var getAddonsShortcuts = function getAddonsShortcuts() {
|
272 | var addonsShortcuts = api.getAddonsShortcuts();
|
273 | var keys = shortcutKeys;
|
274 | return Object.entries(addonsShortcuts).filter(function (_ref3) {
|
275 | var _ref4 = _slicedToArray(_ref3, 2),
|
276 | actionName = _ref4[0],
|
277 | showInMenu = _ref4[1].showInMenu;
|
278 |
|
279 | return showInMenu;
|
280 | }).map(function (_ref5) {
|
281 | var _ref6 = _slicedToArray(_ref5, 2),
|
282 | actionName = _ref6[0],
|
283 | _ref6$ = _ref6[1],
|
284 | label = _ref6$.label,
|
285 | action = _ref6$.action;
|
286 |
|
287 | return {
|
288 | id: actionName,
|
289 | title: label,
|
290 | onClick: function onClick() {
|
291 | return action();
|
292 | },
|
293 | right: enableShortcuts ? React.createElement(Shortcut, {
|
294 | keys: keys[actionName]
|
295 | }) : null,
|
296 | left: React.createElement(MenuItemIcon, null)
|
297 | };
|
298 | });
|
299 | };
|
300 |
|
301 | return useMemo(function () {
|
302 | return [about].concat(_toConsumableArray(api.releaseNotesVersion() ? [releaseNotes] : []), [shortcuts, sidebarToggle, toolbarToogle, addonsToggle, addonsOrientationToggle, fullscreenToggle, searchToggle, up, down, prev, next, collapse], _toConsumableArray(getAddonsShortcuts()));
|
303 | }, [about].concat(_toConsumableArray(api.releaseNotesVersion() ? [releaseNotes] : []), [shortcuts, sidebarToggle, toolbarToogle, addonsToggle, addonsOrientationToggle, fullscreenToggle, searchToggle, up, down, prev, next, collapse]));
|
304 | }; |
\ | No newline at end of file |