react-waveview - npm Package Compare versions

Comparing version 1.0.5 to 2.0.0

src/Wave/new.tsx

+import { CSSProperties, FC, useEffect, useState } from 'react';
+import { TimingFunction, WaveItem } from '../interfaces';
+
+import './Wave.css';
+
+type WaveProps = {
+  className?: string;
+  style?: CSSProperties;
+  H: number;
+  waveParams: WaveItem[];
+  animated?: boolean;
+  speed?: number;
+  speedIncreasePerWave?: number;
+  easing?: TimingFunction;
+};
+
+const Wave: FC<WaveProps> = ({
+  className = '',
+  style,
+  H,
+  waveParams,
+  animated = false,
+  speed = 5000,
+  speedIncreasePerWave = 1000,
+  easing = TimingFunction.LINEAR
+}) => {
+  const [_animated, setAnimated] = useState(animated);
+
+  const waves: JSX.Element[] = [];
+
+  for (let i = 0; i < waveParams.length; i++) {
+    let { A, T, fill } = waveParams[i];
+    let wave = (
+      <svg
+        key={i}
+        style={{ width: 3 * T, height: A + H }}
+        className={`wave__item wave__item-${i + 1}`}
+        preserveAspectRatio="xMinYMin meet"
+        viewBox={`0 0 ${3 * T} ${A + H}`}
+      >
+        <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})`}
+        />
+      </svg>
+    );
+
+    waves.push(wave);
+  }
+
+  const stopAnim = () => {
+    for (let i = 0; i < waves.length; i++) {
+      const item = document.querySelector<SVGElement>(`.wave__item-${i + 1}`);
+
+      if (item) {
+        item.style.animation = '';
+      }
+    }
+
+    setAnimated(false);
+  };
+
+  const startAnim = () => {
+    stopAnim();
+
+    for (let i = 0; i < waves.length; i++) {
+      const item = document.querySelector<SVGElement>(`.wave__item-${i + 1}`);
+
+      if (item) {
+        const name = 'wave__animate';
+        const duration = `${speed + i * speedIncreasePerWave}ms`;
+        const timingFunction = easing;
+        const iterationCount = 'infinite';
+
+        const animation = `${name} ${duration} ${timingFunction} ${iterationCount}`;
+
+        item.style.animation = animation;
+      }
+    }
+
+    setAnimated(true);
+  };
+
+  useEffect(() => {
+    _animated && startAnim();
+  }, []);
+
+  return (
+    <div style={style} className={`wave__group ${className}`}>
+      {waves}
+    </div>
+  );
+};
+
+export default Wave;

package.json

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

README.md

@@ -5,2 +5,6 @@ ## WaveView
 
+## Screenshot
+
+![wave.png](https://raw.githubusercontent.com/hoangnguyennn/react-waveview/master/screenshot/wave.png)
+
 ## Install
@@ -60,2 +64,3 @@
 | className            | string                            | `className` for wave container            | -                     | false    |
+| style                | `CSSProperties`                   | `style` for wave container                | -                     | false    |
 
@@ -62,0 +67,0 @@ ### Interfaces and Enums

src/index.ts

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

No alert changes

Improved metrics

Total package byte prevSize

25067

26.17%

Number of package files

25

8.7%

Lines of code

540

17.39%

Number of lines in readme file

90

5.88%

No dependency changes