@jsonforms/material-renderers 2.5.2 → 3.0.0-alpha.3

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,8 +34,8 @@ import {
   OwnPropsOfRenderer,
   UISchemaElement
 } from '@jsonforms/core';
-import { areEqual, ResolvedJsonFormsDispatch, useJsonForms } from '@jsonforms/react';
-import { Grid, Hidden } from '@material-ui/core';
+import { JsonFormsDispatch, useJsonForms } from '@jsonforms/react';
+import { Grid, Hidden } from '@mui/material';
 
 export const renderLayoutElements = (
   elements: UISchemaElement[],
@@ -47,7 +47,7 @@ export const renderLayoutElements = (
 ) => {
   return elements.map((child, index) => (
     <Grid item key={`${path}-${index}`} xs>
-      <ResolvedJsonFormsDispatch
+      <JsonFormsDispatch
         uischema={child}
         schema={schema}
         path={path}
@@ -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/src/util/theme.ts

@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { Theme } from '@material-ui/core/styles';
+import { Theme } from '@mui/material';
 
 export interface JsonFormsTheme extends Theme {
   jsonforms?: {

package/test/renderers/MaterialAllOfRenderer.test.tsx

@@ -26,7 +26,7 @@ import './MatchMediaMock';
 import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { ControlElement } from '@jsonforms/core';
 import { MaterialAllOfRenderer, materialRenderers } from '../../src';
 import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';

package/test/renderers/MaterialAnyOfRenderer.test.tsx

@@ -26,7 +26,7 @@ import './MatchMediaMock';
 import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import {
   ControlElement
 } from '@jsonforms/core';
@@ -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/MaterialAnyOfStringOrEnumControl.test.tsx

@@ -26,7 +26,7 @@ import './MatchMediaMock';
 import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import {
   ControlElement,
   JsonSchema

package/test/renderers/MaterialArrayControl.test.tsx

@@ -33,7 +33,7 @@ import * as React from 'react';
 import MaterialArrayControlRenderer from '../../src/complex/MaterialArrayControlRenderer';
 import { materialCells, materialRenderers } from '../../src';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider, StatelessRenderer } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 

package/test/renderers/MaterialArrayLayout.test.tsx

@@ -34,9 +34,9 @@ import {
   materialArrayLayoutTester
 } from '../../src/layouts';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';
-import { ExpansionPanel } from '@material-ui/core';
+import { Accordion } from '@mui/material';
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -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' });
@@ -426,7 +426,7 @@ describe('Material array layout', () => {
       .find(
         `#${
         wrapper
-          .find(ExpansionPanel)
+          .find(Accordion)
           .at(index)
           .props()['aria-labelledby']
         }`

package/test/renderers/MaterialBooleanCell.test.tsx

@@ -35,7 +35,7 @@ import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 

package/test/renderers/MaterialBooleanToggleCell.test.tsx

@@ -36,9 +36,10 @@ import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
+import { Switch } from '@mui/material';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -236,7 +237,7 @@ describe('Material boolean toggle cell', () => {
     );
 
     // Make sure a toggle is rendered by checking for the thumb element
-    expect(wrapper.find('.MuiSwitch-thumb')).toHaveLength(1);
+    expect(wrapper.find(Switch)).toHaveLength(1);
 
     const input = wrapper.find('input').first();
     expect(input.props().type).toBe('checkbox');

package/test/renderers/MaterialBooleanToggleControl.test.tsx

@@ -36,9 +36,10 @@ import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
+import { Switch } from '@mui/material';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -241,10 +242,9 @@ describe('Material boolean toggle control', () => {
     );
 
     // Make sure a toggle is rendered by checking for the thumb element
-    expect(wrapper.find('.MuiSwitch-thumb')).toHaveLength(1);
+    expect(wrapper.find(Switch)).toHaveLength(1);
 
     const input = wrapper.find('input').first();    
-    console.log('should render props', input.props());
     expect(input.props().type).toBe('checkbox');
     expect(input.props().checked).toBeTruthy();
   });

package/test/renderers/MaterialCategorizationLayout.test.tsx

@@ -39,8 +39,8 @@ import MaterialCategorizationLayoutRenderer, {
   materialCategorizationTester
 } from '../../src/layouts/MaterialCategorizationLayout';
 import { MaterialLayoutRenderer, materialRenderers } from '../../src';
-import { Tab, Tabs } from '@material-ui/core';
-import Adapter from 'enzyme-adapter-react-16';
+import { Tab, Tabs } from '@mui/material';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -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

@@ -39,8 +39,8 @@ import MaterialCategorizationStepperLayoutRenderer, {
   materialCategorizationStepperTester
 } from '../../src/layouts/MaterialCategorizationStepperLayout';
 import { MaterialLayoutRenderer, materialRenderers } from '../../src';
-import { Button, Step, StepButton, Stepper } from '@material-ui/core';
-import Adapter from 'enzyme-adapter-react-16';
+import { Button, Step, StepButton, Stepper } from '@mui/material';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -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/MaterialDateCell.test.tsx

@@ -35,7 +35,7 @@ import MaterialDateCell, {
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { initCore, TestEmitter } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });

package/test/renderers/MaterialDateControl.test.tsx

@@ -34,7 +34,7 @@ import * as React from 'react';
 import { materialRenderers } from '../../src';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 
@@ -101,6 +101,19 @@ describe('Material date control tester', () => {
         }
       })
     ).toBe(4);
+    expect(
+      materialDateControlTester(
+        { ...uischema, options: { format: 'date' } },
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string'
+            }
+          }
+        }
+      )
+    ).toBe(4);
   });
 });
 
@@ -189,7 +202,8 @@ describe('Material date control', () => {
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
-    input.simulate('change', { target: { value: '1961-04-12' } });
+    (input.getDOMNode() as HTMLInputElement).value = '1961-04-12';
+    input.simulate('change', input);
     expect(onChangeData.data.foo).toBe('1961-04-12');
   });
 
@@ -333,4 +347,34 @@ describe('Material date control', () => {
     const inputs = wrapper.find('input');
     expect(inputs.length).toBe(0);
   });
+
+  it('should support format customizations', () => {
+    const core = initCore(schema, uischema, {foo: '06---1980'});
+    const onChangeData: any = {
+      data: undefined
+    };
+    wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <TestEmitter
+          onChange={({ data }) => {
+            onChangeData.data = data;
+          }}
+        />
+        <MaterialDateControl
+          schema={schema}
+          uischema={{...uischema, options: {
+            dateFormat: 'YYYY/MM',
+            dateSaveFormat: 'MM---YYYY'
+          }}}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    const input = wrapper.find('input').first();
+    expect(input.props().value).toBe('1980/06');
+
+    (input.getDOMNode() as HTMLInputElement).value = '1961/04';
+    input.simulate('change', input);
+    expect(onChangeData.data.foo).toBe('04---1961');
+  });
 });