@jsonforms/material-renderers 2.5.2-alpha.0 → 3.0.0-alpha.2

package/src/controls/MaterialInputControl.tsx

@@ -1,7 +1,7 @@
 /*
   The MIT License
 
-  Copyright (c) 2017-2019 EclipseSource Munich
+  Copyright (c) 2017-2021 EclipseSource Munich
   https://github.com/eclipsesource/jsonforms
 
   Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -24,88 +24,80 @@
 */
 import React from 'react';
 import {
-  computeLabel,
+  showAsRequired,
   ControlProps,
-  ControlState,
   isDescriptionHidden,
-  isPlainLabel
 } from '@jsonforms/core';
-import { Control } from '@jsonforms/react';
 
 import { Hidden, InputLabel } from '@material-ui/core';
 import { FormControl, FormHelperText } from '@material-ui/core';
 import merge from 'lodash/merge';
+import { useFocus } from '../util';
 
 export interface WithInput {
   input: any;
 }
 
-export abstract class MaterialInputControl extends Control<
-  ControlProps & WithInput,
-  ControlState
-> {
-  render() {
-    const {
-      id,
-      description,
-      errors,
-      label,
-      uischema,
-      visible,
-      required,
-      config,
-      input
-    } = this.props;
-    const isValid = errors.length === 0;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+export const MaterialInputControl = (props: ControlProps & WithInput) => {
+  const [focused, onFocus, onBlur] = useFocus();
+  const {
+    id,
+    description,
+    errors,
+    label,
+    uischema,
+    visible,
+    required,
+    config,
+    input
+  } = props;
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
-    const showDescription = !isDescriptionHidden(
-      visible,
-      description,
-      this.state.isFocused,
-      appliedUiSchemaOptions.showUnfocusedDescription
-    );
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
 
-    const firstFormHelperText = showDescription
-      ? description
-      : !isValid
-      ? errors
-      : null;
-    const secondFormHelperText = showDescription && !isValid ? errors : null;
-    const InnerComponent = input;
+  const firstFormHelperText = showDescription
+    ? description
+    : !isValid
+    ? errors
+    : null;
+  const secondFormHelperText = showDescription && !isValid ? errors : null;
+  const InnerComponent = input;
 
-    return (
-      <Hidden xsUp={!visible}>
-        <FormControl
-          fullWidth={!appliedUiSchemaOptions.trim}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-          id={id}
+  return (
+    <Hidden xsUp={!visible}>
+      <FormControl
+        fullWidth={!appliedUiSchemaOptions.trim}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        id={id}
+      >
+        <InputLabel
+          htmlFor={id + '-input'}
+          error={!isValid}
+          required={showAsRequired(required,
+            appliedUiSchemaOptions.hideRequiredAsterisk)}
         >
-          <InputLabel
-            htmlFor={id + '-input'}
-            error={!isValid}
-          >
-            {computeLabel(
-              isPlainLabel(label) ? label : label.default,
-              required,
-              appliedUiSchemaOptions.hideRequiredAsterisk
-            )}
-          </InputLabel>
-          <InnerComponent
-            {...this.props}
-            id={id + '-input'}
-            isValid={isValid}
-            visible={visible}
-          />
-          <FormHelperText error={!isValid && !showDescription}>
-            {firstFormHelperText}
-          </FormHelperText>
-          <FormHelperText error={!isValid}>
-            {secondFormHelperText}
-          </FormHelperText>
-        </FormControl>
-      </Hidden>
-    );
-  }
-}
+          {label}
+        </InputLabel>
+        <InnerComponent
+          {...props}
+          id={id + '-input'}
+          isValid={isValid}
+          visible={visible}
+        />
+        <FormHelperText error={!isValid && !showDescription}>
+          {firstFormHelperText}
+        </FormHelperText>
+        <FormHelperText error={!isValid}>
+          {secondFormHelperText}
+        </FormHelperText>
+      </FormControl>
+    </Hidden>
+  );
+};

package/src/controls/MaterialNativeControl.tsx

@@ -24,77 +24,73 @@
 */
 import React from 'react';
 import {
-  computeLabel,
   ControlProps,
-  ControlState,
+  showAsRequired,
   isDateControl,
   isDescriptionHidden,
-  isPlainLabel,
   isTimeControl,
   or,
   RankedTester,
   rankWith
 } from '@jsonforms/core';
 import { Hidden } from '@material-ui/core';
-import { Control, withJsonFormsControlProps } from '@jsonforms/react';
+import { withJsonFormsControlProps } from '@jsonforms/react';
 import TextField from '@material-ui/core/TextField';
 import merge from 'lodash/merge';
+import { useDebouncedChange, useFocus } from '../util';
 
