1
This commit is contained in:
+25
@@ -0,0 +1,25 @@
|
||||
import React from 'react';
|
||||
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
|
||||
export interface AffixProps {
|
||||
/** Triggered when the specified offset is reached from the top of the window */
|
||||
offsetTop?: number;
|
||||
/** Triggered when the specified offset is reached from the bottom of the window */
|
||||
offsetBottom?: number;
|
||||
style?: React.CSSProperties;
|
||||
/** Callback function triggered when fixed state changes */
|
||||
onChange?: (affixed?: boolean) => void;
|
||||
/** Set the element that Affix needs to listen to its scroll event, the value is a function that returns the corresponding DOM element */
|
||||
target?: () => Window | HTMLElement | null;
|
||||
prefixCls?: string;
|
||||
className?: string;
|
||||
rootClassName?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
export interface AffixRef {
|
||||
updatePosition: ReturnType<typeof throttleByAnimationFrame>;
|
||||
}
|
||||
interface InternalAffixProps extends AffixProps {
|
||||
onTestUpdatePosition?: () => void;
|
||||
}
|
||||
declare const Affix: React.ForwardRefExoticComponent<InternalAffixProps & React.RefAttributes<AffixRef>>;
|
||||
export default Affix;
|
||||
+204
@@ -0,0 +1,204 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import ResizeObserver from '@rc-component/resize-observer';
|
||||
import { clsx } from 'clsx';
|
||||
import throttleByAnimationFrame from '../_util/throttleByAnimationFrame';
|
||||
import { ConfigContext, useComponentConfig } from '../config-provider/context';
|
||||
import useStyle from './style';
|
||||
import { getFixedBottom, getFixedTop, getTargetRect } from './utils';
|
||||
const TRIGGER_EVENTS = ['resize', 'scroll', 'touchstart', 'touchmove', 'touchend', 'pageshow', 'load'];
|
||||
const getDefaultTarget = () => {
|
||||
return typeof window !== 'undefined' ? window : null;
|
||||
};
|
||||
const AFFIX_STATUS_NONE = 0;
|
||||
const AFFIX_STATUS_PREPARE = 1;
|
||||
const Affix = /*#__PURE__*/React.forwardRef((props, ref) => {
|
||||
const {
|
||||
style,
|
||||
offsetTop,
|
||||
offsetBottom,
|
||||
prefixCls,
|
||||
className,
|
||||
rootClassName,
|
||||
children,
|
||||
target,
|
||||
onChange,
|
||||
onTestUpdatePosition,
|
||||
...restProps
|
||||
} = props;
|
||||
const {
|
||||
getPrefixCls,
|
||||
className: contextClassName,
|
||||
style: contextStyle
|
||||
} = useComponentConfig('affix');
|
||||
const {
|
||||
getTargetContainer
|
||||
} = React.useContext(ConfigContext);
|
||||
const affixPrefixCls = getPrefixCls('affix', prefixCls);
|
||||
const [lastAffix, setLastAffix] = React.useState(false);
|
||||
const [affixStyle, setAffixStyle] = React.useState();
|
||||
const [placeholderStyle, setPlaceholderStyle] = React.useState();
|
||||
const statusRef = React.useRef(AFFIX_STATUS_NONE);
|
||||
const prevTargetRef = React.useRef(null);
|
||||
const prevListenerRef = React.useRef(null);
|
||||
const placeholderNodeRef = React.useRef(null);
|
||||
const fixedNodeRef = React.useRef(null);
|
||||
const timerRef = React.useRef(null);
|
||||
const targetFunc = target ?? getTargetContainer ?? getDefaultTarget;
|
||||
const internalOffsetTop = offsetBottom === undefined && offsetTop === undefined ? 0 : offsetTop;
|
||||
// =================== Measure ===================
|
||||
const measure = () => {
|
||||
if (statusRef.current !== AFFIX_STATUS_PREPARE || !fixedNodeRef.current || !placeholderNodeRef.current || !targetFunc) {
|
||||
return;
|
||||
}
|
||||
const targetNode = targetFunc();
|
||||
if (targetNode) {
|
||||
const newState = {
|
||||
status: AFFIX_STATUS_NONE
|
||||
};
|
||||
const placeholderRect = getTargetRect(placeholderNodeRef.current);
|
||||
if (placeholderRect.top === 0 && placeholderRect.left === 0 && placeholderRect.width === 0 && placeholderRect.height === 0) {
|
||||
return;
|
||||
}
|
||||
const targetRect = getTargetRect(targetNode);
|
||||
const fixedTop = getFixedTop(placeholderRect, targetRect, internalOffsetTop);
|
||||
const fixedBottom = getFixedBottom(placeholderRect, targetRect, offsetBottom);
|
||||
if (fixedTop !== undefined) {
|
||||
newState.affixStyle = {
|
||||
position: 'fixed',
|
||||
top: fixedTop,
|
||||
width: placeholderRect.width,
|
||||
height: placeholderRect.height
|
||||
};
|
||||
newState.placeholderStyle = {
|
||||
width: placeholderRect.width,
|
||||
height: placeholderRect.height
|
||||
};
|
||||
} else if (fixedBottom !== undefined) {
|
||||
newState.affixStyle = {
|
||||
position: 'fixed',
|
||||
bottom: fixedBottom,
|
||||
width: placeholderRect.width,
|
||||
height: placeholderRect.height
|
||||
};
|
||||
newState.placeholderStyle = {
|
||||
width: placeholderRect.width,
|
||||
height: placeholderRect.height
|
||||
};
|
||||
}
|
||||
newState.lastAffix = !!newState.affixStyle;
|
||||
if (lastAffix !== newState.lastAffix) {
|
||||
onChange?.(newState.lastAffix);
|
||||
}
|
||||
statusRef.current = newState.status;
|
||||
setAffixStyle(newState.affixStyle);
|
||||
setPlaceholderStyle(newState.placeholderStyle);
|
||||
setLastAffix(newState.lastAffix);
|
||||
}
|
||||
};
|
||||
const prepareMeasure = () => {
|
||||
statusRef.current = AFFIX_STATUS_PREPARE;
|
||||
measure();
|
||||
if (process.env.NODE_ENV === 'test') {
|
||||
onTestUpdatePosition?.();
|
||||
}
|
||||
};
|
||||
const updatePosition = throttleByAnimationFrame(() => {
|
||||
prepareMeasure();
|
||||
});
|
||||
const lazyUpdatePosition = throttleByAnimationFrame(() => {
|
||||
// Check position change before measure to make Safari smooth
|
||||
if (targetFunc && affixStyle) {
|
||||
const targetNode = targetFunc();
|
||||
if (targetNode && placeholderNodeRef.current) {
|
||||
const targetRect = getTargetRect(targetNode);
|
||||
const placeholderRect = getTargetRect(placeholderNodeRef.current);
|
||||
const fixedTop = getFixedTop(placeholderRect, targetRect, internalOffsetTop);
|
||||
const fixedBottom = getFixedBottom(placeholderRect, targetRect, offsetBottom);
|
||||
if (fixedTop !== undefined && affixStyle.top === fixedTop || fixedBottom !== undefined && affixStyle.bottom === fixedBottom) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Directly call prepare measure since it's already throttled.
|
||||
prepareMeasure();
|
||||
});
|
||||
const addListeners = () => {
|
||||
const listenerTarget = targetFunc?.();
|
||||
if (!listenerTarget) {
|
||||
return;
|
||||
}
|
||||
TRIGGER_EVENTS.forEach(eventName => {
|
||||
if (prevListenerRef.current) {
|
||||
prevTargetRef.current?.removeEventListener(eventName, prevListenerRef.current);
|
||||
}
|
||||
listenerTarget?.addEventListener(eventName, lazyUpdatePosition);
|
||||
});
|
||||
prevTargetRef.current = listenerTarget;
|
||||
prevListenerRef.current = lazyUpdatePosition;
|
||||
};
|
||||
const removeListeners = () => {
|
||||
const newTarget = targetFunc?.();
|
||||
TRIGGER_EVENTS.forEach(eventName => {
|
||||
newTarget?.removeEventListener(eventName, lazyUpdatePosition);
|
||||
if (prevListenerRef.current) {
|
||||
prevTargetRef.current?.removeEventListener(eventName, prevListenerRef.current);
|
||||
}
|
||||
});
|
||||
updatePosition.cancel();
|
||||
lazyUpdatePosition.cancel();
|
||||
};
|
||||
React.useImperativeHandle(ref, () => ({
|
||||
updatePosition
|
||||
}));
|
||||
// mount & unmount
|
||||
React.useEffect(() => {
|
||||
// [Legacy] Wait for parent component ref has its value.
|
||||
// We should use target as directly element instead of function which makes element check hard.
|
||||
timerRef.current = setTimeout(addListeners);
|
||||
return () => {
|
||||
if (timerRef.current) {
|
||||
clearTimeout(timerRef.current);
|
||||
timerRef.current = null;
|
||||
}
|
||||
removeListeners();
|
||||
};
|
||||
}, []);
|
||||
React.useEffect(() => {
|
||||
addListeners();
|
||||
return () => removeListeners();
|
||||
}, [target, affixStyle, lastAffix, offsetTop, offsetBottom]);
|
||||
React.useEffect(() => {
|
||||
updatePosition();
|
||||
}, [target, offsetTop, offsetBottom]);
|
||||
const [hashId, cssVarCls] = useStyle(affixPrefixCls);
|
||||
const rootCls = clsx(rootClassName, hashId, affixPrefixCls, cssVarCls);
|
||||
const mergedCls = clsx({
|
||||
[rootCls]: affixStyle
|
||||
});
|
||||
return /*#__PURE__*/React.createElement(ResizeObserver, {
|
||||
onResize: updatePosition
|
||||
}, /*#__PURE__*/React.createElement("div", {
|
||||
style: {
|
||||
...contextStyle,
|
||||
...style
|
||||
},
|
||||
className: clsx(className, contextClassName),
|
||||
ref: placeholderNodeRef,
|
||||
...restProps
|
||||
}, affixStyle && /*#__PURE__*/React.createElement("div", {
|
||||
style: placeholderStyle,
|
||||
"aria-hidden": "true"
|
||||
}), /*#__PURE__*/React.createElement("div", {
|
||||
className: mergedCls,
|
||||
ref: fixedNodeRef,
|
||||
style: affixStyle
|
||||
}, /*#__PURE__*/React.createElement(ResizeObserver, {
|
||||
onResize: updatePosition
|
||||
}, children))));
|
||||
});
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
Affix.displayName = 'Affix';
|
||||
}
|
||||
export default Affix;
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
import type { GetDefaultToken } from '../../theme/internal';
|
||||
export interface ComponentToken {
|
||||
/**
|
||||
* @desc 弹出层的 z-index
|
||||
* @descEN z-index of popup
|
||||
*/
|
||||
zIndexPopup: number;
|
||||
}
|
||||
export declare const prepareComponentToken: GetDefaultToken<'Affix'>;
|
||||
declare const _default: (prefixCls: string, rootCls?: string) => readonly [string, string];
|
||||
export default _default;
|
||||
+18
@@ -0,0 +1,18 @@
|
||||
import { genStyleHooks } from '../../theme/internal';
|
||||
// ============================== Shared ==============================
|
||||
const genSharedAffixStyle = token => {
|
||||
const {
|
||||
componentCls
|
||||
} = token;
|
||||
return {
|
||||
[componentCls]: {
|
||||
position: 'fixed',
|
||||
zIndex: token.zIndexPopup
|
||||
}
|
||||
};
|
||||
};
|
||||
export const prepareComponentToken = token => ({
|
||||
zIndexPopup: token.zIndexBase + 10
|
||||
});
|
||||
// ============================== Export ==============================
|
||||
export default genStyleHooks('Affix', genSharedAffixStyle, prepareComponentToken);
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
export type BindElement = HTMLElement | Window | null | undefined;
|
||||
export declare function getTargetRect(target: BindElement): DOMRect;
|
||||
export declare function getFixedTop(placeholderRect: DOMRect, targetRect: DOMRect, offsetTop?: number): number | undefined;
|
||||
export declare function getFixedBottom(placeholderRect: DOMRect, targetRect: DOMRect, offsetBottom?: number): number | undefined;
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
export function getTargetRect(target) {
|
||||
return target !== window ? target.getBoundingClientRect() : {
|
||||
top: 0,
|
||||
bottom: window.innerHeight
|
||||
};
|
||||
}
|
||||
export function getFixedTop(placeholderRect, targetRect, offsetTop) {
|
||||
if (offsetTop !== undefined && Math.round(targetRect.top) > Math.round(placeholderRect.top) - offsetTop) {
|
||||
return offsetTop + targetRect.top;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
export function getFixedBottom(placeholderRect, targetRect, offsetBottom) {
|
||||
if (offsetBottom !== undefined && Math.round(targetRect.bottom) < Math.round(placeholderRect.bottom) + offsetBottom) {
|
||||
const targetBottomOffset = window.innerHeight - targetRect.bottom;
|
||||
return offsetBottom + targetBottomOffset;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
Reference in New Issue
Block a user