@easyv/biz-components 1.0.13 → 1.0.14

package/dist/components/voice-animation/voice-animation.d.ts

@@ -1,7 +1,9 @@
+import { HTMLProps } from 'react';
 
-export interface VoiceAnimationProps {
+export interface VoiceAnimationProps extends HTMLProps<HTMLDivElement> {
     className?: string;
     barNumber?: number;
     barClassName?: string;
+    playStatus?: 'paused' | 'running';
 }
 export declare const VoiceAnimation: (props: VoiceAnimationProps) => JSX.Element;

package/dist/components/voice-animation/voice-animation.es.js

@@ -7,7 +7,7 @@ const getAnimationDelay = (index) => {
   return `-${animationDelayList[index % durationLength]}s`;
 };
 const VoiceAnimation = (props) => {
-  const { className = "", barNumber = 22, barClassName = "" } = props;
+  const { className = "", barNumber = 22, barClassName = "", playStatus, ...rest } = props;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
     {
@@ -15,11 +15,18 @@ const VoiceAnimation = (props) => {
         "voice-animation biz-flex biz-justify-between biz-items-center biz-w-full biz-h-full",
         className
       ),
+      ...rest,
       children: new Array(barNumber).fill(0).map((_, index) => {
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
           {
-            className: `wave-bar biz-h-full biz-rounded-full biz-w-[0.4rem] biz-bg-[#000] ${barClassName}`,
+            className: classNames(
+              "wave-bar biz-h-full biz-rounded-full biz-w-[0.4rem] biz-bg-[#000]",
+              {
+                paused: playStatus === "paused"
+              },
+              barClassName
+            ),
             style: {
               animationDelay: getAnimationDelay(index)
             }

package/dist/components/voice-animation/voice-animation.es.js.map

@@ -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 animationDelayList = [0.4, 1.2, 0.8, 1.4, 0.8, 0.4, 1.4, 0.4, 1.4, 0.8, 0.4, 1.6];\nconst durationLength = animationDelayList.length;\nconst getAnimationDelay = (index: number) => {\n  return `-${animationDelayList[index % durationLength]}s`;\n};\n\nexport const VoiceAnimation = (props: VoiceAnimationProps) => {\n  const { className = '', barNumber = 22, barClassName = '' } = props;\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    >\n      {new Array(barNumber).fill(0).map((_, index) => {\n        return (\n          <div\n            key={index}\n            className={`wave-bar biz-h-full biz-rounded-full biz-w-[0.4rem] biz-bg-[#000] ${barClassName}`}\n            style={{\n              animationDelay: getAnimationDelay(index),\n            }}\n          ></div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["jsx"],"mappings":";;;AAQA,MAAM,qBAAqB,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AACtF,MAAM,iBAAiB,mBAAmB;AAC1C,MAAM,oBAAoB,CAAC,UAAkB;AAC3C,SAAO,IAAI,mBAAmB,QAAQ,cAAc,CAAC;AACvD;AAEa,MAAA,iBAAiB,CAAC,UAA+B;AAC5D,QAAM,EAAE,YAAY,IAAI,YAAY,IAAI,eAAe,OAAO;AAG5D,SAAAA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC,UAAA,IAAI,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,IAAI,CAAC,GAAG,UAAU;AAE5C,eAAAA,kCAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAW,qEAAqE,YAAY;AAAA,YAC5F,OAAO;AAAA,cACL,gBAAgB,kBAAkB,KAAK;AAAA,YAAA;AAAA,UACzC;AAAA,UAJK;AAAA,QAKN;AAAA,MAEJ,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"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 } from 'react';\n\nexport interface VoiceAnimationProps extends HTMLProps<HTMLDivElement> {\n  className?: string;\n  barNumber?: number;\n  barClassName?: string;\n  playStatus?: 'paused' | 'running';\n}\nconst animationDelayList = [0.4, 1.2, 0.8, 1.4, 0.8, 0.4, 1.4, 0.4, 1.4, 0.8, 0.4, 1.6];\nconst durationLength = animationDelayList.length;\nconst getAnimationDelay = (index: number) => {\n  return `-${animationDelayList[index % durationLength]}s`;\n};\n\nexport const VoiceAnimation = (props: VoiceAnimationProps) => {\n  const { className = '', barNumber = 22, barClassName = '', playStatus, ...rest } = props;\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: getAnimationDelay(index),\n            }}\n          ></div>\n        );\n      })}\n    </div>\n  );\n};\n"],"names":["jsx"],"mappings":";;;AAUA,MAAM,qBAAqB,CAAC,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,GAAG;AACtF,MAAM,iBAAiB,mBAAmB;AAC1C,MAAM,oBAAoB,CAAC,UAAkB;AAC3C,SAAO,IAAI,mBAAmB,QAAQ,cAAc,CAAC;AACvD;AAEa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA,EAAE,YAAY,IAAI,YAAY,IAAI,eAAe,IAAI,YAAY,GAAG,KAAA,IAAS;AAGjF,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,kBAAkB,KAAK;AAAA,YAAA;AAAA,UACzC;AAAA,UAVK;AAAA,QAWN;AAAA,MAEJ,CAAA;AAAA,IAAA;AAAA,EACH;AAEJ;"}