-export class MaterialNativeControl extends Control<ControlProps, ControlState> {
-  render() {
-    const {
-      id,
-      errors,
-      label,
-      schema,
-      description,
-      enabled,
-      visible,
-      required,
-      path,
-      handleChange,
-      data,
-      config
-    } = this.props;
-    const isValid = errors.length === 0;
-    const appliedUiSchemaOptions = merge(
-      {},
-      config,
-      this.props.uischema.options
-    );
-    const onChange = (ev: any) => handleChange(path, ev.target.value);
-    const fieldType = schema.format;
-    const showDescription = !isDescriptionHidden(
-      visible,
-      description,
-      this.state.isFocused,
-      appliedUiSchemaOptions.showUnfocusedDescription
-    );
+export const MaterialNativeControl = (props: ControlProps) => {
+  const [focused, onFocus, onBlur] = useFocus();
+  const {
+    id,
+    errors,
+    label,
+    schema,
+    description,
+    enabled,
+    visible,
+    required,
+    path,
+    handleChange,
+    data,
+    config
+  } = props;
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge(
+    {},
+    config,
+    props.uischema.options
+  );
+  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
+  const fieldType = appliedUiSchemaOptions.format ?? schema.format;
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
 
-    return (
-      <Hidden xsUp={!visible}>
-        <TextField
-          id={id + '-input'}
-          label={computeLabel(
-            isPlainLabel(label) ? label : label.default,
-            required,
-            appliedUiSchemaOptions.hideRequiredAsterisk
-          )}
-          type={fieldType}
-          error={!isValid}
-          disabled={!enabled}
-          fullWidth={!appliedUiSchemaOptions.trim}
-          onFocus={this.onFocus}
-          onBlur={this.onBlur}
-          helperText={!isValid ? errors : showDescription ? description : null}
-          InputLabelProps={{ shrink: true }}
-          value={data}
-          onChange={onChange}
-        />
-      </Hidden>
-    );
-  }
-}
+  return (
+    <Hidden xsUp={!visible}>
+      <TextField
+        required={showAsRequired(required,
+          appliedUiSchemaOptions.hideRequiredAsterisk)}
+        id={id + '-input'}
+        label={label}
+        type={fieldType}
+        error={!isValid}
+        disabled={!enabled}
+        fullWidth={!appliedUiSchemaOptions.trim}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        helperText={!isValid ? errors : showDescription ? description : null}
+        InputLabelProps={{ shrink: true }}
+        value={inputValue}
+        onChange={onChange}
+      />
+    </Hidden>
+  );
+};
 
 export const materialNativeControlTester: RankedTester = rankWith(
   2,

package/src/controls/MaterialRadioGroup.tsx

@@ -25,14 +25,11 @@
 import merge from 'lodash/merge';
 import React from 'react';
 import {
-  computeLabel,
   ControlProps,
-  ControlState,
+  showAsRequired,
   isDescriptionHidden,
-  isPlainLabel,
   OwnPropsOfEnum
 } from '@jsonforms/core';
-import { Control } from '@jsonforms/react';
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import {
@@ -42,73 +39,73 @@ import {
   FormLabel,
   Hidden
 } from '@material-ui/core';
+import { useFocus } from '../util';
 
-export class MaterialRadioGroup extends Control<
-  ControlProps & OwnPropsOfEnum,
-  ControlState
-> {
-  render() {
-    const {
-      config,
-      id,
-      label,
-      required,
-      description,
-      errors,
-      data,
-      visible,
-      options
-    } = this.props;
-    const isValid = errors.length === 0;
-    const appliedUiSchemaOptions = merge(
-      {},
-      config,
-      this.props.uischema.options
-    );
-    const showDescription = !isDescriptionHidden(
-      visible,
-      description,
-      this.state.isFocused,
-      appliedUiSchemaOptions.showUnfocusedDescription
-    );
+export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
+  const [focused, onFocus, onBlur] = useFocus();
+  const {
+    config,
+    id,
+    label,
+    required,
+    description,
+    errors,
+    data,
+    visible,
+    options,
+    handleChange,
+    path
+  } = props;
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge(
+    {},
+    config,
+    props.uischema.options
+  );
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+  const onChange = (_ev:any, value:any) => handleChange(path, value);
 
-    return (
-      <Hidden xsUp={!visible}>
-        <FormControl
-          component={'fieldset' as 'div'}
-          fullWidth={!appliedUiSchemaOptions.trim}
+  return (
+    <Hidden xsUp={!visible}>
+      <FormControl
+        component={'fieldset' as 'div'}
+        fullWidth={!appliedUiSchemaOptions.trim}
+        onFocus={onFocus}
+        onBlur={onBlur}
+      >
+        <FormLabel
+          htmlFor={id}
+          error={!isValid}
+          component={'legend' as 'label'}
+          required={showAsRequired(required,
+            appliedUiSchemaOptions.hideRequiredAsterisk)}
         >
-          <FormLabel
-            htmlFor={id}
-            error={!isValid}
-            component={'legend' as 'label'}
-          >
-            {computeLabel(
-              isPlainLabel(label) ? label : label.default,
-              required,
-              appliedUiSchemaOptions.hideRequiredAsterisk
-            )}
-          </FormLabel>
+          {label}
+        </FormLabel>
 
-          <RadioGroup
-            value={this.state.value}
-            onChange={(_ev, value) => this.handleChange(value)}
-            row={true}
-          >
-            {options.map(option => (
-              <FormControlLabel
-                value={option.value}
-                key={option.label}
-                control={<Radio checked={data === option.value} />}
-                label={option.label}
-              />
-            ))}
-          </RadioGroup>
-          <FormHelperText error={!isValid}>
-            {!isValid ? errors : showDescription ? description : null}
-          </FormHelperText>
-        </FormControl>
-      </Hidden>
-    );
-  }
-}
+        <RadioGroup
+          value={props.data}
+          onChange={onChange}
+          row={true}
+        >
+          {options.map(option => (
+            <FormControlLabel
+              value={option.value}
+              key={option.label}
+              control={<Radio checked={data === option.value} />}
+              label={option.label}
+            />
+          ))}
+        </RadioGroup>
+        <FormHelperText error={!isValid}>
+          {!isValid ? errors : showDescription ? description : null}
+        </FormHelperText>
+      </FormControl>
+    </Hidden>
+  );
+};

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