import React , { useState , useEffect , useRef } from "react" ; import { DevSettings } from "react-native" ; import { loadString , saveString } from "../app/utils/storage" ; import { DEFAULT_REACTOTRON_WS_URI } from "../app/services/reactotron/reactotron-config" ; /**
 * Toggle Storybook mode, in __DEV__ mode only.
 *
 * In non-__DEV__ mode, or when Storybook isn't toggled on,
 * renders its children.
 *
 * The mode flag is persisted in async storage, which means it
 * persists across reloads/restarts - this is handy when developing
 * new components in Storybook.
 */ export function ToggleStorybook ( props ) { const [ showStorybook , setShowStorybook ] = useState ( false ) ; const [ StorybookUIRoot , setStorybookUIRoot ] = useState ( null ) ; const ws = useRef ( new WebSocket ( DEFAULT_REACTOTRON_WS_URI ) ) ; useEffect ( ( ) => { if ( ! __DEV__ ) { return undefined ; } loadString ( "devStorybook" ) . then ( ( storedSetting ) => { setShowStorybook ( storedSetting === "on" ) ; if ( DevSettings ) { DevSettings . addMenuItem ( "Toggle Storybook" , ( ) => { setShowStorybook ( ( show ) => { show = ! show ; saveString ( "devStorybook" , show ? "on" : "off" ) ; return show ; } ) ; } ) ; } setStorybookUIRoot ( ( ) => require ( "./storybook" ) . StorybookUIRoot ) ; ws . current . onmessage = ( e ) => { const data = JSON . parse ( e . data ) ; if ( data . type === "storybook" ) { saveString ( "devStorybook" , data . payload ? "on" : "off" ) ; setShowStorybook ( data . payload ) ; } } ; ws . current . onerror = ( e ) => { console . tron . error ( e , null ) ; setShowStorybook ( storedSetting === "on" ) ; } ; } ) ; } , [ ] ) ; if ( showStorybook ) { return StorybookUIRoot ? < StorybookUIRoot /> : null; } else { return props . children ; } }