@jsonforms/material-renderers 3.0.0-alpha.1 → 3.0.0-alpha.2

package/src/util/focus.ts

@@ -0,0 +1,32 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2021 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import {useState, useCallback} from 'react';
+
+export const useFocus = ():[boolean, () => void, () => void] => {
+    const [focused, setFocused] = useState(false);
+    const onFocus = useCallback(() => setFocused(true), []);
+    const onBlur = useCallback(() => setFocused(false), []);
+    return [focused, onFocus, onBlur];
+};

package/src/util/index.ts

@@ -25,3 +25,5 @@
 export * from './datejs';
 export * from './layout';
 export * from './theme';
+export * from './debounce';
+export * from './focus';

package/src/util/layout.tsx

@@ -25,7 +25,7 @@
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
 import { ComponentType } from 'react';
-import { Ajv } from 'ajv';
+import Ajv from 'ajv';
 import {
   getAjv,
   JsonFormsCellRendererRegistryEntry,
@@ -34,7 +34,7 @@ import {
   OwnPropsOfRenderer,
   UISchemaElement
 } from '@jsonforms/core';
-import { areEqual, JsonFormsDispatch, useJsonForms } from '@jsonforms/react';
+import { JsonFormsDispatch, useJsonForms } from '@jsonforms/react';
 import { Grid, Hidden } from '@material-ui/core';
 
 export const renderLayoutElements = (
@@ -63,7 +63,7 @@ export interface MaterialLayoutRendererProps extends OwnPropsOfRenderer {
   elements: UISchemaElement[];
   direction: 'row' | 'column';
 }
-export const MaterialLayoutRenderer = React.memo(
+const MaterialLayoutRendererComponent =
   ({
     visible,
     elements,
@@ -96,9 +96,8 @@ export const MaterialLayoutRenderer = React.memo(
         </Hidden>
       );
     }
-  },
-  areEqual
-);
+  };
+export const MaterialLayoutRenderer = React.memo(MaterialLayoutRendererComponent);
 
 export interface AjvProps {
   ajv: Ajv;

package/test/renderers/MaterialAnyOfRenderer.test.tsx

@@ -62,7 +62,7 @@ describe('Material anyOf renderer', () => {
 
   afterEach(() => wrapper.unmount());
 
-  it('should add an item at correct path', () => {
+  it('should add an item at correct path', (done) => {
     const schema = {
       type: 'object',
       properties: {
@@ -103,9 +103,12 @@ describe('Material anyOf renderer', () => {
     const input = wrapper.find('input').first();
     input.simulate('change', { target: { value: 'test' } });
     wrapper.update();
-    expect(onChangeData.data).toEqual({
-      value: 'test'
-    });
+    setTimeout(() => {
+      expect(onChangeData.data).toEqual({
+        value: 'test'
+      });
+      done();
+    }, 1000);
   });
 
   it('should add a "mything"', async () => {
@@ -179,7 +182,7 @@ describe('Material anyOf renderer', () => {
     expect(nrOfRowsAfterAdd.length).toBe(4);
   });
 
-  it('should switch to "yourThing" edit, then switch back, then edit', async () => {
+  it('should switch to "yourThing" edit, then switch back, then edit', async (done) => {
     const schema = {
       type: 'object',
       properties: {
@@ -260,9 +263,12 @@ describe('Material anyOf renderer', () => {
     input.simulate('change', { target: { value: 'test' } });
     wrapper.update();
 
-    expect(onChangeData.data).toEqual({
-      myThingsAndOrYourThings: [{ age: 5, name: 'test' }]
-    });
+    setTimeout(() => {
+      expect(onChangeData.data).toEqual({
+        myThingsAndOrYourThings: [{ age: 5, name: 'test' }]
+      });
+      done();
+    }, 1000);
   });
 
   it('should be hideable', () => {

package/test/renderers/MaterialArrayLayout.test.tsx

@@ -292,7 +292,7 @@ describe('Material array layout', () => {
     // up button
     expect(
       wrapper
-        .find('ExpandPanelRenderer')
+        .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
         .find({ 'aria-label': 'Move up' }).length
@@ -300,7 +300,7 @@ describe('Material array layout', () => {
     // down button
     expect(
       wrapper
-        .find('ExpandPanelRenderer')
+        .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
         .find({ 'aria-label': 'Move down' }).length
@@ -326,7 +326,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(1)
       .find('button')
       .find({ 'aria-label': 'Move up' });
@@ -363,7 +363,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(0)
       .find('button')
       .find({ 'aria-label': 'Move down' });
@@ -394,7 +394,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const upButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(0)
       .find('button')
       .find({ 'aria-label': 'Move up' });
@@ -414,7 +414,7 @@ describe('Material array layout', () => {
 
     // getting up button of second item in expension panel;
     const downButton = wrapper
-      .find('ExpandPanelRenderer')
+      .find('Memo(ExpandPanelRendererComponent)')
       .at(1)
       .find('button')
       .find({ 'aria-label': 'Move down' });

package/test/renderers/MaterialCategorizationLayout.test.tsx

@@ -372,4 +372,77 @@ describe('Material categorization layout', () => {
     const materialArrayLayout = wrapper.find(MaterialLayoutRenderer);
     expect(materialArrayLayout.props().renderers).toHaveLength(0);
   });
+
+  it('display correct content when hiding a tab', () => {
+    const data = { name : 'fo' };
+    const condition: SchemaBasedCondition = {
+      scope: '#/properties/name',
+      schema: { maxLength: 3 }
+    };
+    const nameControl: ControlElement = {
+      type: 'Control',
+      scope: '#/properties/name'
+    };
+    const uischema: Categorization = {
+      type: 'Categorization',
+      label: '',
+      options: {
+          showNavButtons: true
+      },
+      elements: [
+        {
+          type: 'Category',
+          label: 'A',
+          elements: undefined
+        },
+        {
+          type: 'Category',
+          label: 'B',
+          elements: undefined,
+          rule: {
+            effect: RuleEffect.SHOW,
+            condition: condition
+          }
+        },
+        {
+          type: 'Category',
+          label: 'C',
+          elements: [nameControl],
+          rule: {
+            effect: RuleEffect.HIDE,
+            condition: condition
+          }
+        }
+      ]
+    };
+
+    const core = initCore(fixture.schema, uischema, data);
+
+    const wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <MaterialCategorizationLayoutRenderer
+            {...layoutDefaultProps}
+            schema={fixture.schema}
+            uischema={uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+    
+    wrapper
+      .find(Tab)
+      .at(1)
+      .simulate('click');
+
+    let isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(false);
+
+    core.data = { ...core.data, name: 'Barr' };
+    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.update();
+
+    isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(true);
+    
+    wrapper.unmount();
+  });
 });

package/test/renderers/MaterialCategorizationStepperLayout.test.tsx

@@ -561,4 +561,77 @@ describe('Material categorization stepper layout', () => {
 
     wrapper.unmount();
   });
+
+  it('display correct content when hiding a step', () => {
+    const data = { name : 'fo' };
+    const condition: SchemaBasedCondition = {
+      scope: '#/properties/name',
+      schema: { maxLength: 3 }
+    };
+    const nameControl: ControlElement = {
+      type: 'Control',
+      scope: '#/properties/name'
+    };
+    const uischema: Categorization = {
+      type: 'Categorization',
+      label: '',
+      options: {
+          showNavButtons: true
+      },
+      elements: [
+        {
+          type: 'Category',
+          label: 'A',
+          elements: undefined
+        },
+        {
+          type: 'Category',
+          label: 'B',
+          elements: undefined,
+          rule: {
+            effect: RuleEffect.SHOW,
+            condition: condition
+          }
+        },
+        {
+          type: 'Category',
+          label: 'C',
+          elements: [nameControl],
+          rule: {
+            effect: RuleEffect.HIDE,
+            condition: condition
+          }
+        }
+      ]
+    };
+
+    const core = initCore(fixture.schema, uischema, data);
+
+    const wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <MaterialCategorizationStepperLayoutRenderer
+            {...layoutDefaultProps}
+            schema={fixture.schema}
+            uischema={uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+    
+    wrapper
+      .find(StepButton)
+      .at(1)
+      .simulate('click');
+
+    let isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(false);
+
+    core.data = { ...core.data, name: 'Barr' };
+    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.update();
+
+    isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
+    expect(isCategoryCshown).toBe(true);
+    
+    wrapper.unmount();
+  });
 });

package/test/renderers/MaterialInputControl.test.tsx

@@ -159,7 +159,7 @@ describe('Material input control', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const validation = wrapper.find('p').first();
-    expect(validation.text()).toBe('should be string');
+    expect(validation.text()).toBe('must be string');
   });
 
   it('should display multiple errors', () => {
@@ -173,7 +173,7 @@ describe('Material input control', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
     const validation = wrapper.find('p').first();
-    expect(validation.text()).toBe('should be string');
+    expect(validation.text()).toBe('must be string');
   });
 
   it('should not show any errors', () => {
@@ -283,7 +283,7 @@ describe('Material input control', () => {
       </JsonFormsStateProvider>
     );
     const label = wrapper.find('label').first();
-    expect(label.text()).toBe('Date Cell*');
+    expect(label.text()).toBe('Date Cell *');
   });
 
   it('should not display a marker for a non-required prop', () => {

package/test/renderers/MaterialIntegerCell.test.tsx

@@ -175,7 +175,7 @@ describe('Material integer cells', () => {
     expect(input.props().value).toBe(0);
   });
 
-  it('should update via input event', () => {
+  it('should update via input event', (done) => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
       data: undefined
@@ -193,10 +193,13 @@ describe('Material integer cells', () => {
 
     const input = wrapper.find('input');
     input.simulate('change', { target: { value: 13 } });
-    expect(onChangeData.data.foo).toBe(13);
+    setTimeout(() => {
+      expect(onChangeData.data.foo).toBe(13);
+      done();
+    }, 1000)
   });
 
-  it('should update via action', () => {
+  it('should update via action', (done) => {
     const core = initCore(schema, uischema, { foo: 13 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -206,11 +209,14 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, foo: 42 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(42);
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe(42);
+      done();
+    }, 1000);
   });
 
-  it('should not update with undefined value', () => {
+  it('should not update with undefined value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -220,11 +226,14 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, foo: undefined };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input');
-    expect(input.props().value).toBe('');
+    setTimeout(() => {
+      const input = wrapper.find('input');
+      expect(input.props().value).toBe('');
+      done();
+    }, 1000);
   });
 
-  it('should not update with null value', () => {
+  it('should not update with null value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -234,11 +243,14 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, foo: null };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('');
+      done();
+    }, 1000);
   });
 
-  it('should not update with wrong ref', () => {
+  it('should not update with wrong ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -248,11 +260,14 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, bar: 11 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input');
-    expect(input.props().value).toBe(42);
+    setTimeout(() => {
+      const input = wrapper.find('input');
+      expect(input.props().value).toBe(42);
+      done();
+    }, 1000);
   });
 
-  it('should not update with null ref', () => {
+  it('should not update with null ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -262,11 +277,14 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, null: 13 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(42);
+    setTimeout(() => {
+      const input = wrapper.find('input');
+      expect(input.props().value).toBe(42);
+      done();
+    }, 1000);
   });
 
-  it('should not update with undefined ref', () => {
+  it('should not update with undefined ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -276,8 +294,11 @@ describe('Material integer cells', () => {
     core.data = { ...core.data, undefined: 13 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(42);
+    setTimeout(() => {
+      const input = wrapper.find('input');
+      expect(input.props().value).toBe(42);
+      done();
+    }, 1000);
   });
 
   it('can be disabled', () => {

package/test/renderers/MaterialNumberCell.test.tsx

@@ -217,7 +217,7 @@ describe('Material number cells', () => {
     expect(input.props().value).toBe(0);
   });
 
-  it('should update via input event', () => {
+  it('should update via input event', (done) => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
       data: undefined
@@ -234,10 +234,13 @@ describe('Material number cells', () => {
     );
     const input = wrapper.find('input');
     input.simulate('change', { target: { value: 2.72 } });
-    expect(onChangeData.data.foo).toBe(2.72);
+    setTimeout(() => {
+      expect(onChangeData.data.foo).toBe(2.72);
+      done();
+    }, 1000);
   });
 
-  it('should update via action', () => {
+  it('should update via action', (done) => {
     const core = initCore(schema, uischema, { foo: 2.72 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -251,15 +254,18 @@ describe('Material number cells', () => {
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
 
-    expect(
-      wrapper
-        .find('input')
-        .first()
-        .props().value
-    ).toBe(3.14);
+    setTimeout(() => {
+      expect(
+        wrapper
+          .find('input')
+          .first()
+          .props().value
+      ).toBe(3.14);
+      done();
+    }, 1000);
   });
 
-  it('should update with undefined value', () => {
+  it('should update with undefined value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -269,11 +275,14 @@ describe('Material number cells', () => {
     core.data = { ...core.data, foo: undefined };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('');
+      done();
+    }, 1000);
   });
 
-  it('should not update with null value', () => {
+  it('should not update with null value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -283,11 +292,14 @@ describe('Material number cells', () => {
     core.data = { ...core.data, foo: null };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe('');
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe('');
+      done();
+    }, 1000);
   });
 
-  it('should not update with wrong ref', () => {
+  it('should not update with wrong ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -297,11 +309,14 @@ describe('Material number cells', () => {
     core.data = { ...core.data, bar: 11 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(3.14);
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe(3.14);
+      done();
+    }, 1000);
   });
 
-  it('should not update with null ref', () => {
+  it('should not update with null ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -311,11 +326,14 @@ describe('Material number cells', () => {
     core.data = { ...core.data, null: 2.72 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(3.14);
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe(3.14);
+      done();
+    }, 1000);
   });
 
-  it('should not update with undefined ref', () => {
+  it('should not update with undefined ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
@@ -325,8 +343,11 @@ describe('Material number cells', () => {
     core.data = { ...core.data, undefined: 13 };
     wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
     wrapper.update();
-    const input = wrapper.find('input').first();
-    expect(input.props().value).toBe(3.14);
+    setTimeout(() => {
+      const input = wrapper.find('input').first();
+      expect(input.props().value).toBe(3.14);
+      done();
+    }, 1000);
   });
 
   it('can be disabled', () => {

package/test/renderers/MaterialOneOfRenderer.test.tsx

@@ -256,7 +256,7 @@ describe('Material oneOf renderer', () => {
     expect(secondTab.props().selected).toBeTruthy();
   });
 
-  it('should add an item at correct path', () => {
+  it('should add an item at correct path', (done) => {
     const schema = {
       type: 'object',
       properties: {
@@ -298,9 +298,12 @@ describe('Material oneOf renderer', () => {
     const input = wrapper.find('input').first();
     input.simulate('change', { target: { value: 'test' } });
     wrapper.update();
-    expect(onChangeData.data).toEqual({
-      value: 'test'
-    });
+    setTimeout(() => {
+      expect(onChangeData.data).toEqual({
+        value: 'test'
+      });
+      done();
+    }, 1000);
   });
 
   it.skip('should add an item within an array', async () => {