Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | 1x 1x 1x 1x 1x 1x 1x | import React, { Fragment } from "react"; import classNames from "classnames"; import { BubbleProps, Bubble } from "../bubble"; import { StyledProps } from "../_type"; import { useDefault } from "../_util/use-default"; import { useConfig } from "../_util/config-context"; import { TriggerProps } from "../popover/trigger"; import { useOutsideClick } from "../util/outsideclick"; export interface PopConfirmProps extends StyledProps { /** * 使用受控模式来控制弹出气泡的显示,配合 `onVisibleChange` 方法使用 */ visible?: BubbleProps["visible"]; /** * 处理 `visible` 变化的情况 */ onVisibleChange?: BubbleProps["onVisibleChange"]; /** * 提示标题 */ title?: React.ReactNode; /** * 提示信息 */ message?: React.ReactNode; /** * 底部渲染内容 * @docType React.ReactNode | ((close: () => void) => React.ReactNode) */ footer?: React.ReactNode | ((close: () => void) => React.ReactNode); /** * 气泡放置的位置,将影响三角的朝向和位置 * @default "top" */ placement?: BubbleProps["placement"]; /** * 需要被气泡包裹的内容 */ children?: React.ReactNode; /** * 是否在父容器滚动时关闭 * @default false */ closeOnScroll?: BubbleProps["closeOnScroll"]; } function PopConfirmClickTrigger({ childrenElementRef, overlayElementRef, visible, setVisible, openDelay = 0, closeDelay = 0, render, }: TriggerProps) { const { listen, ignoreProps } = useOutsideClick([ childrenElementRef, overlayElementRef, ]); listen(() => visible && setVisible(false, closeDelay)); return render({ overlayProps: ignoreProps, childrenProps: { onClick: () => setVisible(!visible, openDelay), }, }); } export function PopConfirm({ title, message, children, placement, footer, className, style, closeOnScroll, visible: _visible, onVisibleChange: _onVisibleChange, }: PopConfirmProps) { const { classPrefix } = useConfig(); const [visible, onVisibleChange] = useDefault( _visible, false, _onVisibleChange ); const close = () => onVisibleChange(false); return ( <Bubble visible={visible} onVisibleChange={onVisibleChange} closeOnScroll={closeOnScroll} className={classNames(`${classPrefix}-popconfirm`, className)} placement={placement} trigger={PopConfirmClickTrigger} style={style} content={ <Fragment> <div className={`${classPrefix}-popconfirm__body`}> <div className={`${classPrefix}-media`}> <div className={`${classPrefix}-media__body`}> {title && ( <h3 className={`${classPrefix}-popconfirm__messagetitle`}> {title} </h3> )} {message && ( <div className={`${classPrefix}-popconfirm__messagetext`}> {message} </div> )} </div> </div> </div> {footer && ( <div className={`${classPrefix}-popconfirm__footer`}> {typeof footer === "function" ? footer.call(null, close) : footer} </div> )} </Fragment> } > {children} </Bubble> ); } |