@jsonforms/material-renderers 3.1.0-alpha.1 → 3.1.0-alpha.3

package/src/mui-controls/MuiInputNumberFormat.tsx

@@ -22,52 +22,61 @@
   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 { CellProps, Formatted, WithClassname } from '@jsonforms/core';
 import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
-export const MuiInputNumberFormat = React.memo( 
-  (props: CellProps & WithClassname & Formatted<number>) => {
-    const {
-      className,
-      id,
-      enabled,
-      uischema,
-      isValid,
-      path,
-      handleChange,
-      schema,
-      config
-    } = props;
-    const maxLength = schema.maxLength;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    let inputProps;
-    if (appliedUiSchemaOptions.restrict) {
-      inputProps = { maxLength: maxLength };
-    } else {
-      inputProps = {};
-    }
-    const formattedNumber = props.toFormatted(props.data);
+export const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(
+  props: CellProps & WithClassname & Formatted<number>
+) {
+  const {
+    className,
+    id,
+    enabled,
+    uischema,
+    isValid,
+    path,
+    handleChange,
+    schema,
+    config,
+  } = props;
+  const maxLength = schema.maxLength;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  let inputProps;
+  if (appliedUiSchemaOptions.restrict) {
+    inputProps = { maxLength: maxLength };
+  } else {
+    inputProps = {};
+  }
+  const formattedNumber = props.toFormatted(props.data);
 
-    const validStringNumber = useCallback((ev:any) => props.fromFormatted(ev.currentTarget.value),[props.fromFormatted]);
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber);
+  const validStringNumber = useCallback(
+    (ev: any) => props.fromFormatted(ev.currentTarget.value),
+    [props.fromFormatted]
+  );
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    formattedNumber,
+    path,
+    validStringNumber
+  );
 
-
-    return (
-      <Input
-        type='text'
-        value={inputValue}
-        onChange={onChange}
-        className={className}
-        id={id}
-        disabled={!enabled}
-        autoFocus={appliedUiSchemaOptions.focus}
-        multiline={appliedUiSchemaOptions.multi}
-        fullWidth={!appliedUiSchemaOptions.trim || maxLength === undefined}
-        inputProps={inputProps}
-        error={!isValid}
-      />
-    );
-  });
+  return (
+    <Input
+      type='text'
+      value={inputValue}
+      onChange={onChange}
+      className={className}
+      id={id}
+      disabled={!enabled}
+      autoFocus={appliedUiSchemaOptions.focus}
+      multiline={appliedUiSchemaOptions.multi}
+      fullWidth={!appliedUiSchemaOptions.trim || maxLength === undefined}
+      inputProps={inputProps}
+      error={!isValid}
+    />
+  );
+});

package/src/mui-controls/MuiInputText.tsx

@@ -30,7 +30,7 @@ import {
   InputAdornment,
   InputBaseComponentProps,
   InputProps,
-  useTheme
+  useTheme,
 } from '@mui/material';
 import merge from 'lodash/merge';
 import Close from '@mui/icons-material/Close';
@@ -41,9 +41,12 @@ interface MuiTextInputProps {
   inputComponent?: InputProps['inputComponent'];
 }
 
-const eventToValue = (ev:any) => ev.target.value === '' ? undefined : ev.target.value;
+const eventToValue = (ev: any) =>
+  ev.target.value === '' ? undefined : ev.target.value;
 
-export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTextInputProps) => { 
+export const MuiInputText = React.memo(function MuiInputText(
+  props: CellProps & WithClassname & MuiTextInputProps
+) {
   const [showAdornment, setShowAdornment] = useState(false);
   const {
     data,
@@ -57,7 +60,7 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
     handleChange,
     schema,
     muiInputProps,
-    inputComponent
+    inputComponent,
   } = props;
   const maxLength = schema.maxLength;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -67,29 +70,35 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
   } else {
     inputProps = {};
   }
-  
+
   inputProps = merge(inputProps, muiInputProps);
-  
+
   if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
     inputProps.size = maxLength;
-  };
-  
-  const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+  }
+
+  const [inputText, onChange, onClear] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path,
+    eventToValue
+  );
   const onPointerEnter = () => setShowAdornment(true);
   const onPointerLeave = () => setShowAdornment(false);
 
   const theme: JsonFormsTheme = useTheme();
