mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
9e44b97436
close #22683
293 lines
7.8 KiB
TypeScript
293 lines
7.8 KiB
TypeScript
import * as React from 'react';
|
|
import classNames from 'classnames';
|
|
import omit from 'omit.js';
|
|
import ResizeObserver from 'rc-resize-observer';
|
|
import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
|
|
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
|
|
|
|
import {
|
|
addObserveTarget,
|
|
removeObserveTarget,
|
|
getTargetRect,
|
|
getFixedTop,
|
|
getFixedBottom,
|
|
} from './utils';
|
|
|
|
function getDefaultTarget() {
|
|
return typeof window !== 'undefined' ? window : null;
|
|
}
|
|
|
|
// Affix
|
|
export interface AffixProps {
|
|
/**
|
|
* 距离窗口顶部达到指定偏移量后触发
|
|
*/
|
|
offsetTop?: number;
|
|
/** 距离窗口底部达到指定偏移量后触发 */
|
|
offsetBottom?: number;
|
|
style?: React.CSSProperties;
|
|
/** 固定状态改变时触发的回调函数 */
|
|
onChange?: (affixed?: boolean) => void;
|
|
/** 设置 Affix 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 */
|
|
target?: () => Window | HTMLElement | null;
|
|
prefixCls?: string;
|
|
className?: string;
|
|
children: React.ReactElement;
|
|
}
|
|
|
|
enum AffixStatus {
|
|
None,
|
|
Prepare,
|
|
}
|
|
|
|
export interface AffixState {
|
|
affixStyle?: React.CSSProperties;
|
|
placeholderStyle?: React.CSSProperties;
|
|
status: AffixStatus;
|
|
lastAffix: boolean;
|
|
|
|
prevTarget: Window | HTMLElement | null;
|
|
}
|
|
|
|
class Affix extends React.Component<AffixProps, AffixState> {
|
|
static defaultProps = {
|
|
target: getDefaultTarget,
|
|
};
|
|
|
|
state: AffixState = {
|
|
status: AffixStatus.None,
|
|
lastAffix: false,
|
|
prevTarget: null,
|
|
};
|
|
|
|
placeholderNode: HTMLDivElement;
|
|
|
|
fixedNode: HTMLDivElement;
|
|
|
|
private timeout: number;
|
|
|
|
// Event handler
|
|
componentDidMount() {
|
|
const { target } = this.props;
|
|
if (target) {
|
|
// [Legacy] Wait for parent component ref has its value.
|
|
// We should use target as directly element instead of function which makes element check hard.
|
|
this.timeout = setTimeout(() => {
|
|
addObserveTarget(target(), this);
|
|
// Mock Event object.
|
|
this.updatePosition();
|
|
});
|
|
}
|
|
}
|
|
|
|
componentDidUpdate(prevProps: AffixProps) {
|
|
const { prevTarget } = this.state;
|
|
const { target } = this.props;
|
|
let newTarget = null;
|
|
if (target) {
|
|
newTarget = target() || null;
|
|
}
|
|
|
|
if (prevTarget !== newTarget) {
|
|
removeObserveTarget(this);
|
|
if (newTarget) {
|
|
addObserveTarget(newTarget, this);
|
|
// Mock Event object.
|
|
this.updatePosition();
|
|
}
|
|
|
|
this.setState({ prevTarget: newTarget });
|
|
}
|
|
|
|
if (
|
|
prevProps.offsetTop !== this.props.offsetTop ||
|
|
prevProps.offsetBottom !== this.props.offsetBottom
|
|
) {
|
|
this.updatePosition();
|
|
}
|
|
|
|
this.measure();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
clearTimeout(this.timeout);
|
|
removeObserveTarget(this);
|
|
(this.updatePosition as any).cancel();
|
|
// https://github.com/ant-design/ant-design/issues/22683
|
|
(this.lazyUpdatePosition as any).cancel();
|
|
}
|
|
|
|
getOffsetTop = () => {
|
|
const { offsetBottom } = this.props;
|
|
let { offsetTop } = this.props;
|
|
if (offsetBottom === undefined && offsetTop === undefined) {
|
|
offsetTop = 0;
|
|
}
|
|
return offsetTop;
|
|
};
|
|
|
|
getOffsetBottom = () => {
|
|
return this.props.offsetBottom;
|
|
};
|
|
|
|
savePlaceholderNode = (node: HTMLDivElement) => {
|
|
this.placeholderNode = node;
|
|
};
|
|
|
|
saveFixedNode = (node: HTMLDivElement) => {
|
|
this.fixedNode = node;
|
|
};
|
|
|
|
// =================== Measure ===================
|
|
measure = () => {
|
|
const { status, lastAffix } = this.state;
|
|
const { target, onChange } = this.props;
|
|
if (status !== AffixStatus.Prepare || !this.fixedNode || !this.placeholderNode || !target) {
|
|
return;
|
|
}
|
|
|
|
const offsetTop = this.getOffsetTop();
|
|
const offsetBottom = this.getOffsetBottom();
|
|
|
|
const targetNode = target();
|
|
if (!targetNode) {
|
|
return;
|
|
}
|
|
|
|
const newState: Partial<AffixState> = {
|
|
status: AffixStatus.None,
|
|
};
|
|
const targetRect = getTargetRect(targetNode);
|
|
const placeholderReact = getTargetRect(this.placeholderNode);
|
|
const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
|
|
const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
|
|
|
|
if (fixedTop !== undefined) {
|
|
newState.affixStyle = {
|
|
position: 'fixed',
|
|
top: fixedTop,
|
|
width: placeholderReact.width,
|
|
height: placeholderReact.height,
|
|
};
|
|
newState.placeholderStyle = {
|
|
width: placeholderReact.width,
|
|
height: placeholderReact.height,
|
|
};
|
|
} else if (fixedBottom !== undefined) {
|
|
newState.affixStyle = {
|
|
position: 'fixed',
|
|
bottom: fixedBottom,
|
|
width: placeholderReact.width,
|
|
height: placeholderReact.height,
|
|
};
|
|
newState.placeholderStyle = {
|
|
width: placeholderReact.width,
|
|
height: placeholderReact.height,
|
|
};
|
|
}
|
|
|
|
newState.lastAffix = !!newState.affixStyle;
|
|
if (onChange && lastAffix !== newState.lastAffix) {
|
|
onChange(newState.lastAffix);
|
|
}
|
|
|
|
this.setState(newState as AffixState);
|
|
};
|
|
|
|
// @ts-ignore TS6133
|
|
prepareMeasure = () => {
|
|
// event param is used before. Keep compatible ts define here.
|
|
this.setState({
|
|
status: AffixStatus.Prepare,
|
|
affixStyle: undefined,
|
|
placeholderStyle: undefined,
|
|
});
|
|
|
|
// Test if `updatePosition` called
|
|
if (process.env.NODE_ENV === 'test') {
|
|
const { onTestUpdatePosition } = this.props as any;
|
|
if (onTestUpdatePosition) {
|
|
onTestUpdatePosition();
|
|
}
|
|
}
|
|
};
|
|
|
|
// Handle realign logic
|
|
@throttleByAnimationFrameDecorator()
|
|
updatePosition() {
|
|
this.prepareMeasure();
|
|
}
|
|
|
|
@throttleByAnimationFrameDecorator()
|
|
lazyUpdatePosition() {
|
|
const { target } = this.props;
|
|
const { affixStyle } = this.state;
|
|
|
|
// Check position change before measure to make Safari smooth
|
|
if (target && affixStyle) {
|
|
const offsetTop = this.getOffsetTop();
|
|
const offsetBottom = this.getOffsetBottom();
|
|
|
|
const targetNode = target();
|
|
if (targetNode && this.placeholderNode) {
|
|
const targetRect = getTargetRect(targetNode);
|
|
const placeholderReact = getTargetRect(this.placeholderNode);
|
|
const fixedTop = getFixedTop(placeholderReact, targetRect, offsetTop);
|
|
const fixedBottom = getFixedBottom(placeholderReact, targetRect, offsetBottom);
|
|
|
|
if (
|
|
(fixedTop !== undefined && affixStyle.top === fixedTop) ||
|
|
(fixedBottom !== undefined && affixStyle.bottom === fixedBottom)
|
|
) {
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Directly call prepare measure since it's already throttled.
|
|
this.prepareMeasure();
|
|
}
|
|
|
|
// =================== Render ===================
|
|
renderAffix = ({ getPrefixCls }: ConfigConsumerProps) => {
|
|
const { affixStyle, placeholderStyle } = this.state;
|
|
const { prefixCls, children } = this.props;
|
|
const className = classNames({
|
|
[getPrefixCls('affix', prefixCls)]: affixStyle,
|
|
});
|
|
|
|
let props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
|
|
// Omit this since `onTestUpdatePosition` only works on test.
|
|
if (process.env.NODE_ENV === 'test') {
|
|
props = omit(props, ['onTestUpdatePosition']);
|
|
}
|
|
|
|
return (
|
|
<ResizeObserver
|
|
onResize={() => {
|
|
this.updatePosition();
|
|
}}
|
|
>
|
|
<div {...props} ref={this.savePlaceholderNode}>
|
|
{affixStyle && <div style={placeholderStyle} aria-hidden="true" />}
|
|
<div className={className} ref={this.saveFixedNode} style={affixStyle}>
|
|
<ResizeObserver
|
|
onResize={() => {
|
|
this.updatePosition();
|
|
}}
|
|
>
|
|
{children}
|
|
</ResizeObserver>
|
|
</div>
|
|
</div>
|
|
</ResizeObserver>
|
|
);
|
|
};
|
|
|
|
render() {
|
|
return <ConfigConsumer>{this.renderAffix}</ConfigConsumer>;
|
|
}
|
|
}
|
|
|
|
export default Affix;
|