@lingxiteam/ebe-utils 0.5.0 → 0.5.2

package/lib/public/src/components/common/PreviewFile/utils.ts

@@ -0,0 +1,90 @@
+export const PREVIEW_MODE = {
+  PPT: 'IMG_PPT',
+  IMG: 'IMG',
+  PDF: 'PDF',
+  ZIP: 'ZIP',
+  VIDEO: 'VIDEO',
+  TXT: 'TXT',
+  IFRAME: 'IFRAME',
+  HTML: 'HTML',
+};
+// 是否可以放大缩小
+export const CAN_SCALE = [
+  PREVIEW_MODE.PPT,
+  PREVIEW_MODE.IMG,
+  PREVIEW_MODE.PDF,
+  PREVIEW_MODE.ZIP,
+];
+// 先判断是否可以进行本地预览，若不可以则调用后端接口判断
+// 部分格式后端可能不支持预览，或者本地可以直接预览的，不调用查询接口，直接转换预览
+export const LOCAL_PREVIEW = [
+  {
+    previewMode: PREVIEW_MODE.VIDEO,
+    mimeTypeReg: /^video\/(mp4|webm|ogg|x-ms-wmv|quicktime)$/i,
+    suffix: /\.(mp4|mov)$/i,
+    // 平台定制预览是否支持跨域地址
+    cors: true,
+  },
+  {
+    previewMode: PREVIEW_MODE.IMG,
+    mimeTypeReg: /^image\/(bmp|gif|jpeg|jpg|png|svg\+xml|tiff|webp|x-icon)$/i,
+    suffix: /\.(jpg|jpeg|png|svg|heic|ico|bmp|tiff|tif)$/i,
+    cors: true,
+  },
+  {
+    previewMode: PREVIEW_MODE.PDF,
+    mimeTypeReg: /^application\/pdf$/i,
+    suffix: /\.pdf$/i,
+  },
+  {
+    previewMode: PREVIEW_MODE.TXT,
+    mimeTypeReg:
+      /^(application|text)\/(json|javascript|x-javascript|plain|x-sh)$/i,
+    suffix: /\.(less|scss|lock|ts|txt|js|jsx)$/i,
+  },
+  {
+    previewMode: PREVIEW_MODE.ZIP,
+    mimeTypeReg: /^(application\/zip)$/i,
+    suffix: /\.zip$/i,
+    cors: true,
+  },
+];
+
+export const parseFileInfo = (
+  fileInfo: {
+    fileId?: string;
+    [key: string]: any;
+  },
+  serverFileInfo: {
+    previewMode: string;
+    fileId?: string;
+    [key: string]: any;
+  },
+) => {
+  if (!fileInfo) return fileInfo;
+  const { previewMode } = serverFileInfo || {};
+  const newFileInfo = { ...(serverFileInfo || {}), ...fileInfo };
+  switch (previewMode) {
+    case PREVIEW_MODE.PPT: {
+      if (
+        newFileInfo?.previewMode === PREVIEW_MODE.PPT &&
+        newFileInfo?.fileIdList.length > 0
+      ) {
+        newFileInfo.totalPage = newFileInfo?.fileIdList.length;
+      }
+      break;
+    }
+    default: {
+      // 部分类型如doc，docx，服务端处理后会返回转换后的文件ID
+      if (!serverFileInfo?.serverFileId && serverFileInfo?.fileId) {
+        newFileInfo.serverFileId = serverFileInfo?.fileId;
+      }
+      break;
+    }
+  }
+  return newFileInfo;
+};
+
+// 判断是否是网络地址，是的话不调用后端接口预览
+export const isUrlFormat = (id: string) =>
+  /^https?:\/\/[^\s/$.?#].[^\s]*$/i.test(id);

package/lib/public/src/components/pcfactory/src/Alert/index.tsx

@@ -0,0 +1,22 @@
+import { Alert } from 'antd';
+import React from 'react';
+import useHiddenStyle from '../utils/hooks/useHiddenStyle';
+
+export interface MyAlertProps {
+  message: string;
+  name?: string;
+  style?: any;
+  visible: boolean;
+}
+
+const MyAlert: React.FC<MyAlertProps> = (props) => {
+  const { name, visible, style, ...restProps } = props;
+  const finalStyle = useHiddenStyle(visible, style);
+  return (
+    <div className="ued-alert">
+      <Alert style={finalStyle} {...restProps} />
+    </div>
+  );
+};
+
+export default MyAlert;

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

@@ -0,0 +1,186 @@
+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';
+
+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,
+    ...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>
+  );
+});
+
+export default Animation;

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