-  
+
   const closeStyle = {
-    background: theme.jsonforms?.input?.delete?.background || theme.palette.background.default,
-    borderRadius: '50%'
+    background:
+      theme.jsonforms?.input?.delete?.background ||
+      theme.palette.background.default,
+    borderRadius: '50%',
   };
 
   return (
     <Input
-      type={
-        appliedUiSchemaOptions.format === 'password' ? 'password' : 'text'
-      }
+      type={appliedUiSchemaOptions.format === 'password' ? 'password' : 'text'}
       value={inputText}
       onChange={onChange}
       className={className}
@@ -107,17 +116,19 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
           position='end'
           style={{
             display:
-              !showAdornment || !enabled || data === undefined ? 'none' : 'flex',
+              !showAdornment || !enabled || data === undefined
+                ? 'none'
+                : 'flex',
             position: 'absolute',
-            right: 0
+            right: 0,
           }}
         >
           <IconButton
             aria-label='Clear input field'
-            onClick={onClear}   
+            onClick={onClear}
             size='large'
           >
-            <Close style={closeStyle}/>
+            <Close style={closeStyle} />
           </IconButton>
         </InputAdornment>
       }

package/src/mui-controls/MuiInputTime.tsx

@@ -28,19 +28,18 @@ import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
-export const MuiInputTime = React.memo((props: CellProps & WithClassname) => {
-  const {
-    data,
-    className,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    config
-  } = props;
+export const MuiInputTime = React.memo(function MuiInputTime(
+  props: CellProps & WithClassname
+) {
+  const { data, className, id, enabled, uischema, path, handleChange, config } =
+    props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path
+  );
 
   return (
     <Input

package/src/mui-controls/MuiSelect.tsx

@@ -30,7 +30,9 @@ import merge from 'lodash/merge';
 import { TranslateProps } from '@jsonforms/react';
 import { i18nDefaults } from '../util';
 
-export const MuiSelect = React.memo((props: EnumCellProps & WithClassname & TranslateProps) => {
+export const MuiSelect = React.memo(function MuiSelect(
+  props: EnumCellProps & WithClassname & TranslateProps
+) {
   const {
     data,
     className,
@@ -42,10 +44,13 @@ export const MuiSelect = React.memo((props: EnumCellProps & WithClassname & Tran
     handleChange,
     options,
     config,
-    t
+    t,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path}), [t, schema, uischema, path]);
+  const noneOptionLabel = useMemo(
+    () => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
+    [t, schema, uischema, path]
+  );
 
   return (
     <Select
@@ -54,12 +59,16 @@ export const MuiSelect = React.memo((props: EnumCellProps & WithClassname & Tran
       disabled={!enabled}
       autoFocus={appliedUiSchemaOptions.focus}
       value={data !== undefined ? data : ''}
-      onChange={ev =>handleChange(path, ev.target.value || undefined)}
+      onChange={(ev) => handleChange(path, ev.target.value || undefined)}
       fullWidth={true}
       variant={'standard'}
     >
-      {[<MenuItem value={''} key='jsonforms.enum.none'><em>{noneOptionLabel}</em></MenuItem>].concat(
-        options.map(optionValue => (
+      {[
+        <MenuItem value={''} key='jsonforms.enum.none'>
+          <em>{noneOptionLabel}</em>
+        </MenuItem>,
+      ].concat(
+        options.map((optionValue) => (
           <MenuItem value={optionValue.value} key={optionValue.value}>
             {optionValue.label}
           </MenuItem>

package/src/mui-controls/MuiToggle.tsx

@@ -31,7 +31,9 @@ interface MuiToggleInputProps {
   inputProps?: InputProps['inputProps'];
 }
 
-export const MuiToggle = React.memo((props: CellProps & WithClassname & MuiToggleInputProps) => {
+export const MuiToggle = React.memo(function MuiToggle(
+  props: CellProps & WithClassname & MuiToggleInputProps
+) {
   const {
     data,
     className,
@@ -41,11 +43,11 @@ export const MuiToggle = React.memo((props: CellProps & WithClassname & MuiToggl
     path,
     handleChange,
     config,
-    inputProps
+    inputProps,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const inputPropsMerged = merge({}, inputProps, {
-    autoFocus: !!appliedUiSchemaOptions.focus
+    autoFocus: !!appliedUiSchemaOptions.focus,
   });
   const checked = !!data;
 

package/src/mui-controls/index.ts

@@ -22,10 +22,12 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+export * from './MuiAutocomplete';
 export * from './MuiCheckbox';
-export * from './MuiSelect';
 export * from './MuiInputInteger';
 export * from './MuiInputNumber';
 export * from './MuiInputNumberFormat';
 export * from './MuiInputText';
 export * from './MuiInputTime';
+export * from './MuiSelect';
+export * from './MuiToggle';

package/src/util/datejs.tsx

@@ -1,23 +1,25 @@
 import { TextField, TextFieldProps } from '@mui/material';
 import dayjs from 'dayjs';
 import customParsing from 'dayjs/plugin/customParseFormat';
-import React, { useRef} from 'react';
+import React, { useRef } from 'react';
 
 // required for the custom save formats in the date, time and date-time pickers
 dayjs.extend(customParsing);
 
-export const createOnChangeHandler = (
-  path: string,
-  handleChange: (path: string, value: any) => void,
-  saveFormat: string | undefined
-) => (time: dayjs.Dayjs, textInputValue: string) => {
-  if (!time) {
-    handleChange(path, undefined);
-    return;
-  }
-  const result = dayjs(time).format(saveFormat);
-  handleChange(path, result === 'Invalid Date' ? textInputValue : result);
-};
+export const createOnChangeHandler =
+  (
+    path: string,
+    handleChange: (path: string, value: any) => void,
+    saveFormat: string | undefined
+  ) =>
+  (time: dayjs.Dayjs, textInputValue: string) => {
+    if (!time) {
+      handleChange(path, undefined);
+      return;
+    }
+    const result = dayjs(time).format(saveFormat);
+    handleChange(path, result === 'Invalid Date' ? textInputValue : result);
+  };
 
 export const getData = (
   data: any,
@@ -33,7 +35,6 @@ export const getData = (
   return dayjsData;
 };
 
-
 interface InputRef {
   lastInput: string;
   toShow: string;
@@ -44,7 +45,7 @@ type ResettableTextFieldProps = TextFieldProps & {
   dayjsValueIsValid: boolean;
   valueInInputFormat: string;
   focused: boolean;
-}
+};
 
 /**
  * The dayjs formatter/parser is very lenient and for example ignores additional digits and/or characters.
@@ -52,13 +53,28 @@ type ResettableTextFieldProps = TextFieldProps & {
  * The 'ResettableTextField' component adjusts the text field to reflect the actual value stored in the data
  * once it's no longer 'focused', i.e. when the user stops editing.
  */
-export const ResettableTextField: React.FC<ResettableTextFieldProps> = ({ rawValue, dayjsValueIsValid, valueInInputFormat, focused, inputProps, ...props }) => {
-  const value = useRef<InputRef>({ lastInput: inputProps?.value, toShow: inputProps?.value });
+export const ResettableTextField: React.FC<ResettableTextFieldProps> = ({
+  rawValue,
+  dayjsValueIsValid,
+  valueInInputFormat,
+  focused,
+  inputProps,
+  ...props
+}) => {
+  const value = useRef<InputRef>({
+    lastInput: inputProps?.value,
+    toShow: inputProps?.value,
+  });
   if (!focused) {
     // The input text is not focused, therefore let's show the value actually stored in the data
     if (!dayjsValueIsValid) {
       // pass through the "raw" value in case it can't be formatted by dayjs
-      value.current.toShow = typeof rawValue === 'string' || rawValue === null || rawValue === undefined ? rawValue : JSON.stringify(rawValue)
+      value.current.toShow =
+        typeof rawValue === 'string' ||
+        rawValue === null ||
+        rawValue === undefined
+          ? rawValue
+          : JSON.stringify(rawValue);
     } else {
       // otherwise use the specified format
       value.current.toShow = valueInInputFormat;
@@ -69,5 +85,10 @@ export const ResettableTextField: React.FC<ResettableTextFieldProps> = ({ rawVal
     value.current.lastInput = inputProps?.value;
     value.current.toShow = inputProps?.value;
   }
-  return <TextField {...props} inputProps={{ ...inputProps, value: value.current.toShow || '' }} />
-}
+  return (
+    <TextField
+      {...props}
+      inputProps={{ ...inputProps, value: value.current.toShow || '' }}
+    />
+  );
+};

package/src/util/debounce.ts

@@ -23,21 +23,36 @@
   THE SOFTWARE.
 */
 import debounce from 'lodash/debounce';
-import { useState, useCallback, useEffect } from 'react'
-
+import { useState, useCallback, useEffect } from 'react';
 
 const eventToValue = (ev: any) => ev.target.value;
-export const useDebouncedChange = (handleChange: (path: string, value: any) => void, defaultValue: any, data: any, path: string, eventToValueFunction: (ev: any) => any = eventToValue, timeout = 300): [any, React.ChangeEventHandler, () => void] => {
+export const useDebouncedChange = (
+  handleChange: (path: string, value: any) => void,
+  defaultValue: any,
+  data: any,
+  path: string,
+  eventToValueFunction: (ev: any) => any = eventToValue,
+  timeout = 300
+): [any, React.ChangeEventHandler, () => void] => {
   const [input, setInput] = useState(data ?? defaultValue);
   useEffect(() => {
     setInput(data ?? defaultValue);
   }, [data]);
-  const debouncedUpdate = useCallback(debounce((newValue: string) => handleChange(path, newValue), timeout), [handleChange, path, timeout]);
-  const onChange = useCallback((ev: any) => {
-    const newValue = eventToValueFunction(ev);
-    setInput(newValue ?? defaultValue);
-    debouncedUpdate(newValue);
-  }, [debouncedUpdate, eventToValueFunction]);
-  const onClear = useCallback(() => { setInput(defaultValue); handleChange(path, undefined) }, [defaultValue, handleChange, path]);
+  const debouncedUpdate = useCallback(
+    debounce((newValue: string) => handleChange(path, newValue), timeout),
+    [handleChange, path, timeout]
+  );
+  const onChange = useCallback(
+    (ev: any) => {
+      const newValue = eventToValueFunction(ev);
+      setInput(newValue ?? defaultValue);
+      debouncedUpdate(newValue);
+    },
+    [debouncedUpdate, eventToValueFunction]
+  );
+  const onClear = useCallback(() => {
+    setInput(defaultValue);
+    handleChange(path, undefined);
+  }, [defaultValue, handleChange, path]);
   return [input, onChange, onClear];
-};
+};

package/src/util/focus.ts

@@ -22,11 +22,11 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import {useState, useCallback} from 'react';
+import { useState, useCallback } from 'react';
 
-export const useFocus = ():[boolean, () => void, () => void] => {
-    const [focused, setFocused] = useState(false);
-    const onFocus = useCallback(() => setFocused(true), []);
-    const onBlur = useCallback(() => setFocused(false), []);
-    return [focused, onFocus, onBlur];
-};
+export const useFocus = (): [boolean, () => void, () => void] => {
+  const [focused, setFocused] = useState(false);
+  const onFocus = useCallback(() => setFocused(true), []);
+  const onBlur = useCallback(() => setFocused(false), []);
+  return [focused, onFocus, onBlur];
+};

package/src/util/i18nDefaults.ts

@@ -1,3 +1,3 @@
 export const i18nDefaults = {
-    'enum.none': 'None'
-}
+  'enum.none': 'None',
+};

package/src/util/layout.tsx

@@ -23,8 +23,7 @@
   THE SOFTWARE.
 */
 import isEmpty from 'lodash/isEmpty';
-import React from 'react';
-import { ComponentType } from 'react';
+import React, { ComponentType } from 'react';
 import Ajv from 'ajv';
 import type { UISchemaElement } from '@jsonforms/core';
 import {
@@ -63,54 +62,60 @@ export interface MaterialLayoutRendererProps extends OwnPropsOfRenderer {
   elements: UISchemaElement[];
   direction: 'row' | 'column';
 }
-const MaterialLayoutRendererComponent =
-  ({
-    visible,
-    elements,
-    schema,
-    path,
-    enabled,
-    direction,
-    renderers,
-    cells
-  }: MaterialLayoutRendererProps) => {
-    if (isEmpty(elements)) {
-      return null;
-    } else {
-      return (
-        <Hidden xsUp={!visible}>
-          <Grid
-            container
-            direction={direction}
-            spacing={direction === 'row' ? 2 : 0}
-          >
-            {renderLayoutElements(
-              elements,
-              schema,
-              path,
-              enabled,
-              renderers,
-              cells
-            )}
-          </Grid>
-        </Hidden>
-      );
-    }
-  };
-export const MaterialLayoutRenderer = React.memo(MaterialLayoutRendererComponent);
+const MaterialLayoutRendererComponent = ({
+  visible,
+  elements,
+  schema,
+  path,
+  enabled,
+  direction,
+  renderers,
+  cells,
+}: MaterialLayoutRendererProps) => {
+  if (isEmpty(elements)) {
+    return null;
+  } else {
+    return (
+      <Hidden xsUp={!visible}>
+        <Grid
+          container
+          direction={direction}
+          spacing={direction === 'row' ? 2 : 0}
+        >
+          {renderLayoutElements(
+            elements,
+            schema,
+            path,
+            enabled,
+            renderers,
+            cells
+          )}
+        </Grid>
+      </Hidden>
+    );
+  }
+};
+export const MaterialLayoutRenderer = React.memo(
+  MaterialLayoutRendererComponent
+);
 
 export interface AjvProps {
   ajv: Ajv;
 }
 
-export const withAjvProps = <P extends {}>(Component: ComponentType<AjvProps & P>) =>
-  (props: P) => {
+// TODO fix @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const withAjvProps = <P extends {}>(
+  Component: ComponentType<AjvProps & P>
+) =>
+  function WithAjvProps(props: P) {
     const ctx = useJsonForms();
-    const ajv = getAjv({jsonforms: {...ctx}});
+    const ajv = getAjv({ jsonforms: { ...ctx } });
 
-    return (<Component {...props} ajv={ajv} />);
+    return <Component {...props} ajv={ajv} />;
   };
 
-export interface MaterialLabelableLayoutRendererProps extends MaterialLayoutRendererProps {
+export interface MaterialLabelableLayoutRendererProps
+  extends MaterialLayoutRendererProps {
   label?: string;
 }

package/src/util/theme.ts

@@ -29,7 +29,7 @@ export interface JsonFormsTheme extends Theme {
     input?: {
       delete?: {
         background?: string;
-      }
-    }
+      };
+    };
   };
 }