Refactor

seek-oss · Sep 13, 2024 · cc2cb89 · cc2cb89
1 parent d29cc80
commit cc2cb89
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 18 deletions.
diff --git a/src/Playroom/Playroom.tsx b/src/Playroom/Playroom.tsx
@@ -21,7 +21,7 @@ import * as styles from './Playroom.css';
 import { Box } from './Box/Box';
 
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { editorSize as editorSize } from './Playroom.css';
+import { editorSize } from './Playroom.css';
 
 const resizableConfig = (position: EditorPosition = 'bottom') => ({
   top: position === 'bottom',
@@ -135,7 +135,7 @@ export default ({ components, themes, widths, snippets }: PlayroomProps) => {
   const isVerticalEditor = editorPosition === 'right';
   const isHorizontalEditor = editorPosition === 'bottom';
   const sizeStyles = {
-    height: isHorizontalEditor ? editorHeight : 'auto', // issue in ff & safari when not a string
+    height: isHorizontalEditor ? editorHeight : 'auto',
     width: isVerticalEditor ? editorWidth : 'auto',
   };
   const editorContainer =

diff --git a/src/StoreContext/StoreContext.tsx b/src/StoreContext/StoreContext.tsx
@@ -37,6 +37,19 @@ const applyColorScheme = (colorScheme: Exclude<ColorScheme, 'system'>) => {
   ]('data-playroom-dark', '');
 };
 
+function getSizeAsPercentage(
+  mode: 'height' | 'width',
+  size: string | undefined
+): string | undefined {
+  if (!size || !size.endsWith('px')) {
+    return;
+  }
+
+  const storedSizeAsNumber = parseInt(size.split('px')[0], 10);
+
+  return convertAndStoreSizeAsPercentage(mode, storedSizeAsNumber);
+}
+
 function convertAndStoreSizeAsPercentage(
   mode: 'height' | 'width',
   size: number
@@ -145,9 +158,17 @@ const createReducer =
   (state: State, action: Action): State => {
     switch (action.type) {
       case 'initialLoad': {
+        const { editorHeight, editorWidth } = action.payload;
+
+        // If the stored size is in pixels, convert it to a percentage
+        const updatedEditorWidth = getSizeAsPercentage('width', editorWidth);
+        const updatedEditorHeight = getSizeAsPercentage('height', editorHeight);
+
         return {
           ...state,
           ...action.payload,
+          editorWidth: updatedEditorWidth || state.editorWidth,
+          editorHeight: updatedEditorHeight || state.editorHeight,
         };
       }
 
@@ -497,8 +518,8 @@ export const StoreProvider = ({
     Promise.all([
       store.getItem<string>('code'),
       store.getItem<EditorPosition>('editorPosition'),
-      store.getItem<number | string>('editorHeight'), // Number type deprecated
-      store.getItem<number | string>('editorWidth'), // Number type deprecated
+      store.getItem<string | number>('editorHeight'), // Number type deprecated
+      store.getItem<string | number>('editorWidth'), // Number type deprecated
       store.getItem<number[]>('visibleWidths'),
       store.getItem<string[]>('visibleThemes'),
       store.getItem<ColorScheme>('colorScheme'),
@@ -516,14 +537,14 @@ export const StoreProvider = ({
         const editorPosition = storedPosition;
 
         const editorHeight =
-          (typeof storedHeight === 'string' ? storedHeight : null) ||
-          (typeof storedHeight === 'number' ? `${storedHeight}px` : null) ||
-          defaultEditorSize;
+          (typeof storedHeight === 'number'
+            ? `${storedHeight}px`
+            : storedHeight) || defaultEditorSize;
 
         const editorWidth =
-          (typeof storedWidth === 'string' ? storedWidth : null) ||
-          (typeof storedWidth === 'number' ? `${storedWidth}px` : null) ||
-          defaultEditorSize;
+          (typeof storedWidth === 'number'
+            ? `${storedWidth}px`
+            : storedWidth) || defaultEditorSize;
 
         const visibleWidths =
           widthsFromQuery ||
@@ -552,14 +573,6 @@ export const StoreProvider = ({
             ready: true,
           },
         });
-
-        // Converted deprecated pixel size preferences to percentage
-        if (typeof storedHeight === 'number') {
-          convertAndStoreSizeAsPercentage('height', storedHeight);
-        }
-        if (typeof storedWidth === 'number') {
-          convertAndStoreSizeAsPercentage('width', storedWidth);
-        }
       }
     );
   }, [hasThemesConfigured]);