@@ -0,0 +1,270 @@
+import _ from 'lodash';
+import type { ITimelineCallBack } from 'rc-tween-one';
+import { Ref, useImperativeHandle, useMemo, useRef, useState } from 'react';
+
+export interface AnimationOpts {
+  effect: string;
+  animation: any[];
+  repeat: number | 'custom';
+  reverse: boolean;
+  ease: string;
+  autoPlay: boolean;
+  repeatCustom: number;
+  left?: string | 'custom';
+  top?: string | 'custom';
+  xCustom?: number;
+  yCustom?: number;
+  opacity?: number;
+  scale?: number;
+  rotate?: number;
+  onChange: (v: ITimelineCallBack) => void;
+  onStart: (v: any) => void;
+  onEnd: (v: ITimelineCallBack) => void;
+  duration: number;
+  yoyo: boolean;
+  repeatDelay: number;
+}
+
+const removeNullOrUndefined = (obj: Record<string, any>) => {
+  if (!obj) {
+    return obj;
+  }
+  Object.keys(obj).forEach((key) => {
+    if (_.isNull(obj[key]) || _.isUndefined(obj[key])) {
+      delete obj[key];
+    }
+  });
+  return obj;
+};
+
+export const useAnimation = (
+  opts: AnimationOpts,
+  ref: Ref<unknown> | undefined,
+) => {
+  const {
+    effect,
+    repeatCustom,
+    reverse,
+    ease,
+    autoPlay,
+    opacity,
+    scale,
+    yoyo,
+    rotate,
+    duration,
+    repeatDelay = 0,
+    xCustom: leftCustom,
+    yCustom: topCustom,
+  } = opts;
+
+  const [paused, setPaused] = useState(!autoPlay);
+  const [moment, setMoment] = useState<number>(null as any);
+  const needRestartRef = useRef(false); // 是否需要重新播放
+
+  /**
+   * 特殊处理onStart函数
+   * @param v
+   */
+  const onStart = () => {
+    if (opts.onStart) {
+      opts.onStart({
+        mode: 'onTimelineStart',
+        moment,
+        repeat,
+      });
+    }
+  };
+
+  /**
+   * 播放动画
+   */
+  const playAnimation = () => {
+    onStart();
+    setMoment(needRestartRef.current ? 0 : (null as any));
+    setPaused(false);
+    needRestartRef.current = false;
+  };
+
+  /**
+   * 暂停动画
+   */
+  const pasueAnimation = () => {
+    setMoment(null as any);
+    setPaused(true);
+  };
+
+  /**
+   * 切换动画播放
+   */
+  const toggleAnimation = () => {
+    if (paused) {
+      playAnimation();
+    } else {
+      pasueAnimation();
+    }
+  };
+
+  const onEnd = (v: ITimelineCallBack) => {
+    if (opts.onEnd) {
+      opts.onEnd(v);
+    }
+    needRestartRef.current = true;
+    setMoment(null as any);
+    setPaused(true);
+  };
+
+  const onChangeTimeline = (v: ITimelineCallBack) => {
+    const { mode } = v;
+    switch (mode) {
+      case 'onTimelineStart':
+        if (autoPlay) {
+          onStart();
+        }
+        break;
+      case 'onTimelineComplete':
+        onEnd(v);
+        break;
+      case 'onTimelineUpdate':
+        opts.onChange && opts.onChange(v);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const toggelAudioStatus = (type: string) => {
+    switch (type) {
+      case 'play':
+        playAnimation();
+        break;
+      case 'pasue':
+        pasueAnimation();
+        break;
+      case 'toggle':
+        toggleAnimation();
+        break;
+      default:
+        break;
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    onOperationAudio: (status: string) => {
+      toggelAudioStatus(status);
+    },
+  }));
+
+  const repeat = useMemo(() => {
+    let rep = opts.repeat;
+    if (opts.repeat === 'custom') {
+      rep = repeatCustom * 2;
+      // 理论上当重复次数大于0时 动画执行一个来回才算是一个执行周期。
+      if (repeatCustom > 0) {
+        rep = (repeatCustom - 1) * 2;
+      }
+      // 不允许倒放时，只需要配置重复次数即可
+      if (!yoyo && repeatCustom > 0) {
+        rep = repeatCustom - 1;
+      }
+    }
+    return rep;
+  }, [opts.repeat]);
+
+  const IAnimation = useMemo(() => {
+    const animation = opts.animation || [];
+    return animation?.map((item) => ({
+      ...item,
+      ...item.style,
+    }));
+  }, [opts.animation]);
+
+  if (effect === 'custom') {
+    return {
+      animation: IAnimation,
+      paused,
+      moment,
+      onChangeTimeline,
+    };
+  }
+
+  const { x, y } = useMemo(() => {
+    const { left: optsX, top: optsY } = opts;
+    let newX: number | string | undefined = optsX;
+    let newY: number | string | undefined = optsY;
+    if (optsX === 'custom') {
+      newX = leftCustom;
+    }
+
+    if (optsY === 'custom') {
+      newY = topCustom;
+    }
+
+    return {
+      x: newX,
+      y: newY,
+    };
+  }, [opts.left, opts.top, leftCustom, topCustom]);
+
+  const getMoveAni = () => {
+    const ani: any = {
+      left: x,
+      top: y,
+    };
+    // 这里选择位置时，保持组件的中心移动到指定位置
+    if (opts.left !== 'custom') {
+      if (['100%'].includes(`${x || ''}`)) {
+        ani.x = '-100%';
+      }
+    }
+    if (opts.top !== 'custom') {
+      if (['100%'].includes(`${y || ''}`)) {
+        ani.y = '-100%';
+      }
+    }
+
+    return ani;
+  };
+
+  const animation = useMemo(() => {
+    let ani = {};
+    switch (effect) {
+      case 'move':
+        ani = getMoveAni();
+        break;
+      case 'opacity':
+        ani = {
+          opacity,
+        };
+        break;
+      case 'scale':
+        ani = {
+          scale,
+        };
+        break;
+      case 'rotate':
+        ani = {
+          rotate,
+        };
+        break;
+      default:
+        break;
+    }
+
+    return {
+      ...ani,
+      ease,
+      reverse,
+      duration,
+    };
+  }, [effect, x, y, opacity, scale, rotate, duration, ease, reverse]);
+
+  return {
+    yoyo,
+    repeat,
+    paused,
+    moment,
+    animation: removeNullOrUndefined(animation),
+    repeatDelay,
+    onChangeTimeline,
+  };
+};

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

@@ -0,0 +1,74 @@
+import { useEffect, useMemo, useState } from 'react';
+
+interface BackgroundConfig {
+  backgroundType?: any;
+  mode?: string;
+  appId?: string;
+  engineApis?: any;
+}
+const useBackgroundStyle = (props: BackgroundConfig) => {
+  const { backgroundType, mode = 'editor', appId, engineApis } = props || {};
+
+  const [imgSrc, setImgSrc] = useState('');
+
+  useEffect(() => {
+    const code = backgroundType?.image?.fileCode;
+    if (code) {
+      (async () => {
+        try {
+          if (mode === 'editor' && engineApis) {
+            let func: any;
+            if (typeof engineApis === 'function') {
+              const apis = engineApis();
+              if (apis.getAppFileUrlByFileCode) {
+                func = apis.getAppFileUrlByFileCode;
+              }
+            } else if (
+              typeof engineApis?.getAppFileUrlByFileCode === 'function'
+            ) {
+              func = engineApis.getAppFileUrlByFileCode;
+            }
+            if (func) {
+              setImgSrc(await func({ appId: window.appId, fileCode: code }));
+            }
+          } else if (mode === 'engine') {
+            setImgSrc(
+              await engineApis?.service?.getAppFileUrlByFileCode(code, {
+                appId,
+              }),
+            );
+          }
+        } catch (e) {
+          console.log(e);
+        }
+      })();
+    }
+  }, [mode, backgroundType?.image?.fileCode]);
+
+  const backgroundStyle = useMemo(() => {
+    if (backgroundType) {
+      const { type, color, image, imageType } = backgroundType || {};
+      const { fileUrl } = image || {};
+      const obj: any = {};
+      if (type === 'image') {
+        let url = '';
+        if (imageType === 'custom') {
+          url = fileUrl;
+        } else {
+          url = imgSrc;
+        }
+        obj.backgroundImage = `url(${url})`;
+        obj.backgroundRepeat = 'no-repeat';
+        obj.backgroundPosition = 'center center';
+        obj.backgroundSize = '100% 100%';
+      } else if (type === 'cleanColor') {
+        obj.backgroundColor = color;
+      }
+      return obj;
+    }
+    return {};
+  }, [backgroundType, imgSrc]);
+  return { backgroundStyle };
+};
+
+export default useBackgroundStyle;