@lingxiteam/ebe-utils 0.6.2 → 0.6.3

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

@@ -1,90 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,186 +0,0 @@
-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

@@ -1,270 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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;