feat(docz-theme-default): add refresh btn on playground (#254)

* feat(docz-theme-default): add refresh button to live preview (#251)
* chore(docz-theme-default): some adjustments

packages/docz-theme-default/librc.js

@@ -33,6 +33,7 @@ const depsExternal = [
   'react-feather/dist/icons/monitor',
   'react-feather/dist/icons/maximize',
   'react-feather/dist/icons/minimize',
+  'react-feather/dist/icons/refresh-cw',
 ]
 
 const external = Object.keys(pkg.dependencies)

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

@@ -31,7 +31,7 @@ const handleHeight = (p: HandleProps) =>
   p.horizontal ? `calc(100% + ${p.full ? '5px' : '0px'})` : HANDLE_SIZE
 
 export const Handle = styled('div')`
-  z-index: ${p => (p.full ? (p.horizontal ? 9999 : 9998) : 0)};
+  z-index: ${p => (p.full ? (p.horizontal ? 9999 : 9998) : 9)};
   position: absolute;
   display: block;
   width: ${whenHorizontal(HANDLE_SIZE, 'calc(100% + 5px)')};

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

@@ -10,6 +10,7 @@ import rgba from 'polished/lib/color/rgba'
 import Resizable from 're-resizable'
 import Maximize from 'react-feather/dist/icons/maximize'
 import Minimize from 'react-feather/dist/icons/minimize'
+import Refresh from 'react-feather/dist/icons/refresh-cw'
 import hotkeys from 'hotkeys-js'
 import getIn from 'lodash.get'
 import pretty from 'pretty'
@@ -170,6 +171,7 @@ export interface RenderState {
   height: string
   showing: 'jsx' | 'html'
   code: string
+  key: number
 }
 
 export class Render extends Component<RenderComponentProps, RenderState> {
@@ -179,6 +181,7 @@ export class Render extends Component<RenderComponentProps, RenderState> {
     height: parse(this.props.position, 'height', '100%'),
     showing: parse(this.props.position, 'showing', 'jsx'),
     code: this.props.code,
+    key: 0,
   }
 
   public componentDidMount(): void {
@@ -214,6 +217,9 @@ export class Render extends Component<RenderComponentProps, RenderState> {
         >
           {fullscreen ? <Minimize width={15} /> : <Maximize width={15} />}
         </Action>
+        <Action onClick={this.handleRefresh} title="Refresh playground">
+          <Refresh width={15} />
+        </Action>
       </Actions>
     )
   }
@@ -262,7 +268,7 @@ export class Render extends Component<RenderComponentProps, RenderState> {
 
   public render(): JSX.Element {
     const { className, style, scope } = this.props
-    const { fullscreen, showing } = this.state
+    const { fullscreen, showing, key } = this.state
 
     return (
       <LiveProvider
@@ -276,7 +282,7 @@ export class Render extends Component<RenderComponentProps, RenderState> {
           {fullscreen ? <ResizeBar onChangeSize={this.handleSetSize} /> : null}
           <Resizable {...this.resizableProps}>
             <Wrapper full={fullscreen}>
-              <LiveConsumer>
+              <LiveConsumer key={key}>
                 {(live: any) => (
                   <PlaygroundWrapper full={fullscreen}>
                     {live.error && (
@@ -352,6 +358,10 @@ export class Render extends Component<RenderComponentProps, RenderState> {
     this.setState({ width, height }, () => this.setSize(fullscreen))
   }
 
+  private handleRefresh = () => {
+    this.setState(state => ({ key: state.key + 1 }))
+  }
+
   private transformCode(code: string): string {
     return `
       const App = ({ children }) => (

packages/docz-theme-default/src/types.d.ts

@@ -17,6 +17,7 @@ declare module 'react-feather/dist/icons/tablet'
 declare module 'react-feather/dist/icons/monitor'
 declare module 'react-feather/dist/icons/maximize'
 declare module 'react-feather/dist/icons/minimize'
+declare module 'react-feather/dist/icons/refresh-cw'
 declare module 'react-lightweight-tooltip'
 declare module 'react-powerplug'
 declare module 're-resizable'