From 8192fdc2e931c6024318ebb875db25eaef6805e0 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 4 Jun 2019 12:55:30 +0200 Subject: [PATCH] FIX the customCanvas option --- .../src/client/manager/provider.js | 5 +- lib/api/src/modules/layout.ts | 2 +- lib/ui/src/components/preview/preview.js | 68 +++++++++++-------- lib/ui/src/containers/nav.js | 2 +- lib/ui/src/containers/preview.js | 32 ++++----- 5 files changed, 55 insertions(+), 54 deletions(-) diff --git a/app/react-native-server/src/client/manager/provider.js b/app/react-native-server/src/client/manager/provider.js index ab6b2de3944f..334a5a40167f 100644 --- a/app/react-native-server/src/client/manager/provider.js +++ b/app/react-native-server/src/client/manager/provider.js @@ -11,6 +11,7 @@ const mapper = ({ state, api }) => ({ api, storiesHash: state.storiesHash, storyId: state.storyId, + viewMode: state.viewMode, }); export default class ReactProvider extends Provider { @@ -48,12 +49,12 @@ export default class ReactProvider extends Provider { renderPreview() { return ( - {({ storiesHash, storyId, api }) => { + {({ storiesHash, storyId, api, viewMode }) => { if (storiesHash[storyId]) { const { kind, story } = storiesHash[storyId]; api.emit(Events.SET_CURRENT_STORY, { kind, story }); } - return ; + return viewMode === 'story' ? : null; }} ); diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts index 205a15e1eb94..de64a8c70389 100644 --- a/lib/api/src/modules/layout.ts +++ b/lib/api/src/modules/layout.ts @@ -155,7 +155,7 @@ export default function({ store }: { store: Store }) { const api = { toggleFullscreen(toggled?: boolean) { return store.setState((state: State) => { - const value = typeof toggled !== 'undefined' ? toggled : !state.layout.isFullscreen; + const value = typeof toggled === 'boolean' ? toggled : !state.layout.isFullscreen; return { layout: { diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js index 16803f7aec39..2c57f489581a 100644 --- a/lib/ui/src/components/preview/preview.js +++ b/lib/ui/src/components/preview/preview.js @@ -44,11 +44,24 @@ const renderIframe = (storyId, id, baseUrl, scale, queryParams) => ( const getElementList = memoize(10)((getFn, type, base) => base.concat(Object.values(getFn(type)))); -const ActualPreview = ({ wrappers, id, storyId, active, baseUrl, scale, queryParams }) => - wrappers.reduceRight( +const ActualPreview = ({ + wrappers, + id, + storyId, + active, + baseUrl, + scale, + queryParams, + customCanvas, +}) => { + const data = [storyId, id, baseUrl, scale, queryParams]; + const base = customCanvas ? customCanvas(...data) : renderIframe(...data); + + return wrappers.reduceRight( (acc, wrapper, index) => wrapper.render({ index, children: acc, id, storyId, active }), - renderIframe(storyId, id, baseUrl, scale, queryParams) + base ); +}; const defaultWrappers = [ { render: p => }, @@ -67,18 +80,7 @@ const defaultWrappers = [ ]; const getTools = memoize(10)( - ( - getElements, - queryParams, - panels, - actions, - options, - storyId, - viewMode, - location, - path, - baseUrl - ) => { + (getElements, queryParams, panels, api, options, storyId, viewMode, location, path, baseUrl) => { const tools = getElementList(getElements, types.TOOL, [ panels.filter(p => p.id !== 'canvas').length ? { @@ -139,7 +141,7 @@ const getTools = memoize(10)( @@ -235,7 +237,8 @@ class Preview extends Component { storyId, queryParams, getElements, - actions, + api, + customCanvas, options, description, baseUrl, @@ -250,17 +253,20 @@ class Preview extends Component { match: p => p.viewMode === 'story', render: p => ( - {({ value }) => ( - - )} + {({ value }) => { + const props = { + active: p.active, + wrappers, + id, + storyId, + baseUrl, + queryParams, + scale: value, + customCanvas, + }; + + return ; + }} ), title: 'Canvas', @@ -271,7 +277,7 @@ class Preview extends Component { getElements, queryParams, panels, - actions, + api, options, storyId, viewMode, @@ -309,10 +315,12 @@ class Preview extends Component { Preview.propTypes = { id: PropTypes.string.isRequired, description: PropTypes.string, + customCanvas: PropTypes.func, api: PropTypes.shape({ on: PropTypes.func, off: PropTypes.func, emit: PropTypes.func, + toggleFullscreen: PropTypes.func, }).isRequired, storyId: PropTypes.string, path: PropTypes.string, @@ -324,7 +332,6 @@ Preview.propTypes = { isFullscreen: PropTypes.bool, isToolshown: PropTypes.bool, }).isRequired, - actions: PropTypes.shape({}).isRequired, baseUrl: PropTypes.string, }; Preview.defaultProps = { @@ -333,6 +340,7 @@ Preview.defaultProps = { path: undefined, description: undefined, baseUrl: 'iframe.html', + customCanvas: undefined, }; export { Preview }; diff --git a/lib/ui/src/containers/nav.js b/lib/ui/src/containers/nav.js index 511ef838fd75..b9686be59627 100755 --- a/lib/ui/src/containers/nav.js +++ b/lib/ui/src/containers/nav.js @@ -40,7 +40,7 @@ const createMenu = memoize(1)((api, shortcutKeys, isFullscreen, showPanel, showN { id: 'F', title: 'Go full screen', - onClick: () => api.toggleFullscreen(), + onClick: api.toggleFullscreen, right: shortcutToHumanString(shortcutKeys.fullScreen), left: isFullscreen ? 'check' : , }, diff --git a/lib/ui/src/containers/preview.js b/lib/ui/src/containers/preview.js index 733957846711..82720f70545e 100644 --- a/lib/ui/src/containers/preview.js +++ b/lib/ui/src/containers/preview.js @@ -1,5 +1,4 @@ import React from 'react'; -import memoize from 'memoizerific'; import { Consumer } from '@storybook/api'; @@ -11,28 +10,21 @@ const replacer = match => ` ${match} `; const addExtraWhiteSpace = input => input.replace(nonAlphanumSpace, replacer).replace(doubleSpace, ' '); -const createPreviewActions = memoize(1)(api => ({ - toggleFullscreen: () => api.toggleFullscreen(), -})); -const mapper = ({ api, state: { layout, location, selected, customQueryParams } }) => - api.renderPreview - ? { renderPreview: api.renderPreview } - : { - api, - getElements: api.getElements, - actions: createPreviewActions(api), - options: layout, - description: selected ? addExtraWhiteSpace(`${selected.kind} - ${selected.name}`) : '', - ...api.getUrlState(), - queryParams: customQueryParams, - location, - }; +const mapper = ({ api, state: { layout, location, selected, customQueryParams } }) => ({ + api, + getElements: api.getElements, + options: layout, + description: selected ? addExtraWhiteSpace(`${selected.kind} - ${selected.name}`) : '', + ...api.getUrlState(), + queryParams: customQueryParams, + location, +}); const PreviewConnected = React.memo(props => ( - {fromState => - fromState.renderPreview ? fromState.renderPreview() : - } + {fromState => { + return ; + }} )); PreviewConnected.displayName = 'PreviewConnected';