From 99b56515e374f1a957d4177af1392dc40106bf94 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Fri, 22 Apr 2022 19:05:35 -0400
Subject: [PATCH] fix(striker-ui): customize MUI Autocomplete

---
 striker-ui/components/Autocomplete.tsx | 111 +++++++++++++++++++++++++
 1 file changed, 111 insertions(+)
 create mode 100644 striker-ui/components/Autocomplete.tsx

diff --git a/striker-ui/components/Autocomplete.tsx b/striker-ui/components/Autocomplete.tsx
new file mode 100644
index 00000000..f727bd09
--- /dev/null
+++ b/striker-ui/components/Autocomplete.tsx
@@ -0,0 +1,111 @@
+import {
+  Autocomplete as MUIAutocomplete,
+  autocompleteClasses as muiAutocompleteClasses,
+  AutocompleteProps as MUIAutocompleteProps,
+  Grow as MUIGrow,
+  outlinedInputClasses as muiOutlinedInputClasses,
+  Paper as MUIPaper,
+  PaperProps as MUIPaperProps,
+  svgIconClasses as muiSvgIconClasses,
+} from '@mui/material';
+
+import { GREY, TEXT } from '../lib/consts/DEFAULT_THEME';
+
+import OutlinedInputWithLabel from './OutlinedInputWithLabel';
+
+type AutocompleteProps<
+  T,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined,
+> = { label: string } & Omit<
+  MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
+  'renderInput'
+> &
+  Partial<
+    Pick<
+      MUIAutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
+      'renderInput'
+    >
+  >;
+
+const GrowPaper = (paperProps: MUIPaperProps): JSX.Element => (
+  <MUIGrow in>
+    {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+    <MUIPaper {...paperProps} />
+  </MUIGrow>
+);
+
+const Autocomplete = <
+  T,
+  Multiple extends boolean | undefined = undefined,
+  DisableClearable extends boolean | undefined = undefined,
+  FreeSolo extends boolean | undefined = undefined,
+>(
+  autocompleteProps: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>,
+): JSX.Element => {
+  const { componentsProps, label, renderInput, sx } = autocompleteProps;
+  const combinedComponentsProps: AutocompleteProps<
+    T,
+    Multiple,
+    DisableClearable,
+    FreeSolo
+  >['componentsProps'] = {
+    paper: {
+      sx: {
+        backgroundColor: TEXT,
+      },
+    },
+
+    ...componentsProps,
+  };
+  const combinedRenderInput =
+    renderInput ??
+    (({ fullWidth, InputProps, InputLabelProps, inputProps }) => (
+      <OutlinedInputWithLabel
+        {...{
+          formControlProps: {
+            fullWidth,
+            ref: InputProps.ref,
+          },
+          inputLabelProps: InputLabelProps,
+          inputProps: {
+            className: InputProps.className,
+            endAdornment: InputProps.endAdornment,
+            inputProps,
+            startAdornment: InputProps.startAdornment,
+          },
+          label,
+        }}
+      />
+    ));
+  const combinedSx = {
+    [`& .${muiOutlinedInputClasses.root} .${muiAutocompleteClasses.endAdornment}`]:
+      {
+        right: `7px`,
+
+        [`& .${muiSvgIconClasses.root}`]: {
+          color: GREY,
+        },
+      },
+
+    ...sx,
+  };
+
+  return (
+    <MUIAutocomplete
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...{
+        PaperComponent: GrowPaper,
+        ...autocompleteProps,
+        componentsProps: combinedComponentsProps,
+        renderInput: combinedRenderInput,
+        sx: combinedSx,
+      }}
+    />
+  );
+};
+
+export type { AutocompleteProps };
+
+export default Autocomplete;