From d2d62b7463ffe74e3c7a222e4f22ac5fe3df3050 Mon Sep 17 00:00:00 2001
From: Matthew Penner <me@matthewp.io>
Date: Tue, 20 Jul 2021 15:29:22 -0600
Subject: [PATCH] ui(admin): tweaks to SelectField styling

---
 .../components/elements/ProgressBar.tsx       |  13 +-
 .../components/elements/SelectField.tsx       | 111 +++++++++++++++++-
 2 files changed, 116 insertions(+), 8 deletions(-)

diff --git a/resources/scripts/components/elements/ProgressBar.tsx b/resources/scripts/components/elements/ProgressBar.tsx
index e3314f449..0282ee469 100644
--- a/resources/scripts/components/elements/ProgressBar.tsx
+++ b/resources/scripts/components/elements/ProgressBar.tsx
@@ -12,8 +12,8 @@ const BarFill = styled.div`
 `;
 
 export default () => {
-    const interval = useRef<number>(null);
-    const timeout = useRef<number>(null);
+    const interval = useRef<NodeJS.Timer>();
+    const timeout = useRef<NodeJS.Timer>();
     const [ visible, setVisible ] = useState(false);
     const progress = useStoreState(state => state.progress.progress);
     const continuous = useStoreState(state => state.progress.continuous);
@@ -30,7 +30,6 @@ export default () => {
         setVisible((progress || 0) > 0);
 
         if (progress === 100) {
-            // @ts-ignore
             timeout.current = setTimeout(() => setProgress(undefined), 500);
         }
     }, [ progress ]);
@@ -49,17 +48,17 @@ export default () => {
     useEffect(() => {
         if (continuous) {
             interval.current && clearInterval(interval.current);
-            if ((progress || 0) >= 90) {
+            const p = progress || 0;
+            if (p >= 90) {
                 setProgress(90);
             } else {
-                // @ts-ignore
-                interval.current = setTimeout(() => setProgress(progress + randomInt(1, 5)), 500);
+                interval.current = setTimeout(() => setProgress(p + randomInt(1, 5)), 500);
             }
         }
     }, [ progress, continuous ]);
 
     return (
-        <div css={tw`w-full fixed z-10`} style={{ height: '2px' }}>
+        <div css={tw`w-full h-[2px] fixed z-10`}>
             <CSSTransition
                 timeout={150}
                 appear
diff --git a/resources/scripts/components/elements/SelectField.tsx b/resources/scripts/components/elements/SelectField.tsx
index c6a698f53..f1ade2e6a 100644
--- a/resources/scripts/components/elements/SelectField.tsx
+++ b/resources/scripts/components/elements/SelectField.tsx
@@ -1,15 +1,31 @@
 import { CSSObject } from '@emotion/serialize';
 import { Field as FormikField, FieldProps } from 'formik';
 import React, { forwardRef } from 'react';
-import Select, { ContainerProps, ControlProps, InputProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
+import Select, { ContainerProps, ControlProps, GroupProps, IndicatorContainerProps, IndicatorProps, InputProps, MenuListComponentProps, MenuProps, MultiValueProps, OptionProps, PlaceholderProps, SingleValueProps, StylesConfig, ValueContainerProps } from 'react-select';
 import Creatable from 'react-select/creatable';
 import tw, { theme } from 'twin.macro';
 import Label from '@/components/elements/Label';
 import { ValueType } from 'react-select/src/types';
+import { GroupHeadingProps } from 'react-select/src/components/Group';
+import { MenuPortalProps, NoticeProps } from 'react-select/src/components/Menu';
+import { LoadingIndicatorProps } from 'react-select/src/components/indicators';
+import { MultiValueRemoveProps } from 'react-select/src/components/MultiValue';
 
 type T = any;
 
 export const SelectStyle: StylesConfig<T, any, any> = {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    clearIndicator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            color: props.isFocused ? theme`colors.neutral.300` : theme`colors.neutral.400`,
+
+            ':hover': {
+                color: theme`colors.neutral.100`,
+            },
+        };
+    },
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     container: (base: CSSObject, props: ContainerProps<T, any, any>): CSSObject => {
         return {
@@ -30,6 +46,56 @@ export const SelectStyle: StylesConfig<T, any, any> = {
             borderColor: theme`colors.neutral.500`,
             borderWidth: '2px',
             color: theme`colors.neutral.200`,
+            cursor: 'pointer',
+            // boxShadow: props.isFocused ? '0 0 0 2px #2684ff' : undefined,
+
+            ':hover': {
+                borderColor: !props.isFocused ? theme`colors.neutral.400` : theme`colors.neutral.500`,
+            },
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    dropdownIndicator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            color: props.isFocused ? theme`colors.neutral.300` : theme`colors.neutral.400`,
+            // TODO: find better alternative for `isFocused` so this only triggers when the dropdown is visible.
+            transform: props.isFocused ? 'rotate(180deg)' : undefined,
+
+            ':hover': {
+                color: theme`colors.neutral.300`,
+            },
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    group: (base: CSSObject, props: GroupProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    groupHeading: (base: CSSObject, props: GroupHeadingProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    indicatorsContainer: (base: CSSObject, props: IndicatorContainerProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    indicatorSeparator: (base: CSSObject, props: IndicatorProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+            // width: '0',
+            backgroundColor: theme`colors.neutral.500`,
         };
     },
 
@@ -42,6 +108,20 @@ export const SelectStyle: StylesConfig<T, any, any> = {
         };
     },
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    loadingIndicator: (base: CSSObject, props: LoadingIndicatorProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    loadingMessage: (base: CSSObject, props: NoticeProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     menu: (base: CSSObject, props: MenuProps<T, any, any>): CSSObject => {
         return {
@@ -51,6 +131,20 @@ export const SelectStyle: StylesConfig<T, any, any> = {
         };
     },
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    menuList: (base: CSSObject, props: MenuListComponentProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    menuPortal: (base: CSSObject, props: MenuPortalProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     multiValue: (base: CSSObject, props: MultiValueProps<T, any>): CSSObject => {
         return {
@@ -68,11 +162,26 @@ export const SelectStyle: StylesConfig<T, any, any> = {
         };
     },
 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    multiValueRemove: (base: CSSObject, props: MultiValueRemoveProps<T, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    noOptionsMessage: (base: CSSObject, props: NoticeProps<T, any, any>): CSSObject => {
+        return {
+            ...base,
+        };
+    },
+
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     option: (base: CSSObject, props: OptionProps<T, any, any>): CSSObject => {
         return {
             ...base,
             background: theme`colors.neutral.900`,
+
             ':hover': {
                 background: theme`colors.neutral.700`,
                 cursor: 'pointer',