22.fcb0db18.chunk.js.download

(this["webpackJsonp@builder.io/app"]=this["webpackJsonp@builder.io/app"]||[]).push([[22],{3576:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.d(__webpack_exports__,"a",function(){return CodeEditor});var _emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),_functions_async_component_function__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(27),mobx_react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(90),_hooks_use_reaction__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(132),_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(1),_experiments_VisualProgramming__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(4740),typescript__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(3554),typescript__WEBPACK_IMPORTED_MODULE_6___default=__webpack_require__.n(typescript__WEBPACK_IMPORTED_MODULE_6__),_material_ui_core__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(40),_material_ui_core__WEBPACK_IMPORTED_MODULE_7___default=__webpack_require__.n(_material_ui_core__WEBPACK_IMPORTED_MODULE_7__),_constants_theme_constant__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(7),react__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(3),react__WEBPACK_IMPORTED_MODULE_9___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_9__);const AsyncMonacoEditor=Object(_functions_async_component_function__WEBPACK_IMPORTED_MODULE_1__.a)(async()=>(await Promise.resolve().then(__webpack_require__.t.bind(null,2625,7))).default),replace=(arr,newArr)=>{arr.length=0,arr.push(...newArr)},printer=typescript__WEBPACK_IMPORTED_MODULE_6__.createPrinter({newLine:typescript__WEBPACK_IMPORTED_MODULE_6__.NewLineKind.LineFeed});function CodeEditor(props){const state=Object(mobx_react__WEBPACK_IMPORTED_MODULE_2__.f)(()=>({code:props.defaultValue||"",ast:null,programState:{hoveringCodeEditor:!1,draggingNode:null,program:null,hoveringNode:null,get code(){return state.code},set code(code){state.code=code},updateCode(){state.updateCode()},get ast(){return state.ast},get selection(){return state.selection},set selection(arr){replace(state.selection,arr)}},selection:[],codeToAst(code=this.code){return Object(_experiments_VisualProgramming__WEBPACK_IMPORTED_MODULE_5__.createSourceFile)(code)},astToCode(ast=this.ast){return ast?printer.printFile(ast):""},updateAst(){this.ast=this.codeToAst(this.code)},updateCode(){this.code=this.astToCode(this.ast)}}));return Object(_hooks_use_reaction__WEBPACK_IMPORTED_MODULE_3__.a)(()=>state.code,()=>{if(!_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_4__.appState.config.showVisualProgramming)return;state.updateAst();const tsInfo=Object(_experiments_VisualProgramming__WEBPACK_IMPORTED_MODULE_5__.getProgramForText)(state.code);state.programState.program=tsInfo.program,state.programState.languageService=tsInfo.languageService},{delay:1e3,fireImmediately:!0}),Object(mobx_react__WEBPACK_IMPORTED_MODULE_2__.g)(()=>{const options={programState:state.programState};return Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("div",Object.assign({css:{display:"flex",alignItems:"stretch"},className:props.className},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("div",Object.assign({css:{width:_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_4__.appState.config.showVisualProgramming?"50%":"100%",position:"relative",alignSelf:"stretch",height:"100%"}},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("div",Object.assign({css:{height:_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_4__.appState.config.showVisualProgramming?"30%":"100%",overflow:"hidden"}},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(AsyncMonacoEditor,{theme:"vs-dark",options:{automaticLayout:!0,minimap:{enabled:!1},scrollBeyondLastLine:!1,renderLineHighlight:"none",scrollbar:{horizontal:"hidden",vertical:"hidden"}},language:"typescript",value:state.code,onChange:value=>{var _a;state.code=value,(_a=props.onChange)===null||_a===void 0||_a.call(props,value)}}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_7___default.a,Object.assign({color:"primary",css:{position:"absolute",top:0,padding:3,right:30},href:"https://www.builder.io/c/docs/guides/custom-code",target:"_blank",variant:"outlined",size:"small"},{children:"JS API"}))]})),_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_4__.appState.config.showVisualProgramming&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({css:{height:"70%",overflow:"auto"}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_experiments_VisualProgramming__WEBPACK_IMPORTED_MODULE_5__.Toolbox,{options})}))]})),_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_4__.appState.config.showVisualProgramming&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("div",Object.assign({css:{overflow:"auto",height:"100%"},onMouseEnter:()=>{state.programState.hoveringCodeEditor=!0},onMouseLeave:()=>{state.programState.hoveringCodeEditor=!1}},{children:[state.ast&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_experiments_VisualProgramming__WEBPACK_IMPORTED_MODULE_5__.Node,{node:state.ast,options}),state.programState.draggingNode&&!state.programState.hoveringNode&&state.programState.hoveringCodeEditor&&Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",{css:{backgroundColor:_constants_theme_constant__WEBPACK_IMPORTED_MODULE_8__.a.colors.primary,height:2,borderRadius:10,width:"100%"}}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_experiments_VisualProgramming__WEBPACK_IMPORTED_MODULE_5__.DraggingNodeOverlay,{options})]}))]}))})}},6366:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,"BindingExpressionEditor",function(){return BindingExpressionEditor});var _emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0),_builder_io_sdk__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(11),_material_ui_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(113),_material_ui_core__WEBPACK_IMPORTED_MODULE_2___default=__webpack_require__.n(_material_ui_core__WEBPACK_IMPORTED_MODULE_2__),_material_ui_core_Tooltip__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__(131),_material_ui_core_Tooltip__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(_material_ui_core_Tooltip__WEBPACK_IMPORTED_MODULE_3__),_material_ui_icons__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__(665),_material_ui_icons__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(_material_ui_icons__WEBPACK_IMPORTED_MODULE_4__),lodash__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__(6),lodash__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(lodash__WEBPACK_IMPORTED_MODULE_5__),mobx_react__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__(90),react__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__(3),react__WEBPACK_IMPORTED_MODULE_7___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_7__),_components_CodeEditor__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__(3576),_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__(1),_designer_components_DataEditor__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__(2146),_designer_components_StyleNumberInput__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__(2169);function CodePopover(props){const updateValue=Object(react__WEBPACK_IMPORTED_MODULE_7__.useCallback)(Object(lodash__WEBPACK_IMPORTED_MODULE_5__.debounce)(value=>{object.set(field.name,value)},300,{leading:!1,trailing:!0}),[props.object]),{field,object}=props;return Object(mobx_react__WEBPACK_IMPORTED_MODULE_6__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)("div",Object.assign({css:{width:550,height:550,paddingTop:10,backgroundColor:"#1e1e1e"},className:props.className},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_components_CodeEditor__WEBPACK_IMPORTED_MODULE_8__.a,{css:{height:"100%"},defaultValue:object.get(field.name),onChange:updateValue})})))}function getBindingOptions(){return Object(_designer_components_DataEditor__WEBPACK_IMPORTED_MODULE_10__.b)()}function BindingExpressionEditor(props){return Object(mobx_react__WEBPACK_IMPORTED_MODULE_6__.g)(()=>Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.c)("div",Object.assign({css:{display:"flex",alignItems:"center",position:"relative",marginBottom:10,"&:hover .code-button":{display:"block"}}},{children:[Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_designer_components_StyleNumberInput__WEBPACK_IMPORTED_MODULE_11__.a,{css:{width:"100%"},placeholder:"Choose binding",options:getBindingOptions(),value:props.value,onChange:props.onChange}),Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core_Tooltip__WEBPACK_IMPORTED_MODULE_3___default.a,Object.assign({title:"Edit code"},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_core__WEBPACK_IMPORTED_MODULE_2___default.a,Object.assign({className:"code-button",css:{display:"none",position:"absolute",background:"var(--background)",top:2,right:25,padding:2},disabled:!_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_9__.appState.user.can("editCode"),onClick:event=>{_constants_app_state_constant__WEBPACK_IMPORTED_MODULE_9__.appState.globalState.openPopover(event.currentTarget,Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(CodePopover,{field:props.field,object:props.object}))}},{children:Object(_emotion_react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.b)(_material_ui_icons__WEBPACK_IMPORTED_MODULE_4___default.a,{css:{fontSize:18,opacity:.7}})}))}))]})))}_builder_io_sdk__WEBPACK_IMPORTED_MODULE_1__.Builder.registerEditor({name:"BindingExpression",component:BindingExpressionEditor,hidden:!0})}}]);