feat(CDropdown): add autoClose and custom toggler

mrholek · mrholek · commit 502d03932ad2 · 2022-02-09T17:10:48.000+01:00
diff --git a/packages/coreui-react/src/components/dropdown/CDropdown.tsx b/packages/coreui-react/src/components/dropdown/CDropdown.tsx
@@ -3,6 +3,7 @@ import React, {
   ElementType,
   forwardRef,
   HTMLAttributes,
+  RefObject,
   useEffect,
   useRef,
   useState,
@@ -33,6 +34,14 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
    * @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
    */
   alignment?: Alignments
+  /**
+   * Configure the auto close behavior of the dropdown:
+   * - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
+   * - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
+   * - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
+   * - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
+   */
+  autoClose?: 'inside' | 'outside' | boolean
   /**
    * A string of all className you want applied to the base component.
    */
@@ -80,6 +89,8 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
 }
 
 interface ContextProps extends CDropdownProps {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dropdownToggleRef: RefObject<any> | undefined
   setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>
 }
 
@@ -90,6 +101,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
     {
       children,
       alignment,
+      autoClose = true,
       className,
       dark,
       direction,
@@ -106,6 +118,7 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
   ) => {
     const [_visible, setVisible] = useState(visible)
     const dropdownRef = useRef<HTMLDivElement>(null)
+    const dropdownToggleRef = useRef(null)
     const forkedRef = useForkedRef(ref, dropdownRef)
 
     const Component = variant === 'nav-item' ? 'li' : component
@@ -117,8 +130,10 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
 
     const contextValues = {
       alignment,
+      autoClose,
       dark,
       direction: direction,
+      dropdownToggleRef,
       placement: placement,
       popper,
       variant,
@@ -135,19 +150,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       className,
     )
 
-    useEffect(() => {
-      _visible &&
-        setTimeout(() => {
-          window.addEventListener('click', handleClickOutside)
-          window.addEventListener('keyup', handleKeyup)
-        })
-
-      return () => {
-        window.removeEventListener('click', handleClickOutside)
-        window.removeEventListener('keyup', handleKeyup)
-      }
-    }, [_visible])
-
     useEffect(() => {
       setVisible(visible)
     }, [visible])
@@ -157,17 +159,6 @@ export const CDropdown = forwardRef<HTMLDivElement | HTMLLIElement, CDropdownPro
       !_visible && onHide && onHide()
     }, [_visible])
 
-    const handleKeyup = (event: Event) => {
-      if (!dropdownRef.current?.contains(event.target as HTMLElement)) {
-        setVisible(false)
-      }
-    }
-    const handleClickOutside = (event: Event) => {
-      if (!dropdownRef.current?.contains(event.target as HTMLElement)) {
-        setVisible(false)
-      }
-    }
-
     const dropdownContent = () => {
       return variant === 'input-group' ? (
         <>{children}</>
@@ -203,6 +194,10 @@ CDropdown.propTypes = {
     PropTypes.shape({ xl: alignmentDirection }),
     PropTypes.shape({ xxl: alignmentDirection }),
   ]),
+  autoClose: PropTypes.oneOfType([
+    PropTypes.bool,
+    PropTypes.oneOf<'inside' | 'outside'>(['inside', 'outside']),
+  ]),
   children: PropTypes.node,
   className: PropTypes.string,
   component: PropTypes.elementType,
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx b/packages/coreui-react/src/components/dropdown/CDropdownMenu.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { ElementType, FC, HTMLAttributes, useContext } from 'react'
+import React, { ElementType, FC, HTMLAttributes, useContext, useEffect, useRef } from 'react'
 import classNames from 'classnames'
 import { Popper, PopperChildrenProps } from 'react-popper'
 
@@ -35,7 +35,57 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   component: Component = 'ul',
   ...rest
 }) => {
-  const { alignment, dark, direction, placement, popper, visible } = useContext(CDropdownContext)
+  const {
+    alignment,
+    autoClose,
+    dark,
+    direction,
+    dropdownToggleRef,
+    placement,
+    popper,
+    visible,
+    setVisible,
+  } = useContext(CDropdownContext)
+
+  const dropdownMenuRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    visible && window.addEventListener('mouseup', handleMouseUp)
+    visible && window.addEventListener('keyup', handleKeyup)
+
+    return () => {
+      window.removeEventListener('mouseup', handleMouseUp)
+      window.removeEventListener('keyup', handleKeyup)
+    }
+  }, [visible])
+
+  const handleKeyup = (event: Event) => {
+    if (autoClose === false) {
+      return
+    }
+    if (!dropdownMenuRef.current?.contains(event.target as HTMLElement)) {
+      setVisible(false)
+    }
+  }
+  const handleMouseUp = (event: Event) => {
+    if (dropdownToggleRef && dropdownToggleRef.current.contains(event.target as HTMLElement)) {
+      return
+    }
+    if (autoClose === true) {
+      setVisible(false)
+      return
+    }
+    if (autoClose === 'inside' && dropdownMenuRef.current?.contains(event.target as HTMLElement)) {
+      setVisible(false)
+      return
+    }
+    if (
+      autoClose === 'outside' &&
+      !dropdownMenuRef.current?.contains(event.target as HTMLElement)
+    ) {
+      setVisible(false)
+    }
+  }
 
   let _placement: Placements = placement
 
@@ -101,7 +151,9 @@ export const CDropdownMenu: FC<CDropdownMenuProps> = ({
   }
 
   return popper && visible ? (
-    <Popper placement={_placement}>{({ ref, style }) => dropdownMenuComponent(style, ref)}</Popper>
+    <Popper innerRef={dropdownMenuRef} placement={_placement}>
+      {({ ref, style }) => dropdownMenuComponent(style, ref)}
+    </Popper>
   ) : (
     dropdownMenuComponent()
   )
diff --git a/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx b/packages/coreui-react/src/components/dropdown/CDropdownToggle.tsx
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Reference } from 'react-popper'
 
