From f662288f5b58223eae1e167867e47ef71c8bfac7 Mon Sep 17 00:00:00 2001 From: J Scott Smith Date: Sun, 28 Nov 2021 14:06:16 -0800 Subject: [PATCH] chore: move components to folders --- .../__snapshots__/index.test.tsx.snap} | 0 src/components/Parallax/hooks.ts | 15 ++ .../index.test.tsx} | 8 +- src/components/Parallax/index.tsx | 112 +++++++++++++++ .../{Parallax.tsx => Parallax/types.ts} | 128 ------------------ .../__snapshots__/index.test.tsx.snap} | 0 .../index.test.tsx} | 6 +- .../index.tsx} | 47 +------ src/components/ParallaxBanner/types.ts | 43 ++++++ src/components/ParallaxProvider/helpers.ts | 15 ++ .../index.test.tsx} | 4 +- .../index.tsx} | 35 +---- src/components/ParallaxProvider/types.ts | 14 ++ 13 files changed, 214 insertions(+), 213 deletions(-) rename src/components/{__snapshots__/Parallax.test.tsx.snap => Parallax/__snapshots__/index.test.tsx.snap} (100%) create mode 100644 src/components/Parallax/hooks.ts rename src/components/{Parallax.test.tsx => Parallax/index.test.tsx} (96%) create mode 100644 src/components/Parallax/index.tsx rename src/components/{Parallax.tsx => Parallax/types.ts} (51%) rename src/components/{__snapshots__/ParallaxBanner.test.tsx.snap => ParallaxBanner/__snapshots__/index.test.tsx.snap} (100%) rename src/components/{ParallaxBanner.test.tsx => ParallaxBanner/index.test.tsx} (95%) rename src/components/{ParallaxBanner.tsx => ParallaxBanner/index.tsx} (66%) create mode 100644 src/components/ParallaxBanner/types.ts create mode 100644 src/components/ParallaxProvider/helpers.ts rename src/components/{ParallaxProvider.test.tsx => ParallaxProvider/index.test.tsx} (97%) rename src/components/{ParallaxProvider.tsx => ParallaxProvider/index.tsx} (53%) create mode 100644 src/components/ParallaxProvider/types.ts diff --git a/src/components/__snapshots__/Parallax.test.tsx.snap b/src/components/Parallax/__snapshots__/index.test.tsx.snap similarity index 100% rename from src/components/__snapshots__/Parallax.test.tsx.snap rename to src/components/Parallax/__snapshots__/index.test.tsx.snap diff --git a/src/components/Parallax/hooks.ts b/src/components/Parallax/hooks.ts new file mode 100644 index 000000000..7b1e4ee75 --- /dev/null +++ b/src/components/Parallax/hooks.ts @@ -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 components in a ." + ); + } + }, [controller]); +} diff --git a/src/components/Parallax.test.tsx b/src/components/Parallax/index.test.tsx similarity index 96% rename from src/components/Parallax.test.tsx rename to src/components/Parallax/index.test.tsx index 619b28342..8ffbb2821 100644 --- a/src/components/Parallax.test.tsx +++ b/src/components/Parallax/index.test.tsx @@ -1,11 +1,11 @@ import React, { PropsWithChildren } from 'react'; import { ParallaxController, ScrollAxis } from 'parallax-controller'; import { render } from '@testing-library/react'; -import { Parallax } from './Parallax'; -import { ParallaxProvider } from './ParallaxProvider'; +import { Parallax } from '.'; +import { ParallaxProvider } from '../ParallaxProvider'; -import { MockProvider } from '../testUtils/MockProvider'; -import expectRenderError from '../testUtils/expectRenderError'; +import { MockProvider } from '../../testUtils/MockProvider'; +import expectRenderError from '../../testUtils/expectRenderError'; const consoleLog = global.console.log; diff --git a/src/components/Parallax/index.tsx b/src/components/Parallax/index.tsx new file mode 100644 index 000000000..b8b3ef218 --- /dev/null +++ b/src/components/Parallax/index.tsx @@ -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) { + const controller = useController(); + const refInner = useRef(); + const refOuter = useRef(); + + 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(); + + // 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 ( + + + {props.children} + + + ); +} + +Parallax.defaultProps = { + disabled: false, + tagInner: 'div', + tagOuter: 'div', +}; diff --git a/src/components/Parallax.tsx b/src/components/Parallax/types.ts similarity index 51% rename from src/components/Parallax.tsx rename to src/components/Parallax/types.ts index a16e18ad2..d47901cbe 100644 --- a/src/components/Parallax.tsx +++ b/src/components/Parallax/types.ts @@ -1,12 +1,3 @@ -import React, { PropsWithChildren, useEffect, useRef, useState } from 'react'; -import { - CreateElementOptions, - ParallaxController, - Element, -} from 'parallax-controller'; -import { useController } from '../hooks/useController'; -import { removeUndefinedObjectKeys } from '../utils/removeUndefinedObjectKeys'; - export interface ParallaxProps { /** * A number to slowdown `n < 0` or speed up `n > 0` the scroll speed of an element @@ -154,122 +145,3 @@ export interface ParallaxProps { */ tagOuter?: any; } - -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 components in a ." - ); - } - }, [controller]); -} - -export function Parallax(props: PropsWithChildren) { - const controller = useController(); - const refInner = useRef(); - const refOuter = useRef(); - - 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(); - - // 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 ( - - - {props.children} - - - ); -} - -Parallax.defaultProps = { - disabled: false, - tagInner: 'div', - tagOuter: 'div', -}; diff --git a/src/components/__snapshots__/ParallaxBanner.test.tsx.snap b/src/components/ParallaxBanner/__snapshots__/index.test.tsx.snap similarity index 100% rename from src/components/__snapshots__/ParallaxBanner.test.tsx.snap rename to src/components/ParallaxBanner/__snapshots__/index.test.tsx.snap diff --git a/src/components/ParallaxBanner.test.tsx b/src/components/ParallaxBanner/index.test.tsx similarity index 95% rename from src/components/ParallaxBanner.test.tsx rename to src/components/ParallaxBanner/index.test.tsx index 7d31b8d5c..761bb6e57 100644 --- a/src/components/ParallaxBanner.test.tsx +++ b/src/components/ParallaxBanner/index.test.tsx @@ -2,9 +2,9 @@ import React from 'react'; import ReactDOM from 'react-dom'; // @ts-ignore import renderer from 'react-test-renderer'; -import createNodeMock from '../testUtils/createNodeMock'; -import { ParallaxBanner } from './ParallaxBanner'; -import { ParallaxProvider } from './ParallaxProvider'; +import createNodeMock from '../../testUtils/createNodeMock'; +import { ParallaxBanner } from '.'; +import { ParallaxProvider } from '../ParallaxProvider'; describe('Expect the component', () => { afterEach(() => {}); diff --git a/src/components/ParallaxBanner.tsx b/src/components/ParallaxBanner/index.tsx similarity index 66% rename from src/components/ParallaxBanner.tsx rename to src/components/ParallaxBanner/index.tsx index 7e9670e8a..c280dcf85 100644 --- a/src/components/ParallaxBanner.tsx +++ b/src/components/ParallaxBanner/index.tsx @@ -1,5 +1,6 @@ import React, { PropsWithChildren } from 'react'; -import { Parallax } from './Parallax'; +import { Parallax } from '../Parallax'; +import { ParallaxBannerProps } from './types'; const containerStyle = { position: 'relative', @@ -16,50 +17,6 @@ const absoluteStyle = { left: 0, }; -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 `