From a92759d1ec1933733b968646c4c6358c535add72 Mon Sep 17 00:00:00 2001 From: denzenin Date: Sun, 1 Apr 2018 21:21:13 +0300 Subject: [PATCH] Fix stories-panel: still need to pass url and name via props --- examples/cra-kitchen-sink/.storybook/config.js | 3 +-- .../src/modules/ui/components/stories_panel/index.js | 9 ++++----- .../ui/components/stories_panel/index.stories.js | 2 +- lib/ui/src/modules/ui/containers/header.js | 5 ++--- lib/ui/src/modules/ui/containers/header.test.js | 8 ++++---- lib/ui/src/modules/ui/containers/layout.js | 10 ++++------ lib/ui/src/modules/ui/containers/layout.test.js | 7 +++---- lib/ui/src/modules/ui/containers/stories_panel.js | 10 +++++++--- 8 files changed, 26 insertions(+), 28 deletions(-) diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js index f0d45642698..e756e6fe17b 100644 --- a/examples/cra-kitchen-sink/.storybook/config.js +++ b/examples/cra-kitchen-sink/.storybook/config.js @@ -8,14 +8,13 @@ setOptions({ name: 'CRA Kitchen Sink', url: 'https://github.com/storybooks/storybook/tree/master/examples/cra-kitchen-sink', goFullScreen: false, - // showStoriesPanel: true, showAddonsPanel: true, showSearchBox: false, addonPanelInRight: true, sortStoriesByKind: false, hierarchySeparator: /\./, hierarchyRootSeparator: /\|/, -}, 'shit'); +}); // deprecated usage of infoAddon setAddon(infoAddon); diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.js b/lib/ui/src/modules/ui/components/stories_panel/index.js index e5713cd2da7..f1a9906d2b4 100755 --- a/lib/ui/src/modules/ui/components/stories_panel/index.js +++ b/lib/ui/src/modules/ui/components/stories_panel/index.js @@ -4,9 +4,6 @@ import pick from 'lodash.pick'; import Header from '../header'; import Stories from './stories_tree'; import TextFilter from './text_filter'; -import checkIfMobileDevice from '../../libs/is_mobile_device'; - -const isMobileDevice = checkIfMobileDevice(); const scrollStyle = { height: 'calc(100vh - 105px)', @@ -49,11 +46,11 @@ class StoriesPanel extends Component { } render() { - const { onStoryFilter, storyFilter, openShortcutsHelp } = this.props; + const { onStoryFilter, storyFilter, openShortcutsHelp, isMobileDevice, name, url } = this.props; return (
- {!isMobileDevice &&
} + {!isMobileDevice &&
} onStoryFilter('')} @@ -70,6 +67,7 @@ StoriesPanel.defaultProps = { storyFilter: null, onStoryFilter: () => {}, openShortcutsHelp: null, + isMobileDevice: false, name: '', url: '', }; @@ -86,6 +84,7 @@ StoriesPanel.propTypes = { onStoryFilter: PropTypes.func, openShortcutsHelp: PropTypes.func, + isMobileDevice: PropTypes.bool, name: PropTypes.string, url: PropTypes.string, }; diff --git a/lib/ui/src/modules/ui/components/stories_panel/index.stories.js b/lib/ui/src/modules/ui/components/stories_panel/index.stories.js index 67ae67516fe..7396683208d 100644 --- a/lib/ui/src/modules/ui/components/stories_panel/index.stories.js +++ b/lib/ui/src/modules/ui/components/stories_panel/index.stories.js @@ -12,7 +12,7 @@ const decorator = withLifecyle({ setContext({ clientStore: { getAll() { - return { shortcutOptions: {} }; + return { shortcutOptions: {}, uiOptions: {}, actions: { ui: {} } }; }, subscribe() {}, }, diff --git a/lib/ui/src/modules/ui/containers/header.js b/lib/ui/src/modules/ui/containers/header.js index 9a514971c02..d7ccb12eb05 100755 --- a/lib/ui/src/modules/ui/containers/header.js +++ b/lib/ui/src/modules/ui/containers/header.js @@ -3,7 +3,7 @@ import Header from '../components/header'; import genPoddaLoader from '../libs/gen_podda_loader'; import compose from '../../../compose'; -export const headerMapper = (state, props, { actions }) => { +export const mapper = (state, props, { actions }) => { const currentOptions = pick( state.shortcutOptions, 'showStoriesPanel', @@ -14,7 +14,6 @@ export const headerMapper = (state, props, { actions }) => { const actionMap = actions(); const { uiOptions, isMobileDevice } = state; - const { name = '', url = '' } = uiOptions; const handleBurgerButtonClick = () => { @@ -36,4 +35,4 @@ export const headerMapper = (state, props, { actions }) => { }; }; -export default compose(genPoddaLoader(headerMapper))(Header); +export default compose(genPoddaLoader(mapper))(Header); diff --git a/lib/ui/src/modules/ui/containers/header.test.js b/lib/ui/src/modules/ui/containers/header.test.js index 8ab0623d132..08d747b0f36 100755 --- a/lib/ui/src/modules/ui/containers/header.test.js +++ b/lib/ui/src/modules/ui/containers/header.test.js @@ -1,7 +1,7 @@ -import { headerMapper } from './header'; +import { mapper } from './header'; describe('manager.ui.containers.header', () => { - describe('headerMapper', () => { + describe('mapper', () => { test('should give correct data', () => { const uiOptions = { name: 'foo', @@ -27,7 +27,7 @@ describe('manager.ui.containers.header', () => { shortcutOptions, }; - const result = headerMapper(state, props, env); + const result = mapper(state, props, env); expect(result.showStoriesPanel).toEqual('aa'); expect(result.showAddonPanel).toEqual('bb'); @@ -41,7 +41,7 @@ describe('manager.ui.containers.header', () => { isMobileDevice: true, }; - const resultWhenMobileDevice = headerMapper(stateWhenMobileDevice, props, env); + const resultWhenMobileDevice = mapper(stateWhenMobileDevice, props, env); expect(resultWhenMobileDevice.addonPanelInRight).toEqual(false); }); }); diff --git a/lib/ui/src/modules/ui/containers/layout.js b/lib/ui/src/modules/ui/containers/layout.js index f14f8c32923..970e1f0f85e 100755 --- a/lib/ui/src/modules/ui/containers/layout.js +++ b/lib/ui/src/modules/ui/containers/layout.js @@ -2,13 +2,11 @@ import pick from 'lodash.pick'; import Layout from '../components/layout'; import genPoddaLoader from '../libs/gen_podda_loader'; import compose from '../../../compose'; -import checkIfMobileDevice from '../libs/is_mobile_device'; -const isMobileDevice = checkIfMobileDevice(); - -export const shortcutMapper = state => { +export const mapper = state => { + const { shortcutOptions, isMobileDevice } = state; const currentOptions = pick( - state.shortcutOptions, + shortcutOptions, 'showStoriesPanel', 'showAddonPanel', 'goFullScreen', @@ -21,4 +19,4 @@ export const shortcutMapper = state => { }; }; -export default compose(genPoddaLoader(shortcutMapper))(Layout); +export default compose(genPoddaLoader(mapper))(Layout); diff --git a/lib/ui/src/modules/ui/containers/layout.test.js b/lib/ui/src/modules/ui/containers/layout.test.js index 3c6905e2f91..2aabf74f37d 100755 --- a/lib/ui/src/modules/ui/containers/layout.test.js +++ b/lib/ui/src/modules/ui/containers/layout.test.js @@ -1,17 +1,16 @@ -import { shortcutMapper } from './layout'; +import { mapper } from './layout'; describe('manager.ui.containers.layout', () => { - describe('shortcutMapper', () => { + describe('mapper', () => { test('should give correct data', () => { const state = { shortcutOptions: { showStoriesPanel: 'aa', showAddonPanel: 'bb', goFullScreen: 'cc', - isMobileDevice: false, }, }; - const data = shortcutMapper(state); + const data = mapper(state); expect(data).toEqual(state.shortcutOptions); }); diff --git a/lib/ui/src/modules/ui/containers/stories_panel.js b/lib/ui/src/modules/ui/containers/stories_panel.js index 5dbd7f4a471..91f60e1453c 100755 --- a/lib/ui/src/modules/ui/containers/stories_panel.js +++ b/lib/ui/src/modules/ui/containers/stories_panel.js @@ -13,12 +13,14 @@ import { export const mapper = (state, props, { actions }) => { const actionMap = actions(); - const { stories, selectedKind, selectedStory, uiOptions, storyFilter } = state; + const { stories, selectedKind, selectedStory, uiOptions, storyFilter, isMobileDevice } = state; const { sortStoriesByKind, hierarchySeparator, hierarchyRootSeparator, sidebarAnimations, + name, + url, } = uiOptions; const preparedStories = prepareStoriesForHierarchy( @@ -46,11 +48,13 @@ export const mapper = (state, props, { actions }) => { selectedStory, selectedHierarchy, onSelectStory: actionMap.api.selectStory, - storyFilter, onStoryFilter: actionMap.ui.setStoryFilter, - + openShortcutsHelp: actionMap.ui.toggleShortcutsHelp, sidebarAnimations, + isMobileDevice, + name, + url, }; };