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

package/src/controls/MaterialBooleanToggleControl.tsx

@@ -33,7 +33,7 @@ import {
   and
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormControlLabel, Hidden } from '@material-ui/core';
+import { FormControlLabel, Hidden } from '@mui/material';
 import { MuiToggle } from '../mui-controls/MuiToggle';
 
 export const MaterialBooleanToggleControl = ({

package/src/controls/MaterialDateControl.tsx

@@ -23,110 +23,104 @@
   THE SOFTWARE.
 */
 import merge from 'lodash/merge';
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
-  ControlState,
-  DispatchPropsOfControl,
+  ControlProps,
   isDateControl,
   isDescriptionHidden,
   RankedTester,
   rankWith,
-  StatePropsOfControl
 } from '@jsonforms/core';
-import { Control, withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@material-ui/core';
-import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
-import EventIcon from '@material-ui/icons/Event';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormHelperText, Hidden, TextField } from '@mui/material';
 import {
-  KeyboardDatePicker,
-  MuiPickersUtilsProvider
-} from '@material-ui/pickers';
-import DayJsUtils from '@date-io/dayjs';
-import { createOnChangeHandler, getData } from '../util';
+  DatePicker,
+  LocalizationProvider 
+} from '@mui/lab';
+import AdapterDayjs from '@mui/lab/AdapterDayjs';
+import { createOnChangeHandler, getData, useFocus } from '../util';
 
-export class MaterialDateControl extends Control<
-  StatePropsOfControl & DispatchPropsOfControl,
-  ControlState
-> {
-  render() {
-    const {
-      description,
-      id,
-      errors,
-      label,
-      uischema,
-      visible,
-      enabled,
-      required,
-      path,
-      handleChange,
-      data,
-      config
-    } = this.props;
-    const isValid = errors.length === 0;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const showDescription = !isDescriptionHidden(
-      visible,
-      description,
-      this.state.isFocused,
-      appliedUiSchemaOptions.showUnfocusedDescription
-    );
+export const MaterialDateControl = (props: ControlProps)=> {
+  const [focused, onFocus, onBlur] = useFocus();
+  const {
+    description,
+    id,
+    errors,
+    label,
+    uischema,
+    visible,
+    enabled,
+    required,
+    path,
+    handleChange,
+    data,
+    config
+  } = props;
+  const isValid = errors.length === 0;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
 
-    const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
-    const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
+  const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
+  const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
 
-    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}>
-          <KeyboardDatePicker
-            id={id + '-input'}
-            required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
-            label={label}
-            error={!isValid}
-            fullWidth={!appliedUiSchemaOptions.trim}
-            InputLabelProps={data ? { shrink: true } : undefined}
-            value={getData(data, saveFormat)}
-            clearable
-            onChange={createOnChangeHandler(
-              path,
-              handleChange,
-              saveFormat
-            )}
-            format={format}
-            views={appliedUiSchemaOptions.views}
-            disabled={!enabled}
-            autoFocus={appliedUiSchemaOptions.focus}
-            onFocus={this.onFocus}
-            onBlur={this.onBlur}
-            cancelLabel={appliedUiSchemaOptions.cancelLabel}
-            clearLabel={appliedUiSchemaOptions.clearLabel}
-            okLabel={appliedUiSchemaOptions.okLabel}
-            leftArrowIcon={<KeyboardArrowLeftIcon />}
-            rightArrowIcon={<KeyboardArrowRightIcon />}
-            keyboardIcon={<EventIcon />}
-            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}>
+        <DatePicker
+          label={label}
+          value={getData(data, saveFormat)}
+          clearable
+          onChange={onChange}
+          inputFormat={format}
+          disableMaskedInput
+          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 materialDateControlTester: RankedTester = rankWith(
   4,

package/src/controls/MaterialDateTimeControl.tsx

@@ -22,116 +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,
   isDateTimeControl,
   isDescriptionHidden,
   RankedTester,
   rankWith
 } from '@jsonforms/core';
-import { Control, withJsonFormsControlProps } from '@jsonforms/react';
-import { FormHelperText, Hidden } from '@material-ui/core';
-import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
-import DateRangeIcon from '@material-ui/icons/DateRange';
-import EventIcon from '@material-ui/icons/Event';
-import AccessTimeIcon from '@material-ui/icons/AccessTime';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormHelperText, Hidden, TextField } from '@mui/material';
 import {
-  KeyboardDateTimePicker,
-  MuiPickersUtilsProvider
-} from '@material-ui/pickers';
-import DayjsUtils from '@date-io/dayjs';
-import { createOnChangeHandler, getData } from '../util';
+  DateTimePicker,
+  LocalizationProvider 
+} from '@mui/lab';
+import AdapterDayjs from '@mui/lab/AdapterDayjs';
+import { createOnChangeHandler, getData, useFocus } from '../util';
 
-export class MaterialDateTimeControl extends Control<
-  ControlProps,
-  ControlState
-> {
-  render() {
-    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;
+export const MaterialDateTimeControl = (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 showDescription = !isDescriptionHidden(
-      visible,
-      description,
-      this.state.isFocused,
-      appliedUiSchemaOptions.showUnfocusedDescription
-    );
+  const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
+  const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
 
-    const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
-    const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
+  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}>
-          <KeyboardDateTimePicker
-            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}
-            leftArrowIcon={<KeyboardArrowLeftIcon />}
-            rightArrowIcon={<KeyboardArrowRightIcon />}
-            dateRangeIcon={<DateRangeIcon />}
-            keyboardIcon={<EventIcon />}
-            timeIcon={<AccessTimeIcon />}
-            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}>
+        <DateTimePicker
+          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 materialDateTimeControlTester: RankedTester = rankWith(
   2,

package/src/controls/MaterialEnumControl.tsx

@@ -32,11 +32,20 @@ import {
 } from '@jsonforms/core';
 import { withJsonFormsEnumProps } from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
+import merge from 'lodash/merge';
 import { MaterialInputControl } from './MaterialInputControl';
+import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
 
-export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum) => (
-    <MaterialInputControl {...props} input={MuiSelect} />
-);
+export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel) => {
+  const {config, uischema} = props;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  return (
+    <MaterialInputControl
+      {...props}
+      input={appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete}
+    />
+  );
+};
 
 export const materialEnumControlTester: RankedTester = rankWith(
   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,87 +24,81 @@
 */
 import React from 'react';
 import {
-  computeLabel,
+  showAsRequired,
   ControlProps,
-  ControlState,
   isDescriptionHidden,
 } from '@jsonforms/core';
-import { Control } from '@jsonforms/react';
 
-import { Hidden, InputLabel } from '@material-ui/core';
-import { FormControl, FormHelperText } from '@material-ui/core';
+import { Hidden, InputLabel } from '@mui/material';
+import { FormControl, FormHelperText } from '@mui/material';
 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}
+        variant={'standard'}
+      >
+        <InputLabel
+          htmlFor={id + '-input'}
+          error={!isValid}
+          required={showAsRequired(required,
+            appliedUiSchemaOptions.hideRequiredAsterisk)}
         >
-          <InputLabel
-            htmlFor={id + '-input'}
-            error={!isValid}
-          >
-            {computeLabel(
-              label,
-              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>
+  );
+};