@nova-design-system/nova-react 3.21.0 → 3.22.0

package/dist/cjs/grow.animation-24ad5cf8-LUp_ITEx.js

@@ -0,0 +1,111 @@
+'use strict';
+
+var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
+var styleValueTypes_esF5d10b79 = require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
+
+/**
+ * Adds a set of event listeners to the given target.
+ * @param {EventsAndListeners} events - The events and listeners to add.
+ * @param {Element | Window | Document} target  - The target element or window to add the event listeners to.
+ * @param {T} context - The class context to bind the event listeners to.
+ */
+function addEventListeners(events, target, context) {
+    events.forEach(([event, listener]) => target.addEventListener(event, listener.bind(context)));
+}
+/**
+ * Removes a set of event listeners from the given target.
+ * @param {EventsAndListeners} events - The events and listeners to remove.
+ * @param {Element | Window | Document} target  - The target element or window to remove the event listeners from.
+ * @param {T} context - The class context to bind the event listeners to.
+ */
+function removeEventListeners(events, target, context) {
+    events.forEach(([event, listener]) => target.removeEventListener(event, listener.bind(context)));
+}
+
+const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) => {
+    const nodeStyler = fade_animation9b939939.index(node);
+    /**
+     * Will animate the scale and optionally the opacity to make the element grow and fade in,
+     * and removes the scale and opacity style attributes once complete.
+     */
+    function growIn() {
+        return new Promise(resolve => {
+            styleValueTypes_esF5d10b79.animate({
+                from: { opacity: hasFade ? 0 : 1, scale: amount },
+                to: { opacity: 1, scale: 1 },
+                duration,
+                onUpdate(latest) {
+                    const updates = {
+                        scale: latest.scale,
+                    };
+                    if (hasFade) {
+                        updates['opacity'] = latest.opacity;
+                    }
+                    nodeStyler.set(updates);
+                },
+                onComplete() {
+                    resolve();
+                    if (hasFade) {
+                        node.style.removeProperty('opacity');
+                    }
+                    node.style.removeProperty('transform');
+                },
+            });
+        });
+    }
+    /**
+     * Applies the growOut styles without animating, useful when the initial
+     * state is hidden.
+     */
+    function setGrowOut() {
+        node.style.transform = `scale(${amount})`;
+        if (hasFade) {
+            node.style.opacity = '0';
+        }
+    }
+    /**
+     * Applies the growIn styles without animating, useful when the initial
+     * state is visible.
+     */
+    function setGrowIn() {
+        node.style.transform = `scale(1)`;
+        if (hasFade) {
+            node.style.opacity = '1';
+        }
+    }
+    /**
+     * Will animate the scale and optionally the opacity to make the element shrink and fade out,
+     * leaving the scale and opacity styles on the element.
+     */
+    function growOut() {
+        return new Promise(resolve => {
+            styleValueTypes_esF5d10b79.animate({
+                from: { opacity: 1, scale: 1 },
+                to: { opacity: hasFade ? 0 : 1, scale: amount },
+                duration,
+                onUpdate(latest) {
+                    const updates = {
+                        scale: latest.scale,
+                    };
+                    if (hasFade) {
+                        updates['opacity'] = latest.opacity;
+                    }
+                    nodeStyler.set(updates);
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    }
+    return {
+        growIn,
+        growOut,
+        setGrowOut,
+        setGrowIn,
+    };
+};
+
+exports.addEventListeners = addEventListeners;
+exports.removeEventListeners = removeEventListeners;
+exports.useGrow = useGrow;