-
-
Notifications
You must be signed in to change notification settings - Fork 9.1k
/
nav.js
executable file
·117 lines (110 loc) · 3.2 KB
/
nav.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
import React from 'react';
import memoize from 'memoizerific';
import { Badge } from '@storybook/components';
import ListItemIcon from '../components/sidebar/ListItemIcon';
import { shortcutToHumanString } from '../libs/shortcut';
import Sidebar from '../components/sidebar/Sidebar';
import { Consumer } from '../core/context';
const createMenu = memoize(1)((api, shortcutKeys, isFullscreen, showPanel, showNav) => [
{
id: 'S',
title: 'Show sidebar',
onClick: () => api.toggleNav(),
right: shortcutToHumanString(shortcutKeys.toggleNav),
left: showNav ? <ListItemIcon icon="check" /> : <ListItemIcon />,
},
{
id: 'A',
title: 'Show addons',
onClick: () => api.togglePanel(),
right: shortcutToHumanString(shortcutKeys.togglePanel),
left: showPanel ? <ListItemIcon icon="check" /> : <ListItemIcon />,
},
{
id: 'D',
title: 'Change addons orientation',
onClick: () => api.togglePanelPosition(),
right: shortcutToHumanString(shortcutKeys.panelPosition),
left: <ListItemIcon />,
},
{
id: 'F',
title: 'Go full screen',
onClick: () => api.toggleFullscreen(),
right: shortcutToHumanString(shortcutKeys.fullScreen),
left: isFullscreen ? 'check' : <ListItemIcon />,
},
{
id: '/',
title: 'Search',
onClick: () => api.focusOnUIElement('storySearchField'),
right: shortcutToHumanString(shortcutKeys.search),
left: <ListItemIcon />,
},
{
id: 'up',
title: 'Previous component',
onClick: () => api.jumpToComponent(-1),
right: shortcutToHumanString(shortcutKeys.prevComponent),
left: <ListItemIcon />,
},
{
id: 'down',
title: 'Next component',
onClick: () => api.jumpToComponent(1),
right: shortcutToHumanString(shortcutKeys.nextComponent),
left: <ListItemIcon />,
},
{
id: 'prev',
title: 'Previous story',
onClick: () => api.jumpToStory(-1),
right: shortcutToHumanString(shortcutKeys.prevStory),
left: <ListItemIcon />,
},
{
id: 'next',
title: 'Next story',
onClick: () => api.jumpToStory(1),
right: shortcutToHumanString(shortcutKeys.nextStory),
left: <ListItemIcon />,
},
{
id: 'about',
title: 'About your Storybook',
onClick: () => api.navigate('/settings/about'),
right: api.versionUpdateAvailable() && <Badge status="positive">Update</Badge>,
left: <ListItemIcon />,
},
{
id: 'shortcuts',
title: 'Keyboard shortcuts',
onClick: () => api.navigate('/settings/shortcuts'),
right: shortcutToHumanString(shortcutKeys.shortcutsPage),
left: <ListItemIcon />,
},
]);
export const mapper = (state, api) => {
const {
ui: { name, url },
viewMode,
storyId,
layout: { isFullscreen, showPanel, showNav, panelPosition },
storiesHash,
storiesConfigured,
} = state;
const shortcutKeys = api.getShortcutKeys();
return {
loading: !storiesConfigured,
title: name,
url,
stories: storiesHash,
storyId,
viewMode,
menu: createMenu(api, shortcutKeys, isFullscreen, showPanel, showNav, panelPosition),
menuHighlighted: api.versionUpdateAvailable(),
};
};
export default props => (
<Consumer>{({ state, api }) => <Sidebar {...props} {...mapper(state, api)} />}</Consumer>
);