fix: allow setting max distance

Author: streamich

src/Parallax/__story__/StoryParallax4.tsx

@@ -0,0 +1,26 @@
+import {Parallax} from '..';
+import {h} from '../../util';
+
+const StoryParallax1 = () => {
+  return (
+    <div>
+      <div style={{
+        width: 300,
+        height: 1e3,
+        border: '1px solid tomato'
+      }} />
+
+      <Parallax distance={300} onChange={(data) => console.log(data)}>{(state) =>
+        <pre style={{border: '1px solid black', height: 300}}>{JSON.stringify(state, null, 4)}</pre>
+      }</Parallax>
+
+      <div style={{
+        width: 300,
+        height: 1e3,
+        border: '1px solid tomato'
+      }} />
+    </div>
+  );
+};
+
+export default StoryParallax1;

src/Parallax/__story__/story.tsx

@@ -3,8 +3,10 @@ import {storiesOf} from '@storybook/react';
 import StoryParallax1 from './StoryParallax1';
 import StoryParallax2 from './StoryParallax2';
 import StoryParallax3 from './StoryParallax3';
+import StoryParallax4 from './StoryParallax4';
 
 storiesOf('UI/Parallax', module)
   .add('Basic example', () => <StoryParallax1 />)
   .add('Card', () => <StoryParallax2 />)
-  .add('With margin', () => <StoryParallax3 />);
+  .add('With margin', () => <StoryParallax3 />)
+  .add('Distance', () => <StoryParallax4 />);

src/Parallax/index.ts

@@ -8,30 +8,42 @@ import {getElRect, getRootRect, TRect} from '../ViewportScrollSensor';
 const zeros: TRect = [0, 0, 0, 0];
 
 export interface IParallaxProps extends IUniversalInterfaceProps<IParallaxState> {
-  margin?: [number, number, number, number],
+  distance?: number,
   throttle?: number,
+  margin?: [number, number, number, number],
   onChange?: (IParallaxState) => void,
 }
 
 export interface IParallaxState {
+  distance: number,
+  travelled: number,
   value: number,
   el: TRect,
   root: TRect,
 }
 
 export class Parallax extends Component<IParallaxProps, IParallaxState> {
   static defaultProps = {
+    distance: Infinity,
     margin: zeros,
     throttle: 50,
   };
 
   el: HTMLElement;
   mounted: boolean = false;
-  state: IParallaxState = {
-    value: 0,
-    el: zeros,
-    root: zeros,
-  };
+  state: IParallaxState;
+
+  constructor (props, context) {
+    super(props, context);
+
+    this.state = {
+      distance: this.props.distance,
+      travelled: 0,
+      value: 0,
+      el: zeros,
+      root: zeros,
+    };
+  }
 
   ref = (originalRef) => (el) => {
     this.el = el;
@@ -67,15 +79,15 @@ export class Parallax extends Component<IParallaxProps, IParallaxState> {
 
     const rootHeight = root[3] - root[1];
     const elHeight = el[3] - el[1];
-    const distance = rootHeight + elHeight;
-    const remaining = distance - (el[3] - root[1]);
-    const value = Math.max(0, Math.min(1, remaining / distance));
+    const distance = Math.min(rootHeight + elHeight, this.props.distance);
+    const travelled = root[3] - el[1];
+    const value = Math.max(0, Math.min(1, travelled / distance));
 
     if (value > 0 && value < 1) {
-      this.change({value, el, root});
+      this.change({distance, travelled, value, el, root});
     } else {
       if (this.state.value > 0 && this.state.value < 1) {
-        this.change({value, el, root});
+        this.change({distance, travelled, value, el, root});
       }
     }
   });