FIX the customCanvas option

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 (
       <Consumer filter={mapper} pure>
-        {({ storiesHash, storyId, api }) => {
+        {({ storiesHash, storyId, api, viewMode }) => {
           if (storiesHash[storyId]) {
             const { kind, story } = storiesHash[storyId];
             api.emit(Events.SET_CURRENT_STORY, { kind, story });
           }
-          return <PreviewHelp />;
+          return viewMode === 'story' ? <PreviewHelp /> : null;
         }}
       </Consumer>
     );

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: {

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 => <div hidden={!p.active}>{p.children}</div> },
@@ -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)(
           <DesktopOnly>
             <IconButton
               key="full"
-              onClick={actions.toggleFullscreen}
+              onClick={api.toggleFullscreen}
               title={options.isFullscreen ? 'Exit full screen' : 'Go full screen'}
             >
               <Icons icon={options.isFullscreen ? 'close' : 'expand'} />
@@ -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 => (
           <ZoomConsumer>
-            {({ value }) => (
-              <ActualPreview
-                active={p.active}
-                wrappers={wrappers}
-                id={id}
-                storyId={storyId}
-                baseUrl={baseUrl}
-                queryParams={queryParams}
-                scale={value}
-              />
-            )}
+            {({ value }) => {
+              const props = {
+                active: p.active,
+                wrappers,
+                id,
+                storyId,
+                baseUrl,
+                queryParams,
+                scale: value,
+                customCanvas,
+              };
+
+              return <ActualPreview {...props} />;
+            }}
           </ZoomConsumer>
         ),
         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 };

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' : <ListItemIcon />,
   },

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 => (
   <Consumer filter={mapper}>
-    {fromState =>
-      fromState.renderPreview ? fromState.renderPreview() : <Preview {...props} {...fromState} />
-    }
+    {fromState => {
+      return <Preview {...props} {...fromState} customCanvas={fromState.api.renderPreview} />;
+    }}
   </Consumer>
 ));
 PreviewConnected.displayName = 'PreviewConnected';