lucid-ui
Version:
A UI component library from AppNexus.
59 lines (58 loc) • 1.88 kB
TypeScript
import React from 'react';
import { StandardProps } from '../../util/component-types';
interface IStickySectionProps extends StandardProps, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
/** Pixel value from the top of the document. When scrolled passed, the
* sticky header is no longer sticky, and renders normally. */
lowerBound?: number;
/** Width of section when it sticks to the top edge of the screen. When
* omitted, it defaults to the last width of the section. */
viewportWidth?: number;
/** Top offset threshold before sticking to the top. The sticky content will
* display with this offset. */
topOffset?: number;
}
interface IContainerRect extends ClientRect {
scrollWidth: number;
frameLeft: number;
}
interface IStickySectionState {
isAboveFold: boolean;
containerRect: IContainerRect;
}
declare class StickySection extends React.Component<IStickySectionProps, IStickySectionState, {}> {
static displayName: string;
static peek: {
description: string;
categories: string[];
};
static propTypes: {
children: any;
className: any;
style: any;
lowerBound: any;
viewportWidth: any;
topOffset: any;
};
private scrollContainer;
private stickySection;
private stickyFrame;
state: {
isAboveFold: boolean;
containerRect: {
bottom: number;
height: number;
left: number;
right: number;
top: number;
width: number;
frameLeft: number;
scrollWidth: number;
};
};
handleScroll: () => void;
getContainerRect: () => IContainerRect;
componentDidMount(): void;
componentWillUnmount(): void;
render(): React.ReactNode;
}
export default StickySection;