@wix/design-system
Version:
@wix/design-system
78 lines • 3.27 kB
TypeScript
import * as React from 'react';
import { ScrollableContainerCommonProps } from '../common';
export { usePageContext } from './PageContext';
export type PageProps = {
/** Accepts compound components as child items:
* - `<Page.Header/>`
* - `<Page.Content/>`
* - `<Page.Tail/>`
* - `<Page.Section/>`
* - `<Page.Footer/>`
* */
children?: React.ReactNode;
/** Applies a data-hook HTML attribute that can be used in the tests */
dataHook?: string;
/** Provides a link to the background image source (URL). Image will be displayed at the top of a page, underneath the \<Page.Header/>. */
backgroundImageUrl?: string;
/** Sets the maximum width of the page (paddings excluded) */
maxWidth?: number;
/** Sets the minimum width of the page (paddings excluded) */
minWidth?: number;
/** Sets the height of the page in pixels (px), viewport height (vh), etc. */
height?: string;
/** Sets the side paddings of a page */
sidePadding?: number;
/** Specifies a CSS class name to be appended to the component’s root element.
* @internal
*/
className?: string;
/** Specifies a CSS class name that defines a gradient background for \<Page.Header/> */
gradientClassName?: string;
/** Defines a reference called together with page scrollable content ref after page mount.
* <br/>
* **Note** - if you need this ref only for listening to scroll events on the scrollable content then use this prop instead:
* `scrollProps = {onScrollChanged/onScrollAreaChanged}` */
scrollableContentRef?: (ref: HTMLElement | null) => void;
/** Specifies the stack order (z-index) of a page */
zIndex?: number;
/** Enables page content to scroll horizontally when its width exceed maximum allowed width */
horizontalScroll?: boolean;
/** Pass properties related to the scrollable content of the page.
* <br/>
* **onScrollAreaChanged** - defines a handler function for scroll area changes.
* Function is triggered when the user scrolls to a different area of the scrollable content. See signature for possible areas:
* `function({area: {y: AreaY, x: AreaX}, target: HTMLElement}) => void`
* `AreaY`: top | middle | bottom | none
* `AreaX`: start | middle | end | none (not implemented yet)
* <br/>
* **onScrollAreaChanged** - defines a general handler for scroll changes with throttling (100ms):
* `function({target: HTMLElement}) => void`
* */
scrollProps?: ScrollableContainerCommonProps;
};
export interface ContentProps {
children: React.ReactNode;
className?: string;
fullScreen?: boolean;
stickyStyle?: React.CSSProperties;
}
export interface FixedContentProps {
children: React.ReactElement;
}
export interface FixedFooterProps {
children: React.ReactElement;
}
export interface TailProps {
children: React.ReactElement;
minimized?: boolean;
}
export interface StickyProps {
children: React.ReactElement | StickyChildrenRenderFn;
style?: React.CSSProperties;
className?: string;
}
type StickyChildrenRenderFn = (data: {
style: string | React.CSSProperties;
className: string;
}) => React.ReactElement;
//# sourceMappingURL=Page.types.d.ts.map