fix(docz-theme-default): get fullscreen from localstorage

packages/docz-theme-default/package.json

@@ -27,6 +27,7 @@
     "emotion-theming": "^9.2.6",
     "facepaint": "^1.2.1",
     "hotkeys-js": "^3.3.5",
+    "lodash.get": "^4.4.2",
     "match-sorter": "^2.2.3",
     "polished": "^1.9.3",
     "prop-types": "15.6.2",
@@ -47,6 +48,7 @@
     "react-dom": "^16.2.0"
   },
   "devDependencies": {
+    "@types/lodash.get": "^4.4.4",
     "@types/react": "^16.4.6",
     "@types/react-dom": "^16.0.6",
     "babel-plugin-emotion": "^9.2.6",

packages/docz-theme-default/src/components/ui/Render/index.tsx

@@ -6,6 +6,7 @@ import Minimize from 'react-feather/dist/icons/minimize'
 import Resizable from 're-resizable'
 import hotkeys from 'hotkeys-js'
 import styled from 'react-emotion'
+import getIn from 'lodash.get'
 
 import { ResizeBar } from './ResizeBar'
 import { Handle, HANDLE_SIZE } from './Handle'
@@ -41,6 +42,7 @@ const Wrapper = styled('div')`
 `
 
 const Playground = styled('div')`
+  overflow-y: hidden;
   flex: 1;
   background: ${p => p.theme.colors.background};
   border: 1px solid ${p => p.theme.colors.border};
@@ -60,9 +62,9 @@ const remove = (pos: number): void => storage.remove(pos.toString())
 const set = (pos: number, size: string): void =>
   storage.set(pos.toString(), size)
 
-const parseSize = (position: number) => (key: string) => {
+const parse = (position: number, key: string, defaultValue: any) => {
   const obj = JSON.parse(get(position))
-  return obj ? obj[key] : '100%'
+  return obj ? getIn(obj, key) : defaultValue
 }
 
 export interface RenderState {
@@ -73,9 +75,9 @@ export interface RenderState {
 
 export class Render extends Component<RenderComponentProps, RenderState> {
   public state: RenderState = {
-    fullscreen: Boolean(get(this.props.position)),
-    width: parseSize(this.props.position)('width'),
-    height: parseSize(this.props.position)('height'),
+    fullscreen: parse(this.props.position, 'fullscreen', false),
+    width: parse(this.props.position, 'width', '100%'),
+    height: parse(this.props.position, 'height', '100%'),
   }
 
   public componentDidMount(): void {
@@ -176,8 +178,6 @@ export class Render extends Component<RenderComponentProps, RenderState> {
     }
   }
 
-  private isFullscreen = (position: number) => Boolean(get(position))
-
   private setSize = () => {
     const { fullscreen, ...state } = this.state
     set(this.props.position, JSON.stringify(state))
@@ -190,15 +190,10 @@ export class Render extends Component<RenderComponentProps, RenderState> {
     if (fullscreen) remove(position)
     else this.setSize()
 
-    const isFull = this.isFullscreen(position)
-    const parse = parseSize(position)
-    const width = parse('width')
-    const height = parse('height')
-
     this.setState({
-      fullscreen: isFull,
-      width,
-      height,
+      fullscreen: parse(position, 'fullscreen', false),
+      width: parse(position, 'width', '100%'),
+      height: parse(position, 'height', '100%'),
     })
   }
 

yarn.lock

@@ -1355,6 +1355,12 @@
   dependencies:
     "@types/lodash" "*"
 
+"@types/lodash.get@^4.4.4":
+  version "4.4.4"
+  resolved "https://registry.npmjs.org/@types/lodash.get/-/lodash.get-4.4.4.tgz#34b67841594e4ddc8853341d65e971a38cb4e2f0"
+  dependencies:
+    "@types/lodash" "*"
+
 "@types/lodash@*":
   version "4.14.108"
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.108.tgz#02656af3add2e5b3174f830862c47421c00ef817"