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

package/src/controls/index.ts

@@ -46,6 +46,10 @@ import MaterialDateTimeControl, {
   materialDateTimeControlTester,
   MaterialDateTimeControl as MaterialDateTimeControlUnwrapped
 } from './MaterialDateTimeControl';
+import MaterialTimeControl, {
+  materialTimeControlTester,
+  MaterialTimeControl as MaterialTimeControlUnwrapped
+} from './MaterialTimeControl';
 import MaterialSliderControl, {
   materialSliderControlTester,
   MaterialSliderControl as MaterialSliderControlUnwrapped
@@ -89,6 +93,7 @@ export const Unwrapped = {
   MaterialNativeControl: MaterialNativeControlUnwrapped,
   MaterialDateControl: MaterialDateControlUnwrapped,
   MaterialDateTimeControl: MaterialDateTimeControlUnwrapped,
+  MaterialTimeControl: MaterialTimeControlUnwrapped,
   MaterialSliderControl: MaterialSliderControlUnwrapped,
   MaterialRadioGroupControl: MaterialRadioGroupControlUnwrapped,
   MaterialIntegerControl: MaterialIntegerControlUnwrapped,
@@ -112,6 +117,8 @@ export {
   materialDateControlTester,
   MaterialDateTimeControl,
   materialDateTimeControlTester,
+  MaterialTimeControl,
+  materialTimeControlTester,
   MaterialSliderControl,
   materialSliderControlTester,
   MaterialRadioGroupControl,

package/src/extended/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/extended/index.ts

@@ -36,7 +36,7 @@ import { JsonFormsRendererRegistryEntry } from '@jsonforms/core';
 import { materialRenderers } from '../';
 
 /**
- * Includes all 'materialRenderers' and adds additional renderers based on '@material-ui/lab'
+ * Includes all 'materialRenderers' and adds additional renderers based on '@mui/lab'
  */
 export const extendedMaterialRenderers: JsonFormsRendererRegistryEntry[] = [
   {

package/src/index.ts

@@ -57,6 +57,8 @@ import {
   materialDateControlTester,
   MaterialDateTimeControl,
   materialDateTimeControlTester,
+  MaterialTimeControl,
+  materialTimeControlTester,
   MaterialEnumControl,
   materialEnumControlTester,
   MaterialIntegerControl,
@@ -103,6 +105,8 @@ import {
   materialNumberCellTester,
   MaterialNumberFormatCell,
   materialNumberFormatCellTester,
+  MaterialOneOfEnumCell,
+  materialOneOfEnumCellTester,
   MaterialTextCell,
   materialTextCellTester,
   MaterialTimeCell,
@@ -134,6 +138,7 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
   { tester: materialTextControlTester, renderer: MaterialTextControl },
   { tester: materialDateTimeControlTester, renderer: MaterialDateTimeControl },
   { tester: materialDateControlTester, renderer: MaterialDateControl },
+  { tester: materialTimeControlTester, renderer: MaterialTimeControl }, 
   { tester: materialSliderControlTester, renderer: MaterialSliderControl },
   { tester: materialObjectControlTester, renderer: MaterialObjectRenderer },
   { tester: materialAllOfControlTester, renderer: MaterialAllOfRenderer },
@@ -188,6 +193,7 @@ export const materialCells: JsonFormsCellRendererRegistryEntry[] = [
   { tester: materialIntegerCellTester, cell: MaterialIntegerCell },
   { tester: materialNumberCellTester, cell: MaterialNumberCell },
   { tester: materialNumberFormatCellTester, cell: MaterialNumberFormatCell },
+  { tester: materialOneOfEnumCellTester, cell: MaterialOneOfEnumCell },
   { tester: materialTextCellTester, cell: MaterialTextCell },
   { tester: materialTimeCellTester, cell: MaterialTimeCell }
 ];

package/src/layouts/ArrayToolbar.tsx

@@ -1,8 +1,12 @@
-import { Grid, Hidden, Tooltip } from '@material-ui/core';
-import IconButton from '@material-ui/core/IconButton';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import AddIcon from '@material-ui/icons/Add';
+import { 
+  Grid,
+  IconButton,
+  Hidden,
+  Toolbar,
+  Tooltip,
+  Typography
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
 import React from 'react';
 import ValidationIcon from '../complex/ValidationIcon';
 export interface ArrayLayoutToolbarProps {
@@ -22,7 +26,7 @@ export const ArrayLayoutToolbar = React.memo(
   }: ArrayLayoutToolbarProps) => {
     return (
       <Toolbar disableGutters={true}>
-        <Grid container alignItems='center' justify='space-between'>
+        <Grid container alignItems='center' justifyContent='space-between'>
           <Grid item>
             <Typography variant={'h6'}>{label}</Typography>
           </Grid>
@@ -42,7 +46,7 @@ export const ArrayLayoutToolbar = React.memo(
                   <IconButton
                     aria-label={`Add to ${label}`}
                     onClick={addItem(path, createDefault())}
-                  >
+                    size='large'>
                     <AddIcon />
                   </IconButton>
                 </Tooltip>

package/src/layouts/ExpandPanelRenderer.tsx

@@ -1,10 +1,8 @@
 import merge from 'lodash/merge';
 import get from 'lodash/get';
-import React, { Dispatch, Fragment, ReducerAction, useMemo, useState } from 'react';
-import { ComponentType } from 'enzyme';
+import React, { ComponentType, Dispatch, Fragment, ReducerAction, useMemo, useState, useEffect, useCallback } from 'react';
 import {
-  areEqual,
-  ResolvedJsonFormsDispatch,
+  JsonFormsDispatch,
   JsonFormsStateContext,
   withJsonFormsContext
 } from '@jsonforms/react';
@@ -20,19 +18,22 @@ import {
   update,
   JsonFormsCellRendererRegistryEntry,
   JsonFormsUISchemaRegistryEntry,
-  getFirstPrimitiveProp
+  getFirstPrimitiveProp,
+  createId,
+  removeId
 } from '@jsonforms/core';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import IconButton from '@material-ui/core/IconButton';
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import { Grid } from '@material-ui/core';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import Avatar from '@material-ui/core/Avatar';
-import DeleteIcon from '@material-ui/icons/Delete';
-import ArrowUpward from '@material-ui/icons/ArrowUpward';
-import ArrowDownward from '@material-ui/icons/ArrowDownward';
-import uuid from 'uuid/v1';
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  Avatar,
+  Grid,
+  IconButton
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
 
 const iconStyle: any = { float: 'right' };
 
@@ -73,8 +74,14 @@ export interface ExpandPanelProps
   extends StatePropsOfExpandPanel,
     DispatchPropsOfExpandPanel {}
 
-const ExpandPanelRenderer = (props: ExpandPanelProps) => {
-  const [labelHtmlId] = useState(`id${uuid()}`);
+const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
+  const [labelHtmlId] = useState<string>(createId('expand-panel'));
+
+  useEffect(() => {
+    return () => {
+      removeId(labelHtmlId);
+    };
+  }, [labelHtmlId]);
 
   const {
     childLabel,
@@ -114,12 +121,12 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
   return (
-    <ExpansionPanel
+    <Accordion
       aria-labelledby={labelHtmlId}
       expanded={expanded}
       onChange={handleExpansion(childPath)}
     >
-      <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
         <Grid container alignItems={'center'}>
           <Grid item xs={7} md={9}>
             <Grid container alignItems={'center'}>
@@ -132,12 +139,12 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
             </Grid>
           </Grid>
           <Grid item xs={5} md={3}>
-            <Grid container justify={'flex-end'}>
+            <Grid container justifyContent='flex-end'>
               <Grid item>
                 <Grid
                   container
                   direction='row'
-                  justify='center'
+                  justifyContent='center'
                   alignItems='center'
                 >
                   {appliedUiSchemaOptions.showSortButtons ? (
@@ -148,7 +155,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
                           style={iconStyle}
                           disabled={!enableMoveUp}
                           aria-label={`Move up`}
-                        >
+                          size='large'>
                           <ArrowUpward />
                         </IconButton>
                       </Grid>
@@ -158,7 +165,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
                           style={iconStyle}
                           disabled={!enableMoveDown}
                           aria-label={`Move down`}
-                        >
+                          size='large'>
                           <ArrowDownward />
                         </IconButton>
                       </Grid>
@@ -171,7 +178,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
                       onClick={removeItems(path, [index])}
                       style={iconStyle}
                       aria-label={`Delete`}
-                    >
+                      size='large'>
                       <DeleteIcon />
                     </IconButton>
                   </Grid>
@@ -180,9 +187,9 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
             </Grid>
           </Grid>
         </Grid>
-      </ExpansionPanelSummary>
-      <ExpansionPanelDetails>
-        <ResolvedJsonFormsDispatch
+      </AccordionSummary>
+      <AccordionDetails>
+        <JsonFormsDispatch
           schema={schema}
           uischema={foundUISchema}
           path={childPath}
@@ -190,11 +197,13 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
           renderers={renderers}
           cells={cells}
         />
-      </ExpansionPanelDetails>
-    </ExpansionPanel>
+      </AccordionDetails>
+    </Accordion>
   );
 };
 
+const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
+
 /**
  * Maps state to dispatch properties of an expand pandel control.
  *
@@ -204,7 +213,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
 export const ctxDispatchToExpandPanelProps: (
   dispatch: Dispatch<ReducerAction<any>>
 ) => DispatchPropsOfExpandPanel = dispatch => ({
-  removeItems: (path: string, toDelete: number[]) => (event: any): void => {
+  removeItems: useCallback((path: string, toDelete: number[]) => (event: any): void => {
     event.stopPropagation();
     dispatch(
       update(path, array => {
@@ -215,8 +224,8 @@ export const ctxDispatchToExpandPanelProps: (
         return array;
       })
     );
-  },
-  moveUp: (path: string, toMove: number) => (event: any): void => {
+  }, [dispatch]),
+  moveUp: useCallback((path: string, toMove: number) => (event: any): void => {
     event.stopPropagation();
     dispatch(
       update(path, array => {
@@ -224,8 +233,8 @@ export const ctxDispatchToExpandPanelProps: (
         return array;
       })
     );
-  },
-  moveDown: (path: string, toMove: number) => (event: any): void => {
+  }, [dispatch]),
+  moveDown: useCallback((path: string, toMove: number) => (event: any): void => {
     event.stopPropagation();
     dispatch(
       update(path, array => {
@@ -233,7 +242,7 @@ export const ctxDispatchToExpandPanelProps: (
         return array;
       })
     );
-  }
+  }, [dispatch])
 });
 
 /**
@@ -271,13 +280,6 @@ export const withJsonFormsExpandPanelProps = (
   Component: ComponentType<ExpandPanelProps>
 ): ComponentType<OwnPropsOfExpandPanel> =>
   withJsonFormsContext(
-    withContextToExpandPanelProps(
-      React.memo(
-        Component,
-        (prevProps: ExpandPanelProps, nextProps: ExpandPanelProps) =>
-          areEqual(prevProps, nextProps)
-      )
-    )
-  );
+    withContextToExpandPanelProps(Component));
 
 export default withJsonFormsExpandPanelProps(ExpandPanelRenderer);

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));