react-native-navigation-bottom-sheet/lib/module/AnimatedStoreScrolling.js

A performant customizable bottom sheet component made on top of wix react-native-navigation library.

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import Animated from 'react-native-reanimated';
import { State as GestureState } from 'react-native-gesture-handler';
import { runDecay } from './utility';
const {
  call,
  cond,
  greaterThan,
  lessThan,
  neq,
  clockRunning,
  not,
  and,
  set,
  sub,
  or,
  stopClock,
  lessOrEq,
  proc,
  add,
  max,
  min,
  eq,
  multiply,
  block,
  onChange,
  Value
} = Animated;
import { AnimatedStoreSheet as ASBS } from "./AnimatedStoreSheet";
/**
  * Namespace for animated values associated with the scrolling content.
  */

class AnimatedStoreScrolling {}

_defineProperty(AnimatedStoreScrolling, "_scrollingClock", new Animated.Clock());

_defineProperty(AnimatedStoreScrolling, "_scrollY", new Animated.Value(0));

_defineProperty(AnimatedStoreScrolling, "_velocityScrollY", new Animated.Value(0));

_defineProperty(AnimatedStoreScrolling, "_panScrollState", new Animated.Value(GestureState.END));

_defineProperty(AnimatedStoreScrolling, "_onGestureEventScrolling", Animated.event([{
  nativeEvent: {
    translationY: AnimatedStoreScrolling._scrollY,
    velocityY: AnimatedStoreScrolling._velocityScrollY,
    state: AnimatedStoreScrolling._panScrollState
  }
}]));

_defineProperty(AnimatedStoreScrolling, "enabledContentGestureInteraction", true);

_defineProperty(AnimatedStoreScrolling, "contentHeight", new Animated.Value(0));

_defineProperty(AnimatedStoreScrolling, "headerHeight", 0);

_defineProperty(AnimatedStoreScrolling, "snapPoints", []);

_defineProperty(AnimatedStoreScrolling, "init", (enabledContentGestureInteraction, snapPoints) => {
  AnimatedStoreScrolling.snapPoints = snapPoints;
  AnimatedStoreScrolling.enabledContentGestureInteraction = enabledContentGestureInteraction;
});

_defineProperty(AnimatedStoreScrolling, "handleLayoutHeader", ({
  nativeEvent: {
    layout: {
      height: heightOfHeader
    }
  }
}) => {
  AnimatedStoreScrolling.headerHeight = heightOfHeader;
});

_defineProperty(AnimatedStoreScrolling, "handleLayoutContent", ({
  nativeEvent: {
    layout: {
      height
    }
  }
}) => {
  const resultHeight = AnimatedStoreScrolling.enabledContentGestureInteraction ? height + AnimatedStoreScrolling.headerHeight - AnimatedStoreScrolling.snapPoints[AnimatedStoreScrolling.snapPoints.length - 1] : 0;
  AnimatedStoreScrolling.contentHeight.setValue(Math.max(resultHeight, 0));
});

_defineProperty(AnimatedStoreScrolling, "limitedScroll", proc(val => max(min(val, 0), multiply(AnimatedStoreScrolling.contentHeight, -1))));

_defineProperty(AnimatedStoreScrolling, "_prevTransY", new Animated.Value(0));

_defineProperty(AnimatedStoreScrolling, "_transY", new Animated.Value(0));

_defineProperty(AnimatedStoreScrolling, "_startedAtTheTop", new Animated.Value(0));

_defineProperty(AnimatedStoreScrolling, "_lastState", new Animated.Value(0));

_defineProperty(AnimatedStoreScrolling, "scrollOffset", new Animated.Value(0));

_defineProperty(AnimatedStoreScrolling, "scrollOffsetWhileSnapped", new Animated.Value(0));

_defineProperty(AnimatedStoreScrolling, "_masterScrollY", block([
/** 
  * Debugging section.
  */

/* onChange(
  this._prevTransY,
  call([this._prevTransY], (snapPoints: readonly number[]) =>
    console.log('Changed prevTransY: ' + snapPoints[0])
  )
),
onChange(
  this.scrollOffsetWhileSnapped,
  call([this.scrollOffsetWhileSnapped], (snapPoints: readonly number[]) =>
    console.log('Changed scrollOffsetWhileSnapped: ' + snapPoints[0])
  )
),
onChange(
  this._transY,
  call([this._transY], (snapPoints: readonly number[]) =>
    console.log('Changed scrollOffset: ' + snapPoints[0])
  )
), */

/* onChange(
  this._lastState,
  call([this._lastState], (snapPoints: readonly number[]) =>
    console.log('Changed state: ' + snapPoints[0])
  )
), */
cond(eq(AnimatedStoreScrolling._lastState, 2), [set(ASBS._scrollToDragVal, sub(AnimatedStoreScrolling._scrollY, AnimatedStoreScrolling.scrollOffsetWhileSnapped)),
/** 
  * Setting scrollOffset is not required if the bottom sheet is
  * at the very top.
  *  TODO: describe different cases this solution solves
  */
cond(not(AnimatedStoreScrolling._startedAtTheTop), [set(AnimatedStoreScrolling.scrollOffset, sub(AnimatedStoreScrolling._scrollY, AnimatedStoreScrolling.scrollOffsetWhileSnapped))]), set(ASBS._velocityY, AnimatedStoreScrolling._velocityScrollY)]), cond(eq(AnimatedStoreScrolling._lastState, 1), [
/** 
  * During scrolling we need to record content offset and then use it when
  * calculating ASBS._scrollToDragVal value, so that dragging doesn't 
  * include unnecessary scrolling position value.
  */
set(AnimatedStoreScrolling.scrollOffsetWhileSnapped, AnimatedStoreScrolling._scrollY),
/** 
  * Contrary to the previous line of code this one covers the special case
  * when we started dragging the bottom sheet not from the top. Here we need to
  * include this._prevTransY as an offset.
  */
cond(not(AnimatedStoreScrolling._startedAtTheTop), set(AnimatedStoreScrolling.scrollOffsetWhileSnapped, multiply(-1, AnimatedStoreScrolling._prevTransY)))]), cond(or(eq(AnimatedStoreScrolling._panScrollState, GestureState.ACTIVE), eq(AnimatedStoreScrolling._panScrollState, GestureState.BEGAN)), [// TODO: stop draggin sheet clock
stopClock(AnimatedStoreScrolling._scrollingClock), set(AnimatedStoreScrolling._transY, AnimatedStoreScrolling.limitedScroll(add(AnimatedStoreScrolling._scrollY, AnimatedStoreScrolling._prevTransY, multiply(-1, AnimatedStoreScrolling.scrollOffset)))), AnimatedStoreScrolling._transY], [set(AnimatedStoreScrolling.scrollOffset, 0), set(AnimatedStoreScrolling.scrollOffsetWhileSnapped, 0), set(AnimatedStoreScrolling._scrollY, 0), cond(eq(AnimatedStoreScrolling._lastState, 1), runDecay(AnimatedStoreScrolling._scrollingClock, AnimatedStoreScrolling._transY, AnimatedStoreScrolling._velocityScrollY, AnimatedStoreScrolling.contentHeight)), set(AnimatedStoreScrolling._velocityScrollY, 0), set(AnimatedStoreScrolling._prevTransY, AnimatedStoreScrolling._transY), AnimatedStoreScrolling._transY]), AnimatedStoreScrolling._transY]));

export { AnimatedStoreScrolling };
//# sourceMappingURL=AnimatedStoreScrolling.js.map