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 | 60x 3x 3x 60x 316x 316x 316x 313x 3x 3x 3x 1x | import React, { HTMLProps } from "react";
import ReactDOM from "react-dom";
import classNames from "classnames";
import { TransitionProps } from "react-transition-group/Transition";
import { Placement } from "popper.js";
import {
Popper,
RefHandler,
PopperChildrenProps,
PopperProps,
} from "react-popper";
import { Omit } from "../_type";
import { getOverlayRoot } from "../_util/get-overlay-root";
import { mergeStyle } from "../_util/merge-style";
import { callBoth } from "../_util/call-both";
import { ScaleTransition } from "../transition";
import { useVisibleTransition } from "../_util/use-visible-transition";
import { injectValue } from "../_util/inject-value";
import { useConfig } from "../_util/config-context";
export interface OverlayLayerProps {
/**
* 覆盖层内容
* @docType React.ReactNode | ((props: OverlayContentProps) => React.ReactNode)
*/
content: React.ReactNode | ((props: OverlayContentProps) => React.ReactNode);
/**
* 参考的定位内容
*
* 如果提供了 referenceElement,则不通过 `children` 定位,可以实现自定义定位参考
* @see https://github.com/FezVrasta/react-popper#usage-without-a-reference-htmlelement
*/
referenceElement?: PopperProps["referenceElement"];
/**
* 用于获取覆盖层 DOM Ref
*/
overlayRef?: RefHandler;
/**
* 覆盖层自定义属性,会附加到覆盖层的 div 上
*
* 要使用 `ref`,请传入 `overlayRef`
*/
overlayProps?: HTMLProps<HTMLElement>;
/**
* 覆盖层相对于定位元素的位置
* @default "bottom-start"
*/
placement?: Placement;
/**
* 覆盖层偏离定位元素的距离
* @default 5
*/
placementOffset?: number;
/**
* 覆盖层是否可见
*/
visible?: boolean;
/**
* 出现时渐变动画时长
* @default { enter: 50, exit: 300 }
*/
transitionTimeout?: TransitionProps["timeout"];
/**
* 是否在 `resize` 和 `scroll` 事件发生的时候更新位置
* @default true
*/
updateOnDimensionChange?: boolean;
/**
* 出现动画滑动距离
* @default 2
*/
animationScaleFrom?: number;
/**
* 是否随参考元素离开可视范围
*/
escapeWithReference?: boolean;
}
export interface OverlayContentProps
extends Omit<PopperChildrenProps, "ref" | "style"> {
visible: boolean;
}
const scaleOriginForPlacement = (originMap => (placement: Placement) => {
const basePlacement = placement.split("-").shift();
return originMap[basePlacement];
})({
top: "bottom",
bottom: "top",
left: "right",
right: "left",
});
const overlayRoot = getOverlayRoot();
/**
* 为定位元素创建一个覆盖层
*
* @example
*
```js
const [visible, setVisible] = useState(false);
const open = () => setVisible(true);
const close = () => setVisible(false);
<Overlay
visible={visible}
content={<div>我是浮层内容,<a onClick={close}>关闭</a></div>}
children={ref => <a ref={ref} onClick={open}>点击弹出浮层</a>}
/>
```
*/
export function OverlayLayer({
content,
overlayRef,
overlayProps = {},
placement = "bottom-start",
visible,
placementOffset = 5,
transitionTimeout = { enter: 50, exit: 300 },
updateOnDimensionChange,
referenceElement,
animationScaleFrom = 0.93, // 为什么?因为此时效果比较好
escapeWithReference,
}: OverlayLayerProps) {
const { classPrefix } = useConfig();
// visible 启动时,才开始渲染内容,进行动画
const {
shouldContentRender,
shouldContentEnter,
onContentExit,
} = useVisibleTransition(visible);
if (!shouldContentRender) {
return null;
}
// 渲染定位组件
return ReactDOM.createPortal(
<Popper
referenceElement={referenceElement}
placement={placement}
modifiers={{
offset: {
enabled: true,
offset: `0,${placementOffset}`,
},
preventOverflow: {
escapeWithReference,
boundariesElement: "viewport",
},
computeStyle: {
// 使用 translate3d() 在 Windows 下有 DPI 缩放时会导致模糊
// 只有在 resize 和 scroll 的时候才会有更新的需求,暂时关闭 GPU 加速
gpuAcceleration: false,
},
}}
eventsEnabled={updateOnDimensionChange}
positionFixed
>
{popper => {
const overlayContent = injectValue(content)({ ...popper, visible });
return (
<ScaleTransition
from={animationScaleFrom}
origin={scaleOriginForPlacement(placement)}
timeout={transitionTimeout}
in={shouldContentEnter}
onEnter={() => popper.scheduleUpdate()}
onExited={onContentExit}
>
<div
{...overlayProps}
// 覆盖层类名,样式表中包含 z-index 来确定覆盖层的层级
className={classNames(
`${classPrefix}-overlay`,
overlayProps.className
)}
// ref 同时提供给 popper 和 contentRef
ref={callBoth(popper.ref, overlayRef)}
// popper.style 为 overlay 浮层提供定位
// contentStyle 提供给用户改写的可能
style={mergeStyle(
popper.style,
{ willChange: null },
overlayProps.style
)}
// popper API 要求提供 data-placement
data-placement={popper.placement || placement}
>
{React.isValidElement(overlayContent) ? (
overlayContent
) : (
<span>{overlayContent}</span>
)}
</div>
</ScaleTransition>
);
}}
</Popper>,
overlayRoot
);
}
|