-
Notifications
You must be signed in to change notification settings - Fork 158
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
902c095
commit f662288
Showing
13 changed files
with
214 additions
and
213 deletions.
There are no files selected for viewing
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { ParallaxController } from 'parallax-controller'; | ||
| import { useEffect } from 'react'; | ||
|
|
||
| export function useVerifyController(controller: ParallaxController) { | ||
| useEffect(() => { | ||
| // Make sure the provided controller is an instance of the Parallax Controller | ||
| const isInstance = controller instanceof ParallaxController; | ||
| // Throw if neither context or global is available | ||
| if (!controller && !isInstance) { | ||
| throw new Error( | ||
| "Must wrap your application's <Parallax /> components in a <ParallaxProvider />." | ||
| ); | ||
| } | ||
| }, [controller]); | ||
| } |
8 changes: 4 additions & 4 deletions
8
src/components/Parallax.test.tsx → src/components/Parallax/index.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,112 @@ | ||
| import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'; | ||
| import { CreateElementOptions, Element } from 'parallax-controller'; | ||
| import { useController } from '../../hooks/useController'; | ||
| import { removeUndefinedObjectKeys } from '../../utils/removeUndefinedObjectKeys'; | ||
| import { ParallaxProps } from './types'; | ||
| import { useVerifyController } from './hooks'; | ||
|
|
||
| export function Parallax(props: PropsWithChildren<ParallaxProps>) { | ||
| const controller = useController(); | ||
| const refInner = useRef<HTMLElement>(); | ||
| const refOuter = useRef<HTMLElement>(); | ||
|
|
||
| useVerifyController(controller); | ||
|
|
||
| function _getElementOptions(): CreateElementOptions { | ||
| const useSpeedProp = typeof props.speed !== 'undefined'; | ||
| const isHorizontal = controller.scrollAxis == 'horizontal'; | ||
| const isVertical = controller.scrollAxis == 'vertical'; | ||
|
|
||
| let translateX = props.translateX; | ||
| let translateY = props.translateY; | ||
|
|
||
| if (useSpeedProp && isHorizontal) { | ||
| translateX = [ | ||
| `${(props.speed || 0) * 10}px`, | ||
| `${(props.speed || 0) * -10}px`, | ||
| ]; | ||
| } | ||
|
|
||
| if (useSpeedProp && isVertical) { | ||
| translateY = [ | ||
| `${(props.speed || 0) * 10}px`, | ||
| `${(props.speed || 0) * -10}px`, | ||
| ]; | ||
| } | ||
|
|
||
| return { | ||
| elInner: refInner.current, | ||
| elOuter: refOuter.current, | ||
| props: removeUndefinedObjectKeys({ | ||
| disabled: props.disabled, | ||
| translateX, | ||
| translateY, | ||
| rotate: props.rotate, | ||
| rotateX: props.rotateX, | ||
| rotateY: props.rotateY, | ||
| rotateZ: props.rotateZ, | ||
| scale: props.scale, | ||
| scaleX: props.scaleX, | ||
| scaleY: props.scaleY, | ||
| scaleZ: props.scaleZ, | ||
| }), | ||
| }; | ||
| } | ||
|
|
||
| const [element, setElement] = useState<Element>(); | ||
|
|
||
| // create element | ||
| useEffect(() => { | ||
| const newElement = controller.createElement(_getElementOptions()); | ||
| setElement(newElement); | ||
|
|
||
| return () => controller.removeElementById(newElement.id); | ||
| }, []); | ||
|
|
||
| // update element | ||
| useEffect(() => { | ||
| if (element) { | ||
| if (props.disabled) { | ||
| controller.resetElementStyles(element); | ||
| } else { | ||
| controller.updateElementPropsById( | ||
| element.id, | ||
| _getElementOptions().props | ||
| ); | ||
| } | ||
| } | ||
| }, [ | ||
| props.disabled, | ||
| props.translateX, | ||
| props.translateY, | ||
| props.rotate, | ||
| props.rotateX, | ||
| props.rotateY, | ||
| props.rotateZ, | ||
| props.scale, | ||
| props.scaleX, | ||
| props.scaleY, | ||
| props.scaleZ, | ||
| props.speed, | ||
| ]); | ||
|
|
||
| const Outer = props.tagOuter; | ||
| const Inner = props.tagInner; | ||
|
|
||
| const rootClass = | ||
| 'parallax-outer' + (props.className ? ` ${props.className}` : ''); | ||
|
|
||
| return ( | ||
| <Outer className={rootClass} ref={refOuter} style={props.styleOuter}> | ||
| <Inner className="parallax-inner" ref={refInner} style={props.styleInner}> | ||
| {props.children} | ||
| </Inner> | ||
| </Outer> | ||
| ); | ||
| } | ||
|
|
||
| Parallax.defaultProps = { | ||
| disabled: false, | ||
| tagInner: 'div', | ||
| tagOuter: 'div', | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| export interface BannerLayer { | ||
| /** | ||
| * A value from `-1` to `1` that represents the vertical offset to be applied to the current | ||
| * layer, `0.1` would equal a `10%` offset on the top and bottom. | ||
| */ | ||
| amount: number; | ||
| /** | ||
| * Custom layer children provided as a React element, for example `<Video />` | ||
| */ | ||
| children?: any; | ||
| /** | ||
| * Indicate if the layer should be expanded with negative top/bottom margins so the edges will | ||
| * never be visible. | ||
| */ | ||
| expanded?: boolean; | ||
| /** | ||
| * Image source that will be applied as a CSS background image on the layer. | ||
| */ | ||
| image?: string; | ||
| /* | ||
| * Props to apply to the layer element. | ||
| */ | ||
| props?: any; | ||
| } | ||
|
|
||
| export interface ParallaxBannerProps { | ||
| /** | ||
| * Optionally pass additional class names to be added to the outermost parallax banner element. | ||
| */ | ||
| className?: string; | ||
| /** | ||
| * Determines if the internal parallax layers will have offsets applied. | ||
| */ | ||
| disabled?: boolean; | ||
| /** | ||
| * A required Array of Objects with layer properties: `[{ amount: 0.1, image: 'foo.jpg' }]`. | ||
| */ | ||
| layers: BannerLayer[]; | ||
| /** | ||
| * Optionally pass a style object to be added to the outermost parallax banner element. | ||
| */ | ||
| style?: any; | ||
| } |
Oops, something went wrong.