dropdown button update (#31)

Author: ivaylo-matov

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamods/dynamo-home",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Dynamo Home",
   "author": "Autodesk Inc.",
   "main": "index.tsx",

package.json

@@ -1,3 +1,3 @@
 .wideDropdown {
-    width: 200px;
+    width: 185px;
 }

src/components/Samples/PageSamples.module.css

@@ -8,7 +8,7 @@ import { CustomSampleFirstCellRenderer } from "./CustomSampleFirstCellRenderer";
 import { SamplesGrid } from './SamplesGrid';
 import { openFile, showSamplesCommand, saveHomePageSettings } from '../../functions/utility';
 import { useSettings } from '../SettingsContext';
-import { CustomDropdown } from "../Sidebar/CustomDropDown";
+import { CustomDropdown } from '../Sidebar/CustomDropDown';
 import styles from './PageSamples.module.css';
 
 export const SamplesPage = ({ samplesViewMode }) => {
@@ -133,10 +133,13 @@ export const SamplesPage = ({ samplesViewMode }) => {
                         placeholder={<FormattedMessage id="samples.showsamples.text" />}
                         onSelectionChange={handleShowSamplesClick}
                         options={[
-                            { label: <FormattedMessage id="samples.showsamples.files.text" />, value: 'open-files' },
+                            { label: <FormattedMessage id="samples.showsamples.files.text" />, value: 'open-graphs' },
                             { label: <FormattedMessage id="samples.showsamples.datasets.text" />, value: 'open-datasets' }
                         ]}
                         className={styles.wideDropdown}
+                        showDivider={false}
+                        wholeButtonActionable={true}
+                        disableArrowHoverShadow={true}
                     />
                 </div>
             </div>

src/components/Samples/PageSamples.tsx

@@ -113,4 +113,8 @@
     height: 100%;
     background-color: #9B9B9B; 
     margin: 0px; 
+}
+
+.no-hover-shadow .arrow-container:hover {
+    box-shadow: none !important;
 }

src/components/Sidebar/CustomDropDown.module.css

@@ -2,7 +2,21 @@ import { useState, useRef, useEffect } from 'react';
 import styles from './CustomDropDown.module.css';
 import { OpenArrow } from '../Common/Arrow';
 
-export const CustomDropdown = ({ id, options, placeholder, onSelectionChange, className }: Dropdown & { className?: string }) => {
+export const CustomDropdown = ({
+    id,
+    options,
+    placeholder,
+    onSelectionChange,
+    className,
+    showDivider = true,
+    wholeButtonActionable = false,
+    disableArrowHoverShadow = false
+}: Dropdown & {
+    className?: string,
+    showDivider?: boolean,
+    wholeButtonActionable?: boolean,
+    disableArrowHoverShadow?: boolean
+}) => {
     const [isOpen, setIsOpen] = useState(false);
     const [lastSelected, setLastSelected] = useState(options[0]);
     const dropdownRef = useRef(null);
@@ -43,14 +57,27 @@ export const CustomDropdown = ({ id, options, placeholder, onSelectionChange, cl
     }, [isOpen]);
 
     return (
-        <div className={`${styles['custom-dropdown']} ${isOpen ? styles.open : ''} ${className}`} ref={dropdownRef}>
-            <div className={styles['dropdown-selected']} onClick={handleDefaultAction}>
+        <div
+            className={`
+            ${styles['custom-dropdown']} 
+            ${isOpen ? styles.open : ''} 
+            ${disableArrowHoverShadow ? styles['no-hover-shadow'] : ''} 
+            ${className}
+            `}
+            ref={dropdownRef}>
+            <div
+                className={styles['dropdown-selected']}
+                onClick={wholeButtonActionable ? toggleDropdown : undefined}
+            >
                 <span>{placeholder}</span>
-                <span className={styles['vertical-line']}></span>
-                <div className={styles['arrow-container']} onClick={(e) => {
-                    e.stopPropagation();
-                    toggleDropdown();
-                }}>
+                {showDivider && <span className={styles['vertical-line']}></span>}
+                <div
+                    className={styles['arrow-container']}
+                    onClick={wholeButtonActionable ? undefined : (e) => {
+                        e.stopPropagation();
+                        toggleDropdown();
+                    }}
+                >
                     <OpenArrow isOpen={isOpen} color={arrowColor} />
                 </div>
             </div>

src/components/Sidebar/CustomDropDown.tsx

@@ -48,7 +48,7 @@ export function showSamplesCommand(value: ShowSamplesCommand) {
   if (value === 'open-graphs' && window.chrome?.webview !== undefined) {
     window.chrome.webview.hostObjects.scriptObject.ShowSampleFilesInFolder();
   }
-  if (value == 'open-datasets' && window.chrome?.webview !== undefined) {
+  if (value === 'open-datasets' && window.chrome?.webview !== undefined) {
     window.chrome.webview.hostObjects.scriptObject.ShowSampleDatasetsInFolder();
   }
 }