All files / src/popover Popover.tsx

94.12% Statements 16/17
88.89% Branches 16/18
80% Functions 4/5
94.12% Lines 16/17

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 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236                                                                                                                                                                                                                                                                                                          306x   306x 306x   306x     306x           306x     306x 133x     173x 168x       5x     306x   306x                   306x                     4x                                         544x                          
import React, { useRef } from "react";
import classNames from "classnames";
import { RefHandler } from "react-popper";
import { Overlay, OverlayLayerProps } from "../overlay";
import { useDelayVisible } from "./useDelayVisible";
import { useParentScroll } from "../_util/use-parent-scroll";
import { buildinTriggers, Trigger, TriggerWithProps } from "./trigger";
import { mergeStyle } from "../_util/merge-style";
import { DomRef } from "../domref";
import { mergeRefs } from "../_util/merge-refs";
 
export interface PopoverProps {
  /**
   * 触发弹出层的内容,会直接渲染出来
   *
   * 内容触发弹出层的方式,由 `trigger` 属性指定
   *
   * 如果传入的不是 `ReactElement`(如文本、数字等),则渲染时会套一层 `span`
   */
  children?: React.ReactNode;
 
  /**
   * 弹出层内容
   * @docType React.ReactNode | ((props: OverlayContentProps) => JSX.Element)
   */
  overlay?: OverlayLayerProps["content"];
 
  /**
   * 触发弹出层显示的事件
   *
   * - `hover`:用户鼠标进入渲染内容时,显示浮层;离开渲染内容时,隐藏浮层。
   *   使用该交互请保证 `children` 可以接收 `onMouseEnter` 和 `onMouseLeave` 事件
   *
   * - `click`:用户在渲染内容上点击鼠标时,显示浮层;在渲染内容以及浮层外点击时,隐藏浮层。
   *   使用该交互请保证 `children` 可以接收 `onClick` 事件
   *
   * - 传入自定义组件以实现自定义弹出逻辑
   *
   * @default "hover"
   */
  trigger?: keyof typeof buildinTriggers | Trigger | TriggerWithProps;
 
  /**
   * 传入 `visible` 则表示使用受控模式来控制弹出层的显示,请处理 `onVisibleChange` 方法
   */
  visible?: boolean;
 
  /**
   * `visible` 变化时回调
   */
  onVisibleChange?: (visbile: boolean) => void;
 
  /**
   * 气泡默认是否打开
   * @default false
   */
  defaultVisible?: boolean;
 
  /**
   * 打开浮层前的延时
   */
  openDelay?: number;
 
  /**
   * 关闭浮层前的延时
   */
  closeDelay?: number;
 
  /**
   * 是否在容器滚动发生关闭
   * @default false
   */
  closeOnScroll?: boolean;
 
  /**
   * 气泡弹出的位置
   * @default "top"
   */
  placement?: OverlayLayerProps["placement"];
 
  /**
   * 弹出位置偏离参考位置的位移
   * @default 10
   */
  placementOffset?: OverlayLayerProps["placementOffset"];
 
  /**
   * 出现动画滑动距离
   */
  animationScaleFrom?: OverlayLayerProps["animationScaleFrom"];
 
  /**
   * 自定义定位参考信息
   * @see https://github.com/FezVrasta/react-popper#usage-without-a-reference-htmlelement
   */
  referenceElement?: OverlayLayerProps["referenceElement"];
 
  /**
   * 是否在 `resize` 和 `scroll` 发生时更新位置
   */
  updateOnDimensionChange?: OverlayLayerProps["updateOnDimensionChange"];
 
  /**
   * 覆盖层自定义类名
   */
  overlayClassName?: string;
 
  /**
   * 覆盖层自定义样式
   */
  overlayStyle?: React.CSSProperties;
 
  /**
   * 动画事件
   */
  transitionTimeout?: OverlayLayerProps["transitionTimeout"];
 
  /**
   * 是否随参考元素离开可视范围
   */
  escapeWithReference?: OverlayLayerProps["escapeWithReference"];
}
 
export type PopoverRenderFunction = (props: PopupRenderProps) => JSX.Element;
 
export interface PopupRenderProps {
  ref: RefHandler;
  open: () => void;
  close: () => void;
}
 
export type PopupTrigger = "click" | "hover";
 
export function Popover(props: PopoverProps) {
  const {
    overlay,
    trigger = "hover",
    placement = "top",
    placementOffset = 10,
    escapeWithReference,
    children,
    closeOnScroll,
    overlayClassName,
    overlayStyle,
    openDelay,
    closeDelay,
    updateOnDimensionChange,
    animationScaleFrom,
    transitionTimeout,
  } = props;
 
  const overlayRef = useRef(null);
  const childrenRef = useRef(null);
 
  const { visible, setVisible } = useDelayVisible(props);
 
  // 设置了 closeOnScroll,则使用
  useParentScroll(
    childrenRef,
    visible && closeOnScroll && (() => setVisible(false, closeDelay))
  );
 
  let Trigger: Trigger;
  let triggerExtraProps: any = {};
 
  // 使用指定的触发交互组件
  if (typeof trigger === "string") {
    Trigger = buildinTriggers[trigger];
  }
  // 支持附加 props 的触发器
  else if (Array.isArray(trigger)) {
    [Trigger, triggerExtraProps] = trigger;
  }
  // 本身就是 Trigger 组件
  else {
    Trigger = trigger;
  }
  // fallback
  Trigger = Trigger || buildinTriggers.empty;
 
  return (
    <Trigger
      {...triggerExtraProps}
      overlayElementRef={overlayRef}
      childrenElementRef={childrenRef}
      visible={visible}
      setVisible={setVisible}
      openDelay={openDelay}
      closeDelay={closeDelay}
      render={({ overlayProps, childrenProps, referenceElement }) => (
        <Overlay
          layers={[
            <Overlay.Layer
              key="popover"
              visible={visible}
              placement={placement}
              placementOffset={placementOffset}
              animationScaleFrom={animationScaleFrom}
              referenceElement={props.referenceElement || referenceElement}
              content={overlay}
              overlayRef={overlayElement => {
                overlayRef.current = overlayElement;
              }}
              overlayProps={{
                ...overlayProps,
                className: classNames(overlayProps.className, overlayClassName),
                style: mergeStyle(
                  {
                    // 已经隐藏之后,动画过程不响应事件
                    pointerEvents: visible ? null : "none",
                  },
                  overlayProps.style,
                  overlayStyle
                ),
              }}
              updateOnDimensionChange={updateOnDimensionChange}
              transitionTimeout={transitionTimeout}
              escapeWithReference={escapeWithReference}
            />,
          ]}
        >
          {ref => (
            <DomRef {...childrenProps} ref={mergeRefs(ref, childrenRef)}>
              {React.isValidElement(children) ? (
                children
              ) : (
                <span>{children}</span>
              )}
            </DomRef>
          )}
        </Overlay>
      )}
    />
  );
}