|
| 1 | +import * as React from 'react'; |
| 2 | + |
| 3 | +// ======================== |
| 4 | +// === ParallaxProvider === |
| 5 | +// ======================== |
| 6 | +export interface ParallaxProviderProps { |
| 7 | + /** |
| 8 | + * Optionally pass the scroll axis for setting horizontal/vertical scrolling. One of vertical or |
| 9 | + * horizontal |
| 10 | + */ |
| 11 | + scrollAxis?: 'vertical' | 'horizontal'; |
| 12 | + /** |
| 13 | + * Optionally set the container that has overflow and will contain parallax elements. Defaults |
| 14 | + * to the HTML body |
| 15 | + */ |
| 16 | + scrollContainer?: any; |
| 17 | +} |
| 18 | +export const ParallaxProvider: React.ComponentType<ParallaxProviderProps>; |
| 19 | + |
| 20 | +// ================ |
| 21 | +// === Parallax === |
| 22 | +// ================ |
| 23 | +export interface ParallaxProps { |
| 24 | + /** |
| 25 | + * Offsets on x-axis in % or px. If no unit is passed percent is assumed. Percent is based on |
| 26 | + * the elements width. |
| 27 | + */ |
| 28 | + x?: Array<string | number>; |
| 29 | + /** |
| 30 | + * Offsets on y-axis in % or px. If no unit is passed percent is assumed. Percent is based on |
| 31 | + * the elements width. |
| 32 | + */ |
| 33 | + y?: Array<string | number>; |
| 34 | + /** |
| 35 | + * Optionally pass additional class names to be added to the outermost parallax element. |
| 36 | + */ |
| 37 | + className?: string; |
| 38 | + /** |
| 39 | + * Disables parallax effects on individual elements when true. |
| 40 | + */ |
| 41 | + disabled?: boolean; |
| 42 | + /** |
| 43 | + * Optionally pass a style object to be added to the innermost parallax element. |
| 44 | + */ |
| 45 | + styleInner?: any; |
| 46 | + /** |
| 47 | + * Optionally pass a style object to be added to the outermost parallax element. |
| 48 | + */ |
| 49 | + styleOuter?: any; |
| 50 | + /** |
| 51 | + * Optionally pass an element tag name to be applied to the innermost parallax element. |
| 52 | + */ |
| 53 | + tagInner?: any; |
| 54 | + /** |
| 55 | + * Optionally pass an element tag name to be applied to the outermost parallax element. |
| 56 | + */ |
| 57 | + tagOuter?: any; |
| 58 | +} |
| 59 | +export const Parallax: React.ComponentType<ParallaxProps>; |
| 60 | + |
| 61 | +// ======================= |
| 62 | +// === Parallax Banner === |
| 63 | +// ======================= |
| 64 | +export interface BannerLayer { |
| 65 | + /** |
| 66 | + * A value from `-1` to `1` that represents the vertical offset to be applied to the current |
| 67 | + * layer, `0.1` would equal a `10%` offset on the top and bottom. |
| 68 | + */ |
| 69 | + amount: number; |
| 70 | + /** |
| 71 | + * Custom layer children provided as a React element, for example `<Video />` |
| 72 | + */ |
| 73 | + children: any; |
| 74 | + /** |
| 75 | + * Indicate if the layer should be expanded with negative top/bottom margins so the edges will |
| 76 | + * never be visible. |
| 77 | + */ |
| 78 | + expanded?: boolean; |
| 79 | + /** |
| 80 | + * Image source that will be applied as a CSS background image on the layer. |
| 81 | + */ |
| 82 | + image?: string; |
| 83 | +} |
| 84 | + |
| 85 | +export interface ParallaxBannerProps { |
| 86 | + /** |
| 87 | + * Optionally pass additional class names to be added to the outermost parallax banner element. |
| 88 | + */ |
| 89 | + className?: string; |
| 90 | + /** |
| 91 | + * Determines if the internal parallax layers will have offsets applied. |
| 92 | + */ |
| 93 | + disabled?: boolean; |
| 94 | + /** |
| 95 | + * A required Array of Objects with layer properties: `[{ amount: 0.1, image: 'foo.jpg' }]`. |
| 96 | + */ |
| 97 | + layers: BannerLayer[]; |
| 98 | + /** |
| 99 | + * Optionally pass a style object to be added to the outermost parallax banner element. |
| 100 | + */ |
| 101 | + style?: any; |
| 102 | +} |
| 103 | +export const ParallaxBanner: React.ComponentType<ParallaxBannerProps>; |
| 104 | + |
| 105 | +export interface ParallaxController { |
| 106 | + update(): void; |
| 107 | + destroy(): void; |
| 108 | +} |
| 109 | +export interface WithControllerInjectedProps { |
| 110 | + parallaxController: ParallaxController; |
| 111 | +} |
| 112 | + |
| 113 | +// helper to remove props from a type |
| 114 | +type RemoveProps<T, U extends keyof T> = Pick<T, Exclude<keyof T, U>>; |
| 115 | + |
| 116 | +export function withController<P extends WithControllerInjectedProps>( |
| 117 | + Component: React.ComponentType<P> |
| 118 | +): React.ComponentType<RemoveProps<P, 'parallaxController'>>; |
0 commit comments