From a8fbf50a49ef5ed00803c6950ee13eed6432ce01 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Wed, 11 May 2022 17:12:33 +0200
Subject: [PATCH] feat(ui) - funnels - issues sort

---
 .../FunnelIssuesSort/FunnelIssuesSort.tsx      |  9 ++++++++-
 .../app/components/shared/Select/Select.tsx    | 18 +++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/FunnelIssuesSort/FunnelIssuesSort.tsx b/frontend/app/components/Dashboard/components/FunnelIssuesSort/FunnelIssuesSort.tsx
index b3ab876d4..782be0eb3 100644
--- a/frontend/app/components/Dashboard/components/FunnelIssuesSort/FunnelIssuesSort.tsx
+++ b/frontend/app/components/Dashboard/components/FunnelIssuesSort/FunnelIssuesSort.tsx
@@ -9,12 +9,19 @@ const sortOptions = [
     { value: 'lostConversions-desc', label: 'Lost Conversions (High)' },
     { value: 'lostConversions-asc', label: 'Lost Conversions (Low)' },
 ]
-function FunnelIssuesSort(props) {
+
+interface Props {
+    onChange?: (value: string) => void;
+}
+function FunnelIssuesSort(props: Props) {
     return (
         <div>
             <Select
                 plain
+                defaultValue={sortOptions[0].value}
                 options={sortOptions}
+                alignRight={true}
+                onChange={props.onChange}
             />
         </div>
     );
diff --git a/frontend/app/components/shared/Select/Select.tsx b/frontend/app/components/shared/Select/Select.tsx
index 50aced462..a57be7e87 100644
--- a/frontend/app/components/shared/Select/Select.tsx
+++ b/frontend/app/components/shared/Select/Select.tsx
@@ -11,7 +11,9 @@ interface Props {
     components?: any;
     [x:string]: any;
 }
-export default function({ plain = false, options, isSearchable = false, components = {}, defaultValue = '', ...rest }: Props) {
+export default function({ alignRight = false, plain = false, options, isSearchable = false, components = {}, defaultValue = '', ...rest }: Props) {
+    const defaultSelected = defaultValue ? options.find(x => x.value === defaultValue) : null;
+
     const customStyles = {
         option: (provided, state) => ({
           ...provided,
@@ -20,20 +22,28 @@ export default function({ plain = false, options, isSearchable = false, componen
         menu: (provided, state) => ({
             ...provided,
             top: 31,
+            border: 'solid thin #ccc',
+            borderRadius: '3px',
+            backgroundColor: '#fff',
+            boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)',
+            position: 'absolute',
             minWidth: 'fit-content',
+            ...(alignRight && { right: 0 })
         }),
         control: (provided) => {
             const obj = {
                 ...provided,
                 border: 'solid thin #ddd',
                 cursor: 'pointer',
+                transition: 'all 0.5s',
             }
             if (plain) {
                 obj['border'] = '1px solid transparent'
                 obj['backgroundColor'] = 'transparent'
                 obj['&:hover'] = {
                     borderColor: 'transparent',
-                    backgroundColor: colors['gray-light']
+                    backgroundColor: colors['gray-light'],
+                    transition: 'all 0.2s ease-in-out'
                 }
                 obj['&:focus'] = {
                     borderColor: 'transparent'
@@ -55,7 +65,8 @@ export default function({ plain = false, options, isSearchable = false, componen
           return { ...provided, opacity, transition };
         }
     }
-    const defaultSelected = defaultValue ? options.find(x => x.value === defaultValue) : null;
+    
+
     return (
         <Select
             options={options}
@@ -75,6 +86,7 @@ export default function({ plain = false, options, isSearchable = false, componen
                 }
             })}
             blurInputOnSelect={true}
+            // menuPosition="fixed"
             {...rest}
         />
     );