(window["indexManagementDashboards_bundle_jsonpfunction"]=window["indexManagementDashboards_bundle_jsonpfunction"]||[]).push([[2],{307:function(module,__webpack_exports__,__webpack_require__){"use strict";__webpack_require__.r(__webpack_exports__);var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__(0);var react__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);var _elastic_eui__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__(1);var _elastic_eui__WEBPACK_IMPORTED_MODULE_1___default=__webpack_require__.n(_elastic_eui__WEBPACK_IMPORTED_MODULE_1__);var _CustomFormRow__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__(243);const JSONDiffEditor=Object(react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"])((_ref,ref)=>{let{value:value,onChange:onChange,...others}=_ref;const[confirmModalVisible,setConfirmModalVisible]=Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(false);const[editorValue,setEditorValue]=Object(react__WEBPACK_IMPORTED_MODULE_0__["useState"])(value);const valueRef=Object(react__WEBPACK_IMPORTED_MODULE_0__["useRef"])(editorValue);valueRef.current=editorValue;Object(react__WEBPACK_IMPORTED_MODULE_0__["useEffect"])(()=>{setEditorValue(value)},[value]);Object(react__WEBPACK_IMPORTED_MODULE_0__["useImperativeHandle"])(ref,()=>({validate:()=>new Promise((resolve,reject)=>{try{JSON.parse(valueRef.current||"{}");resolve("")}catch(e){setConfirmModalVisible(true);reject("Format validate error")}}),getValue:()=>valueRef.current,setValue:val=>setEditorValue(val)}));return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",null,react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("textarea",{style:{display:"none"},value:editorValue,onChange:e=>{setEditorValue(e.target.value)},onBlur:e=>{try{JSON.parse(e.target.value);onChange&&onChange(e.target.value)}catch(e){setConfirmModalVisible(true)}},title:"editor-is-ready-true","data-test-subj":"".concat(others["data-test-subj"]||"jsonEditor","-valueDisplay")}),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{style:{display:"flex",marginBottom:12}},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{style:{flexGrow:1}},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CustomFormRow__WEBPACK_IMPORTED_MODULE_2__["b"],{label:"Original",helpText:"The original value"},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null))),react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div",{style:{flexGrow:1}},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_CustomFormRow__WEBPACK_IMPORTED_MODULE_2__["b"],{label:"Modified",helpText:"The value you modified"},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null)))),confirmModalVisible&&react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_elastic_eui__WEBPACK_IMPORTED_MODULE_1__["EuiFormRow"],{fullWidth:true,isInvalid:confirmModalVisible,error:"Your input does not match the validation of json format, please fix the error line with error aside."},react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment,null)))});__webpack_exports__["default"]=JSONDiffEditor}}]);