@tamagui/toast 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/useToastAnimations.native.cjs

@@ -0,0 +1,229 @@
+"use strict";
+
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useToastAnimations_exports = {};
+__export(useToastAnimations_exports, { useToastAnimations: () => useToastAnimations });
+module.exports = __toCommonJS(useToastAnimations_exports);
+var import_constants = require("@tamagui/constants");
+var import_core = require("@tamagui/core");
+var React = __toESM(require("react"), 1);
+var SPRING_CONFIG = {
+	type: "spring",
+	damping: 30,
+	stiffness: 400,
+	mass: .5
+};
+var EXIT_DISTANCE = 200;
+function animateSpring(element, fromX, fromY, toX, toY, config, onComplete) {
+	var { damping = 30, stiffness = 400, mass = .5, initialVelocityX = 0, initialVelocityY = 0, fadeOut = false } = config;
+	var x = fromX;
+	var y = fromY;
+	var velocityX = initialVelocityX;
+	var velocityY = initialVelocityY;
+	var animationId = null;
+	var targetX = toX;
+	var targetY = toY;
+	var totalDistance = Math.sqrt(Math.pow(toX - fromX, 2) + Math.pow(toY - fromY, 2)) || 1;
+	function step() {
+		var forceX = -stiffness * (x - targetX);
+		var forceY = -stiffness * (y - targetY);
+		var dampingForceX = -damping * velocityX;
+		var dampingForceY = -damping * velocityY;
+		var accelerationX = (forceX + dampingForceX) / mass;
+		var accelerationY = (forceY + dampingForceY) / mass;
+		velocityX += accelerationX * .016;
+		velocityY += accelerationY * .016;
+		x += velocityX * .016;
+		y += velocityY * .016;
+		element.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+		if (fadeOut) {
+			var distanceTraveled = Math.sqrt(Math.pow(x - fromX, 2) + Math.pow(y - fromY, 2));
+			var progress = Math.min(distanceTraveled / totalDistance, 1);
+			element.style.opacity = String(1 - progress);
+		}
+		var distanceX = Math.abs(x - targetX);
+		var distanceY = Math.abs(y - targetY);
+		var speed = Math.sqrt(velocityX * velocityX + velocityY * velocityY);
+		if (distanceX < .5 && distanceY < .5 && speed < .5) {
+			element.style.transform = `translate3d(${targetX}px, ${targetY}px, 0)`;
+			if (fadeOut) {
+				element.style.opacity = "0";
+			}
+			onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+			return;
+		}
+		animationId = requestAnimationFrame(step);
+	}
+	animationId = requestAnimationFrame(step);
+	return function() {
+		if (animationId) {
+			cancelAnimationFrame(animationId);
+		}
+	};
+}
+function useToastAnimations() {
+	var options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+	var { onExitComplete, reducedMotion } = options;
+	var animationDriver = (0, import_core.useAnimationDriver)();
+	var _animationDriver_View;
+	var AnimatedView = (_animationDriver_View = animationDriver.View) !== null && _animationDriver_View !== void 0 ? _animationDriver_View : import_core.View;
+	var dragRef = React.useRef(null);
+	var cancelAnimationRef = React.useRef(null);
+	var currentOffsetRef = React.useRef({
+		x: 0,
+		y: 0
+	});
+	var useDirectDom = import_constants.isWeb;
+	var translateX = (0, import_core.useAnimatedNumber)(0);
+	var translateY = (0, import_core.useAnimatedNumber)(0);
+	var animatedStyle = (0, import_core.useAnimatedNumbersStyle)([translateX, translateY], function(x, y) {
+		"worklet";
+		return { transform: [{ translateX: x }, { translateY: y }] };
+	});
+	var setDragOffset = (0, import_core.useEvent)(function(x, y) {
+		var _cancelAnimationRef_current;
+		(_cancelAnimationRef_current = cancelAnimationRef.current) === null || _cancelAnimationRef_current === void 0 ? void 0 : _cancelAnimationRef_current.call(cancelAnimationRef);
+		cancelAnimationRef.current = null;
+		currentOffsetRef.current = {
+			x,
+			y
+		};
+		if (useDirectDom && dragRef.current) {
+			dragRef.current.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+			dragRef.current.style.opacity = "1";
+		} else {
+			translateX.setValue(x, { type: "direct" });
+			translateY.setValue(y, { type: "direct" });
+		}
+	});
+	var springBack = (0, import_core.useEvent)(function(onComplete) {
+		var _cancelAnimationRef_current;
+		(_cancelAnimationRef_current = cancelAnimationRef.current) === null || _cancelAnimationRef_current === void 0 ? void 0 : _cancelAnimationRef_current.call(cancelAnimationRef);
+		if (reducedMotion) {
+			if (useDirectDom && dragRef.current) {
+				dragRef.current.style.transform = "translate3d(0px, 0px, 0)";
+			} else {
+				translateX.setValue(0, { type: "direct" });
+				translateY.setValue(0, { type: "direct" });
+			}
+			currentOffsetRef.current = {
+				x: 0,
+				y: 0
+			};
+			onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+			return;
+		}
+		if (useDirectDom && dragRef.current) {
+			var { x, y } = currentOffsetRef.current;
+			cancelAnimationRef.current = animateSpring(dragRef.current, x, y, 0, 0, SPRING_CONFIG, function() {
+				currentOffsetRef.current = {
+					x: 0,
+					y: 0
+				};
+				onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+			});
+		} else {
+			translateX.setValue(0, SPRING_CONFIG);
+			translateY.setValue(0, SPRING_CONFIG, onComplete);
+		}
+	});
+	var animateOut = (0, import_core.useEvent)(function(direction, velocity, onComplete) {
+		var _cancelAnimationRef_current;
+		(_cancelAnimationRef_current = cancelAnimationRef.current) === null || _cancelAnimationRef_current === void 0 ? void 0 : _cancelAnimationRef_current.call(cancelAnimationRef);
+		var { x: curX, y: curY } = currentOffsetRef.current;
+		var exitX = direction === "left" ? -EXIT_DISTANCE : direction === "right" ? EXIT_DISTANCE : 0;
+		var exitY = direction === "up" ? -EXIT_DISTANCE : direction === "down" ? EXIT_DISTANCE : 0;
+		if (direction === "left" && curX < exitX) exitX = curX - 50;
+		else if (direction === "right" && curX > exitX) exitX = curX + 50;
+		if (direction === "up" && curY < exitY) exitY = curY - 50;
+		else if (direction === "down" && curY > exitY) exitY = curY + 50;
+		if (reducedMotion) {
+			if (useDirectDom && dragRef.current) {
+				dragRef.current.style.transform = `translate3d(${exitX}px, ${exitY}px, 0)`;
+			} else {
+				translateX.setValue(exitX, { type: "direct" });
+				translateY.setValue(exitY, { type: "direct" });
+			}
+			onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+			onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
+			return;
+		}
+		var velocityScale = (velocity !== null && velocity !== void 0 ? velocity : 0) * 500;
+		var initialVelocityX = direction === "left" ? -velocityScale : direction === "right" ? velocityScale : 0;
+		var initialVelocityY = direction === "up" ? -velocityScale : direction === "down" ? velocityScale : 0;
+		var exitConfig = {
+			damping: 25,
+			stiffness: 350,
+			mass: .4,
+			initialVelocityX,
+			initialVelocityY,
+			fadeOut: true
+		};
+		if (useDirectDom && dragRef.current) {
+			var { x, y } = currentOffsetRef.current;
+			cancelAnimationRef.current = animateSpring(dragRef.current, x, y, exitX, exitY, exitConfig, function() {
+				onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+				onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
+			});
+		} else {
+			var springConfig = {
+				type: "spring",
+				damping: 25,
+				stiffness: 350,
+				mass: .4
+			};
+			translateX.setValue(exitX, springConfig);
+			translateY.setValue(exitY, springConfig, function() {
+				onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+				onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete();
+			});
+		}
+	});
+	var stop = (0, import_core.useEvent)(function() {
+		var _cancelAnimationRef_current;
+		(_cancelAnimationRef_current = cancelAnimationRef.current) === null || _cancelAnimationRef_current === void 0 ? void 0 : _cancelAnimationRef_current.call(cancelAnimationRef);
+		translateX.stop();
+		translateY.stop();
+	});
+	React.useEffect(function() {
+		return function() {
+			var _cancelAnimationRef_current;
+			(_cancelAnimationRef_current = cancelAnimationRef.current) === null || _cancelAnimationRef_current === void 0 ? void 0 : _cancelAnimationRef_current.call(cancelAnimationRef);
+		};
+	}, []);
+	return {
+		setDragOffset,
+		springBack,
+		animateOut,
+		stop,
+		animatedStyle,
+		AnimatedView,
+		dragRef
+	};
+}