@easyv/biz-components 1.0.13 → 1.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,7 +1,14 @@
|
|
|
1
|
+
import { HTMLProps } from 'react';
|
|
1
2
|
|
|
2
|
-
export interface VoiceAnimationProps {
|
|
3
|
+
export interface VoiceAnimationProps extends HTMLProps<HTMLDivElement> {
|
|
3
4
|
className?: string;
|
|
4
5
|
barNumber?: number;
|
|
5
6
|
barClassName?: string;
|
|
7
|
+
playStatus?: 'paused' | 'running';
|
|
8
|
+
barAnimationDelayList?: number[];
|
|
6
9
|
}
|
|
10
|
+
/**
|
|
11
|
+
* 语音动画。
|
|
12
|
+
* - 单条动画时长 1.6 s，故 animationDelay 配置为 0 和 1.6 时最长，0.8 时，bar 最短
|
|
13
|
+
*/
|
|
7
14
|
export declare const VoiceAnimation: (props: VoiceAnimationProps) => JSX.Element;
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
|
|
2
2
|
import classNames from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
|
|
3
3
|
/* empty css */
|
|
4
|
-
|
|
5
|
-
const
|
|
6
|
-
const getAnimationDelay = (index) => {
|
|
7
|
-
return `-${animationDelayList[index % durationLength]}s`;
|
|
8
|
-
};
|
|
4
|
+
import { useState } from "react";
|
|
5
|
+
const defaultAnimationDelayList = [0.4, 1.2, 0.8, 1.4, 0.8, 0.4, 1.4, 0.4, 1.4, 0.8, 0.4, 1.6];
|
|
9
6
|
const VoiceAnimation = (props) => {
|
|
10
|
-
const {
|
|
7
|
+
const {
|
|
8
|
+
className = "",
|
|
9
|
+
barNumber = 22,
|
|
10
|
+
barClassName = "",
|
|
11
|
+
playStatus,
|
|
12
|
+
barAnimationDelayList = defaultAnimationDelayList,
|
|
13
|
+
...rest
|
|
14
|
+
} = props;
|
|
15
|
+
const [animationDelayList] = useState(barAnimationDelayList);
|
|
11
16
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
12
17
|
"div",
|
|
13
18
|
{
|
|
@@ -15,13 +20,20 @@ const VoiceAnimation = (props) => {
|
|
|
15
20
|
"voice-animation biz-flex biz-justify-between biz-items-center biz-w-full biz-h-full",
|
|
16
21
|
className
|
|
17
22
|
),
|
|
23
|
+
...rest,
|
|
18
24
|
children: new Array(barNumber).fill(0).map((_, index) => {
|
|
19
25
|
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
20
26
|
"div",
|
|
21
27
|
{
|
|
22
|
-
className:
|
|
28
|
+
className: classNames(
|
|
29
|
+
"wave-bar biz-h-full biz-rounded-full biz-w-[0.4rem] biz-bg-[#000]",
|
|
30
|
+
{
|
|
31
|
+
paused: playStatus === "paused"
|
|
32
|
+
},
|
|
33
|
+
barClassName
|
|
34
|
+
),
|
|
23
35
|
style: {
|
|
24
|
-
animationDelay:
|
|
36
|
+
animationDelay: `-${animationDelayList[index % animationDelayList.length]}s`
|
|
25
37
|
}
|
|
26
38
|
},
|
|
27
39
|
index
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"voice-animation.es.js","sources":["../../../src/components/voice-animation/voice-animation.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport './index.css';\n\nexport interface VoiceAnimationProps {\n className?: string;\n barNumber?: number;\n barClassName?: string;\n}\nconst
|
|
1
|
+
{"version":3,"file":"voice-animation.es.js","sources":["../../../src/components/voice-animation/voice-animation.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport './index.css';\nimport { HTMLProps, useState } from 'react';\n\nexport interface VoiceAnimationProps extends HTMLProps<HTMLDivElement> {\n className?: string;\n barNumber?: number;\n barClassName?: string;\n playStatus?: 'paused' | 'running';\n barAnimationDelayList?: number[];\n}\n\nconst defaultAnimationDelayList = [0.4, 1.2, 0.8, 1.4, 0.8, 0.4, 1.4, 0.4, 1.4, 0.8, 0.4, 1.6];\n\n/**\n * 语音动画。\n * - 单条动画时长 1.6 s，故 animationDelay 配置为 0 和 1.6 时最长，0.8 时，bar 最短\n */\nexport const VoiceAnimation = (props: VoiceAnimationProps) => {\n const {\n className = '',\n barNumber = 22,\n barClassName = '',\n playStatus,\n barAnimationDelayList = defaultAnimationDelayList,\n ...rest\n } = props;\n\n const [animationDelayList] = useState(barAnimationDelayList);\n\n return (\n <div\n className={classNames(\n 'voice-animation biz-flex biz-justify-between biz-items-center biz-w-full biz-h-full',\n className,\n )}\n {...rest}\n >\n {new Array(barNumber).fill(0).map((_, index) => {\n return (\n <div\n key={index}\n className={classNames(\n 'wave-bar biz-h-full biz-rounded-full biz-w-[0.4rem] biz-bg-[#000]',\n {\n paused: playStatus === 'paused',\n },\n barClassName,\n )}\n style={{\n animationDelay: `-${animationDelayList[index % animationDelayList.length]}s`,\n }}\n ></div>\n );\n })}\n </div>\n );\n};\n"],"names":["jsx"],"mappings":";;;;AAYA,MAAM,4BAA4B,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AAMhF,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,eAAe;AAAA,IACf;AAAA,IACA,wBAAwB;AAAA,IACxB,GAAG;AAAA,EAAA,IACD;AAEJ,QAAM,CAAC,kBAAkB,IAAI,SAAS,qBAAqB;AAGzD,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,IAAI,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAE5C,eAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW;AAAA,cACT;AAAA,cACA;AAAA,gBACE,QAAQ,eAAe;AAAA,cACzB;AAAA,cACA;AAAA,YACF;AAAA,YACA,OAAO;AAAA,cACL,gBAAgB,IAAI,mBAAmB,QAAQ,mBAAmB,MAAM,CAAC;AAAA,YAAA;AAAA,UAC3E;AAAA,UAVK;AAAA,QAWN;AAAA,MAEJ,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
|