react-waveview - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

lib/Wave/new.d.ts

+import { CSSProperties, FC } from 'react';
+import { TimingFunction, WaveItem } from '../interfaces';
+import './Wave.css';
+declare type WaveProps = {
+    className?: string;
+    style?: CSSProperties;
+    H: number;
+    waveParams: WaveItem[];
+    animated?: boolean;
+    speed?: number;
+    speedIncreasePerWave?: number;
+    easing?: TimingFunction;
+};
+declare const Wave: FC<WaveProps>;
+export default Wave;

lib/Wave/new.js

+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { TimingFunction } from '../interfaces';
+import './Wave.css';
+var Wave = function (_a) {
+    var _b = _a.className, className = _b === void 0 ? '' : _b, style = _a.style, H = _a.H, waveParams = _a.waveParams, _c = _a.animated, animated = _c === void 0 ? false : _c, _d = _a.speed, speed = _d === void 0 ? 5000 : _d, _e = _a.speedIncreasePerWave, speedIncreasePerWave = _e === void 0 ? 1000 : _e, _f = _a.easing, easing = _f === void 0 ? TimingFunction.LINEAR : _f;
+    var waves = [];
+    for (var i = 0; i < waveParams.length; i++) {
+        var _g = waveParams[i], A = _g.A, T = _g.T, fill = _g.fill;
+        var wave = (_jsx("svg", __assign({ style: { width: 3 * T, height: A + H }, className: "wave__item wave__item-" + (i + 1), preserveAspectRatio: "xMinYMin meet", viewBox: "0 0 " + 3 * T + " " + (A + H) }, { children: _jsx("path", { d: "M 0 0 Q " + T / 4 + " " + -A + " " + T / 2 + " 0 T " + T + " 0 T " + (3 * T) / 2 + " 0 T " + 2 * T + " 0 T " + (5 * T) / 2 + " 0 T " + 3 * T + " 0 V " + H + " H 0 Z", fill: fill, transform: "translate(0, " + A + ")" }, void 0) }), i));
+        waves.push(wave);
+    }
+    var stopAnim = function () {
+        for (var i = 0; i < waves.length; i++) {
+            var item = document.querySelector(".wave__item-" + (i + 1));
+            if (item) {
+                item.style.animation = '';
+            }
+        }
+    };
+    var startAnim = function () {
+        stopAnim();
+        for (var i = 0; i < waves.length; i++) {
+            var item = document.querySelector(".wave__item-" + (i + 1));
+            if (item) {
+                var name_1 = 'wave__animate';
+                var duration = speed + i * speedIncreasePerWave + "ms";
+                var timingFunction = easing;
+                var iterationCount = 'infinite';
+                var animation = name_1 + " " + duration + " " + timingFunction + " " + iterationCount;
+                item.style.animation = animation;
+            }
+        }
+    };
+    useEffect(function () {
+        if (animated) {
+            startAnim();
+        }
+        else {
+            stopAnim();
+        }
+    }, [animated, stopAnim, startAnim]);
+    return (_jsx("div", __assign({ style: style, className: "wave__group " + className }, { children: waves }), void 0));
+};
+export default Wave;

lib/index.d.ts

@@ -1,3 +0,3 @@
-export { default } from './Wave';
+export { default } from './Wave/new';
 export { TimingFunction } from './interfaces';
 export type { WaveItem } from './interfaces';

lib/index.js

@@ -1,2 +0,2 @@
-export { default } from './Wave';
+export { default } from './Wave/new';
 export { TimingFunction } from './interfaces';

package.json

 {
   "name": "react-waveview",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "WaveView for React",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

src/Wave/new.tsx

@@ -27,4 +27,2 @@ import { CSSProperties, FC, useEffect, useState } from 'react';
 }) => {
-  const [_animated, setAnimated] = useState(animated);
-
   const waves: JSX.Element[] = [];
@@ -63,4 +61,2 @@
     }
-
-    setAnimated(false);
   };
@@ -85,9 +81,11 @@
     }
-
-    setAnimated(true);
   };
 
   useEffect(() => {
-    _animated && startAnim();
-  }, []);
+    if (animated) {
+      startAnim();
+    } else {
+      stopAnim();
+    }
+  }, [animated, stopAnim, startAnim]);
 
@@ -94,0 +92,0 @@ return (

No alert changes

Improved metrics

Total package byte prevSize

28214

12.55%

Number of package files

27

8%

Lines of code

614

13.7%

No dependency changes