All files / src/overlay Overlay.tsx

100% Statements 3/3
100% Branches 0/0
100% Functions 2/2
100% Lines 3/3

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                                                                                  314x   558x           60x  
import React from "react";
import { Manager, Reference, RefHandler } from "react-popper";
import { OverlayLayer } from "./OverlayLayer";
 
export interface OverlayProps {
  /**
   * 参考的定位 DOM
   *
   * 需要通过提供的 `ref` 回调提供定位元素的 DOM Ref
   */
  children: (refHandler: RefHandler) => JSX.Element;
 
  /**
   * 浮层列表,每一个都应该是一个 Overlay.Layer 实例
   * @docType React.ReactElement[]
   */
  layers: React.ReactElement[];
}
 
/**
 * 为定位元素创建一个覆盖层
 *
 * @example
 *
  ```js
  const [visible, setVisible] = useState(false);
  const open = () => setVisible(true);
  const close = () => setVisible(false);
  <Overlay
    layers={[
      <Overlay.Layer
        visible={visible}
        content={<div>我是浮层内容,<a onClick={close}>关闭</a></div>}
      />
    ]}
    children={ref => <a ref={ref} onClick={open}>点击弹出浮层</a>}
  />
  ```
 */
export function Overlay({ children, layers }: OverlayProps) {
  // 渲染定位组件
  return (
    <Manager>
      <Reference>{({ ref }) => children(ref)}</Reference>
      {layers}
    </Manager>
  );
}
 
Overlay.Layer = OverlayLayer;