test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

feat(Anchor): add targetOffset prop

Browse Source
This commit is contained in:
shao 2019-07-23 20:02:40 +08:00
parent 4e26107a4e
commit 9803ebab34
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/anchor/Anchor.tsx
View File

@ -47,7 +47,7 @@ function easeInOutCubic(t: number, b: number, c: number, d: number) {
const sharpMatcherRegx = /#([^#]+)$/;
function scrollTo(
href: string,
offsetTop = 0,
targetOffset = 0,
getContainer: () => AnchorContainer,
callback = () => {},
) {
@ -62,7 +62,7 @@ function scrollTo(
return;
}
const eleOffsetTop = getOffsetTop(targetElement, container);
const targetScrollTop = scrollTop + eleOffsetTop - offsetTop;
const targetScrollTop = scrollTop + eleOffsetTop - targetOffset;
const startTime = Date.now();
const frameFunc = () => {
const timestamp = Date.now();
@ -105,6 +105,8 @@ export interface AnchorProps {
e: React.MouseEvent<HTMLElement>,
link: { title: React.ReactNode; href: string },
) => void;
/** Scroll to target offset value, if none, it's offsetTop prop value or 0. */
targetOffset?: number;
}
export interface AnchorState {
@ -264,10 +266,10 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
};
handleScrollTo = (link: string) => {
const { offsetTop, getContainer } = this.props as AnchorDefaultProps;
const { offsetTop, getContainer, targetOffset } = this.props as AnchorDefaultProps;
this.animating = true;
this.setState({ activeLink: link });
scrollTo(link, offsetTop, getContainer, () => {
scrollTo(link, targetOffset || offsetTop || 0, getContainer, () => {
this.animating = false;
});
};