add speed prop, update tests

Author: jscottsmith

src/components/Parallax.test.tsx

@@ -76,7 +76,35 @@ describe('Expect the <Parallax> component', () => {
     expect(controller.createElement).toBeCalledWith({
       elInner: expect.any(HTMLElement),
       elOuter: expect.any(HTMLElement),
-      props: { disabled: false, translateX: [0, 0], translateY: [-100, 100] },
+      props: { disabled: false, translateY: [-100, 100] },
+    });
+  });
+
+  it('to handle rotate props', () => {
+    const controller = ParallaxController.init({
+      scrollAxis: ScrollAxis.vertical,
+    });
+    controller.createElement = jest.fn(controller.createElement);
+    controller.updateElementPropsById = jest.fn(
+      controller.updateElementPropsById
+    );
+
+    function Wrapper(props: PropsWithChildren<{}>) {
+      return (
+        <MockProvider controllerMock={controller}>
+          {props.children}
+        </MockProvider>
+      );
+    }
+
+    render(<Parallax rotate={['0deg', '100deg']} />, {
+      wrapper: Wrapper,
+    });
+
+    expect(controller.createElement).toBeCalledWith({
+      elInner: expect.any(HTMLElement),
+      elOuter: expect.any(HTMLElement),
+      props: { disabled: false, rotate: ['0deg', '100deg'] },
     });
   });
 

src/components/Parallax.tsx

@@ -5,8 +5,18 @@ import {
   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
+   *
+   * Example:
+   *
+   * x={-1}
+   *
+   */
+  speed?: number;
   /**
    * Start and end translation on x-axis in % or px. If no unit is passed percent is assumed. Percent is based on the elements width.
    *
@@ -121,19 +131,39 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
   useVerifyController(controller);
 
   function _getElementOptions(): CreateElementOptions {
+    const useSpeedProp = typeof props.speed !== 'undefined';
+    const isHorizontal = controller.scrollAxis == 'horizontal';
+    const isVertical = controller.scrollAxis == 'vertical';
+
+    let translateX = props.x;
+    let translateY = props.y;
+
+    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: {
+      props: removeUndefinedObjectKeys({
         disabled: props.disabled,
-        // Defaults set in Parallax.defaultProps
-        translateX: props.x,
-        translateY: props.y,
+        translateX,
+        translateY,
         rotate: props.rotate,
         rotateX: props.rotateX,
         rotateY: props.rotateY,
         rotateZ: props.rotateZ,
-      },
+      }),
     };
   }
 
@@ -167,6 +197,7 @@ export function Parallax(props: PropsWithChildren<ParallaxProps>) {
     props.rotateX,
     props.rotateY,
     props.rotateZ,
+    props.speed,
   ]);
 
   const Outer = props.tagOuter;

src/components/__snapshots__/Parallax.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`Expect the <Parallax> component to render correctly 1`] = `
   >
     <div
       class="parallax-inner"
-      style="border: 2px solid blue; transform: translate3d(100%, 100%, 0);"
+      style="border: 2px solid blue; transform: translateX(100%)translateY(100%);"
     >
       <div
         class="foo"

src/utils/removeUndefinedObjectKeys.ts

@@ -0,0 +1,6 @@
+export function removeUndefinedObjectKeys(obj: { [key: string]: any }) {
+  Object.keys(obj).forEach((key) =>
+    obj[key] === undefined ? delete obj[key] : {}
+  );
+  return obj;
+}

stories/Parallax/0_ParallaxExamples.stories.tsx

@@ -64,6 +64,12 @@ WithRotationXYZ.args = {
   rotateZ: '0deg,360deg',
 };
 
+export const WithTranslateYAndRotation = Template.bind({});
+WithTranslateYAndRotation.args = {
+  y: '-100,100',
+  rotate: '0deg,360deg',
+};
+
 export default {
   title: '<Parallax> New Transforms',
   component: WithRotation,

stories/Parallax/4_ParallaxSpeed.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Parallax } from '../../src';
+import { Element } from '../Element/Element';
+import { Container } from '../Container';
+import styles from './Parallax.module.scss';
+
+const Template = (args) => {
+  const props = args;
+  return (
+    <Container scrollAxis="vertical" className={styles.elements}>
+      <Parallax speed={props.speed - props.speed} className={styles.parallax}>
+        <Element name={props.speed - props.speed} />
+      </Parallax>
+      <Parallax {...props} className={styles.parallax}>
+        <Element name={props.speed} />
+      </Parallax>
+      <Parallax speed={props.speed + props.speed} className={styles.parallax}>
+        <Element name={props.speed + props.speed} />
+      </Parallax>
+    </Container>
+  );
+};
+
+export const WithSpeed = Template.bind({});
+WithSpeed.args = {
+  speed: -1,
+};
+
+export default {
+  title: '<Parallax> Speed',
+  component: WithSpeed,
+};