feat: popover add visible props (#711)

Co-authored-by: shunzi <[email protected]>
3lang3 · Apr 2, 2024 · e2b56c8 · e2b56c8
1 parent 38d072b
commit e2b56c8
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/packages/react-vant/src/components/popover/Popover.tsx b/packages/react-vant/src/components/popover/Popover.tsx
@@ -3,7 +3,6 @@ import React, {
   useEffect,
   useImperativeHandle,
   useRef,
-  useState,
 } from 'react'
 import cls from 'clsx'
 import { Instance, createPopper, offsetModifier } from '@vant/popperjs'
@@ -15,6 +14,7 @@ import useClickAway from '../hooks/use-click-away'
 import Popup from '../popup'
 import useLazyEffect from '../hooks/use-lazy-effect'
 import { mergeProps } from '../utils/get-default-props'
+import { usePropsValue } from '../hooks'
 
 const popupProps = [
   'overlay',
@@ -23,8 +23,6 @@ const popupProps = [
   'overlayClass',
   'closeOnClickOverlay',
   'teleport',
-  'onClose',
-  'onOpen',
   'onClosed',
   'onOpened',
   'onClickOverlay',
@@ -46,11 +44,25 @@ const Popover = forwardRef<PopoverInstance, PopoverProps>(
       actions: [],
       placement: 'bottom',
     })
-    const [visible, updateShow] = useState(false)
     const popper = useRef<Instance>(null)
     const wrapperRef = useRef<HTMLElement>()
     const popoverRef = useRef<PopupInstanceType>()
 
+    const onVisibleChange = (visible: boolean) => {
+      if (visible) {
+        props.onOpen?.()
+      } else {
+        props.onClose?.()
+      }
+    }
+    const [visible, updateShow] = usePropsValue({
+      value: props.visible,
+      defaultValue: false,
+      onChange: onVisibleChange,
+    })
+    const onInternalOpen = () => updateShow(true)
+    const onInternalClose = () => updateShow(false)
+
     const createPopperInstance = () =>
       createPopper(wrapperRef.current, popoverRef.current.popupRef.current, {
         placement: props.placement,
@@ -189,6 +201,8 @@ const Popover = forwardRef<PopoverInstance, PopoverProps>(
           position=''
           transition='rv-zoom'
           lockScroll={false}
+          onOpen={onInternalOpen}
+          onClose={onInternalClose}
           {...pick(props, popupProps)}
         >
           <div className={cls(bem('arrow'))} />

diff --git a/packages/react-vant/src/components/popover/PropsType.ts b/packages/react-vant/src/components/popover/PropsType.ts
@@ -62,6 +62,8 @@ export interface PopoverProps extends BaseTypeProps {
   reference?: string | React.ReactNode
   /** 指定挂载的节点 */
   teleport?: TeleportType
+  /** 受控的显示状态 */
+  visible?: boolean
   children?: React.ReactNode
   /** 点击选项时触发	 */
   onSelect?: (action: PopoverAction, index: number) => void

diff --git a/packages/react-vant/src/components/popover/README.md b/packages/react-vant/src/components/popover/README.md
@@ -157,6 +157,7 @@ bottom-end    # 底部右侧位置
 | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
 | trigger | 触发方式，可选值为 `manual` | _string_ | `click` |
 | duration | 动画时长，单位秒，设置为 0 可以禁用动画 | _number \| string_ | `0.3` |
+| visible | 受控的是否显示菜单 | _boolean_ | - |
 | offset | 出现位置的偏移量 | _[number, number]_ | `[0, 8]` |
 | overlay | 是否显示遮罩层 | _boolean_ | `false` |
 | overlayClass | 自定义遮罩层类名 | _string_ | - |