run prettier on src, examples, and tests

Author: jscottsmith

__tests__/clamp.test.js

@@ -4,12 +4,9 @@ const max = 100;
 const min = 10;
 
 test('Clamps a value within a range', () => {
-    expect(clamp(50, min, max))
-        .toBe(50);
+    expect(clamp(50, min, max)).toBe(50);
 
-    expect(clamp(110, min, max))
-        .toBe(max);
+    expect(clamp(110, min, max)).toBe(max);
 
-    expect(clamp(0, min, max))
-        .toBe(min);
+    expect(clamp(0, min, max)).toBe(min);
 });

__tests__/getParallaxOffsets.test.js

@@ -13,22 +13,46 @@ const percentMoved = 44;
 test('Gets offsets based on percent in view', () => {
     expect(getParallaxOffsets(offset, percentMoved, false)).toEqual({
         x: {
-            value: scaleBetween(percentMoved, offset.xMax.value, offset.xMin.value, 0, 100),
+            value: scaleBetween(
+                percentMoved,
+                offset.xMax.value,
+                offset.xMin.value,
+                0,
+                100
+            ),
             unit: offset.xMax.unit,
         },
         y: {
-            value: scaleBetween(percentMoved, offset.yMax.value, offset.yMin.value, 0, 100),
+            value: scaleBetween(
+                percentMoved,
+                offset.yMax.value,
+                offset.yMin.value,
+                0,
+                100
+            ),
             unit: offset.yMax.unit,
         },
     });
 
     expect(getParallaxOffsets(offset, percentMoved, true)).toEqual({
         x: {
-            value: scaleBetween(percentMoved, offset.xMin.value, offset.xMax.value, 0, 100),
+            value: scaleBetween(
+                percentMoved,
+                offset.xMin.value,
+                offset.xMax.value,
+                0,
+                100
+            ),
             unit: offset.xMax.unit,
         },
         y: {
-            value: scaleBetween(percentMoved, offset.yMin.value, offset.yMax.value, 0, 100),
+            value: scaleBetween(
+                percentMoved,
+                offset.yMin.value,
+                offset.yMax.value,
+                0,
+                100
+            ),
             unit: offset.yMax.unit,
         },
     });

__tests__/parseValueAndUnit.test.js

@@ -1,16 +1,10 @@
 import parseValueAndUnit from 'utils/parseValueAndUnit';
 
 test('Parse a string to get the value and unit in either pixels or percent', () => {
-    expect(parseValueAndUnit('5px'))
-        .toEqual({ unit: 'px', value: 5 });
-    expect(parseValueAndUnit('52%'))
-        .toEqual({ unit: '%', value: 52 });
-    expect(parseValueAndUnit(13.333))
-        .toEqual({ unit: '%', value: 13.333 });
-    expect(parseValueAndUnit('75.8%'))
-        .toEqual({ unit: '%', value: 75 });
-    expect(parseValueAndUnit('23.1px'))
-        .toEqual({ unit: 'px', value: 23 });
-    expect(() => parseValueAndUnit(false))
-        .toThrow();
+    expect(parseValueAndUnit('5px')).toEqual({ unit: 'px', value: 5 });
+    expect(parseValueAndUnit('52%')).toEqual({ unit: '%', value: 52 });
+    expect(parseValueAndUnit(13.333)).toEqual({ unit: '%', value: 13.333 });
+    expect(parseValueAndUnit('75.8%')).toEqual({ unit: '%', value: 75 });
+    expect(parseValueAndUnit('23.1px')).toEqual({ unit: 'px', value: 23 });
+    expect(() => parseValueAndUnit(false)).toThrow();
 });

__tests__/scaleBetween.test.js

@@ -7,12 +7,10 @@ const newMin = 0;
 const newMax = 100;
 
 test('Scales a value from a given range to a new range', () => {
-    expect(scaleBetween(0.4, newMin, newMax, oldMin, oldMax))
-        .toBe(40);
-    expect(scaleBetween(0.1, newMin, newMax, oldMin, oldMax))
-        .toBe(10);
-    expect(scaleBetween(0.3, newMin, newMax, oldMin, oldMax))
-        .toBe(30);
-    expect(scaleBetween(0.333, newMin, newMax, oldMin, oldMax))
-        .toBeCloseTo(33.3);
+    expect(scaleBetween(0.4, newMin, newMax, oldMin, oldMax)).toBe(40);
+    expect(scaleBetween(0.1, newMin, newMax, oldMin, oldMax)).toBe(10);
+    expect(scaleBetween(0.3, newMin, newMax, oldMin, oldMax)).toBe(30);
+    expect(scaleBetween(0.333, newMin, newMax, oldMin, oldMax)).toBeCloseTo(
+        33.3
+    );
 });

examples/parallax-example/components/Intro/Intro.js

@@ -8,24 +8,13 @@ import hemispheres from '!!raw-loader!./hemispheres.svg';
 const Intro = () => (
     <div className={style.root}>
         <div className={style.container}>
-            <Parallax
-                offsetYMin={-100}
-                offsetYMax={100}
-                className={style.ring}
-            >
+            <Parallax offsetYMin={-100} offsetYMax={100} className={style.ring}>
                 <Svg svg={ring} />
             </Parallax>
-            <Parallax
-                offsetYMin={-50}
-                offsetYMax={50}
-                className={style.circle}
-            >
-                <div className={style.circleInner}/>
+            <Parallax offsetYMin={-50} offsetYMax={50} className={style.circle}>
+                <div className={style.circleInner} />
             </Parallax>
-            <Svg
-                className={style.hemispheres}
-                svg={hemispheres}
-            />
+            <Svg className={style.hemispheres} svg={hemispheres} />
         </div>
         <p className={style.scroll}>Scroll</p>
     </div>

examples/parallax-example/components/Marquee/Marquee.js

@@ -10,10 +10,7 @@ const Marquee = () => (
     <div className={style.root}>
         <Svg svg={divider} className={style.divider} />
         <div className={style.container}>
-            <Svg
-                svg={boxBg}
-                className={style.boxBg}
-            />
+            <Svg svg={boxBg} className={style.boxBg} />
             <Parallax
                 className={style.text}
                 offsetYMax={70}

examples/parallax-example/components/Overlap/Overlap.js

@@ -15,9 +15,7 @@ const Overlap = () => (
                 offsetXMin={20}
                 className={style.circle}
             >
-                <Svg
-                    svg={circle}
-                />
+                <Svg svg={circle} />
             </Parallax>
             <Parallax
                 offsetYMax={150}
@@ -26,9 +24,7 @@ const Overlap = () => (
                 offsetXMin={-20}
                 className={style.circleRings}
             >
-                <Svg
-                    svg={circleRings}
-                />
+                <Svg svg={circleRings} />
             </Parallax>
         </div>
     </div>

examples/parallax-example/components/ParallaxExample/ParallaxExample.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import {
-	Intro,
-	IntroCopy,
+    Intro,
+    IntroCopy,
     Marquee,
     TriangleGrid,
     Overlap,
@@ -15,7 +15,6 @@ import noisePattern from '!!raw-loader!../shared/noise-pattern.svg';
 import dotPattern from '!!raw-loader!../shared/dot-pattern.svg';
 
 export default class ParallaxExample extends Component {
-
     render() {
         return (
             <div className={style.root}>
@@ -34,5 +33,4 @@ export default class ParallaxExample extends Component {
             </div>
         );
     }
-
 }

examples/parallax-example/components/ShapeField/ShapeField.js

@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import { Parallax } from 'react-scroll-parallax';
-import {
-    Svg,
-} from 'components';
+import { Svg } from 'components';
 
 import style from './ShapeField.scss';
 
@@ -12,18 +10,19 @@ import cluster01Rect from '!!raw-loader!./cluster-01-rect.svg';
 
 import cluster02Hemi from '!!raw-loader!./cluster-02-hemi.svg';
 import cluster02TriangleBig from '!!raw-loader!./cluster-02-triangle-big.svg';
-import cluster02TriangleSmall from '!!raw-loader!./cluster-02-triangle-small.svg';
+import cluster02TriangleSmall
+    from '!!raw-loader!./cluster-02-triangle-small.svg';
 
 import cluster03TriangleTop from '!!raw-loader!./cluster-03-triangle-top.svg';
-import cluster03TriangleBottom from '!!raw-loader!./cluster-03-triangle-bottom.svg';
+import cluster03TriangleBottom
+    from '!!raw-loader!./cluster-03-triangle-bottom.svg';
 import cluster03TriangleBig from '!!raw-loader!./cluster-03-triangle-big.svg';
 
 import cluster04Triangle from '!!raw-loader!./cluster-04-triangle.svg';
 import cluster04Square from '!!raw-loader!./cluster-04-square.svg';
 import cluster04HemiRight from '!!raw-loader!./cluster-04-hemi-right.svg';
 
 export default class ShapeField extends Component {
-
     render() {
         return (
             <div className={style.root}>
@@ -48,10 +47,7 @@ export default class ShapeField extends Component {
                 </div>
 
                 <div className={style.shapeCluster02}>
-                    <Svg
-                        svg={cluster02Hemi}
-                        className="hemi"
-                    />
+                    <Svg svg={cluster02Hemi} className="hemi" />
                     <Parallax
                         offsetYMax={30}
                         offsetYMin={-30}
@@ -93,10 +89,7 @@ export default class ShapeField extends Component {
                 </div>
 
                 <div className={style.shapeCluster04}>
-                    <Svg
-                        svg={cluster04Square}
-                        className="square"
-                    />
+                    <Svg svg={cluster04Square} className="square" />
                     <Parallax
                         offsetYMax={60}
                         offsetYMin={-60}
@@ -116,5 +109,4 @@ export default class ShapeField extends Component {
             </div>
         );
     }
-
 }

examples/parallax-example/components/Svg/Svg.js

@@ -4,7 +4,9 @@ import style from './Svg.scss';
 
 export default function Svg(props) {
     const Element = props.el;
-    const className = `svg-container ${style.root}` + (props.className ? ` ${props.className}` : '');
+    const className =
+        `svg-container ${style.root}` +
+        (props.className ? ` ${props.className}` : '');
 
     return (
         <Element

examples/parallax-example/components/TriangleGrid/TriangleGrid.js

@@ -8,38 +8,31 @@ import angleTop from '!!raw-loader!../shared/angle-dark-top.svg';
 
 const TriangleGrid = () => (
     <div className={style.root}>
-        <Svg
-            svg={angleTop}
-            className={style.angleTop}
-        />
+        <Svg svg={angleTop} className={style.angleTop} />
         <article className={style.copy}>
             <p>
                 <code>npm i react-scroll-parallax</code>
             </p>
             <p>
-                <a className="btn" href="https://github.com/jscottsmith/react-scroll-parallax">View on GitHub</a>
+                <a
+                    className="btn"
+                    href="https://github.com/jscottsmith/react-scroll-parallax"
+                >
+                    View on GitHub
+                </a>
             </p>
         </article>
         <div className={style.container}>
-            <Parallax
-                offsetYMax={25}
-                offsetYMin={-25}
-            >
-                <Svg
-                    svg={gridPurple}
-                    className={style.trianglesPurple}
-                />
+            <Parallax offsetYMax={25} offsetYMin={-25}>
+                <Svg svg={gridPurple} className={style.trianglesPurple} />
             </Parallax>
             <Parallax
                 offsetYMax={50}
                 offsetYMin={-50}
                 offsetXMax={13}
                 offsetXMin={-13}
             >
-                <Svg
-                    svg={gridWhite}
-                    className={style.trianglesWhite}
-                />
+                <Svg svg={gridWhite} className={style.trianglesWhite} />
             </Parallax>
         </div>
     </div>

examples/parallax-example/server.js

@@ -13,7 +13,9 @@ const app = express();
 app.use('/static', express.static(path.resolve(__dirname, './dist')));
 
 app.get('*', (req, res) => {
-    const html = fs.readFileSync(path.resolve(__dirname, './index.html')).toString();
+    const html = fs
+        .readFileSync(path.resolve(__dirname, './index.html'))
+        .toString();
     const markup = ReactServer.renderToString(<ParallaxExample />);
 
     res.send(html.replace('$react', markup));