feat: Support custom frame URLs (#163)

seek-oss · Jun 1, 2020 · 8fc0b83 · 8fc0b83
1 parent f5ad5ff
commit 8fc0b83
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/src/Playroom/Frames/Frames.tsx b/src/Playroom/Frames/Frames.tsx
@@ -6,6 +6,7 @@ import { PlayroomProps } from '../Playroom';
 import { Strong } from '../Strong/Strong';
 import { Text } from '../Text/Text';
 import playroomConfig from '../../config';
+import frameSrc from './frameSrc';
 
 // @ts-ignore
 import styles from './Frames.less';
@@ -54,11 +55,10 @@ export default function Frames({ code, themes, widths }: FramesProps) {
           </div>
           <Iframe
             intersectionRootRef={scrollingPanelRef}
-            src={`${playroomConfig.baseUrl}frame.html${
-              playroomConfig.paramType === 'hash' ? '#' : ''
-            }?themeName=${encodeURIComponent(
-              frame.theme
-            )}&code=${encodeURIComponent(renderCode)}`}
+            src={frameSrc(
+              { themeName: frame.theme, code: renderCode },
+              playroomConfig
+            )}
             className={styles.frame}
             style={{ width: frame.width }}
             data-testid="previewFrame"

diff --git a/src/Playroom/Frames/frameSrc.ts b/src/Playroom/Frames/frameSrc.ts
@@ -0,0 +1,19 @@
+/* eslint-disable-next-line import/no-unresolved */
+// @ts-ignore
+import { frameSrc } from '__PLAYROOM_ALIAS__FRAME_COMPONENT__';
+
+interface FrameParams {
+  code: string;
+  themeName: string;
+}
+const defaultFrameSrc = (
+  { code, themeName }: FrameParams,
+  { baseUrl, paramType }: InternalPlayroomConfig
+) =>
+  `${baseUrl}frame.html${
+    paramType === 'hash' ? '#' : ''
+  }?themeName=${encodeURIComponent(themeName)}&code=${encodeURIComponent(
+    code
+  )}`;
+
+export default frameSrc ? frameSrc : defaultFrameSrc;