Merge pull request #36 from concord-consortium/188162567-custom-dropd…

…own-2

More Dropdown updates

src/components/dropdown.scss

@@ -3,6 +3,7 @@
 .day-length-dropdown-container {
   box-sizing: border-box;
   font-size: 12px;
+  font-weight: 500;
 
   .day-length-dropdown-label {
     position: relative;
@@ -31,6 +32,7 @@
       left: 6px;
       top: 6px;
       z-index: 1;
+      pointer-events: none;
     }
 
     .dropdown-main-button, input {
@@ -51,16 +53,38 @@
       background-color: white;
       border-radius: $input-border-radius;
       box-sizing: border-box;
-    }
 
-    .dropdown-main-button {
-      font-weight: 600;
-      cursor: pointer;
-      &:hover {
-        background-color: $codap-teal-lightest;
+      .arrow-icon {
+        position: absolute;
+        right: 5px;
+        top: 6px;
+        z-index: 1;
+        pointer-events: none;
+
+        &.up {
+          transform: rotate(180deg);
+        }
       }
-      &:active {
-        background-color: $codap-teal-active;
+
+      .dropdown-main-button {
+        background-color: white;
+        font-weight: 600;
+        cursor: pointer;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.iconPresent {
+          padding-left: 28px;
+          font-weight: 500;
+        }
+
+        &:hover {
+          background-color: $codap-teal-lightest;
+        }
+        &:active {
+          background-color: $codap-teal-active;
+        }
       }
     }
 
@@ -89,6 +113,7 @@
 
       button {
         font-size: 12px;
+        font-weight: 500;
         font-family: "Montserrat", sans-serif;
         border: none;
         background-color: white;

src/components/dropdown.tsx

@@ -1,17 +1,18 @@
 import React, { useState, useEffect } from "react";
 import { clsx } from "clsx";
+import DropdownArrow from "../assets/images/dropdown-arrow-icon.svg";
 
 import "./dropdown.scss";
 
-interface IOption {
+export interface IOption {
   name: string;
   value?: string;
 }
 
 interface IDropdownProps<T extends IOption> {
   value: string;
   options: T[];
-  onSelect: (place: T) => void;
+  onSelect: (option: T) => void;
   onSearchChange?: (value: string) => void;
   label: string;
   inputPlaceholder?: string;
@@ -64,7 +65,7 @@ export const Dropdown = <T extends IOption>({
     setShowOptions(false);
   };
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLButtonElement>) => {
     if (!showOptions) return;
 
     switch (event.key) {
@@ -91,6 +92,8 @@ export const Dropdown = <T extends IOption>({
     }
   };
 
+  const iconPresent = !!icon;
+
   return (
     <div className={clsx("day-length-dropdown-container", { inline })}>
       <div className="day-length-dropdown-label">
@@ -108,7 +111,14 @@ export const Dropdown = <T extends IOption>({
             />
           ) : (
             <div className="dropdown-main-button-container">
-              <button className="dropdown-main-button" onClick={handleMainButtonClick}>{value}</button>
+              <button
+                className={clsx("dropdown-main-button", { iconPresent })}
+                onClick={handleMainButtonClick}
+                onKeyDown={handleKeyDown}
+              >
+                {value}
+              </button>
+              <DropdownArrow className={clsx("arrow-icon", { up: showOptions })} />
             </div>
           )
         }
@@ -127,7 +137,7 @@ export const Dropdown = <T extends IOption>({
                     onMouseLeave={() => setFocusedOptionIndex(-1)}
                     className={clsx({
                       focused: focusedOptionIndex === index ? "focused" : "",
-                      iconPresent: icon
+                      iconPresent
                     })
                     }
                   >

src/grasp-seasons/components/my-locations.tsx

@@ -2,6 +2,8 @@ import React, { Component } from "react";
 import t, { Language } from "../translation/translate";
 import { ILocation } from "../../types";
 import { locationsEqual } from "../../utils/daylight-utils";
+import { Dropdown, IOption } from "../../components/dropdown";
+import LocationIcon from "../../assets/images/icon-location.svg";
 
 import "./my-locations.scss";
 
@@ -19,22 +21,20 @@ export default class MyLocations extends Component<IProps> {
     this.selectChange = this.selectChange.bind(this);
   }
 
-  selectChange(event: any) {
+  selectChange(option: IOption) {
     const { onLocationChange, locations } = this.props;
-    const location = locations[event.target.value];
-    if (location.latitude && location.longitude) {
+    const location = locations[Number(option.value)];
+    if (location && location.latitude && location.longitude) {
       onLocationChange(location.latitude, location.longitude, location.name);
     }
   }
 
   getOptions() {
     const { locations } = this.props;
-    const options = this.selectedLocation === "" ? [
-      <option key="unsaved" value="" disabled={true}>Custom Location (unsaved)</option>
-    ] : [];
+    const options = [];
     for (let i = 0; i < locations.length; i++) {
       const loc = locations[i];
-      options.push(<option key={i} value={i}>{ loc.name || `(${loc.latitude}, ${loc.longitude})` }</option>);
+      options.push({ name: loc.name || `(${loc.latitude}, ${loc.longitude})`, value: i.toString() });
     }
     return options;
   }
@@ -44,7 +44,7 @@ export default class MyLocations extends Component<IProps> {
     const currentLocation: ILocation = { latitude: lat, longitude: long, name: "" };
     for (let i = 0; i < locations.length; i++) {
       if (locationsEqual(currentLocation, locations[i])) {
-        return i;
+        return locations[i].name;
       }
     }
     return ""; // custom location
@@ -53,10 +53,14 @@ export default class MyLocations extends Component<IProps> {
   render() {
     return (
       <div className="my-locations">
-        <label>{ t("~MY_LOCATIONS", this.props.lang) }</label>
-        <select className="form-control" value={this.selectedLocation} onChange={this.selectChange}>
-          { this.getOptions() }
-        </select>
+        <Dropdown
+          width="250px"
+          value={this.selectedLocation}
+          options={this.getOptions()}
+          onSelect={this.selectChange}
+          label={t("~MY_LOCATIONS", this.props.lang)}
+          icon={<LocationIcon />}
+        />
       </div>
     );
   }