+import { useForkedRef } from '../../utils/hooks'
+
 import { Triggers, triggerPropType } from '../Types'
 
 import { CButton, CButtonProps } from '../button/CButton'
@@ -13,6 +15,10 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
    * Enables pseudo element caret on toggler.
    */
   caret?: boolean
+  /**
+   * Create a custom toggler which accepts any content.
+   */
+  custom?: boolean
   /**
    * Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
    */
@@ -28,12 +34,13 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
 export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   children,
   caret = true,
+  custom,
   className,
   split,
   trigger = 'click',
   ...rest
 }) => {
-  const { popper, variant, visible, setVisible } = useContext(CDropdownContext)
+  const { dropdownToggleRef, popper, variant, visible, setVisible } = useContext(CDropdownContext)
   const _className = classNames(
     {
       'dropdown-toggle': caret,
@@ -59,31 +66,47 @@ export const CDropdownToggle: FC<CDropdownToggleProps> = ({
   const togglerProps = {
     className: _className,
     'aria-expanded': visible,
+    ...(!rest.disabled && { ...triggers }),
     ...triggers,
   }
 
   // We use any because Toggler can be `a` as well as `button`.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const Toggler = (ref?: React.Ref<any>) => {
-    return variant === 'nav-item' ? (
-      <a href="#" {...togglerProps} ref={ref}>
+    return custom && React.isValidElement(children) ? (
+      <>
+        {React.cloneElement(children, {
+          'aria-expanded': visible,
+          ...(!rest.disabled && { ...triggers }),
+          ref: useForkedRef(ref, dropdownToggleRef),
+        })}
+      </>
+    ) : variant === 'nav-item' ? (
+      <a href="#" {...togglerProps} ref={useForkedRef(ref, dropdownToggleRef)}>
         {children}
       </a>
     ) : (
-      <CButton type="button" {...togglerProps} tabIndex={0} {...rest} ref={ref}>
+      <CButton
+        type="button"
+        {...togglerProps}
+        tabIndex={0}
+        {...rest}
+        ref={useForkedRef(ref, dropdownToggleRef)}
+      >
         {children}
         {split && <span className="visually-hidden">Toggle Dropdown</span>}
       </CButton>
     )
   }
 
-  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler()
+  return popper ? <Reference>{({ ref }) => Toggler(ref)}</Reference> : Toggler(dropdownToggleRef)
 }
 
 CDropdownToggle.propTypes = {
   caret: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
+  custom: PropTypes.bool,
   split: PropTypes.bool,
   trigger: triggerPropType,
 }
diff --git a/packages/docs/content/4.1/api/CDropdown.api.mdx b/packages/docs/content/4.1/api/CDropdown.api.mdx
@@ -8,6 +8,7 @@ import CDropdown from '@coreui/react/src/components/dropdown/CDropdown'
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | **alignment** | Set aligment of dropdown menu. | `'start'` \| `'end'` \| `{ xs: 'start'` \| `'end' }` \| `{ sm: 'start'` \| `'end' }` \| `{ md: 'start'` \| `'end' }` \| `{ lg: 'start'` \| `'end' }` \| `{ xl: 'start'` \| `'end'}` \| `{ xxl: 'start'` \| `'end'}` | - |
+| **autoClose** | Configure the auto close behavior of the dropdown:<br/>- `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.<br/>- `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)<br/>- `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.<br/>- `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu. | `boolean` \| `'inside'` \| `'outside'` | true |
 | **className** | A string of all className you want applied to the base component. | `string` | - |
 | **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | div |
 | **dark** | Sets a darker color scheme to match a dark navbar. | `boolean` | - |
diff --git a/packages/docs/content/4.1/api/CDropdownToggle.api.mdx b/packages/docs/content/4.1/api/CDropdownToggle.api.mdx
@@ -12,11 +12,12 @@ import CDropdownToggle from '@coreui/react/src/components/dropdown/CDropdownTogg
 | **className** | A string of all className you want applied to the base component. | `string` | - |
 | **color** | Sets the color context of the component to one of CoreUI’s themed colors. | `'primary'` \| `'secondary'` \| `'success'` \| `'danger'` \| `'warning'` \| `'info'` \| `'dark'` \| `'light'` \| `string` | - |
 | **component** | Component used for the root node. Either a string to use a HTML element or a component. | `string` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` | - |
+| **custom** | Create a custom toggler which accepts any content. | `boolean` | - |
 | **disabled** | Toggle the disabled state for the component. | `boolean` | - |
 | **href** | The href attribute specifies the URL of the page the link goes to. | `string` | - |
 | **role** | The role attribute describes the role of an element in programs that can make use of it, such as screen readers or magnifiers. | `string` | - |
 | **shape** | Select the shape of the component. | `'rounded'` \| `'rounded-top'` \| `'rounded-end'` \| `'rounded-bottom'` \| `'rounded-start'` \| `'rounded-circle'` \| `'rounded-pill'` \| `'rounded-0'` \| `'rounded-1'` \| `'rounded-2'` \| `'rounded-3'` \| `string` | - |
 | **size** | Size the component small or large. | `'sm'` \| `'lg'` | - |
 | **split** | Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret. | `boolean` | - |
-| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` | click |
+| **trigger** | Sets which event handlers you’d like provided to your toggle prop. You can specify one trigger or an array of them. | `'hover'` \| `'focus'` \| `'click'` \| `'click-init'` | click |
 | **variant** | Set the button variant to an outlined button or a ghost button. | `'outline'` \| `'ghost'` | - |
