UNPKG

@tamagui/react-native-web-lite

Version:
212 lines (211 loc) 6.34 kB
import { AnimatedInterpolation } from "./AnimatedInterpolation.mjs"; import { AnimatedWithChildren } from "./AnimatedWithChildren.mjs"; import { InteractionManager } from "@tamagui/react-native-web-internals"; import { NativeAnimatedHelper } from "../NativeAnimatedHelper.mjs"; const NativeAnimatedAPI = NativeAnimatedHelper.API; function _flush(rootNode) { const animatedStyles = /* @__PURE__ */new Set(); function findAnimatedStyles(node) { if (typeof node.update === "function") { animatedStyles.add(node); } else { node.__getChildren().forEach(findAnimatedStyles); } } findAnimatedStyles(rootNode); animatedStyles.forEach(animatedStyle => animatedStyle.update()); } function _executeAsAnimatedBatch(id, operation) { NativeAnimatedAPI.setWaitingForIdentifier(id); operation(); NativeAnimatedAPI.unsetWaitingForIdentifier(id); } class AnimatedValue extends AnimatedWithChildren { _value; _startingValue; _offset; _animation; _tracking; constructor(value, config) { super(); if (typeof value !== "number") { throw new Error("AnimatedValue: Attempting to set value to undefined"); } this._startingValue = this._value = value; this._offset = 0; this._animation = null; if (config && config.useNativeDriver) { this.__makeNative(); } } __detach() { if (this.__isNative) { NativeAnimatedAPI.getValue(this.__getNativeTag(), value => { this._value = value - this._offset; }); } this.stopAnimation(); super.__detach(); } __getValue() { return this._value + this._offset; } /** * Directly set the value. This will stop any animations running on the value * and update all the bound properties. * * See https://reactnative.dev/docs/animatedvalue#setvalue */ setValue(value) { if (this._animation) { this._animation.stop(); this._animation = null; } this._updateValue(value, !this.__isNative /* don't perform a flush for natively driven values */); if (this.__isNative) { _executeAsAnimatedBatch(this.__getNativeTag().toString(), () => NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), value)); } } /** * Sets an offset that is applied on top of whatever value is set, whether via * `setValue`, an animation, or `Animated.event`. Useful for compensating * things like the start of a pan gesture. * * See https://reactnative.dev/docs/animatedvalue#setoffset */ setOffset(offset) { this._offset = offset; if (this.__isNative) { NativeAnimatedAPI.setAnimatedNodeOffset(this.__getNativeTag(), offset); } } /** * Merges the offset value into the base value and resets the offset to zero. * The final output of the value is unchanged. * * See https://reactnative.dev/docs/animatedvalue#flattenoffset */ flattenOffset() { this._value += this._offset; this._offset = 0; if (this.__isNative) { NativeAnimatedAPI.flattenAnimatedNodeOffset(this.__getNativeTag()); } } /** * Sets the offset value to the base value, and resets the base value to zero. * The final output of the value is unchanged. * * See https://reactnative.dev/docs/animatedvalue#extractoffset */ extractOffset() { this._offset += this._value; this._value = 0; if (this.__isNative) { NativeAnimatedAPI.extractAnimatedNodeOffset(this.__getNativeTag()); } } /** * Stops any running animation or tracking. `callback` is invoked with the * final value after stopping the animation, which is useful for updating * state to match the animation position with layout. * * See https://reactnative.dev/docs/animatedvalue#stopanimation */ stopAnimation(callback) { this.stopTracking(); this._animation && this._animation.stop(); this._animation = null; if (callback) { if (this.__isNative) { NativeAnimatedAPI.getValue(this.__getNativeTag(), callback); } else { callback(this.__getValue()); } } } /** * Stops any animation and resets the value to its original. * * See https://reactnative.dev/docs/animatedvalue#resetanimation */ resetAnimation(callback) { this.stopAnimation(callback); this._value = this._startingValue; if (this.__isNative) { NativeAnimatedAPI.setAnimatedNodeValue(this.__getNativeTag(), this._startingValue); } } __onAnimatedValueUpdateReceived(value) { this._updateValue(value, false /*flush*/); } /** * Interpolates the value before updating the property, e.g. mapping 0-1 to * 0-10. */ interpolate(config) { return new AnimatedInterpolation(this, config); } /** * Typically only used internally, but could be used by a custom Animation * class. * * See https://reactnative.dev/docs/animatedvalue#animate */ animate(animation, callback) { let handle = null; if (animation.__isInteraction) { handle = InteractionManager.createInteractionHandle(); } const previousAnimation = this._animation; this._animation && this._animation.stop(); this._animation = animation; animation.start(this._value, value => { this._updateValue(value, true /* flush */); }, result => { this._animation = null; if (handle !== null) { InteractionManager.clearInteractionHandle(handle); } callback && callback(result); }, previousAnimation, this); } /** * Typically only used internally. */ stopTracking() { this._tracking && this._tracking.__detach(); this._tracking = null; } /** * Typically only used internally. */ track(tracking) { this.stopTracking(); this._tracking = tracking; this._tracking && this._tracking.update(); } _updateValue(value, flush) { if (value === void 0) { throw new Error("AnimatedValue: Attempting to set value to undefined"); } this._value = value; if (flush) { _flush(this); } super.__callListeners(this.__getValue()); } __getNativeConfig() { return { type: "value", value: this._value, offset: this._offset }; } } var AnimatedValue_default = AnimatedValue; export { AnimatedValue, AnimatedValue_default as default }; //# sourceMappingURL=AnimatedValue.mjs.map