feat: can now use a TextField instead of an InputBase

clementlize · Aug 24, 2022 · ab0fa1a · ab0fa1a
1 parent 88bf95a
commit ab0fa1a
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -81,4 +81,21 @@ return (
     onSelect: (required), (selectedFeature) => {...},
     onSuggest: (optional), (suggestedResults) => {...}
 
+## Can I use a Material UI TextField instead of a raw Input?
+
+### Yes.
+
+To replace the `<InputBase />` component by a `<TextField />`, specify an object using the *TextFieldProps* property. This object can be empty: as long as it is not undefined, a `<TextField />` will be used.
+
+Please note that if you use the property *TextFieldProps*, the property *inputProps* will be completely ignored. To specify the *inputProps* of the `<TextField />`, do:
+```
+textFieldProps={{
+	inputProps: {
+		...
+	}	
+}}
+```
+
+## More  
+
 See [Mapbox API Docs](https://www.mapbox.com/api-documentation/#request-format) for more information.
diff --git a/packages/pkg/src/MatGeocoder/MatGeocoder.tsx b/packages/pkg/src/MatGeocoder/MatGeocoder.tsx
@@ -16,6 +16,8 @@ import {
   alpha,
   InputBase,
   InputBaseProps,
+  TextField,
+  TextFieldProps,
 } from '@mui/material';
 import usePrevious from '../hooks/usePrevious';
 import SearchIcon from '@mui/icons-material/Search';
@@ -45,9 +47,9 @@ type Props = {
   inputClasses?: any; // Override css classes to input.
   inputPaperProps?: Partial<PaperProps>; // Override input container props.
   suggestionsPaperProps?: PaperProps; // Override suggestions container props.
-  inputProps?: Partial<InputBaseProps>;
+  inputProps?: Partial<InputBaseProps>;  // If textFieldsProps is provided, these props will be ignored.
+  textFieldProps?: Partial<TextFieldProps>; // Specify if you want the input to be a TextField instead of a MUI input. rawInputProps will be ignored.
   showInputContainer?: boolean;
-  disableUnderline?: boolean;
 };
 
 const SearchInput = ({...props}: Partial<InputBaseProps>) => {
@@ -65,6 +67,23 @@ const SearchInput = ({...props}: Partial<InputBaseProps>) => {
   );
 };
 
+const SearchTextField = ({...props}: Partial<TextFieldProps>) => {
+  return (
+    <TextField
+      type="search"
+      fullWidth
+      InputProps={{
+        startAdornment: (
+          <InputAdornment position="start">
+            <SearchIcon color="action" />
+          </InputAdornment>
+        ),
+      }}
+      {...props}
+    />
+  );
+};
+
 /**
  * Geocoder component: connects to Mapbox.com Geocoding API
  * and provides an auto-completing interface for finding locations.
@@ -93,6 +112,7 @@ const MatGeocoder = ({
   onInputBlur,
   inputClasses,
   inputProps: inputPropsParam,
+  textFieldProps,
   inputPaperProps,
 }: Props) => {
   const [results, setResults] = useState<Result[]>([]);
@@ -132,10 +152,13 @@ const MatGeocoder = ({
   const theme = useTheme();
 
   const renderInput = useCallback(
+
     (renderInputProps) => {
+
       const {ref, inputClasses, ...other} = renderInputProps;
       const {...restInputPaperProps} = inputPaperProps ?? {};
-      const searchInput = (
+
+      let searchInput = (
         <SearchInput
           classes={inputClasses}
           inputRef={ref}
@@ -144,6 +167,17 @@ const MatGeocoder = ({
         />
       );
 
+      if (textFieldProps) {
+        searchInput = (
+          <SearchTextField
+            classes={inputClasses}
+            inputRef={ref}
+            {...other}
+            {...textFieldProps}
+          />
+        )
+      }
+
       if (!showInputContainer) {
         return searchInput;
       }
@@ -208,6 +242,7 @@ const MatGeocoder = ({
     },
     [
       inputPropsParam,
+      textFieldProps,
       showInputContainer,
       loading,
       showLoader,