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

package/src/controls/MaterialTimeControl.tsx

@@ -22,106 +22,108 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
+import React, { useMemo } from 'react';
 import merge from 'lodash/merge';
 import {
   ControlProps,
-  ControlState,
   isTimeControl,
   isDescriptionHidden,
   RankedTester,
   rankWith
 } from '@jsonforms/core';
-import { Control, withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@material-ui/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormHelperText, Hidden, TextField } from '@mui/material';
 import {
-  KeyboardTimePicker,
-  MuiPickersUtilsProvider
-} from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
-import { createOnChangeHandler, getData } from '../util';
+  TimePicker,
+  LocalizationProvider 
+} from '@mui/lab';
+import AdapterDayjs from '@mui/lab/AdapterDayjs';
+import { createOnChangeHandler, getData, useFocus } from '../util';
 
-export class MaterialTimeControl extends Control<
-  ControlProps,
-  ControlState
-> {
-  render() {
+export const MaterialTimeControl = (props: ControlProps) => {
+  const [focused, onFocus, onBlur] = useFocus();
     const {
-      id,
-      description,
-      errors,
-      label,
-      uischema,
-      visible,
-      enabled,
-      required,
-      path,
-      handleChange,
-      data,
-      config
-    } = this.props;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const isValid = errors.length === 0;
+    id,
+    description,
+    errors,
+    label,
+    uischema,
+    visible,
+    enabled,
+    required,
+    path,
+    handleChange,
+    data,
+    config
+  } = props;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const isValid = errors.length === 0;
+
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
 
-    const showDescription = !isDescriptionHidden(
-      visible,
-      description,
-      this.state.isFocused,
-      appliedUiSchemaOptions.showUnfocusedDescription
-    );
+  const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
+    const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
 
-    const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
-    const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm';
+  const firstFormHelperText = showDescription
+    ? description
+    : !isValid
+    ? errors
+    : null;
+  const secondFormHelperText = showDescription && !isValid ? errors : null;
 
-    const firstFormHelperText = showDescription
-      ? description
-      : !isValid
-      ? errors
-      : null;
-    const secondFormHelperText = showDescription && !isValid ? errors : null;
+  const onChange = useMemo(() => createOnChangeHandler(
+    path,
+    handleChange,
+    saveFormat
+  ),[path, handleChange, saveFormat]);
 
-    return (
-      <Hidden xsUp={!visible}>
-        <MuiPickersUtilsProvider utils={DayjsUtils}>
-          <KeyboardTimePicker
-            id={id + '-input'}
-            required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
-            label={label}
-            error={!isValid}
-            fullWidth={!appliedUiSchemaOptions.trim}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            InputLabelProps={data ? { shrink: true } : undefined}
-            value={getData(data, saveFormat)}
-            clearable
-            onChange={createOnChangeHandler(
-              path,
-              handleChange,
-              saveFormat
-            )}
-            format={format}
-            ampm={!!appliedUiSchemaOptions.ampm}
-            views={appliedUiSchemaOptions.views}
-            disabled={!enabled}
-            autoFocus={appliedUiSchemaOptions.focus}
-            cancelLabel={appliedUiSchemaOptions.cancelLabel}
-            clearLabel={appliedUiSchemaOptions.clearLabel}
-            okLabel={appliedUiSchemaOptions.okLabel}
-            invalidDateMessage={null}
-            maxDateMessage={null}
-            minDateMessage={null}
-          />
-          <FormHelperText error={!isValid && !showDescription}>
-            {firstFormHelperText}
-          </FormHelperText>
-          <FormHelperText error={!isValid}>
-            {secondFormHelperText}
-          </FormHelperText>
-        </MuiPickersUtilsProvider>
-      </Hidden>
-    );
-  }
-}
+  return (
+    <Hidden xsUp={!visible}>
+      <LocalizationProvider dateAdapter={AdapterDayjs}>
+        <TimePicker
+          label={label}
+          value={getData(data, saveFormat)}
+          clearable
+          onChange={onChange}
+          inputFormat={format}
+          disableMaskedInput
+          ampm={!!appliedUiSchemaOptions.ampm}
+          views={appliedUiSchemaOptions.views}
+          disabled={!enabled}
+          cancelText={appliedUiSchemaOptions.cancelLabel}
+          clearText={appliedUiSchemaOptions.clearLabel}
+          okText={appliedUiSchemaOptions.okLabel}
+          renderInput={params => (
+            <TextField 
+              {...params}
+              id={id + '-input'}
+              required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+              autoFocus={appliedUiSchemaOptions.focus}
+              error={!isValid}
+              fullWidth={!appliedUiSchemaOptions.trim}
+              inputProps={{ ...params.inputProps, type: 'text' }}
+              InputLabelProps={data ? { shrink: true } : undefined}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              variant={'standard'}
+            />
+          )}
+        />
+        <FormHelperText error={!isValid && !showDescription}>
+          {firstFormHelperText}
+        </FormHelperText>
+        <FormHelperText error={!isValid}>
+          {secondFormHelperText}
+        </FormHelperText>
+      </LocalizationProvider>
+    </Hidden>
+  );
+};
 
 export const materialTimeControlTester: RankedTester = rankWith(
   4,

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,8 +1,7 @@
 import merge from 'lodash/merge';
 import get from 'lodash/get';
-import React, { ComponentType, Dispatch, Fragment, ReducerAction, useMemo, useState, useEffect } from 'react';
+import React, { ComponentType, Dispatch, Fragment, ReducerAction, useMemo, useState, useEffect, useCallback } from 'react';
 import {
-  areEqual,
   JsonFormsDispatch,
   JsonFormsStateContext,
   withJsonFormsContext
@@ -23,16 +22,18 @@ import {
   createId,
   removeId
 } from '@jsonforms/core';
-import IconButton from '@material-ui/core/IconButton';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-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 {
+  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,7 +74,7 @@ export interface ExpandPanelProps
   extends StatePropsOfExpandPanel,
     DispatchPropsOfExpandPanel {}
 
-const ExpandPanelRenderer = (props: ExpandPanelProps) => {
+const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
   const [labelHtmlId] = useState<string>(createId('expand-panel'));
 
   useEffect(() => {
@@ -138,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 ? (
@@ -154,7 +155,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
                           style={iconStyle}
                           disabled={!enableMoveUp}
                           aria-label={`Move up`}
-                        >
+                          size='large'>
                           <ArrowUpward />
                         </IconButton>
                       </Grid>
@@ -164,7 +165,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
                           style={iconStyle}
                           disabled={!enableMoveDown}
                           aria-label={`Move down`}
-                        >
+                          size='large'>
                           <ArrowDownward />
                         </IconButton>
                       </Grid>
@@ -177,7 +178,7 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
                       onClick={removeItems(path, [index])}
                       style={iconStyle}
                       aria-label={`Delete`}
-                    >
+                      size='large'>
                       <DeleteIcon />
                     </IconButton>
                   </Grid>
@@ -201,6 +202,8 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
   );
 };
 
+const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
+
 /**
  * Maps state to dispatch properties of an expand pandel control.
  *
@@ -210,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 => {
@@ -221,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 => {
@@ -230,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 => {
@@ -239,7 +242,7 @@ export const ctxDispatchToExpandPanelProps: (
         return array;
       })
     );
-  }
+  }, [dispatch])
 });
 
 /**
@@ -277,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,7 +23,7 @@
   THE SOFTWARE.
 */
 import range from 'lodash/range';
-import React from 'react';
+import React, {useState, useCallback} from 'react';
 import {
   ArrayLayoutProps,
   composePaths,
@@ -35,87 +35,78 @@ 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(
-            label,
-            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';