change MuiAutocomplete from Input to Textfield

closes eclipsesource#1965 Signed-off-by: Lukas Boll lukas-bool@web.de
LukasBoll · Jul 19, 2022 · bf93b7a · bf93b7a
1 parent 7d0bf34
commit bf93b7a
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 42 deletions.
diff --git a/packages/material/src/controls/MaterialEnumControl.tsx b/packages/material/src/controls/MaterialEnumControl.tsx
@@ -37,12 +37,19 @@ import { MaterialInputControl } from './MaterialInputControl';
 import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
 
 export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel) => {
-  const {config, uischema} = props;
+  const {config, uischema, errors, visible} = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const isValid = errors.length === 0;
   return (
+    appliedUiSchemaOptions.autocomplete === false ?
     <MaterialInputControl
       {...props}
-      input={appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete}
+      input={MuiSelect}
+    />:
+    <MuiAutocomplete
+      {...props}
+      isValid={isValid}
+      visible={visible}
     />
   );
 };

diff --git a/packages/material/src/controls/MaterialOneOfEnumControl.tsx b/packages/material/src/controls/MaterialOneOfEnumControl.tsx
@@ -37,12 +37,20 @@ import { MaterialInputControl } from '../controls/MaterialInputControl';
 import merge from 'lodash/merge';
 
 export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel) => {
-  const {config, uischema} = props;
+  const {config, uischema, errors, visible} = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const isValid = errors.length === 0;
+
   return (
+    appliedUiSchemaOptions.autocomplete === false ?
     <MaterialInputControl
       {...props}
-      input={appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete}
+      input={MuiSelect}
+    />:
+    <MuiAutocomplete
+      {...props}
+      isValid={isValid}
+      visible={visible}
     />
   );
 };

diff --git a/packages/material/src/mui-controls/MuiAutocomplete.tsx b/packages/material/src/mui-controls/MuiAutocomplete.tsx
@@ -23,24 +23,32 @@
   THE SOFTWARE.
 */
 import React, { ReactNode } from 'react';
-import { EnumCellProps, EnumOption, WithClassname } from '@jsonforms/core';
+import { ControlProps, EnumCellProps, EnumOption, isDescriptionHidden, WithClassname } from '@jsonforms/core';
 
 import {
   Autocomplete,
   AutocompleteRenderOptionState,
-  Input,
-  FilterOptionsState
+  FilterOptionsState,
+  FormHelperText,
+  Hidden,
+  TextField
 } from '@mui/material';
 import merge from 'lodash/merge';
+import { useFocus } from '../util/focus';
 
 export interface WithOptionLabel {
   getOptionLabel?(option: EnumOption) : string;
   renderOption?(props: React.HTMLAttributes<HTMLLIElement>, option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
   filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
 }
 
-export const MuiAutocomplete = (props: EnumCellProps & WithClassname & WithOptionLabel) => {
+export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel) => {
   const {
+    description,
+    errors,
+    visible,
+    required,
+    label,
     data,
     className,
     id,
@@ -52,45 +60,79 @@ export const MuiAutocomplete = (props: EnumCellProps & WithClassname & WithOptio
     config,
     getOptionLabel,
     renderOption,
-    filterOptions
+    filterOptions,
+    isValid
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const [inputValue, setInputValue] = React.useState(data ?? '');
+  const [focused, onFocus, onBlur] = useFocus();
 
   const findOption = options.find(o => o.value === data) ?? null;
+
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  );
+
+  const firstFormHelperText = showDescription
+    ? description
+    : !isValid
+    ? errors
+    : null;
+  const secondFormHelperText = showDescription && !isValid ? errors : null;
+
   return (
-    <Autocomplete
-      className={className}
-      id={id}
-      disabled={!enabled}
-      value={findOption}
-      onChange={(_event: any, newValue: EnumOption | null) => {
-        handleChange(path, newValue?.value);
-      }}
-      inputValue={inputValue}
-      onInputChange={(_event, newInputValue) => {
-        setInputValue(newInputValue);
-      }}
-      autoHighlight
-      autoSelect
-      autoComplete
-      fullWidth
-      options={options}
-      getOptionLabel={getOptionLabel || (option => option?.label)}
-      freeSolo={false}
-      style={{ marginTop: 16 }}
-      renderInput={params => (
-        <Input
-          style={{ width: '100%' }}
-          type='text'
-          inputProps={params.inputProps}
-          inputRef={params.InputProps.ref}
-          autoFocus={appliedUiSchemaOptions.focus}
-          disabled={!enabled}
-        />
-      )}
-      renderOption={renderOption}
-      filterOptions={filterOptions}
-    />
+    <Hidden xsUp={!visible}>
+      <Autocomplete
+        className={className}
+        id={id}
+        disabled={!enabled}
+        value={findOption}
+        onChange={(_event: any, newValue: EnumOption | null) => {
+          handleChange(path, newValue?.value);
+        }}
+        inputValue={inputValue}
+        onInputChange={(_event, newInputValue) => {
+          setInputValue(newInputValue);
+        }}
+        autoHighlight
+        autoSelect
+        autoComplete
+        fullWidth
+        options={options}
+        getOptionLabel={getOptionLabel || (option => option?.label)}
+        freeSolo={false}
+        renderInput={params => { 
+          return(
+          <TextField
+            label={label} 
+            variant={'standard'}
+            type='text'
+            inputProps={params.inputProps}
+            inputRef={params.InputProps.ref}
+            autoFocus={appliedUiSchemaOptions.focus}
+            disabled={!enabled}
+            {...params}
+            id={id + '-input'}
+            required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+            error={!isValid}
+            fullWidth={!appliedUiSchemaOptions.trim}
+            InputLabelProps={data ? { shrink: true } : undefined}
+            onFocus={onFocus}
+            onBlur={onBlur}
+          />
+        )}}
+        renderOption={renderOption}
+        filterOptions={filterOptions}
+      />
+      <FormHelperText error={!isValid && !showDescription}>
+        {firstFormHelperText}
+      </FormHelperText>
+      <FormHelperText error={!isValid}>
+        {secondFormHelperText}
+      </FormHelperText>
+    </Hidden>
   );
 };