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