From 438d9f26b601bf1ac05ae7282275fc51d628b147 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Se=CC=81bastien=20Loix?= Date: Thu, 3 Sep 2020 10:40:41 +0200 Subject: [PATCH] Revert "Update embeddable InputEditor example to use non controlled JsonEditor" This reverts commit 1f9ae4115361af48fca0c4d05dc5995747b734a7. --- .../public/by_value/input_editor.tsx | 32 +++++++++++-------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/examples/dashboard_embeddable_examples/public/by_value/input_editor.tsx b/examples/dashboard_embeddable_examples/public/by_value/input_editor.tsx index 6df105f24ff99..6f74d8d3a9b14 100644 --- a/examples/dashboard_embeddable_examples/public/by_value/input_editor.tsx +++ b/examples/dashboard_embeddable_examples/public/by_value/input_editor.tsx @@ -21,27 +21,31 @@ import React from 'react'; import { EuiButton } from '@elastic/eui'; import { JsonEditor } from '../../../../src/plugins/es_ui_shared/public'; -export const InputEditor = (props: { - input: T; - onSubmit: (value: T) => void; -}) => { - const getJsonData = React.useRef(() => props.input); - const [isValid, setIsValid] = React.useState(true); - +export const InputEditor = (props: { input: T; onSubmit: (value: T) => void }) => { + const input = JSON.stringify(props.input, null, 4); + const [value, setValue] = React.useState(input); + const isValid = (() => { + try { + JSON.parse(value); + return true; + } catch (e) { + return false; + } + })(); + React.useEffect(() => { + setValue(input); + }, [input]); return ( <> - - defaultValue={props.input} - onUpdate={(jsonState) => { - getJsonData.current = jsonState.data.format; - setIsValid(jsonState.isValid); - }} + setValue(v.data.raw)} euiCodeEditorProps={{ 'data-test-subj': 'dashboardEmbeddableByValueInputEditor', }} /> props.onSubmit(getJsonData.current())} + onClick={() => props.onSubmit(JSON.parse(value))} disabled={!isValid} data-test-subj={'dashboardEmbeddableByValueInputSubmit'} >