Merge pull request #144 from ensdomains/dropdown-mobile-fix

fix(Dropdown): links for mobile dropdown, remove 'as' from props
ensdomains · Apr 10, 2024 · 10e5c6c · 10e5c6c
2 parents 092c952 + 12671ed
commit 10e5c6c
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 23 deletions.
diff --git a/components/src/components/molecules/Dropdown/ActionSheet.tsx b/components/src/components/molecules/Dropdown/ActionSheet.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 
-import { breakpoints } from '@/src/tokens'
+import { Colors, breakpoints } from '@/src/tokens'
 
 import { Button, Modal, Typography } from '../..'
 import type { DropdownItem, DropdownItemObject } from './Dropdown'
@@ -49,6 +49,13 @@ const ActionSheetItem = styled.div(
   `,
 )
 
+const ActionSheetLinkItem = styled.a<{ $color?: Colors }>(
+  ({ theme, $color = 'text' }) => css`
+    color: ${theme.colors[$color]};
+    font-weight: ${theme.fontWeights.normal};
+  `,
+)
+
 type Props = {
   isOpen: boolean
   screenSize: number
@@ -79,19 +86,25 @@ export const ActionSheet = React.forwardRef<HTMLDivElement, Props>(
               return DropdownChild({ item, setIsOpen })
             }
 
-            const icon = (item as DropdownItemObject).icon
+            const { icon, label, onClick, value, href, color } =
+              item as DropdownItemObject
+
             return (
               <ActionSheetItem
                 key={(item as DropdownItemObject).label}
                 onClick={() => {
-                  ;(item as DropdownItemObject)?.onClick?.(
-                    (item as DropdownItemObject).value,
-                  )
+                  onClick?.(value)
                   setIsOpen(false)
                 }}
               >
                 {icon}
-                <Typography>{(item as DropdownItemObject).label}</Typography>
+                {href ? (
+                  <ActionSheetLinkItem $color={color} href={href}>
+                    {label}
+                  </ActionSheetLinkItem>
+                ) : (
+                  <Typography color={color}>{label}</Typography>
+                )}
               </ActionSheetItem>
             )
           })}

diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -19,7 +19,6 @@ export type DropdownItemObject = {
   label: string
   onClick?: (value?: string) => void
   wrapper?: (children: React.ReactNode, key: React.Key) => JSX.Element
-  as?: 'button' | 'a'
   icon?: React.ReactNode
   value?: string
   color?: Colors
@@ -296,30 +295,29 @@ const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
         label,
         onClick,
         disabled,
-        as,
         wrapper,
         showIndicator,
         href,
       } = item as DropdownItemObject
 
-      const props: React.ComponentProps<any> = {
+      const props = {
         $hasColor: !!color,
         $color: color,
         $showIndicator: showIndicator,
         disabled,
         onClick: () => {
-          setIsOpen(false)
           onClick?.(value)
+          setIsOpen(false)
         },
-        as,
+        as: href ? 'as' : 'button',
         children: (
           <>
             {icon}
             {label}
           </>
         ),
         href,
-      }
+      } as const
 
       if (wrapper) {
         return wrapper(<MenuButton {...props} type="button" />, value || label)
@@ -479,18 +477,18 @@ const useScreenSize = () => {
 }
 
 const useClickOutside = (
-  dropdownRef: React.MutableRefObject<any>,
-  buttonRef: React.MutableRefObject<any>,
-  actionSheetRef: React.MutableRefObject<any>,
+  dropdownRef: React.MutableRefObject<HTMLElement | null>,
+  buttonRef: React.MutableRefObject<HTMLButtonElement | null>,
+  actionSheetRef: React.MutableRefObject<HTMLDivElement | null>,
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
   isOpen: boolean,
 ) => {
   React.useEffect(() => {
-    const handleClickOutside = (e: any) => {
+    const handleClickOutside = (e: MouseEvent) => {
       if (
-        !dropdownRef.current?.contains(e.target) &&
-        !buttonRef.current?.contains(e.target) &&
-        !actionSheetRef.current?.contains(e.target)
+        !dropdownRef.current?.contains(e.target as Node) &&
+        !buttonRef.current?.contains(e.target as Node) &&
+        !actionSheetRef.current?.contains(e.target as Node)
       ) {
         setIsOpen(false)
       }
@@ -527,9 +525,9 @@ export const Dropdown = ({
   cancelLabel = 'Cancel',
   ...props
 }: Props & (PropsWithIsOpen | PropsWithoutIsOpen)) => {
-  const dropdownRef = React.useRef<any>()
-  const buttonRef = React.useRef<HTMLButtonElement>(null)
-  const actionSheetRef = React.useRef<HTMLDivElement>(null)
+  const dropdownRef = React.useRef<HTMLDivElement | null>(null)
+  const buttonRef = React.useRef<HTMLButtonElement | null>(null)
+  const actionSheetRef = React.useRef<HTMLDivElement | null>(null)
   const internalOpen = React.useState(false)
   const [isOpen, setIsOpen] = _setIsOpen ? [_isOpen, _setIsOpen] : internalOpen
 

diff --git a/docs/src/reference/mdx/molecules/Dropdown.docs.mdx b/docs/src/reference/mdx/molecules/Dropdown.docs.mdx
@@ -77,8 +77,14 @@ import { Dropdown } from '@ensdomains/thorin'
       type: {
         raw: 'ReactNode'
       }
+    },
+    href: {
+      name: 'href',
+      description: 'A link that opens on click.',
+      type: {
+        raw: 'string'
+      }
     }
-
   }}
 />
 
@@ -296,3 +302,22 @@ import { Dropdown } from '@ensdomains/thorin'
   label="Custom"
 />
 ```
+
+## Items as link
+
+```tsx live=true minHeight=300px
+<Dropdown 
+  items={[
+    {
+      label: 'I am a link',
+      href: 'https://ens.domains',
+      color: 'text'
+    },
+    {
+      label: 'I am not a link',
+      color: 'text'
+    }
+  ]}
+  label="Links"
+/>
+```