@jsonforms/material-renderers 3.0.0-alpha.0 → 3.0.0-beta.0

package/src/layouts/MaterialArrayLayout.tsx

@@ -23,100 +23,90 @@
   THE SOFTWARE.
 */
 import range from 'lodash/range';
-import React from 'react';
+import React, {useState, useCallback} from 'react';
 import {
   ArrayLayoutProps,
   composePaths,
   computeLabel,
   createDefaultValue,
-  isPlainLabel
 } from '@jsonforms/core';
 import map from 'lodash/map';
 import { ArrayLayoutToolbar } from './ArrayToolbar';
 import ExpandPanelRenderer from './ExpandPanelRenderer';
 import merge from 'lodash/merge';
 
-interface MaterialArrayLayoutState {
-  expanded: string | boolean;
-}
-export class MaterialArrayLayout extends React.PureComponent<
-  ArrayLayoutProps,
-  MaterialArrayLayoutState
-> {
-  state: MaterialArrayLayoutState = {
-    expanded: null
-  };
-  innerCreateDefaultValue = () => createDefaultValue(this.props.schema);
-  handleChange = (panel: string) => (_event: any, expanded: boolean) => {
-    this.setState({
-      expanded: expanded ? panel : false
-    });
-  };
-  isExpanded = (index: number) =>
-    this.state.expanded === composePaths(this.props.path, `${index}`);
-  render() {
-    const {
-      data,
-      path,
-      schema,
-      uischema,
-      errors,
-      addItem,
-      renderers,
-      cells,
-      label,
-      required,
-      rootSchema,
-      config,
-      uischemas
-    } = this.props;
-    const appliedUiSchemaOptions = merge(
-      {},
-      config,
-      this.props.uischema.options
-    );
+const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
+  const [expanded, setExpanded] = useState<string|boolean>(false);
+  const innerCreateDefaultValue = useCallback(() => createDefaultValue(props.schema), [props.schema]);
+  const handleChange = useCallback((panel: string) => (_event: any, expandedPanel: boolean) => {
+    setExpanded(expandedPanel ? panel : false)
+  }, []);
+  const isExpanded = (index: number) => 
+    expanded === composePaths(props.path, `${index}`);
+  
+  const {
+    data,
+    path,
+    schema,
+    uischema,
+    errors,
+    addItem,
+    renderers,
+    cells,
+    label,
+    required,
+    rootSchema,
+    config,
+    uischemas
+  } = props;
+  const appliedUiSchemaOptions = merge(
+    {},
+    config,
+    props.uischema.options
+  );
 
-    return (
+  return (
+    <div>
+      <ArrayLayoutToolbar
+        label={computeLabel(
+          label,
+          required,
+          appliedUiSchemaOptions.hideRequiredAsterisk
+        )}
+        errors={errors}
+        path={path}
+        addItem={addItem}
+        createDefault={innerCreateDefaultValue}
+      />
       <div>
-        <ArrayLayoutToolbar
-          label={computeLabel(
-            isPlainLabel(label) ? label : label.default,
-            required,
-            appliedUiSchemaOptions.hideRequiredAsterisk
-          )}
-          errors={errors}
-          path={path}
-          addItem={addItem}
-          createDefault={this.innerCreateDefaultValue}
-        />
-        <div>
-          {data > 0 ? (
-            map(range(data), index => {
-              return (
-                <ExpandPanelRenderer
-                  index={index}
-                  expanded={this.isExpanded(index)}
-                  schema={schema}
-                  path={path}
-                  handleExpansion={this.handleChange}
-                  uischema={uischema}
-                  renderers={renderers}
-                  cells={cells}
-                  key={index}
-                  rootSchema={rootSchema}
-                  enableMoveUp={index != 0}
-                  enableMoveDown={index < data - 1}
-                  config={config}
-                  childLabelProp={appliedUiSchemaOptions.elementLabelProp}
-                  uischemas={uischemas}
-                />
-              );
-            })
-          ) : (
-            <p>No data</p>
-          )}
-        </div>
+        {data > 0 ? (
+          map(range(data), index => {
+            return (
+              <ExpandPanelRenderer
+                index={index}
+                expanded={isExpanded(index)}
+                schema={schema}
+                path={path}
+                handleExpansion={handleChange}
+                uischema={uischema}
+                renderers={renderers}
+                cells={cells}
+                key={index}
+                rootSchema={rootSchema}
+                enableMoveUp={index != 0}
+                enableMoveDown={index < data - 1}
+                config={config}
+                childLabelProp={appliedUiSchemaOptions.elementLabelProp}
+                uischemas={uischemas}
+              />
+            );
+          })
+        ) : (
+          <p>No data</p>
+        )}
       </div>
-    );
-  }
-}
+    </div>
+  );
+};
+
+export const MaterialArrayLayout = React.memo(MaterialArrayLayoutComponent);

