[refactored] distanceFrom to use named args

Summary: Continuation of #193 Reviewers: O2 Material Motion, O3 Material JavaScript platform reviewers, #material_motion, vietanh Reviewed By: #material_motion, vietanh Tags: #material_motion Differential Revision: http://codereview.cc/D3410
material-motion · Oct 11, 2017 · ee6edad · ee6edad
1 parent 888f3df
commit ee6edad
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 17 deletions.
diff --git a/packages/core/src/interactions/Swipeable.ts b/packages/core/src/interactions/Swipeable.ts
@@ -176,7 +176,9 @@ export class Swipeable {
     // `resistanceProgress`. Thus, we independently calculate the threshold
     // here.
 
-    this.isThresholdMet$ = draggedX$.distanceFrom(0).threshold(Swipeable.VISUAL_THRESHOLD).isAnyOf([ThresholdRegion.ABOVE, ThresholdRegion.WITHIN]);
+    this.isThresholdMet$ = draggedX$.distanceFrom({
+      origin$: 0,
+    }).threshold(Swipeable.VISUAL_THRESHOLD).isAnyOf([ThresholdRegion.ABOVE, ThresholdRegion.WITHIN]);
     this.whenThresholdCrossed$ = when(this.isThresholdMet$.dedupe());
     this.whenThresholdFirstCrossed$ = when(tossable.resistanceFactor$.dedupe().isAnyOf([ DISABLED_RESISTANCE_FACTOR ]));
 

diff --git a/packages/core/src/operators/__tests__/distanceFrom.test.ts b/packages/core/src/operators/__tests__/distanceFrom.test.ts
@@ -52,7 +52,9 @@ describe('motionObservable.distanceFrom',
 
     it('should work on numbers',
       () => {
-        stream.distanceFrom(10).subscribe(listener);
+        stream.distanceFrom({
+          origin$: 10,
+        }).subscribe(listener);
 
         mockObserver.next(15);
 
@@ -62,7 +64,9 @@ describe('motionObservable.distanceFrom',
 
     it('should be positive, even if the next value is smaller',
       () => {
-        stream.distanceFrom(10).subscribe(listener);
+        stream.distanceFrom({
+          origin$: 10,
+        }).subscribe(listener);
 
         mockObserver.next(5);
 
@@ -72,7 +76,9 @@ describe('motionObservable.distanceFrom',
 
     it('should work on points',
       () => {
-        stream.distanceFrom({ x: 100, y: 100 }).subscribe(listener);
+        stream.distanceFrom({
+          origin$: { x: 100, y: 100 },
+        }).subscribe(listener);
 
         mockObserver.next({ x: 0, y: 0 });
 

diff --git a/packages/core/src/operators/distanceFrom.ts b/packages/core/src/operators/distanceFrom.ts
@@ -16,7 +16,9 @@
 
 import {
   Constructor,
-  MotionMappable,
+  Dict,
+  MaybeReactive,
+  MotionReactiveMappable,
   ObservableWithMotionOperators,
   Point2D,
 } from '../types';
@@ -25,27 +27,37 @@ import {
   isPoint2D,
 } from '../typeGuards';
 
+export type DistanceFromArgs<T> = MaybeReactive<{
+  origin$: T & (Point2D | number),
+}>;
+
 export interface MotionMeasurable<T> {
-  distanceFrom(origin: T & (Point2D | number)): ObservableWithMotionOperators<number>;
+  distanceFrom(kwargs: DistanceFromArgs<T>): ObservableWithMotionOperators<number>;
 }
 
-export function withDistanceFrom<T, S extends Constructor<MotionMappable<T>>>(superclass: S): S & Constructor<MotionMeasurable<T>> {
+export function withDistanceFrom<T, S extends Constructor<MotionReactiveMappable<T>>>(superclass: S): S & Constructor<MotionMeasurable<T>> {
   return class extends superclass implements MotionMeasurable<T> {
     /**
      * Dispatches the distance that each upstream value is from a given origin.
      * The origin may be a number or a point, but the dispatched value will
      * always be a number; distance is computed using Pythagorean theorem.
      */
-    distanceFrom(origin: T & (Point2D | number)): ObservableWithMotionOperators<number> {
-      if (isPoint2D(origin)) {
-        return (this as any as MotionMappable<Point2D>)._map({
-          transform: (value: Point2D) => Math.sqrt((origin.x - value.x) ** 2 + (origin.y - value.y) ** 2)
-        });
-      } else {
-        return (this as any as MotionMappable<number>)._map({
-          transform: (value: number) => Math.abs(origin - value)
-        });
-      }
+    distanceFrom({ origin$ }: DistanceFromArgs<T>): ObservableWithMotionOperators<number> {
+      return this._reactiveMap({
+        transform({ upstream, origin }: Dict<(T & number) | (T & Point2D)>) {
+          if (isPoint2D(upstream)) {
+            return Math.sqrt(
+              ((origin as Point2D).x - upstream.x) ** 2 +
+              ((origin as Point2D).y - upstream.y) ** 2
+            );
+          } else {
+            return Math.abs(origin as number - upstream);
+          }
+        },
+        inputs: {
+          origin: origin$,
+        },
+      });
     }
   };
 }