From a2dea49a4c4b64821b7ab17927ce683d03423d4f Mon Sep 17 00:00:00 2001 From: Brenton Simpson Date: Sat, 7 Oct 2017 20:00:16 -0700 Subject: [PATCH] [refactored] threshold to use named args Summary: Closes https://github.com/material-motion/material-motion-js/issues/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/D3419 --- packages/core/src/interactions/Swipeable.ts | 6 ++- .../src/operators/__tests__/threshold.test.ts | 42 +++++++++---------- packages/core/src/operators/threshold.ts | 14 ++++--- 3 files changed, 32 insertions(+), 30 deletions(-) diff --git a/packages/core/src/interactions/Swipeable.ts b/packages/core/src/interactions/Swipeable.ts index 24f7414a..a0c05478 100644 --- a/packages/core/src/interactions/Swipeable.ts +++ b/packages/core/src/interactions/Swipeable.ts @@ -160,7 +160,7 @@ export class Swipeable { }) }); - this.direction$ = draggedX$.threshold(0).isAnyOf({ candidates: [ ThresholdRegion.ABOVE ] }).rewrite({ + this.direction$ = draggedX$.threshold({ limit$: 0 }).isAnyOf({ candidates: [ ThresholdRegion.ABOVE ] }).rewrite({ mapping: { true: Direction.RIGHT, false: Direction.LEFT, @@ -176,7 +176,9 @@ export class Swipeable { this.isThresholdMet$ = draggedX$.distanceFrom({ origin$: 0, - }).threshold(Swipeable.VISUAL_THRESHOLD).isAnyOf({ candidates: [ThresholdRegion.ABOVE, ThresholdRegion.WITHIN] }); + }).threshold({ limit$: Swipeable.VISUAL_THRESHOLD }).isAnyOf({ + candidates: [ThresholdRegion.ABOVE, ThresholdRegion.WITHIN] + }); this.whenThresholdCrossed$ = when(this.isThresholdMet$.dedupe()); this.whenThresholdFirstCrossed$ = when(tossable.resistanceFactor$.dedupe().isAnyOf({ candidates: [ DISABLED_RESISTANCE_FACTOR ] })); diff --git a/packages/core/src/operators/__tests__/threshold.test.ts b/packages/core/src/operators/__tests__/threshold.test.ts index 1d50021e..2f31c237 100644 --- a/packages/core/src/operators/__tests__/threshold.test.ts +++ b/packages/core/src/operators/__tests__/threshold.test.ts @@ -43,24 +43,22 @@ import { describe('motionObservable.threshold', () => { - const limitSubject = new MemorylessMotionSubject(); - let stream; - let mockObserver; + const limit$ = new MemorylessMotionSubject(); + let subject; let listener; beforeEach( () => { - mockObserver = createMockObserver(); - stream = new MotionObservable(mockObserver.connect); + subject = new MemorylessMotionSubject(); listener = stub(); } ); it('should dispatch BELOW when it receives a value below the limit', () => { - stream.threshold(7).subscribe(listener); + subject.threshold({ limit$: 7 }).subscribe(listener); - mockObserver.next(3); + subject.next(3); expect(listener).to.have.been.calledWith(ThresholdRegion.BELOW); } @@ -68,9 +66,9 @@ describe('motionObservable.threshold', it('should dispatch WITHIN when it receives a value that matches the limit', () => { - stream.threshold(7).subscribe(listener); + subject.threshold({ limit$: 7 }).subscribe(listener); - mockObserver.next(7); + subject.next(7); expect(listener).to.have.been.calledWith(ThresholdRegion.WITHIN); } @@ -78,9 +76,9 @@ describe('motionObservable.threshold', it('should dispatch ABOVE when it receives a value above the limit', () => { - stream.threshold(7).subscribe(listener); + subject.threshold({ limit$: 7 }).subscribe(listener); - mockObserver.next(10); + subject.next(10); expect(listener).to.have.been.calledWith(ThresholdRegion.ABOVE); } @@ -88,33 +86,33 @@ describe('motionObservable.threshold', it('should support reactive limits', () => { - stream.threshold(limitSubject).subscribe(listener); + subject.threshold({ limit$: limit$ }).subscribe(listener); - mockObserver.next(10); + subject.next(10); - limitSubject.next(5); + limit$.next(5); expect(listener).to.have.been.calledOnce.and.to.have.been.calledWith(ThresholdRegion.ABOVE); - limitSubject.next(15); + limit$.next(15); expect(listener).to.have.been.calledTwice.and.to.have.been.calledWith(ThresholdRegion.BELOW); - limitSubject.next(10); + limit$.next(10); expect(listener).to.have.been.calledThrice.and.to.have.been.calledWith(ThresholdRegion.WITHIN); } ); - it('should support reactive limits and onlyDispatchWithUpstream', + it('should support reactive limits and onlyDispatchWithUpsubject', () => { - stream.threshold(limitSubject, { onlyDispatchWithUpstream: true }).subscribe(listener); + subject.threshold({ limit$, onlyDispatchWithUpstream: true }).subscribe(listener); - mockObserver.next(10); + subject.next(10); - limitSubject.next(5); - limitSubject.next(15); + limit$.next(5); + limit$.next(15); expect(listener).to.have.been.calledOnce.and.to.have.been.calledWith(ThresholdRegion.ABOVE); - mockObserver.next(12); + subject.next(12); expect(listener).to.have.been.calledTwice.and.to.have.been.calledWith(ThresholdRegion.BELOW); } diff --git a/packages/core/src/operators/threshold.ts b/packages/core/src/operators/threshold.ts index 162eaa82..8291295f 100644 --- a/packages/core/src/operators/threshold.ts +++ b/packages/core/src/operators/threshold.ts @@ -16,6 +16,7 @@ import { Constructor, + MaybeReactive, MotionReactiveMappable, Observable, ObservableWithMotionOperators, @@ -29,16 +30,17 @@ import { _ReactiveMapOptions, } from './foundation/_reactiveMap'; +export type ThresholdArgs = _ReactiveMapOptions & MaybeReactive<{ + limit$: number, +}>; + export interface MotionThresholdable { - threshold( - limit$: number | Observable, - options?: _ReactiveMapOptions, - ): ObservableWithMotionOperators; + threshold(kwargs: ThresholdArgs): ObservableWithMotionOperators; } export function withThreshold>>(superclass: S): S & Constructor { return class extends superclass implements MotionThresholdable { - threshold(limit$: number | Observable, options?: _ReactiveMapOptions): ObservableWithMotionOperators { + threshold({ limit$, ...reactiveMapOptions }: ThresholdArgs): ObservableWithMotionOperators { return (this as any as MotionReactiveMappable)._reactiveMap({ transform: ({ upstream, limit }) => { if (upstream < limit) { @@ -53,7 +55,7 @@ export function withThreshold inputs: { limit: limit$, }, - ...options, + ...reactiveMapOptions, }); } };