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

package/src/controls/MaterialSliderControl.tsx

@@ -22,115 +22,119 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
+import React, {useCallback} from 'react';
 import {
-  computeLabel,
   ControlProps,
-  ControlState,
+  showAsRequired,
   isDescriptionHidden,
-  isPlainLabel,
   isRangeControl,
   RankedTester,
   rankWith
 } from '@jsonforms/core';
-import { Control, withJsonFormsControlProps } from '@jsonforms/react';
+import { withJsonFormsControlProps } from '@jsonforms/react';
 
 import {
   FormControl,
   FormHelperText,
+  FormLabel,
   Hidden,
   Slider,
   Typography
-} from '@material-ui/core';
+} from '@mui/material';
 import merge from 'lodash/merge';
+import { useFocus } from '../util';
 
-export class MaterialSliderControl extends Control<ControlProps, ControlState> {
-  render() {
-    const {
-      id,
-      data,
-      description,
-      enabled,
-      errors,
-      label,
-      schema,
-      handleChange,
-      visible,
-      path,
-      required,
-      config
-    } = this.props;
-    const isValid = errors.length === 0;
-    const appliedUiSchemaOptions = merge(
-      {},
-      config,
-      this.props.uischema.options
-    );
-    const labelStyle: { [x: string]: any } = {
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      width: '100%'
-    };
-    const rangeContainerStyle: { [x: string]: any } = {
-      display: 'flex'
-    };
-    const rangeItemStyle: { [x: string]: any } = {
-      flexGrow: '1'
-    };
-    const sliderStyle: { [x: string]: any } = {
-      marginTop: '7px'
-    };
+export const MaterialSliderControl = (props: ControlProps) => {
+  const [focused, onFocus, onBlur] = useFocus();
+  const {
+    id,
+    data,
+    description,
+    enabled,
+    errors,
+    label,
+    schema,
+    handleChange,
+    visible,
+    path,
+    required,
+    config
+  } = props;
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge(
+    {},
+    config,
+    props.uischema.options
+  );
+  const labelStyle: { [x: string]: any } = {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    width: '100%'
+  };
+  const rangeContainerStyle: { [x: string]: any } = {
+    display: 'flex'
+  };
+  const rangeItemStyle: { [x: string]: any } = {
+    flexGrow: '1'
+  };
+  const sliderStyle: { [x: string]: any } = {
+    marginTop: '7px'
+  };
 
-    const showDescription = !isDescriptionHidden(
-      visible,
-      description,
-      this.state.isFocused,
-      appliedUiSchemaOptions.showUnfocusedDescription
-    );
-    return (
-      <Hidden xsUp={!visible}>
-        <FormControl
-          fullWidth={!appliedUiSchemaOptions.trim}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-          id={id}
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+
+  const onChange = useCallback((_ev: any, value: any) => handleChange(path, Number(value)), [path, handleChange]);
+
+  return (
+    <Hidden xsUp={!visible}>
+      <FormControl
+        fullWidth={!appliedUiSchemaOptions.trim}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        id={id}
+      >
+        <FormLabel
+          htmlFor={id}
+          error={!isValid}
+          component={'legend' as 'label'}
+          required={showAsRequired(required,
+            appliedUiSchemaOptions.hideRequiredAsterisk)}
         >
           <Typography id={id + '-typo'} style={labelStyle} variant='caption'>
-            {computeLabel(
-              isPlainLabel(label) ? label : label.default,
-              required,
-              appliedUiSchemaOptions.hideRequiredAsterisk
-            )}
+            {label}
+          </Typography>
+        </FormLabel>
+        <div style={rangeContainerStyle}>
+          <Typography style={rangeItemStyle} variant='caption' align='left'>
+            {schema.minimum}
+          </Typography>
+          <Typography style={rangeItemStyle} variant='caption' align='right'>
+            {schema.maximum}
           </Typography>
-          <div style={rangeContainerStyle}>
-            <Typography style={rangeItemStyle} variant='caption' align='left'>
-              {schema.minimum}
-            </Typography>
-            <Typography style={rangeItemStyle} variant='caption' align='right'>
-              {schema.maximum}
-            </Typography>
-          </div>
-          <Slider
-            style={sliderStyle}
-            min={schema.minimum}
-            max={schema.maximum}
-            value={Number(data || schema.default)}
-            onChange={(_ev: any, value: any) => {
-              handleChange(path, Number(value));
-            }}
-            id={id + '-input'}
-            disabled={!enabled}
-            step={schema.multipleOf || 1}
-          />
-          <FormHelperText error={!isValid}>
-            {!isValid ? errors : showDescription ? description : null}
-          </FormHelperText>
-        </FormControl>
-      </Hidden>
-    );
-  }
-}
+        </div>
+        <Slider
+          style={sliderStyle}
+          min={schema.minimum}
+          max={schema.maximum}
+          value={Number(data || schema.default)}
+          onChange={onChange}
+          id={id + '-input'}
+          disabled={!enabled}
+          step={schema.multipleOf || 1}
+        />
+        <FormHelperText error={!isValid}>
+          {!isValid ? errors : showDescription ? description : null}
+        </FormHelperText>
+      </FormControl>
+    </Hidden>
+  );
+};
 export const materialSliderControlTester: RankedTester = rankWith(
   4,
   isRangeControl

package/src/controls/MaterialTimeControl.tsx

@@ -0,0 +1,133 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import React, { useMemo } from 'react';
+import merge from 'lodash/merge';
+import {
+  ControlProps,
+  isTimeControl,
+  isDescriptionHidden,
+  RankedTester,
+  rankWith
+} from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormHelperText, Hidden, TextField } from '@mui/material';
+import {
+  TimePicker,
+  LocalizationProvider 
+} from '@mui/lab';
+import AdapterDayjs from '@mui/lab/AdapterDayjs';
+import { createOnChangeHandler, getData, useFocus } from '../util';
+
+export const MaterialTimeControl = (props: ControlProps) => {
+  const [focused, onFocus, onBlur] = useFocus();
+    const {
+    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 format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
+    const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+
+  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}>
+      <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,
+  isTimeControl
+);
+
+export default withJsonFormsControlProps(MaterialTimeControl);

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

@@ -57,6 +57,8 @@ import {
   materialDateControlTester,
   MaterialDateTimeControl,
   materialDateTimeControlTester,
+  MaterialTimeControl,
+  materialTimeControlTester,
   MaterialEnumControl,
   materialEnumControlTester,
   MaterialIntegerControl,
@@ -136,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 },

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,9 +1,7 @@
 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,
   JsonFormsDispatch,
   JsonFormsStateContext,
   withJsonFormsContext
@@ -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,8 +187,8 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
             </Grid>
           </Grid>
         </Grid>
-      </ExpansionPanelSummary>
-      <ExpansionPanelDetails>
+      </AccordionSummary>
+      <AccordionDetails>
         <JsonFormsDispatch
           schema={schema}
           uischema={foundUISchema}
@@ -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);