@lingxiteam/ebe-utils 0.5.11 → 0.6.2

package/lib/pcpublic/src/components/pcfactory/src/Animation/Animation.tsx

@@ -0,0 +1,181 @@
+import React, { CSSProperties, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import TweenOne from 'rc-tween-one';
+import { useAnimation, AnimationOpts } from './useAnimation';
+import useBackgroundStyle from './useBackgroundStyle';
+import { Spin } from 'antd';
+import { useLocale } from '../utils/hooks/useLocale';
+
+export interface MyViewProps {
+  style: React.CSSProperties;
+  className: string;
+  visible: boolean;
+  backgroundType?: any;
+  appId?: string;
+  loading?: boolean;
+  getEngineApis?: any;
+}
+
+export interface AnimationProps extends MyViewProps, AnimationOpts {}
+
+const Animation = forwardRef<any, AnimationProps>((props, ref) => {
+  const {
+    children,
+    style,
+    className,
+    visible = true,
+    loading = false,
+    backgroundType,
+    effect,
+    animation,
+    repeat,
+    reverse,
+    ease,
+    autoPlay,
+    repeatCustom,
+    left,
+    top,
+    xCustom,
+    yCustom,
+    opacity,
+    scale,
+    rotate,
+    onChange,
+    onStart,
+    onEnd,
+    duration,
+    yoyo,
+    repeatDelay,
+    getEngineApis,
+    audioStatus,
+    ...restProps
+  } = props;
+
+  const engineApis = getEngineApis?.() || {};
+
+  const { getLocale, lang } = useLocale(engineApis);
+
+  const { backgroundStyle } = useBackgroundStyle({
+    backgroundType,
+    appId: restProps?.appId,
+    mode: 'engine',
+    engineApis,
+  });
+
+  const animationOpts = {
+    effect,
+    animation,
+    repeat,
+    reverse,
+    ease,
+    autoPlay,
+    repeatCustom,
+    left,
+    top,
+    xCustom,
+    yCustom,
+    opacity,
+    scale,
+    rotate,
+    onChange,
+    onStart,
+    onEnd,
+    duration,
+    yoyo,
+    repeatDelay,
+    audioStatus,
+  };
+
+  const { ...tweenOne } = useAnimation(animationOpts);
+
+  const containerRef = useRef<any>();
+  const loadingRef = useRef<any>();
+
+  const [reload, setReload] = useState<number>(0);
+
+  const getLoadingStyle = (isShow: boolean): CSSProperties => {
+    const res: CSSProperties = {};
+    if (containerRef.current && loadingRef.current) {
+      const containerRefProps = window.getComputedStyle(containerRef.current);
+      const { offsetWidth, offsetHeight } = containerRef.current;
+      const containerOffset = containerRef.current.getBoundingClientRect();
+      // 获取loading基于父级的偏移量
+      const loadingOffset = loadingRef.current.getBoundingClientRect();
+
+      const offset = {
+        x: loadingOffset.left - containerOffset.left,
+        y: loadingOffset.top - containerOffset.top,
+      };
+
+      res.position = 'absolute';
+      res.width = `${offsetWidth}px`;
+      res.height = `${offsetHeight}px`;
+      res.zIndex = containerRefProps.zIndex;
+      res.backgroundColor = 'rgba(255,255,255,0.5)';
+      res.display = 'flex';
+      res.justifyContent = 'center';
+      res.alignItems = 'center';
+      res.left = 0;
+      res.top = 0;
+      if (offset.x > 0 || offset.y > 0) {
+        res.transform = `translate(${-offset.x}px, ${-offset.y}px)`;
+      }
+    }
+    if (!isShow) {
+      res.display = 'none';
+    }
+    return res;
+  };
+
+  const renderLoadingComp = useMemo(() => {
+    if (loading && loadingRef.current) {
+      return (
+        <div style={getLoadingStyle(true)}>
+          <Spin tip={getLocale?.('loadingText')} />
+        </div>
+      );
+    }
+    return null;
+  }, [loading, loadingRef.current, reload, lang]);
+
+  useEffect(() => {
+    if (loading) {
+      setReload(reload + 1);
+    }
+  }, [loading]);
+
+  if (!visible) return null;
+  return (
+    // @ts-ignore
+    <TweenOne
+      style={{
+        ...backgroundStyle,
+        ...style,
+      }}
+      className={className}
+      // @ts-ignore
+      data-compid={props?.['data-compid']}
+      {...restProps}
+      ref={containerRef}
+      {...tweenOne}
+    >
+      {children}
+      {/* loading 定位元素 */}
+      {loading && (
+        <div
+          style={{
+            width: 0,
+            height: 0,
+            position: 'relative',
+            backgroundColor: 'transparent',
+            visibility: loading ? 'visible' : 'hidden',
+          }}
+          ref={loadingRef}
+        >
+          {renderLoadingComp}
+        </div>
+      )}
+    </TweenOne>
+  );
+});
+
+export default Animation;

package/lib/pcpublic/src/components/pcfactory/src/Animation/index.tsx

@@ -1,179 +1,17 @@
-import { Spin } from 'antd';
-import TweenOne from 'rc-tween-one';
-import React, { CSSProperties, forwardRef, useEffect, useMemo, useRef, useState } from 'react';
-import { useLocale } from '../utils/hooks/useLocale';
-import { AnimationOpts, useAnimation } from './useAnimation';
-import useBackgroundStyle from './useBackgroundStyle';
+import React, { useState, useImperativeHandle } from 'react';
+import { LingxiForwardRef } from '@lingxiteam/types';
+import AnimationLoader from './loader';
 
-export interface MyViewProps {
-  style: React.CSSProperties;
-  className: string;
-  visible: boolean;
-  backgroundType?: any;
-  appId?: string;
-  loading?: boolean;
-  getEngineApis?: any;
-}
+const Animation = LingxiForwardRef<unknown, any>((props, ref) => {
+  const [audioStatus, toggelAudioStatus] = useState<'play' | 'pasue' | 'toggle'>();
 
-export interface AnimationProps extends MyViewProps, AnimationOpts {}
+  useImperativeHandle(ref, () => ({
+    onOperationAudio: (status: 'play' | 'pasue' | 'toggle') => {
+      toggelAudioStatus(status);
+    },
+  }));
 
-const Animation = forwardRef<any, AnimationProps>((props, ref) => {
-  const {
-    children,
-    style,
-    className,
-    visible = true,
-    loading = false,
-    backgroundType,
-    effect,
-    animation,
-    repeat,
-    reverse,
-    ease,
-    autoPlay,
-    repeatCustom,
-    left,
-    top,
-    xCustom,
-    yCustom,
-    opacity,
-    scale,
-    rotate,
-    onChange,
-    onStart,
-    onEnd,
-    duration,
-    yoyo,
-    repeatDelay,
-    getEngineApis,
-    ...restProps
-  } = props;
-
-  const engineApis = getEngineApis?.() || {};
-
-  const { getLocale, lang } = useLocale(engineApis);
-
-  const { backgroundStyle } = useBackgroundStyle({
-    backgroundType,
-    appId: restProps?.appId,
-    mode: 'engine',
-    engineApis,
-  });
-
-  const animationOpts = {
-    effect,
-    animation,
-    repeat,
-    reverse,
-    ease,
-    autoPlay,
-    repeatCustom,
-    left,
-    top,
-    xCustom,
-    yCustom,
-    opacity,
-    scale,
-    rotate,
-    onChange,
-    onStart,
-    onEnd,
-    duration,
-    yoyo,
-    repeatDelay,
-  };
-
-  const { ...tweenOne } = useAnimation(animationOpts, ref);
-
-  const containerRef = useRef<any>();
-  const loadingRef = useRef<any>();
-
-  const [reload, setReload] = useState<number>(0);
-
-  const getLoadingStyle = (isShow: boolean): CSSProperties => {
-    const res: CSSProperties = {};
-    if (containerRef.current && loadingRef.current) {
-      const containerRefProps = window.getComputedStyle(containerRef.current);
-      const { offsetWidth, offsetHeight } = containerRef.current;
-      const containerOffset = containerRef.current.getBoundingClientRect();
-      // 获取loading基于父级的偏移量
-      const loadingOffset = loadingRef.current.getBoundingClientRect();
-
-      const offset = {
-        x: loadingOffset.left - containerOffset.left,
-        y: loadingOffset.top - containerOffset.top,
-      };
-
-      res.position = 'absolute';
-      res.width = `${offsetWidth}px`;
-      res.height = `${offsetHeight}px`;
-      res.zIndex = containerRefProps.zIndex;
-      res.backgroundColor = 'rgba(255,255,255,0.5)';
-      res.display = 'flex';
-      res.justifyContent = 'center';
-      res.alignItems = 'center';
-      res.left = 0;
-      res.top = 0;
-      if (offset.x > 0 || offset.y > 0) {
-        res.transform = `translate(${-offset.x}px, ${-offset.y}px)`;
-      }
-    }
-    if (!isShow) {
-      res.display = 'none';
-    }
-    return res;
-  };
-
-  const renderLoadingComp = useMemo(() => {
-    if (loading && loadingRef.current) {
-      return (
-        <div style={getLoadingStyle(true)}>
-          <Spin tip={getLocale?.('loadingText')} />
-        </div>
-      );
-    }
-    return null;
-  }, [loading, loadingRef.current, reload, lang]);
-
-  useEffect(() => {
-    if (loading) {
-      setReload(reload + 1);
-    }
-  }, [loading]);
-
-  if (!visible) return null;
-  return (
-    // @ts-ignore
-    <TweenOne
-      style={{
-        ...backgroundStyle,
-        ...style,
-      }}
-      className={className}
-      // @ts-ignore
-      data-compid={props?.['data-compid']}
-      {...restProps}
-      ref={containerRef}
-      {...tweenOne}
-    >
-      {children}
-      {/* loading 定位元素 */}
-      {loading && (
-        <div
-          style={{
-            width: 0,
-            height: 0,
-            position: 'relative',
-            backgroundColor: 'transparent',
-            visibility: loading ? 'visible' : 'hidden',
-          }}
-          ref={loadingRef}
-        >
-          {renderLoadingComp}
-        </div>
-      )}
-    </TweenOne>
-  );
+  return <AnimationLoader {...props} audioStatus={audioStatus} />;
 });
 
 export default Animation;

package/lib/pcpublic/src/components/pcfactory/src/Animation/loader.tsx

@@ -0,0 +1,9 @@
+import Loadable from 'react-loadable';
+import { LoadingComponennt } from '../utils/LoaderHelper';
+
+const ReactChartsLoader = Loadable({
+  loader: async () => (await import/* webpackChunkName: 'pcFactory-Animation' */('./Animation')) as unknown as React.ComponentType<any>,
+  loading: LoadingComponennt,
+});
+
+export default ReactChartsLoader;

package/lib/pcpublic/src/components/pcfactory/src/Animation/useAnimation.ts

@@ -1,13 +1,13 @@
-import _ from 'lodash';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import type { ITimelineCallBack } from 'rc-tween-one';
-import { Ref, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import _ from 'lodash';
 
 export interface AnimationOpts {
-  effect: string;
-  animation: any[];
-  repeat: number | 'custom';
-  reverse: boolean;
-  ease: string;
+  effect: string,
+  animation: any[],
+  repeat: number | 'custom',
+  reverse: boolean,
+  ease: string,
   autoPlay: boolean;
   repeatCustom: number;
   left?: string | 'custom';
@@ -23,6 +23,7 @@ export interface AnimationOpts {
   duration: number;
   yoyo: boolean;
   repeatDelay: number;
+  audioStatus: 'play' | 'pasue' | 'toggle',
 }
 
 const removeNullOrUndefined = (obj: Record<string, any>) => {
@@ -37,7 +38,7 @@ const removeNullOrUndefined = (obj: Record<string, any>) => {
   return obj;
 };
 
-export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined) => {
+export const useAnimation = (opts: AnimationOpts) => {
   const {
     effect,
     repeatCustom,
@@ -52,6 +53,7 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
     repeatDelay = 0,
     xCustom: leftCustom,
     yCustom: topCustom,
+    audioStatus,
   } = opts;
 
   const [paused, setPaused] = useState(!autoPlay);
@@ -72,12 +74,13 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
     }
   };
 
+
   /**
    * 播放动画
    */
   const playAnimation = () => {
     onStart();
-    setMoment(needRestartRef.current ? 0 : (null as any));
+    setMoment(needRestartRef.current ? 0 : null as any);
     setPaused(false);
     needRestartRef.current = false;
   };
@@ -106,7 +109,7 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
       opts.onEnd(v);
     }
     needRestartRef.current = true;
-    setMoment(null as any);
+    setMoment((null as any));
     setPaused(true);
   };
 
@@ -145,12 +148,6 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
     }
   };
 
-  useImperativeHandle(ref, () => ({
-    onOperationAudio: (status: string) => {
-      toggelAudioStatus(status);
-    },
-  }));
-
   const repeat = useMemo(() => {
     let rep = opts.repeat;
     if (opts.repeat === 'custom') {
@@ -202,6 +199,7 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
     };
   }, [opts.left, opts.top, leftCustom, topCustom]);
 
+
   const getMoveAni = () => {
     const ani: any = {
       left: x,
@@ -255,6 +253,10 @@ export const useAnimation = (opts: AnimationOpts, ref: Ref<unknown> | undefined)
     };
   }, [effect, x, y, opacity, scale, rotate, duration, ease, reverse]);
 
+  useEffect(() => {
+    toggelAudioStatus(audioStatus);
+  }, [audioStatus]);
+
   return {
     yoyo,
     repeat,

package/lib/pcpublic/src/components/pcfactory/src/Animation/useBackgroundStyle.ts

@@ -7,8 +7,13 @@ interface BackgroundConfig {
   engineApis?: any;
 }
 const useBackgroundStyle = (props: BackgroundConfig) => {
-  const { backgroundType, mode = 'editor', appId, engineApis } = props || {};
-
+  const {
+    backgroundType,
+    mode = 'editor',
+    appId,
+    engineApis,
+  } = props || {};
+  
   const [imgSrc, setImgSrc] = useState('');
 
   useEffect(() => {
@@ -30,11 +35,7 @@ const useBackgroundStyle = (props: BackgroundConfig) => {
               setImgSrc(await func({ appId: window.appId, fileCode: code }));
             }
           } else if (mode === 'engine') {
-            setImgSrc(
-              await engineApis?.service?.getAppFileUrlByFileCode(code, {
-                appId,
-              })
-            );
+            setImgSrc(await engineApis?.service?.getAppFileUrlByFileCode(code, { appId }));
           }
         } catch (e) {
           console.log(e);