1 | import "core-js/modules/es.symbol.js";
|
2 | import "core-js/modules/es.array.slice.js";
|
3 | import "core-js/modules/es.object.freeze.js";
|
4 |
|
5 | var _templateObject;
|
6 |
|
7 | var _excluded = ["theme", "selectedPanel"];
|
8 |
|
9 | function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
10 |
|
11 | function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
12 |
|
13 | function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
14 |
|
15 | import "core-js/modules/es.object.assign.js";
|
16 | import "core-js/modules/es.object.keys.js";
|
17 | import global from 'global';
|
18 | import pick from 'lodash/pick';
|
19 | import deepEqual from 'fast-deep-equal';
|
20 | import { themes } from '@storybook/theming';
|
21 | import { once } from '@storybook/client-logger';
|
22 | import dedent from 'ts-dedent';
|
23 | import merge from '../lib/merge';
|
24 | var DOCS_MODE = global.DOCS_MODE,
|
25 | document = global.document;
|
26 | export var ActiveTabs = {
|
27 | SIDEBAR: 'sidebar',
|
28 | CANVAS: 'canvas',
|
29 | ADDONS: 'addons'
|
30 | };
|
31 | var defaultState = {
|
32 | ui: {
|
33 | enableShortcuts: true,
|
34 | docsMode: false
|
35 | },
|
36 | layout: {
|
37 | initialActive: ActiveTabs.CANVAS,
|
38 | showToolbar: !DOCS_MODE,
|
39 | isFullscreen: false,
|
40 | showPanel: true,
|
41 | showNav: true,
|
42 | panelPosition: 'bottom',
|
43 | showTabs: true
|
44 | },
|
45 | selectedPanel: undefined,
|
46 | theme: themes.light
|
47 | };
|
48 | export var focusableUIElements = {
|
49 | storySearchField: 'storybook-explorer-searchfield',
|
50 | storyListMenu: 'storybook-explorer-menu',
|
51 | storyPanelRoot: 'storybook-panel-root'
|
52 | };
|
53 | export var init = function init(_ref) {
|
54 | var store = _ref.store,
|
55 | provider = _ref.provider,
|
56 | singleStory = _ref.singleStory;
|
57 | var api = {
|
58 | toggleFullscreen: function toggleFullscreen(toggled) {
|
59 | return store.setState(function (state) {
|
60 | var showNav = state.layout.showNav;
|
61 | var value = typeof toggled === 'boolean' ? toggled : !state.layout.isFullscreen;
|
62 | var shouldShowNav = showNav === false && value === false;
|
63 | return {
|
64 | layout: Object.assign({}, state.layout, {
|
65 | isFullscreen: value,
|
66 | showNav: !singleStory && shouldShowNav ? true : showNav
|
67 | })
|
68 | };
|
69 | }, {
|
70 | persistence: 'session'
|
71 | });
|
72 | },
|
73 | togglePanel: function togglePanel(toggled) {
|
74 | return store.setState(function (state) {
|
75 | var _state$layout = state.layout,
|
76 | showNav = _state$layout.showNav,
|
77 | isFullscreen = _state$layout.isFullscreen;
|
78 | var value = typeof toggled !== 'undefined' ? toggled : !state.layout.showPanel;
|
79 | var shouldToggleFullScreen = showNav === false && value === false;
|
80 | return {
|
81 | layout: Object.assign({}, state.layout, {
|
82 | showPanel: value,
|
83 | isFullscreen: shouldToggleFullScreen ? true : isFullscreen
|
84 | })
|
85 | };
|
86 | }, {
|
87 | persistence: 'session'
|
88 | });
|
89 | },
|
90 | togglePanelPosition: function togglePanelPosition(position) {
|
91 | if (typeof position !== 'undefined') {
|
92 | return store.setState(function (state) {
|
93 | return {
|
94 | layout: Object.assign({}, state.layout, {
|
95 | panelPosition: position
|
96 | })
|
97 | };
|
98 | }, {
|
99 | persistence: 'permanent'
|
100 | });
|
101 | }
|
102 |
|
103 | return store.setState(function (state) {
|
104 | return {
|
105 | layout: Object.assign({}, state.layout, {
|
106 | panelPosition: state.layout.panelPosition === 'right' ? 'bottom' : 'right'
|
107 | })
|
108 | };
|
109 | }, {
|
110 | persistence: 'permanent'
|
111 | });
|
112 | },
|
113 | toggleNav: function toggleNav(toggled) {
|
114 | return store.setState(function (state) {
|
115 | if (singleStory) return {
|
116 | layout: state.layout
|
117 | };
|
118 | var _state$layout2 = state.layout,
|
119 | showPanel = _state$layout2.showPanel,
|
120 | isFullscreen = _state$layout2.isFullscreen;
|
121 | var showNav = typeof toggled !== 'undefined' ? toggled : !state.layout.showNav;
|
122 | var shouldToggleFullScreen = showPanel === false && showNav === false;
|
123 | return {
|
124 | layout: Object.assign({}, state.layout, {
|
125 | showNav: showNav,
|
126 | isFullscreen: shouldToggleFullScreen ? true : !showNav && isFullscreen
|
127 | })
|
128 | };
|
129 | }, {
|
130 | persistence: 'session'
|
131 | });
|
132 | },
|
133 | toggleToolbar: function toggleToolbar(toggled) {
|
134 | return store.setState(function (state) {
|
135 | var value = typeof toggled !== 'undefined' ? toggled : !state.layout.showToolbar;
|
136 | return {
|
137 | layout: Object.assign({}, state.layout, {
|
138 | showToolbar: value
|
139 | })
|
140 | };
|
141 | }, {
|
142 | persistence: 'session'
|
143 | });
|
144 | },
|
145 | resetLayout: function resetLayout() {
|
146 | return store.setState(function (state) {
|
147 | return {
|
148 | layout: Object.assign({}, state.layout, {
|
149 | showNav: false,
|
150 | showPanel: false,
|
151 | isFullscreen: false
|
152 | })
|
153 | };
|
154 | }, {
|
155 | persistence: 'session'
|
156 | });
|
157 | },
|
158 | focusOnUIElement: function focusOnUIElement(elementId, select) {
|
159 | if (!elementId) {
|
160 | return;
|
161 | }
|
162 |
|
163 | var element = document.getElementById(elementId);
|
164 |
|
165 | if (element) {
|
166 | element.focus();
|
167 | if (select) element.select();
|
168 | }
|
169 | },
|
170 | getInitialOptions: function getInitialOptions() {
|
171 | var _options$layout;
|
172 |
|
173 | var _provider$getConfig = provider.getConfig(),
|
174 | theme = _provider$getConfig.theme,
|
175 | selectedPanel = _provider$getConfig.selectedPanel,
|
176 | options = _objectWithoutProperties(_provider$getConfig, _excluded);
|
177 |
|
178 | if ((options === null || options === void 0 ? void 0 : (_options$layout = options.layout) === null || _options$layout === void 0 ? void 0 : _options$layout.isToolshown) !== undefined) {
|
179 | once.warn(dedent(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n The \"isToolshown\" option is deprecated. Please use \"showToolbar\" instead.\n\n See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#renamed-istoolshown-to-showtoolbar\n "]))));
|
180 | options.layout.showToolbar = options.layout.isToolshown;
|
181 | }
|
182 |
|
183 | return Object.assign({}, defaultState, {
|
184 | layout: Object.assign({}, defaultState.layout, pick(options, Object.keys(defaultState.layout)), singleStory && {
|
185 | showNav: false
|
186 | }),
|
187 | ui: Object.assign({}, defaultState.ui, pick(options, Object.keys(defaultState.ui))),
|
188 | selectedPanel: selectedPanel || defaultState.selectedPanel,
|
189 | theme: theme || defaultState.theme
|
190 | });
|
191 | },
|
192 | setOptions: function setOptions(options) {
|
193 | var _store$getState = store.getState(),
|
194 | layout = _store$getState.layout,
|
195 | ui = _store$getState.ui,
|
196 | selectedPanel = _store$getState.selectedPanel,
|
197 | theme = _store$getState.theme;
|
198 |
|
199 | if (options) {
|
200 | var updatedLayout = Object.assign({}, layout, pick(options, Object.keys(layout)), singleStory && {
|
201 | showNav: false
|
202 | });
|
203 | var updatedUi = Object.assign({}, ui, pick(options, Object.keys(ui)));
|
204 | var updatedTheme = Object.assign({}, theme, options.theme);
|
205 | var modification = {};
|
206 |
|
207 | if (!deepEqual(ui, updatedUi)) {
|
208 | modification.ui = updatedUi;
|
209 | }
|
210 |
|
211 | if (!deepEqual(layout, updatedLayout)) {
|
212 | modification.layout = updatedLayout;
|
213 | }
|
214 |
|
215 | if (options.selectedPanel && !deepEqual(selectedPanel, options.selectedPanel)) {
|
216 | modification.selectedPanel = options.selectedPanel;
|
217 | }
|
218 |
|
219 | if (Object.keys(modification).length) {
|
220 | store.setState(modification, {
|
221 | persistence: 'permanent'
|
222 | });
|
223 | }
|
224 |
|
225 | if (!deepEqual(theme, updatedTheme)) {
|
226 | store.setState({
|
227 | theme: updatedTheme
|
228 | });
|
229 | }
|
230 | }
|
231 | }
|
232 | };
|
233 | var persisted = pick(store.getState(), 'layout', 'ui', 'selectedPanel');
|
234 | return {
|
235 | api: api,
|
236 | state: merge(api.getInitialOptions(), persisted)
|
237 | };
|
238 | }; |
\ | No newline at end of file |