fix: add support of external validator for JsonEditorEntry

Author: AlekseyManetov

src/components/entries/JsonEditor.js

@@ -8,7 +8,7 @@ import {
 
 import classnames from 'classnames';
 
-import { isObject } from 'min-dash';
+import { isFunction, isObject } from 'min-dash';
 
 import {
   useDebounce,
@@ -171,6 +171,7 @@ function JsonEditor(props) {
  * @param {boolean} [props.disabled]
  * @param {string} [props.placeholder]
  * @param {string} [props.tooltip]
+ * @param {Function} [props.validate]
  */
 export default function JsonEditorEntry(props) {
   const {
@@ -183,12 +184,16 @@ export default function JsonEditorEntry(props) {
     setValue,
     disabled,
     placeholder,
-    tooltip
+    tooltip,
+    validate
   } = props;
 
   const globalError = useError(id);
 
   let value = getValue(element);
+  const [ localError, setLocalError ] = useState(
+    () => computeError(validate, value)
+  );
   const [ editorValue, setEditorValue ] = useState(value);
 
   useEffect(() => {
@@ -197,6 +202,7 @@ export default function JsonEditorEntry(props) {
     }
 
     setEditorValue(value);
+    setLocalError(computeError(validate, value));
   }, [ value ]);
 
   const onInput = useStaticCallback((newValue) => {
@@ -205,11 +211,14 @@ export default function JsonEditorEntry(props) {
     const currentValue = getValue(element);
 
     if (newValue !== currentValue) {
-      setValue(newValue);
+      const newValidationError = computeError(validate, newValue);
+
+      setValue(newValue, newValidationError);
+      setLocalError(newValidationError);
     }
   });
 
-  const error = globalError || validateJson(editorValue);
+  const error = globalError || localError;
 
   return (
     <div
@@ -243,6 +252,10 @@ export function isEdited(node) {
 
 // helpers /////////////////
 
+function computeError(validate, value) {
+  return (isFunction(validate) ? validate(value) : null) || validateJson(value);
+}
+
 function validateJson(value) {
   if (!value || !value.trim()) return null;
 
@@ -252,6 +265,3 @@ function validateJson(value) {
     return 'JSON contains errors';
   }
 }
-
-
-

test/spec/components/JsonEditor.spec.js

@@ -266,6 +266,68 @@ describe('<JsonEditor>', function() {
       expect(editorInlineErrors).to.not.exist;
     });
 
+
+    it('should show error from validate prop', async function() {
+
+      // given
+      const validate = (value) => value === 'invalid' ? 'custom error' : null;
+
+      const result = createJsonEditor({
+        container,
+        getValue: () => 'invalid',
+        validate
+      });
+
+      // then
+      await waitFor(() => {
+        const error = domQuery('.bio-properties-panel-error', result.container);
+        expect(error).to.exist;
+        expect(error.textContent).to.equal('custom error');
+      });
+    });
+
+
+    it('should show no error from validate prop if valid', async function() {
+
+      // given
+      const validate = (value) => value === 'invalid' ? 'custom error' : null;
+
+      const result = createJsonEditor({
+        container,
+        getValue: () => '{"valid": true}',
+        validate
+      });
+
+      // then
+      await waitFor(() => {
+        const error = domQuery('.bio-properties-panel-error', result.container);
+        expect(error).to.not.exist;
+      });
+    });
+
+
+    it('should pass validation error to setValue', async function() {
+
+      // given
+      const validate = () => 'always invalid';
+      const setValue = sinonSpy();
+
+      const result = createJsonEditor({
+        container,
+        getValue: () => '',
+        setValue,
+        validate
+      });
+
+      // when
+      setEditorValue(result.container, 'new value');
+
+      // then
+      await waitFor(() => {
+        expect(setValue).to.have.been.calledWith('new value', 'always invalid');
+      });
+    });
+
   });
 
 
@@ -349,6 +411,7 @@ function createJsonEditor(options = {}, renderFn = render) {
     disabled,
     placeholder,
     tooltip,
+    validate,
     descriptionConfig = {},
     getDescriptionForId = noop,
     container,
@@ -389,7 +452,8 @@ function createJsonEditor(options = {}, renderFn = render) {
               setValue={ setValue }
               disabled={ disabled }
               placeholder={ placeholder }
-              tooltip={ tooltip } />
+              tooltip={ tooltip }
+              validate={ validate } />
           </DescriptionContext.Provider>
         </PropertiesPanelContext.Provider>
       </EventContext.Provider>