fix: move renderfn outside Story to avoid hooks issues

ccontrols · Apr 1, 2020 · ad9891b · ad9891b
1 parent b87ad46
commit ad9891b
Showing 1 changed file with 15 additions and 8 deletions.
diff --git a/ui/blocks/src/Story/Story.tsx b/ui/blocks/src/Story/Story.tsx
@@ -9,22 +9,29 @@ import {
 
 export type StoryProps = Omit<StoryBlockContainerProps, 'children'>;
 
+interface RenderStoryProps {
+  renderFn: (controlValues: { [key: string]: any }, context: any) => any;
+  values: { [key: string]: any };
+  context: any;
+}
+
+const RenderStory: FC<RenderStoryProps> = ({ renderFn, values, context }) =>
+  createElement('div', null, renderFn(values, { context }));
+
 export const Story: FC<StoryProps> = (props: StoryProps) => (
   <StoryBlockContainer {...props}>
     {(context, rest) => {
       const { story } = context;
-      if (story && story.renderFn) {
-        let children;
+      if (story?.renderFn) {
         try {
           const values = story.controls ? getControlValues(story.controls) : {};
-          children = createElement(
-            'div',
-            null,
-            story.renderFn(values, { context }),
-          );
           return (
             <Box id={story.id} sx={{ px: 3 }} {...rest}>
-              {children}
+              <RenderStory
+                renderFn={story.renderFn}
+                values={values}
+                context={context}
+              />
             </Box>
           );
         } catch (e) {