Added DropMenuItemButton

NASA-IMPACT · Nov 17, 2022 · c41ef54 · c41ef54
1 parent 8f97943
commit c41ef54
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 27 deletions.
diff --git a/app/scripts/components/analysis/define/aoi-selector.tsx b/app/scripts/components/analysis/define/aoi-selector.tsx
@@ -42,6 +42,7 @@ import {
   AoiChangeListenerOverload,
   AoiState
 } from '$components/common/aoi/types';
+import DropMenuItemButton from '$styles/drop-menu-item-button';
 
 const MapContainer = styled.div`
   position: relative;
@@ -75,15 +76,24 @@ export default function AoiSelector({
       : null;
   }, [qsFeature]);
 
-  const setFeature = useCallback((feature: Feature<Polygon>) => {
-    onAoiEvent('aoi.set-feature', { feature });
-    const featureBbox = bbox(feature) as [number, number, number, number];
-    mapRef.current?.instance?.fitBounds(featureBbox, { padding: 32 });
-  }, [onAoiEvent]);
+  const setFeature = useCallback(
+    (feature: Feature<Polygon>) => {
+      onAoiEvent('aoi.set-feature', { feature });
+      const featureBbox = bbox(feature) as [number, number, number, number];
+      mapRef.current?.instance?.fitBounds(featureBbox, { padding: 32 });
+    },
+    [onAoiEvent]
+  );
 
-  const onRegionPresetClick = useCallback((preset: RegionPreset) => {
-    setFeature({ ...FeatureByRegionPreset[preset], id: 'region-preset-feature' });
-  }, [setFeature]);
+  const onRegionPresetClick = useCallback(
+    (preset: RegionPreset) => {
+      setFeature({
+        ...FeatureByRegionPreset[preset],
+        id: 'region-preset-feature'
+      });
+    },
+    [setFeature]
+  );
 
   // Use the feature from the url qs or the region preset as the initial state to center the map.
   useEffect(() => {
@@ -136,12 +146,11 @@ export default function AoiSelector({
               <DropTitle>Select a region</DropTitle>
               <DropMenu>
                 <li>
-                  <DropMenuItem
-                    role='button'
+                  <DropMenuItemButton
                     onClick={() => onRegionPresetClick('world')}
                   >
                     World
-                  </DropMenuItem>
+                  </DropMenuItemButton>
                 </li>
               </DropMenu>
             </Dropdown>

diff --git a/app/scripts/components/analysis/define/index.tsx b/app/scripts/components/analysis/define/index.tsx
@@ -48,6 +48,7 @@ import {
   getRangeFromPreset,
   inputFormatToDate
 } from '$utils/date';
+import DropMenuItemButton from '$styles/drop-menu-item-button';
 
 const FormBlock = styled.div`
   display: flex;
@@ -268,40 +269,32 @@ export default function Analysis() {
                 <DropTitle>Select a date preset</DropTitle>
                 <DropMenu>
                   <li>
-                    <DropMenuItem
-                      role='button'
-                      href='#'
+                    <DropMenuItemButton
                       onClick={(e) => onDatePresetClick(e, 'yearToDate')}
                     >
                       This year
-                    </DropMenuItem>
+                    </DropMenuItemButton>
                   </li>
                   <li>
-                    <DropMenuItem
-                      role='button'
-                      href='#'
+                    <DropMenuItemButton
                       onClick={(e) => onDatePresetClick(e, 'last30Days')}
                     >
                       Last 30 days
-                    </DropMenuItem>
+                    </DropMenuItemButton>
                   </li>
                   <li>
-                    <DropMenuItem
-                      role='button'
-                      href='#'
+                    <DropMenuItemButton
                       onClick={(e) => onDatePresetClick(e, 'lastYear')}
                     >
                       Last year
-                    </DropMenuItem>
+                    </DropMenuItemButton>
                   </li>
                   <li>
-                    <DropMenuItem
-                      role='button'
-                      href='#'
+                    <DropMenuItemButton
                       onClick={(e) => onDatePresetClick(e, 'last10Years')}
                     >
                       Last 10 years
-                    </DropMenuItem>
+                    </DropMenuItemButton>
                   </li>
                 </DropMenu>
               </Dropdown>

diff --git a/app/scripts/styles/drop-menu-item-button.tsx b/app/scripts/styles/drop-menu-item-button.tsx
@@ -0,0 +1,14 @@
+import styled from 'styled-components';
+import { DropMenuItem } from '@devseed-ui/dropdown';
+
+const DropMenuItemButton = styled(DropMenuItem).attrs({
+  as: 'button',
+  'data-dropdown': 'click.close'
+})`
+  background: none;
+  border: none;
+  width: 100%;
+  cursor: pointer;
+`;
+
+export default DropMenuItemButton;