327.368b8614.chunk.js.download

(this["webpackJsonp@builder.io/app"]=this["webpackJsonp@builder.io/app"]||[]).push([[327],{6340:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"PlaygroundModal",function(){return PlaygroundModal});var _emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),mobx_react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(90),_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(1),_constants_theme_constant__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(7),_material_ui_core__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(113),_material_ui_core__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(_material_ui_core__WEBPACK_IMPORTED_MODULE_4__),_material_ui_icons__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(573),_material_ui_icons__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(_material_ui_icons__WEBPACK_IMPORTED_MODULE_5__),react__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(3),react__WEBPACK_IMPORTED_MODULE_6___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_6__),_hooks_use_reaction__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(132);function PlaygroundModal(){const iframeRef=Object(react__WEBPACK_IMPORTED_MODULE_6__.useRef)(null),state=Object(mobx_react__WEBPACK_IMPORTED_MODULE_1__.f)(()=>({iframeLoaded:!1}));return Object(_hooks_use_reaction__WEBPACK_IMPORTED_MODULE_7__.a)(()=>_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_2__.appState.getStartedPage.showPlaygroundModal&&state.iframeLoaded,showPlaygroundModal=>{var _a,_b;showPlaygroundModal?(_b=(_a=iframeRef.current)===null||_a===void 0?void 0:_a.contentWindow)===null||_b===void 0||_b.postMessage({type:"builder.playground.init"},"*"):state.iframeLoaded=!1}),Object(_hooks_use_reaction__WEBPACK_IMPORTED_MODULE_7__.a)(()=>_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_2__.appState.getStartedPage.showPlaygroundModal,showPlaygroundModal=>{showPlaygroundModal||(state.iframeLoaded=!1)}),Object(mobx_react__WEBPACK_IMPORTED_MODULE_1__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.a,{children:(_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_2__.appState.getStartedPage.preloadPlaygroundModal||_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_2__.appState.getStartedPage.showPlaygroundModal)&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("div",Object.assign({className:"dark-mode-invert",css:Object.assign({position:"fixed",top:0,left:0,right:0,bottom:0,zIndex:1e5,background:"rgba(20,20,20,0.8)",transition:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_3__.a.transitions.for("all"),opacity:1,transform:"translateY(0)",backdropFilter:"blur(30px)"},!_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_2__.appState.getStartedPage.showPlaygroundModal&&{pointerEvents:"none",opacity:0})},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_4___default.a,Object.assign({css:{position:"absolute",top:0,right:0,zIndex:2,color:"white",opacity:.5,padding:8},onClick:()=>_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_2__.appState.getStartedPage.showPlaygroundModal=!1},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_icons__WEBPACK_IMPORTED_MODULE_5___default.a,{})})),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({className:"playground-modal",css:Object.assign({position:"fixed",top:40,left:0,right:0,bottom:0,zIndex:1e5,transition:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_3__.a.transitions.for("all"),opacity:1,transform:"translateY(0)",boxShadow:"0 0 40px 0px black !important",borderTop:"1px solid #222"},!_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_2__.appState.getStartedPage.showPlaygroundModal&&{transform:"translateY(20px)"})},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("iframe",{onLoad:()=>state.iframeLoaded=!0,ref:iframeRef,className:"no-filter",src:"https://playground.builder.io",css:{width:"100%",height:"100%",border:0}})}))]}))}))}}}]);