Remove custom areEqual methods

Due to previous refactorings the data is already only changing
where needed. All other control properties are also memoized
in some way.
So the manual areEqual check is not needed, instead plain memo is
used.
Also add named memos to missing renderers.
Change all material renderers to be functional components.

MIGRATION.md

@@ -2,6 +2,36 @@
 
 ## Migrating to JSON Forms 3.0 for React users
 
+### Removal of Class Components in React Material
+
+With Version 3.0 of JSON Forms we removed all class components.
+Please check whether you extended any of our base renderers in your adaptation.
+
+### Memoization changes in React bindings
+
+Previously components wrapped in our bindings (e.g. "`withJsonFormsControlProps`") were automatically memoized using a custom comparison function ("`areEqual`").
+The comparison function was rather expensive, invoking deep comparisons on some of the props.
+Also automatically applying "React.memo" on all renderers is counter productive when a user might add renderers which always rerender anyway.
+Enabled by [previous refactorings](https://github.com/eclipsesource/jsonforms/issues/1715) we now removed the custom comparison function as well as the automatic memoization.
+Thus memoization can now achieved by simply using `React.memo`.
+If your component relied on our bindings, e.g. `withJsonFormsControlProps` to be memoized, you now need to do it yourself:
+
+```ts
+import React from 'react';
+import { ControlProps, rankWith } from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+
+const MyControlComponent = ({data}: ControlProps) => {
+  return (<span>{data}</span>);
+};
+
+export const myControlTester = rankWith(2, true);
+export const MyControl = React.memo(MyControlComponent);
+export default withJsonFormsControlProps(MyControl);
+```
+
+### Removal of JSON Schema $Ref Parser
+
 With version 3.0 of JSON Forms, we removed the `json-schema-ref-parser` dependency within the core package.
 This change only affects users of the React variant, Vue and Angular users are not affected.
 

packages/core/src/util/renderer.ts

@@ -1002,8 +1002,6 @@ export const mapStateToArrayLayoutProps = (
   };
 };
 
-export type CombinatorProps = StatePropsOfCombinator & DispatchPropsOfControl;
-
 /**
  * Props of an array control.
  */

packages/examples/src/arrays.ts

@@ -46,13 +46,18 @@ export const schema = {
           }
         }
       }
