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

package/src/controls/MaterialSliderControl.tsx

@@ -22,114 +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,
   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';
 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(
-              label,
-              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

@@ -22,106 +22,103 @@
   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 { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@material-ui/core';
 import {
   KeyboardTimePicker,
   MuiPickersUtilsProvider
 } from '@material-ui/pickers';
 import DayjsUtils from '@date-io/dayjs';
-import { createOnChangeHandler, getData } from '../util';
+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}>
+      <MuiPickersUtilsProvider utils={DayjsUtils}>
+        <KeyboardTimePicker
+          id={id + '-input'}
+          required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+          label={label}
+          error={!isValid}
+          fullWidth={!appliedUiSchemaOptions.trim}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          InputLabelProps={data ? { shrink: true } : undefined}
+          value={getData(data, saveFormat)}
+          clearable
+          onChange={onChange}
+          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>
+  );
+};
 
 export const materialTimeControlTester: RankedTester = rankWith(
   4,

package/src/extended/MuiAutocomplete.tsx

@@ -27,7 +27,6 @@ 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 merge from 'lodash/merge';
 import { FilterOptionsState } from '@material-ui/lab/useAutocomplete';
 
@@ -37,7 +36,7 @@ export interface WithOptionLabel {
     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 +89,4 @@ export const MuiAutocomplete = React.memo((props: EnumCellProps & WithClassname
       filterOptions={filterOptions}
     />
   );
-}, areEqual);
+};

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
@@ -73,7 +72,7 @@ export interface ExpandPanelProps
   extends StatePropsOfExpandPanel,
     DispatchPropsOfExpandPanel {}
 
-const ExpandPanelRenderer = (props: ExpandPanelProps) => {
+const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
   const [labelHtmlId] = useState<string>(createId('expand-panel'));
 
   useEffect(() => {
@@ -201,6 +200,8 @@ const ExpandPanelRenderer = (props: ExpandPanelProps) => {
   );
 };
 
+const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
+
 /**
  * Maps state to dispatch properties of an expand pandel control.
  *
@@ -210,7 +211,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 +222,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 +231,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 +240,7 @@ export const ctxDispatchToExpandPanelProps: (
         return array;
       })
     );
-  }
+  }, [dispatch])
 });
 
 /**
@@ -277,13 +278,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);