package/src/layouts/MaterialArrayLayoutRenderer.tsx

@@ -30,7 +30,7 @@ import {
   RankedTester,
   rankWith
 } from '@jsonforms/core';
-import { Hidden } from '@material-ui/core';
+import { Hidden } from '@mui/material';
 import { MaterialArrayLayout } from './MaterialArrayLayout';
 import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 

package/src/layouts/MaterialCategorizationLayout.tsx

@@ -22,9 +22,8 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
-import { Hidden, Tab, Tabs } from '@material-ui/core';
-import AppBar from '@material-ui/core/AppBar';
+import React, {useState} from 'react';
+import { AppBar, Hidden, Tab, Tabs } from '@mui/material';
 import {
   and,
   Categorization,
@@ -37,7 +36,7 @@ import {
   UISchemaElement,
   uiTypeIs
 } from '@jsonforms/core';
-import { RendererComponent, withJsonFormsLayoutProps } from '@jsonforms/react';
+import { withJsonFormsLayoutProps } from '@jsonforms/react';
 import {
   AjvProps,
   MaterialLayoutRenderer,
@@ -76,71 +75,55 @@ export interface MaterialCategorizationLayoutRendererProps
   onChange?(selected: number, prevSelected: number): void;
 }
 
-export class MaterialCategorizationLayoutRenderer extends RendererComponent<
-  MaterialCategorizationLayoutRendererProps,
-  CategorizationState
-> {
-  state = {
-    activeCategory: 0
+export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizationLayoutRendererProps) => {
+  const {
+    data,
+    path,
+    renderers,
+    cells,
+    schema,
+    uischema,
+    visible,
+    enabled,
+    selected,
+    onChange,
+    ajv
+  } = props;
+  const categorization = uischema as Categorization;
+  const [activeCategory, setActiveCategory]= useState<number|undefined>(selected??0);
+  const categories = categorization.elements.filter((category: Category) =>
+    isVisible(category, data, undefined, ajv)
+  );
+  const childProps: MaterialLayoutRendererProps = {
+    elements: categories[activeCategory].elements,
+    schema,
+    path,
+    direction: 'column',
+    enabled,
+    visible,
+    renderers,
+    cells
   };
-
-  render() {
-    const {
-      data,
-      path,
-      renderers,
-      cells,
-      schema,
-      uischema,
-      visible,
-      enabled,
-      selected,
-      ajv
-    } = this.props;
-    const categorization = uischema as Categorization;
-    const value = this.hasOwnState() ? this.state.activeCategory : selected;
-    const childProps: MaterialLayoutRendererProps = {
-      elements: categorization.elements[value].elements,
-      schema,
-      path,
-      direction: 'column',
-      enabled,
-      visible,
-      renderers,
-      cells
-    };
-    const categories = categorization.elements.filter((category: Category) =>
-      isVisible(category, data, undefined, ajv)
-    );
-    return (
-      <Hidden xsUp={!visible}>
-        <AppBar position='static'>
-          <Tabs value={value} onChange={this.handleChange} variant='scrollable'>
-            {categories.map((e: Category, idx: number) => (
-              <Tab key={idx} label={e.label} />
-            ))}
-          </Tabs>
-        </AppBar>
-        <div style={{ marginTop: '0.5em' }}>
-          <MaterialLayoutRenderer {...childProps} />
-        </div>
-      </Hidden>
-    );
-  }
-
-  hasOwnState = () => {
-    return this.props.ownState !== undefined ? this.props.ownState : true;
-  };
-
-  private handleChange = (_event: any, value: any) => {
-    if (this.props.onChange) {
-      this.props.onChange(value, this.state.activeCategory);
-    }
-    const hasOwnState = this.hasOwnState();
-    if (hasOwnState) {
-      this.setState({ activeCategory: value });
+  const onTabChange = (_event: any, value: any) => {
+    if (onChange) {
+      onChange(value, activeCategory);
     }
+    setActiveCategory(value);
   };
-}
+  return (
+    <Hidden xsUp={!visible}>
+      <AppBar position='static'>
+        <Tabs value={activeCategory} onChange={onTabChange} textColor='inherit' indicatorColor='secondary' variant='scrollable'>
+          {categories.map((e: Category, idx: number) => (
+            <Tab key={idx} label={e.label} />
+          ))}
+        </Tabs>
+      </AppBar>
+      <div style={{ marginTop: '0.5em' }}>
+        <MaterialLayoutRenderer {...childProps} />
+      </div>
+    </Hidden>
+  );
+};
 
 export default withJsonFormsLayoutProps(withAjvProps(MaterialCategorizationLayoutRenderer));

package/src/layouts/MaterialCategorizationStepperLayout.tsx

@@ -22,9 +22,9 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
+import React, {useState} from 'react';
 import merge from 'lodash/merge';
-import { Button, Hidden, Step, StepButton, Stepper } from '@material-ui/core';
+import { Button, Hidden, Step, StepButton, Stepper } from '@mui/material';
 import {
   and,
   Categorization,
@@ -37,7 +37,7 @@ import {
   StatePropsOfLayout,
   uiTypeIs
 } from '@jsonforms/core';
-import { RendererComponent, withJsonFormsLayoutProps } from '@jsonforms/react';
+import { withJsonFormsLayoutProps } from '@jsonforms/react';
 import {
   AjvProps,
   MaterialLayoutRenderer,
@@ -63,94 +63,86 @@ export interface MaterialCategorizationStepperLayoutRendererProps
     data: any;
 }
 
-export class MaterialCategorizationStepperLayoutRenderer extends RendererComponent<
-  MaterialCategorizationStepperLayoutRendererProps,
-  CategorizationStepperState
-> {
-  state = {
-    activeCategory: 0
-  };
+export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCategorizationStepperLayoutRendererProps)=> {
+  const [activeCategory, setActiveCategory] = useState<number>(0);
 
-  handleStep = (step: number) => {
-    this.setState({ activeCategory: step });
+  const handleStep = (step: number) => {
+    setActiveCategory( step);
   };
 
-  render() {
-    const {
-      data,
-      path,
-      renderers,
-      schema,
-      uischema,
-      visible,
-      cells,
-      config,
-      ajv
-    } = this.props;
-    const categorization = uischema as Categorization;
-    const activeCategory = this.state.activeCategory;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const buttonWrapperStyle = {
-      textAlign: 'right' as 'right',
-      width: '100%',
-      margin: '1em auto'
-    };
-    const buttonNextStyle = {
-      float: 'right' as 'right'
-    };
-    const buttonStyle = {
-      marginRight: '1em'
-    };
-    const childProps: MaterialLayoutRendererProps = {
-      elements: categorization.elements[activeCategory].elements,
-      schema,
-      path,
-      direction: 'column',
-      visible,
-      renderers,
-      cells
-    };
-    const categories = categorization.elements.filter((category: Category) =>
-      isVisible(category, data, undefined, ajv)
-    );
-    return (
-      <Hidden xsUp={!visible}>
-        <Stepper activeStep={activeCategory} nonLinear>
-          {categories.map((e: Category, idx: number) => (
-            <Step key={e.label}>
-              <StepButton onClick={() => this.handleStep(idx)}>
-                {e.label}
-              </StepButton>
-            </Step>
-          ))}
-        </Stepper>
-        <div>
-          <MaterialLayoutRenderer {...childProps} />
-        </div>
-        { !!appliedUiSchemaOptions.showNavButtons ? (<div style={buttonWrapperStyle}>
-          <Button
-            style={buttonNextStyle}
-            variant="contained"
-            color="primary"
-            disabled={activeCategory >= categories.length - 1}
-            onClick={() => this.handleStep(activeCategory + 1)}
-          >
-            Next
-          </Button>
-          <Button
-            style={buttonStyle}
-            color="secondary"
-            variant="contained"
-            disabled={activeCategory <= 0}
-            onClick={() => this.handleStep(activeCategory - 1)}
-          >
-            Previous
-          </Button>
-        </div>) : (<></>)}
-      </Hidden>
-    );
-  }
-}
+  const {
+    data,
+    path,
+    renderers,
+    schema,
+    uischema,
+    visible,
+    cells,
+    config,
+    ajv
+  } = props;
+  const categorization = uischema as Categorization;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const buttonWrapperStyle = {
+    textAlign: 'right' as 'right',
+    width: '100%',
+    margin: '1em auto'
+  };
+  const buttonNextStyle = {
+    float: 'right' as 'right'
+  };
+  const buttonStyle = {
+    marginRight: '1em'
+  };
+  const categories = categorization.elements.filter((category: Category) =>
+    isVisible(category, data, undefined, ajv)
+  );
+  const childProps: MaterialLayoutRendererProps = {
+    elements: categories[activeCategory].elements,
+    schema,
+    path,
+    direction: 'column',
+    visible,
+    renderers,
+    cells
+  };
+  return (
+    <Hidden xsUp={!visible}>
+      <Stepper activeStep={activeCategory} nonLinear>
+        {categories.map((e: Category, idx: number) => (
+          <Step key={e.label}>
+            <StepButton onClick={() => handleStep(idx)}>
+              {e.label}
+            </StepButton>
+          </Step>
+        ))}
+      </Stepper>
+      <div>
+        <MaterialLayoutRenderer {...childProps} />
+      </div>
+      { !!appliedUiSchemaOptions.showNavButtons ? (<div style={buttonWrapperStyle}>
+        <Button
+          style={buttonNextStyle}
+          variant="contained"
+          color="primary"
+          disabled={activeCategory >= categories.length - 1}
+          onClick={() => handleStep(activeCategory + 1)}
+        >
+          Next
+        </Button>
+        <Button
+          style={buttonStyle}
+          color="secondary"
+          variant="contained"
+          disabled={activeCategory <= 0}
+          onClick={() => handleStep(activeCategory - 1)}
+        >
+          Previous
+        </Button>
+      </div>) : (<></>)}
+    </Hidden>
+  );
+};
 
 export default withJsonFormsLayoutProps(withAjvProps(
   MaterialCategorizationStepperLayoutRenderer

package/src/layouts/MaterialGroupLayout.tsx

@@ -24,7 +24,7 @@
 */
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
-import { Card, CardContent, CardHeader, Hidden } from '@material-ui/core';
+import { Card, CardContent, CardHeader, Hidden } from '@mui/material';
 import {
   GroupLayout,
   LayoutProps,

package/src/{extended → mui-controls}/MuiAutocomplete.tsx

@@ -25,19 +25,21 @@
 import React, { ReactNode } from 'react';
 import { EnumCellProps, EnumOption, WithClassname } from '@jsonforms/core';
 
-import Input from '@material-ui/core/Input';
-import Autocomplete, { AutocompleteRenderOptionState } from '@material-ui/lab/Autocomplete';
-import { areEqual } from '@jsonforms/react';
+import {
+  Autocomplete,
+  AutocompleteRenderOptionState,
+  Input,
+  FilterOptionsState
+} from '@mui/material';
 import merge from 'lodash/merge';
-import { FilterOptionsState } from '@material-ui/lab/useAutocomplete';
 
 export interface WithOptionLabel {
-    getOptionLabel?(option: EnumOption) : string;
-    renderOption?(option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
-    filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
+  getOptionLabel?(option: EnumOption) : string;
+  renderOption?(props: React.HTMLAttributes<HTMLLIElement>, option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
+  filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
 }
 
-export const MuiAutocomplete = React.memo((props: EnumCellProps & WithClassname & WithOptionLabel) => {
+export const MuiAutocomplete = (props: EnumCellProps & WithClassname & WithOptionLabel) => {
   const {
     data,
     className,
@@ -90,4 +92,4 @@ export const MuiAutocomplete = React.memo((props: EnumCellProps & WithClassname
       filterOptions={filterOptions}
     />
   );
-}, areEqual);
+};

package/src/mui-controls/MuiCheckbox.tsx

@@ -24,8 +24,7 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Checkbox from '@material-ui/core/Checkbox';
-import { areEqual } from '@jsonforms/react';
+import { Checkbox } from '@mui/material';
 import merge from 'lodash/merge';
 
 export const MuiCheckbox = React.memo((props: CellProps & WithClassname) => {
@@ -54,4 +53,4 @@ export const MuiCheckbox = React.memo((props: CellProps & WithClassname) => {
       inputProps={inputProps}
     />
   );
-}, areEqual);
+});

package/src/mui-controls/MuiInputInteger.tsx

@@ -24,11 +24,15 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Input from '@material-ui/core/Input';
-import { areEqual } from '@jsonforms/react';
+import { Input } from '@mui/material';
 import merge from 'lodash/merge';
+import { useDebouncedChange } from '../util';
 
-export const MuiInputInteger = React.memo(
+const toNumber = (value: string) =>
+      value === '' ? undefined : parseInt(value, 10);
+const eventToValue = (ev:any) => toNumber(ev.target.value);
+
+export const MuiInputInteger = React.memo( 
   (props: CellProps & WithClassname) => {
     const {
       data,
@@ -41,15 +45,16 @@ export const MuiInputInteger = React.memo(
       config
     } = props;
     const inputProps = { step: '1' };
-    const toNumber = (value: string) =>
-      value === '' ? undefined : parseInt(value, 10);
+    
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+
     return (
       <Input
         type='number'
-        value={data !== undefined && data !== null ? data : ''}
-        onChange={ev => handleChange(path, toNumber(ev.target.value))}
+        value={inputValue}
+        onChange={onChange}
         className={className}
         id={id}
         disabled={!enabled}
@@ -58,6 +63,4 @@ export const MuiInputInteger = React.memo(
         fullWidth={true}
       />
     );
-  },
-  areEqual
-);
+  });

package/src/mui-controls/MuiInputNumber.tsx

@@ -24,10 +24,13 @@
 */
 import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
-import Input from '@material-ui/core/Input';
-import { areEqual } from '@jsonforms/react';
+import { Input } from '@mui/material';
 import merge from 'lodash/merge';
+import {useDebouncedChange} from '../util';
 
+const toNumber = (value: string) =>
+    value === '' ? undefined : parseFloat(value);
+const eventToValue = (ev:any) => toNumber(ev.target.value);
 export const MuiInputNumber = React.memo((props: CellProps & WithClassname) => {
   const {
     data,
@@ -40,15 +43,15 @@ export const MuiInputNumber = React.memo((props: CellProps & WithClassname) => {
     config
   } = props;
   const inputProps = { step: '0.1' };
-  const toNumber = (value: string) =>
-    value === '' ? undefined : parseFloat(value);
+  
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
 
   return (
     <Input
       type='number'
-      value={data === undefined || data === null ? '' : data}
-      onChange={ev => handleChange(path, toNumber(ev.target.value))}
+      value={inputValue}
+      onChange={onChange}
       className={className}
       id={id}
       disabled={!enabled}
@@ -57,4 +60,4 @@ export const MuiInputNumber = React.memo((props: CellProps & WithClassname) => {
       fullWidth={true}
     />
   );
-}, areEqual);
+});