UNPKG

@tamagui/react-native-web-lite

Version:
146 lines (145 loc) 4.72 kB
import { invariant } from "@tamagui/react-native-web-internals"; import AnimatedValue from "./AnimatedValue"; import AnimatedWithChildren from "./AnimatedWithChildren"; var _uniqueId = 1; class AnimatedValueXY extends AnimatedWithChildren { constructor(valueIn) { super(); var value = valueIn || { x: 0, y: 0 }; typeof value.x == "number" && typeof value.y == "number" ? (this.x = new AnimatedValue(value.x), this.y = new AnimatedValue(value.y)) : (invariant( value.x instanceof AnimatedValue && value.y instanceof AnimatedValue, "AnimatedValueXY must be initialized with an object of numbers or AnimatedValues." ), this.x = value.x, this.y = value.y), this._listeners = {}; } /** * Directly set the value. This will stop any animations running on the value * and update all the bound properties. * * See https://reactnative.dev/docs/animatedvaluexy.html#setvalue */ setValue(value) { this.x.setValue(value.x), this.y.setValue(value.y); } /** * 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/animatedvaluexy.html#setoffset */ setOffset(offset) { this.x.setOffset(offset.x), this.y.setOffset(offset.y); } /** * 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/animatedvaluexy.html#flattenoffset */ flattenOffset() { this.x.flattenOffset(), this.y.flattenOffset(); } /** * 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/animatedvaluexy.html#extractoffset */ extractOffset() { this.x.extractOffset(), this.y.extractOffset(); } __getValue() { return { x: this.x.__getValue(), y: this.y.__getValue() }; } /** * Stops any animation and resets the value to its original. * * See https://reactnative.dev/docs/animatedvaluexy.html#resetanimation */ resetAnimation(callback) { this.x.resetAnimation(), this.y.resetAnimation(), callback && callback(this.__getValue()); } /** * 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/animatedvaluexy.html#stopanimation */ stopAnimation(callback) { this.x.stopAnimation(), this.y.stopAnimation(), callback && callback(this.__getValue()); } /** * Adds an asynchronous listener to the value so you can observe updates from * animations. This is useful because there is no way to synchronously read * the value because it might be driven natively. * * Returns a string that serves as an identifier for the listener. * * See https://reactnative.dev/docs/animatedvaluexy.html#addlistener */ addListener(callback) { var id = String(_uniqueId++), jointCallback = (_ref) => { var number = _ref.value; callback(this.__getValue()); }; return this._listeners[id] = { x: this.x.addListener(jointCallback), y: this.y.addListener(jointCallback) }, id; } /** * Unregister a listener. The `id` param shall match the identifier * previously returned by `addListener()`. * * See https://reactnative.dev/docs/animatedvaluexy.html#removelistener */ removeListener(id) { this.x.removeListener(this._listeners[id].x), this.y.removeListener(this._listeners[id].y), delete this._listeners[id]; } /** * Remove all registered listeners. * * See https://reactnative.dev/docs/animatedvaluexy.html#removealllisteners */ removeAllListeners() { this.x.removeAllListeners(), this.y.removeAllListeners(), this._listeners = {}; } /** * Converts `{x, y}` into `{left, top}` for use in style. * * See https://reactnative.dev/docs/animatedvaluexy.html#getlayout */ getLayout() { return { left: this.x, top: this.y }; } /** * Converts `{x, y}` into a useable translation transform. * * See https://reactnative.dev/docs/animatedvaluexy.html#gettranslatetransform */ getTranslateTransform() { return [ { translateX: this.x }, { translateY: this.y } ]; } } var AnimatedValueXY_default = AnimatedValueXY; export { AnimatedValueXY_default as default }; //# sourceMappingURL=AnimatedValueXY.js.map