@jsonforms/material-renderers 3.1.0-alpha.0 → 3.1.0-alpha.2

package/src/controls/MaterialInputControl.tsx

@@ -29,8 +29,7 @@ import {
   isDescriptionHidden,
 } from '@jsonforms/core';
 
-import { Hidden, InputLabel } from '@mui/material';
-import { FormControl, FormHelperText } from '@mui/material';
+import { Hidden, InputLabel, FormControl, FormHelperText } from '@mui/material';
 import merge from 'lodash/merge';
 import { useFocus } from '../util';
 
@@ -49,7 +48,7 @@ export const MaterialInputControl = (props: ControlProps & WithInput) => {
     visible,
     required,
     config,
-    input
+    input,
   } = props;
   const isValid = errors.length === 0;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -81,8 +80,10 @@ export const MaterialInputControl = (props: ControlProps & WithInput) => {
         <InputLabel
           htmlFor={id + '-input'}
           error={!isValid}
-          required={showAsRequired(required,
-            appliedUiSchemaOptions.hideRequiredAsterisk)}
+          required={showAsRequired(
+            required,
+            appliedUiSchemaOptions.hideRequiredAsterisk
+          )}
         >
           {label}
         </InputLabel>
@@ -95,9 +96,7 @@ export const MaterialInputControl = (props: ControlProps & WithInput) => {
         <FormHelperText error={!isValid && !showDescription}>
           {firstFormHelperText}
         </FormHelperText>
-        <FormHelperText error={!isValid}>
-          {secondFormHelperText}
-        </FormHelperText>
+        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
       </FormControl>
     </Hidden>
   );

package/src/controls/MaterialIntegerControl.tsx

@@ -27,7 +27,7 @@ import {
   ControlProps,
   isIntegerControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { MuiInputInteger } from '../mui-controls/MuiInputInteger';
 import { MaterialInputControl } from './MaterialInputControl';

package/src/controls/MaterialNativeControl.tsx

@@ -31,7 +31,7 @@ import {
   isTimeControl,
   or,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { Hidden, TextField } from '@mui/material';
 import { withJsonFormsControlProps } from '@jsonforms/react';
@@ -52,15 +52,16 @@ export const MaterialNativeControl = (props: ControlProps) => {
     path,
     handleChange,
     data,
-    config
+    config,
   } = props;
   const isValid = errors.length === 0;
-  const appliedUiSchemaOptions = merge(
-    {},
-    config,
-    props.uischema.options
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path
   );
-  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
   const fieldType = appliedUiSchemaOptions.format ?? schema.format;
   const showDescription = !isDescriptionHidden(
     visible,
@@ -72,8 +73,10 @@ export const MaterialNativeControl = (props: ControlProps) => {
   return (
     <Hidden xsUp={!visible}>
       <TextField
-        required={showAsRequired(required,
-          appliedUiSchemaOptions.hideRequiredAsterisk)}
+        required={showAsRequired(
+          required,
+          appliedUiSchemaOptions.hideRequiredAsterisk
+        )}
         id={id + '-input'}
         label={label}
         type={fieldType}

package/src/controls/MaterialNumberControl.tsx

@@ -27,7 +27,7 @@ import {
   ControlProps,
   isNumberControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { MuiInputNumber } from '../mui-controls/MuiInputNumber';
 import { MaterialInputControl } from './MaterialInputControl';

package/src/controls/MaterialOneOfEnumControl.tsx

@@ -30,27 +30,30 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { TranslateProps, withJsonFormsOneOfEnumProps, withTranslateProps } from '@jsonforms/react';
-import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
+import {
+  TranslateProps,
+  withJsonFormsOneOfEnumProps,
+  withTranslateProps,
+} from '@jsonforms/react';
+import {
+  MuiAutocomplete,
+  WithOptionLabel,
+} from '../mui-controls/MuiAutocomplete';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 import { MaterialInputControl } from '../controls/MaterialInputControl';
 import merge from 'lodash/merge';
 
-export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps) => {
-  const {config, uischema, errors} = props;
+export const MaterialOneOfEnumControl = (
+  props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps
+) => {
+  const { config, uischema, errors } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
 
-  return (
-    appliedUiSchemaOptions.autocomplete === false ?
-    <MaterialInputControl
-      {...props}
-      input={MuiSelect}
-    />:
-    <MuiAutocomplete
-      {...props}
-      isValid={isValid}
-    />
+  return appliedUiSchemaOptions.autocomplete === false ? (
+    <MaterialInputControl {...props} input={MuiSelect} />
+  ) : (
+    <MuiAutocomplete {...props} isValid={isValid} />
   );
 };
 
@@ -60,4 +63,7 @@ export const materialOneOfEnumControlTester: RankedTester = rankWith(
 );
 
 // HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
-export default withJsonFormsOneOfEnumProps(withTranslateProps(React.memo(MaterialOneOfEnumControl)), false);
+export default withJsonFormsOneOfEnumProps(
+  withTranslateProps(React.memo(MaterialOneOfEnumControl)),
+  false
+);

package/src/controls/MaterialOneOfRadioGroupControl.tsx

@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import {
-    and,
+  and,
   ControlProps,
   isOneOfEnumControl,
   optionIs,
@@ -35,8 +35,10 @@ import {
 import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
 import { MaterialRadioGroup } from './MaterialRadioGroup';
 
-export const MaterialOneOfRadioGroupControl = (props: ControlProps & OwnPropsOfEnum) => {
-  return <MaterialRadioGroup {...props}/>;
+export const MaterialOneOfRadioGroupControl = (
+  props: ControlProps & OwnPropsOfEnum
+) => {
+  return <MaterialRadioGroup {...props} />;
 };
 
 export const materialOneOfRadioGroupControlTester: RankedTester = rankWith(

package/src/controls/MaterialRadioGroup.tsx

@@ -28,7 +28,7 @@ import {
   ControlProps,
   showAsRequired,
   isDescriptionHidden,
-  OwnPropsOfEnum
+  OwnPropsOfEnum,
 } from '@jsonforms/core';
 import {
   FormControl,
@@ -37,7 +37,7 @@ import {
   FormLabel,
   Hidden,
   Radio,
-  RadioGroup
+  RadioGroup,
 } from '@mui/material';
 import { useFocus } from '../util';
 
@@ -55,21 +55,17 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
     options,
     handleChange,
     path,
-    enabled
+    enabled,
   } = props;
   const isValid = errors.length === 0;
-  const appliedUiSchemaOptions = merge(
-    {},
-    config,
-    props.uischema.options
-  );
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
   const showDescription = !isDescriptionHidden(
     visible,
     description,
     focused,
     appliedUiSchemaOptions.showUnfocusedDescription
   );
-  const onChange = (_ev:any, value:any) => handleChange(path, value);
+  const onChange = (_ev: any, value: any) => handleChange(path, value);
 
   return (
     <Hidden xsUp={!visible}>
@@ -83,18 +79,16 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
           htmlFor={id}
           error={!isValid}
           component={'legend' as 'label'}
-          required={showAsRequired(required,
-            appliedUiSchemaOptions.hideRequiredAsterisk)}
+          required={showAsRequired(
+            required,
+            appliedUiSchemaOptions.hideRequiredAsterisk
+          )}
         >
           {label}
         </FormLabel>
 
-        <RadioGroup
-          value={props.data ?? ''}
-          onChange={onChange}
-          row={true}
-        >
-          {options.map(option => (
+        <RadioGroup value={props.data ?? ''} onChange={onChange} row={true}>
+          {options.map((option) => (
             <FormControlLabel
               value={option.value}
               key={option.label}

package/src/controls/MaterialRadioGroupControl.tsx

@@ -27,11 +27,16 @@ import {
   and,
   ControlProps,
   isEnumControl,
-  optionIs, OwnPropsOfEnum, RankedTester, rankWith
+  optionIs,
+  OwnPropsOfEnum,
+  RankedTester,
+  rankWith,
 } from '@jsonforms/core';
-import {  withJsonFormsEnumProps } from '@jsonforms/react';
+import { withJsonFormsEnumProps } from '@jsonforms/react';
 import { MaterialRadioGroup } from './MaterialRadioGroup';
-export const MaterialRadioGroupControl = (props: ControlProps & OwnPropsOfEnum) => {
+export const MaterialRadioGroupControl = (
+  props: ControlProps & OwnPropsOfEnum
+) => {
   return <MaterialRadioGroup {...props} />;
 };
 

package/src/controls/MaterialSliderControl.tsx

@@ -22,14 +22,14 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
 import {
   ControlProps,
   showAsRequired,
   isDescriptionHidden,
   isRangeControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 
@@ -39,7 +39,7 @@ import {
   FormLabel,
   Hidden,
   Slider,
-  Typography
+  Typography,
 } from '@mui/material';
 import merge from 'lodash/merge';
 import { useFocus } from '../util';
@@ -58,28 +58,24 @@ export const MaterialSliderControl = (props: ControlProps) => {
     visible,
     path,
     required,
-    config
+    config,
   } = props;
   const isValid = errors.length === 0;
-  const appliedUiSchemaOptions = merge(
-    {},
-    config,
-    props.uischema.options
-  );
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
   const labelStyle: { [x: string]: any } = {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    width: '100%'
+    width: '100%',
   };
   const rangeContainerStyle: { [x: string]: any } = {
-    display: 'flex'
+    display: 'flex',
   };
   const rangeItemStyle: { [x: string]: any } = {
-    flexGrow: '1'
+    flexGrow: '1',
   };
   const sliderStyle: { [x: string]: any } = {
-    marginTop: '7px'
+    marginTop: '7px',
   };
 
   const showDescription = !isDescriptionHidden(
@@ -89,7 +85,10 @@ export const MaterialSliderControl = (props: ControlProps) => {
     appliedUiSchemaOptions.showUnfocusedDescription
   );
 
-  const onChange = useCallback((_ev: any, value: any) => handleChange(path, Number(value)), [path, handleChange]);
+  const onChange = useCallback(
+    (_ev: any, value: any) => handleChange(path, Number(value)),
+    [path, handleChange]
+  );
 
   return (
     <Hidden xsUp={!visible}>
@@ -103,8 +102,10 @@ export const MaterialSliderControl = (props: ControlProps) => {
           htmlFor={id}
           error={!isValid}
           component={'legend' as 'label'}
-          required={showAsRequired(required,
-            appliedUiSchemaOptions.hideRequiredAsterisk)}
+          required={showAsRequired(
+            required,
+            appliedUiSchemaOptions.hideRequiredAsterisk
+          )}
         >
           <Typography id={id + '-typo'} style={labelStyle} variant='caption'>
             {label}

package/src/controls/MaterialTextControl.tsx

@@ -27,7 +27,7 @@ import {
   ControlProps,
   isStringControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { MuiInputText } from '../mui-controls/MuiInputText';

package/src/controls/MaterialTimeControl.tsx

@@ -29,25 +29,22 @@ import {
   isTimeControl,
   isDescriptionHidden,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
-import {
-  TimePicker,
-  LocalizationProvider 
-} from '@mui/x-date-pickers';
+import { TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
   createOnChangeHandler,
   getData,
   ResettableTextField,
-  useFocus
+  useFocus,
 } from '../util';
 
 export const MaterialTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
-    const {
+  const {
     id,
     description,
     errors,
@@ -59,7 +56,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
     path,
     handleChange,
     data,
-    config
+    config,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
@@ -83,11 +80,10 @@ export const MaterialTimeControl = (props: ControlProps) => {
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
 
-  const onChange = useMemo(() => createOnChangeHandler(
-    path,
-    handleChange,
-    saveFormat
-  ),[path, handleChange, saveFormat]);
+  const onChange = useMemo(
+    () => createOnChangeHandler(path, handleChange, saveFormat),
+    [path, handleChange, saveFormat]
+  );
 
   const value = getData(data, saveFormat);
   const valueInInputFormat = value ? value.format(format) : '';
@@ -106,24 +102,27 @@ export const MaterialTimeControl = (props: ControlProps) => {
           disabled={!enabled}
           componentsProps={{
             actionBar: {
-              actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
-            }
+              actions: (variant) =>
+                variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+            },
           }}
-          renderInput={params => (
-            <ResettableTextField 
+          renderInput={(params) => (
+            <ResettableTextField
               {...params}
               rawValue={data}
               dayjsValueIsValid={value !== null}
               valueInInputFormat={valueInInputFormat}
               focused={focused}
               id={id + '-input'}
-              required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+              required={
+                required && !appliedUiSchemaOptions.hideRequiredAsterisk
+              }
               autoFocus={appliedUiSchemaOptions.focus}
               error={!isValid}
               fullWidth={!appliedUiSchemaOptions.trim}
               inputProps={{
                 ...params.inputProps,
-                type: 'text'
+                type: 'text',
               }}
               InputLabelProps={data ? { shrink: true } : undefined}
               onFocus={onFocus}
@@ -135,9 +134,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
         <FormHelperText error={!isValid && !showDescription}>
           {firstFormHelperText}
         </FormHelperText>
-        <FormHelperText error={!isValid}>
-          {secondFormHelperText}
-        </FormHelperText>
+        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
       </LocalizationProvider>
     </Hidden>
   );

package/src/controls/index.ts

@@ -22,119 +22,83 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+import MaterialAnyOfStringOrEnumControl, {
+  materialAnyOfStringOrEnumControlTester,
+} from './MaterialAnyOfStringOrEnumControl';
 import MaterialBooleanControl, {
   materialBooleanControlTester,
-  MaterialBooleanControl as MaterialBooleanControlUnwrapped
 } from './MaterialBooleanControl';
 import MaterialBooleanToggleControl, {
   materialBooleanToggleControlTester,
-  MaterialBooleanToggleControl as MaterialBooleanToggleControlUnwrapped
 } from './MaterialBooleanToggleControl';
-import MaterialEnumControl, {
-  materialEnumControlTester,
-  MaterialEnumControl as MaterialEnumControlUnwrapped
-} from './MaterialEnumControl';
-import MaterialNativeControl, {
-  materialNativeControlTester,
-  MaterialNativeControl as MaterialNativeControlUnwrapped
-} from './MaterialNativeControl';
 import MaterialDateControl, {
   materialDateControlTester,
-  MaterialDateControl as MaterialDateControlUnwrapped
 } from './MaterialDateControl';
 import MaterialDateTimeControl, {
   materialDateTimeControlTester,
-  MaterialDateTimeControl as MaterialDateTimeControlUnwrapped
 } from './MaterialDateTimeControl';
-import MaterialTimeControl, {
-  materialTimeControlTester,
-  MaterialTimeControl as MaterialTimeControlUnwrapped
-} from './MaterialTimeControl';
-import MaterialSliderControl, {
-  materialSliderControlTester,
-  MaterialSliderControl as MaterialSliderControlUnwrapped
-} from './MaterialSliderControl';
-import MaterialRadioGroupControl, {
-  materialRadioGroupControlTester,
-  MaterialRadioGroupControl as MaterialRadioGroupControlUnwrapped
-} from './MaterialRadioGroupControl';
+import MaterialEnumControl, {
+  materialEnumControlTester,
+} from './MaterialEnumControl';
 import MaterialIntegerControl, {
   materialIntegerControlTester,
-  MaterialIntegerControl as MaterialIntegerControlUnwrapped
 } from './MaterialIntegerControl';
+import MaterialNativeControl, {
+  materialNativeControlTester,
+} from './MaterialNativeControl';
 import MaterialNumberControl, {
   materialNumberControlTester,
-  MaterialNumberControl as MaterialNumberControlUnwrapped
 } from './MaterialNumberControl';
-import MaterialTextControl, {
-  materialTextControlTester,
-  MaterialTextControl as MaterialTextControlUnwrapped
-} from './MaterialTextControl';
-
-import MaterialAnyOfStringOrEnumControl, {
-  materialAnyOfStringOrEnumControlTester,
-  MaterialAnyOfStringOrEnumControl as MaterialAnyOfStringOrEnumControlUnwrapped
-} from './MaterialAnyOfStringOrEnumControl';
-
 import MaterialOneOfEnumControl, {
   materialOneOfEnumControlTester,
-  MaterialOneOfEnumControl as MaterialOneOfEnumControlUnwrapped
 } from './MaterialOneOfEnumControl';
-
 import MaterialOneOfRadioGroupControl, {
   materialOneOfRadioGroupControlTester,
-  MaterialOneOfRadioGroupControl as MaterialOneOfRadioGroupControlUnwrapped
 } from './MaterialOneOfRadioGroupControl';
-
-export const Unwrapped = {
-  MaterialBooleanControl: MaterialBooleanControlUnwrapped,
-  MaterialBooleanToggleControl: MaterialBooleanToggleControlUnwrapped,
-  MaterialEnumControl: MaterialEnumControlUnwrapped,
-  MaterialNativeControl: MaterialNativeControlUnwrapped,
-  MaterialDateControl: MaterialDateControlUnwrapped,
-  MaterialDateTimeControl: MaterialDateTimeControlUnwrapped,
-  MaterialTimeControl: MaterialTimeControlUnwrapped,
-  MaterialSliderControl: MaterialSliderControlUnwrapped,
-  MaterialRadioGroupControl: MaterialRadioGroupControlUnwrapped,
-  MaterialIntegerControl: MaterialIntegerControlUnwrapped,
-  MaterialNumberControl: MaterialNumberControlUnwrapped,
-  MaterialTextControl: MaterialTextControlUnwrapped,
-  MaterialAnyOfStringOrEnumControl: MaterialAnyOfStringOrEnumControlUnwrapped,
-  MaterialOneOfEnumControl: MaterialOneOfEnumControlUnwrapped,
-  MaterialOneOfRadioGroupControl: MaterialOneOfRadioGroupControlUnwrapped
-};
+import MaterialRadioGroupControl, {
+  materialRadioGroupControlTester,
+} from './MaterialRadioGroupControl';
+import MaterialSliderControl, {
+  materialSliderControlTester,
+} from './MaterialSliderControl';
+import MaterialTextControl, {
+  materialTextControlTester,
+} from './MaterialTextControl';
+import MaterialTimeControl, {
+  materialTimeControlTester,
+} from './MaterialTimeControl';
 
 export {
+  MaterialAnyOfStringOrEnumControl,
+  materialAnyOfStringOrEnumControlTester,
   MaterialBooleanControl,
   materialBooleanControlTester,
   MaterialBooleanToggleControl,
   materialBooleanToggleControlTester,
-  MaterialEnumControl,
-  materialEnumControlTester,
-  MaterialNativeControl,
-  materialNativeControlTester,
   MaterialDateControl,
   materialDateControlTester,
   MaterialDateTimeControl,
   materialDateTimeControlTester,
-  MaterialTimeControl,
-  materialTimeControlTester,
-  MaterialSliderControl,
-  materialSliderControlTester,
-  MaterialRadioGroupControl,
-  materialRadioGroupControlTester,
+  MaterialEnumControl,
+  materialEnumControlTester,
   MaterialIntegerControl,
   materialIntegerControlTester,
+  MaterialNativeControl,
+  materialNativeControlTester,
   MaterialNumberControl,
   materialNumberControlTester,
-  MaterialTextControl,
-  materialTextControlTester,
-  MaterialAnyOfStringOrEnumControl,
-  materialAnyOfStringOrEnumControlTester,
   MaterialOneOfEnumControl,
   materialOneOfEnumControlTester,
   MaterialOneOfRadioGroupControl,
-  materialOneOfRadioGroupControlTester
+  materialOneOfRadioGroupControlTester,
+  MaterialRadioGroupControl,
+  materialRadioGroupControlTester,
+  MaterialSliderControl,
+  materialSliderControlTester,
+  MaterialTextControl,
+  materialTextControlTester,
+  MaterialTimeControl,
+  materialTimeControlTester,
 };
 
 export * from './MaterialInputControl';