-    }
+    },
+    foo:{type:'string'}
   }
 };
 
 export const uischema = {
   type: 'VerticalLayout',
   elements: [
+    {
+      type: 'Control',
+      scope: '#/properties/foo'
+    },
     {
       type: 'Control',
       scope: '#/properties/comments'

packages/material/src/additional/MaterialLabelRenderer.tsx

@@ -45,7 +45,7 @@ export const materialLabelRendererTester: RankedTester = rankWith(1, uiTypeIs('L
 /**
  * Default renderer for a label.
  */
-export const MaterialLabelRenderer = ({ uischema, visible }: OwnPropsOfRenderer) => {
+const MaterialLabelRendererComponent = ({ uischema, visible }: OwnPropsOfRenderer) => {
   const labelElement: LabelElement = uischema as LabelElement;
   return (
     <Hidden xsUp={!visible}>
@@ -56,4 +56,5 @@ export const MaterialLabelRenderer = ({ uischema, visible }: OwnPropsOfRenderer)
   );
 };
 
+export const MaterialLabelRenderer = React.memo(MaterialLabelRendererComponent);
 export default withJsonFormsLayoutProps(MaterialLabelRenderer);

packages/material/src/cells/MaterialBooleanCell.tsx

@@ -33,7 +33,7 @@ import {
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiCheckbox } from '../mui-controls/MuiCheckbox';
 
-export const MaterialBooleanCell = (props: CellProps & WithClassname) => {
+const MaterialBooleanCellComponent = (props: CellProps & WithClassname) => {
   return <MuiCheckbox {...props} />;
 };
 
@@ -42,4 +42,5 @@ export const materialBooleanCellTester: RankedTester = rankWith(
   isBooleanControl
 );
 
+export const MaterialBooleanCell = React.memo(MaterialBooleanCellComponent);
 export default withJsonFormsCellProps(MaterialBooleanCell);

packages/material/src/cells/MaterialBooleanToggleCell.tsx

@@ -35,7 +35,7 @@ import {
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiToggle } from '../mui-controls/MuiToggle';
 
-export const MaterialBooleanToggleCell = (props: CellProps & WithClassname) => {
+const MaterialBooleanToggleCellComponent = (props: CellProps & WithClassname) => {
   return <MuiToggle {...props} />;
 };
 
@@ -44,4 +44,5 @@ export const materialBooleanToggleCellTester: RankedTester = rankWith(
   and(isBooleanControl, optionIs('toggle', true))
 );;
 
+export const MaterialBooleanToggleCell = React.memo(MaterialBooleanToggleCellComponent);
 export default withJsonFormsCellProps(MaterialBooleanToggleCell);

packages/material/src/cells/MaterialDateCell.tsx

@@ -34,7 +34,7 @@ import { withJsonFormsCellProps } from '@jsonforms/react';
 import Input from '@material-ui/core/Input';
 import merge from 'lodash/merge';
 
-export const MaterialDateCell = (props: CellProps & WithClassname) => {
+const MaterialDateCellComponent = (props: CellProps & WithClassname) => {
   const {
     data,
     className,
@@ -63,4 +63,5 @@ export const MaterialDateCell = (props: CellProps & WithClassname) => {
 };
 export const materialDateCellTester: RankedTester = rankWith(2, isDateControl);
 
+export const MaterialDateCell = React.memo(MaterialDateCellComponent);
 export default withJsonFormsCellProps(MaterialDateCell);

packages/material/src/cells/MaterialEnumCell.tsx

@@ -33,7 +33,7 @@ import {
 import { withJsonFormsEnumCellProps } from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 
-export const MaterialEnumCell = (props: EnumCellProps & WithClassname) => (
+const MaterialEnumCellComponent = (props: EnumCellProps & WithClassname) => (
   <MuiSelect {...props} />
 );
 
@@ -43,4 +43,5 @@ export const MaterialEnumCell = (props: EnumCellProps & WithClassname) => (
  */
 export const materialEnumCellTester: RankedTester = rankWith(2, isEnumControl);
 
+export const MaterialEnumCell = React.memo(MaterialEnumCellComponent);
 export default withJsonFormsEnumCellProps(MaterialEnumCell);

packages/material/src/cells/MaterialIntegerCell.tsx

@@ -33,12 +33,13 @@ import {
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputInteger } from '../mui-controls/MuiInputInteger';
 
-export const MaterialIntegerCell = (props: CellProps & WithClassname) => (
+const MaterialIntegerCellComponent = (props: CellProps & WithClassname) => (
   <MuiInputInteger {...props} />
 );
 export const materialIntegerCellTester: RankedTester = rankWith(
   2,
   isIntegerControl
 );
 
+export const MaterialIntegerCell = React.memo(MaterialIntegerCellComponent);
 export default withJsonFormsCellProps(MaterialIntegerCell);

packages/material/src/cells/MaterialNumberCell.tsx

@@ -33,7 +33,7 @@ import {
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputNumber } from '../mui-controls/MuiInputNumber';
 
-export const MaterialNumberCell = (props: CellProps & WithClassname) => (
+const MaterialNumberCellComponent = (props: CellProps & WithClassname) => (
   <MuiInputNumber {...props} />
 );
 /**
@@ -44,4 +44,6 @@ export const materialNumberCellTester: RankedTester = rankWith(
   2,
   isNumberControl
 );
+
+export const MaterialNumberCell = React.memo(MaterialNumberCellComponent);
 export default withJsonFormsCellProps(MaterialNumberCell);

packages/material/src/cells/MaterialNumberFormatCell.tsx

@@ -34,7 +34,7 @@ import {
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputNumberFormat } from '../mui-controls/MuiInputNumberFormat';
 
-export const MaterialNumberFormatCell = (
+const MaterialNumberFormatCellComponent = (
   props: CellProps & WithClassname & Formatted<number>
 ) => <MuiInputNumberFormat {...props} />;
 /**
@@ -46,4 +46,5 @@ export const materialNumberFormatCellTester: RankedTester = rankWith(
   isNumberFormatControl
 );
 
+export const MaterialNumberFormatCell = React.memo(MaterialNumberFormatCellComponent);
 export default withJsonFormsCellProps(MaterialNumberFormatCell);

packages/material/src/cells/MaterialOneOfEnumCell.tsx

@@ -33,7 +33,7 @@ import {
 import { withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 
-export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname) => (
+const MaterialOneOfEnumCellComponent = (props: EnumCellProps & WithClassname) => (
   <MuiSelect {...props} />
 );
 
@@ -43,4 +43,5 @@ export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname) => (
  */
 export const materialOneOfEnumCellTester: RankedTester = rankWith(2, isOneOfEnumControl);
 
+export const MaterialOneOfEnumCell = React.memo(MaterialOneOfEnumCellComponent);
 export default withJsonFormsOneOfEnumCellProps(MaterialOneOfEnumCell);

packages/material/src/cells/MaterialTextCell.tsx

@@ -33,7 +33,7 @@ import {
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputText } from '../mui-controls/MuiInputText';
 
-export const MaterialTextCell = (props: CellProps & WithClassname) => (
+const MaterialTextCellComponent = (props: CellProps & WithClassname) => (
   <MuiInputText {...props} />
 );
 
@@ -46,4 +46,5 @@ export const materialTextCellTester: RankedTester = rankWith(
   isStringControl
 );
 
+export const MaterialTextCell = React.memo(MaterialTextCellComponent);
 export default withJsonFormsCellProps(MaterialTextCell);

packages/material/src/cells/MaterialTimeCell.tsx

@@ -33,8 +33,10 @@ import {
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputTime } from '../mui-controls/MuiInputTime';
 
-export const MaterialTimeCell = (props: CellProps & WithClassname) => (
+const MaterialTimeCellComponent = (props: CellProps & WithClassname) => (
   <MuiInputTime {...props} />
 );
 export const materialTimeCellTester: RankedTester = rankWith(2, isTimeControl);
+
+export const MaterialTimeCell = React.memo(MaterialTimeCellComponent);
 export default withJsonFormsCellProps(MaterialTimeCell);

packages/material/src/complex/MaterialAllOfRenderer.tsx

@@ -37,7 +37,7 @@ import {
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAllOfProps } from '@jsonforms/react';
 
-const MaterialAllOfRenderer = ({
+const MaterialAllOfRendererComponent = ({
   schema,
   rootSchema,
   visible,
@@ -95,4 +95,6 @@ export const materialAllOfControlTester: RankedTester = rankWith(
   3,
   isAllOfControl
 );
+
+export const MaterialAllOfRenderer = React.memo(MaterialAllOfRendererComponent);
 export default withJsonFormsAllOfProps(MaterialAllOfRenderer);

packages/material/src/complex/MaterialAnyOfRenderer.tsx

@@ -37,7 +37,7 @@ import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
 import { Hidden, Tab, Tabs } from '@material-ui/core';
 import CombinatorProperties from './CombinatorProperties';
 
-const MaterialAnyOfRenderer = ({
+const MaterialAnyOfRendererComponent = ({
   schema,
   rootSchema,
   indexOfFittingSchema,
@@ -97,4 +97,6 @@ export const materialAnyOfControlTester: RankedTester = rankWith(
   3,
   isAnyOfControl
 );
+
+export const MaterialAnyOfRenderer = React.memo(MaterialAnyOfRendererComponent);
 export default withJsonFormsAnyOfProps(MaterialAnyOfRenderer);

packages/material/src/complex/MaterialArrayControlRenderer.tsx

@@ -29,7 +29,7 @@ import { MaterialTableControl } from './MaterialTableControl';
 import { Hidden } from '@material-ui/core';
 import { DeleteDialog } from './DeleteDialog';
 
-export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
+export const MaterialArrayControlRendererComponent = (props: ArrayLayoutProps) => {
   const [open, setOpen] = useState(false);
   const [path, setPath] = useState(undefined);
   const [rowData, setRowData] = useState(undefined);
@@ -64,4 +64,5 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
   );
 };
 
+export const MaterialArrayControlRenderer = React.memo(MaterialArrayControlRendererComponent);
 export default withJsonFormsArrayLayoutProps(MaterialArrayControlRenderer);

packages/material/src/complex/MaterialEnumArrayRenderer.tsx

@@ -26,7 +26,7 @@ import { startCase } from 'lodash';
 import { isEmpty } from 'lodash';
 import React from 'react';
 
-export const MaterialEnumArrayRenderer = ({
+const MaterialEnumArrayRendererComponent = ({
   schema,
   visible,
   errors,
@@ -108,4 +108,5 @@ export const materialEnumArrayRendererTester: RankedTester = rankWith(
   )
 );
 
+export const MaterialEnumArrayRenderer = React.memo(MaterialEnumArrayRendererComponent);
 export default withJsonFormsMultiEnumProps(MaterialEnumArrayRenderer);

packages/material/src/complex/MaterialObjectRenderer.tsx

@@ -35,7 +35,7 @@ import { JsonFormsDispatch, withJsonFormsDetailProps } from '@jsonforms/react';
 import { Hidden } from '@material-ui/core';
 import React, { useMemo } from 'react';
 
-const MaterialObjectRenderer = ({
+const MaterialObjectRendererComponent = ({
   renderers,
   cells,
   uischemas,
@@ -84,4 +84,6 @@ export const materialObjectControlTester: RankedTester = rankWith(
   2,
   isObjectControl
 );
+
+export const MaterialObjectRenderer = React.memo(MaterialObjectRendererComponent);
 export default withJsonFormsDetailProps(MaterialObjectRenderer);

packages/material/src/complex/MaterialOneOfRenderer.tsx

@@ -26,7 +26,7 @@ import React, { useCallback, useState } from 'react';
 import isEmpty from 'lodash/isEmpty';
 
 import {
-  CombinatorProps,
+  CombinatorRendererProps,
   createCombinatorRenderInfos,
   createDefaultValue,
   isOneOfControl,
@@ -58,8 +58,8 @@ export interface OwnOneOfProps extends OwnPropsOfControl {
 }
 
 const oneOf = 'oneOf';
-const MaterialOneOfRenderer =
-  ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data }: CombinatorProps) => {
+const MaterialOneOfRendererComponent =
+  ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data }: CombinatorRendererProps) => {
     const [open, setOpen] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
     const [newSelectedIndex, setNewSelectedIndex] = useState(0);
@@ -150,4 +150,6 @@ const MaterialOneOfRenderer =
   };
 
 export const materialOneOfControlTester: RankedTester = rankWith(3, isOneOfControl);
+
+export const MaterialOneOfRenderer = React.memo(MaterialOneOfRendererComponent);
 export default withJsonFormsOneOfProps(MaterialOneOfRenderer);