@lingxiteam/ebe-utils 0.6.2 → 0.6.3

package/lib/public/src/components/common/PreviewFile/index.tsx

@@ -1,787 +0,0 @@
-import api from '@/services/api/file';
-import {
-  DownOutlined,
-  RotateLeftOutlined,
-  RotateRightOutlined,
-} from '@ant-design/icons';
-import { Cascader, message, Spin } from 'antd';
-import classnames from 'classnames';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import pageIcon from '../../../assets/pageicon';
-// @ts-ignore
-import { Document, Page, pdfjs } from 'react-pdf';
-// @ts-ignore
-import pdfworker from 'react-pdf/dist/pdf.worker.entry';
-import './index.less';
-// @ts-ignore
-import { addFileUrlSign, useCreation } from '@/utils/engine-utils';
-
-import security from '@/utils/Security';
-
-import { LocaleFunction } from '@lingxiteam/types';
-import {
-  CAN_SCALE,
-  isUrlFormat,
-  LOCAL_PREVIEW,
-  parseFileInfo,
-  PREVIEW_MODE,
-} from './utils';
-
-interface PreviewFileProps {
-  // appId: string;
-  fileIdOrUrl: string;
-  // pageId: string;
-  file?: any;
-  showDownLoad?: boolean;
-  downloadClick?: (file: any) => void;
-  showDelete?: boolean;
-  deleteClick?: (url: string) => void;
-  windowWidth?: number;
-  getLocale: LocaleFunction;
-  language: string;
-}
-
-type fileItem = {
-  fileId?: string;
-  name?: string;
-  filePath?: string;
-  fullFilePath?: string[];
-  [key: string]: any;
-};
-
-pdfjs.GlobalWorkerOptions.workerSrc = pdfworker;
-const prefix = 'lcdp-previewFile';
-const PreviewFile: React.FC<PreviewFileProps> = (props) => {
-  const {
-    fileIdOrUrl,
-    // pageId,
-    file,
-    downloadClick,
-    showDownLoad,
-    showDelete,
-    deleteClick,
-    getLocale,
-    language,
-  } = props;
-  // const { appId } = props;
-  // const api = getApis({ appId, language, pageId });
-  const [fileDataMap, setFileDataMap] = useState<any>({});
-  const [loading, setLoading] = useState(false);
-  // 预览失败信息
-  const [resultInfo, setResultInfo] = useState<any>();
-  const [windowWidth, setWindowWidth] = useState<number>(
-    props?.windowWidth || window.innerWidth,
-  );
-  const tip = getLocale('notSupportPreview', '该文件不支持当前窗口预览');
-  const timeId = useRef<any>(null);
-  const [curPreviewFile, setCurPreviewFile] = useState<fileItem>();
-  // 当前预览文件信息
-  const { currentFileData, fileData } = useMemo(() => {
-    // 当前预览文件ID，ZIP预览时会切换当前预览的文件
-    const { fileId } = curPreviewFile || {};
-    let curData = fileId ? fileDataMap[fileId] : undefined;
-    if (curData?.previewMode === PREVIEW_MODE.ZIP && curData.zipChildFileId) {
-      curData = fileDataMap[curData.zipChildFileId] || curData;
-    }
-    // 当前打开文件的Id
-    const curFileId = fileIdOrUrl || file?.fileId;
-    return {
-      currentFileData: curData,
-      fileData: fileDataMap[curFileId],
-    };
-  }, [file, fileIdOrUrl, fileDataMap, curPreviewFile]);
-
-  // 是否支持放大缩小、旋转、切换页面
-  const pageSwitch = useMemo(
-    () => CAN_SCALE.includes(currentFileData?.previewMode),
-    [currentFileData?.previewMode],
-  );
-
-  const fileCacheMap = useCreation(() => fileDataMap, [fileDataMap]);
-
-  const {
-    pageNum,
-    setPageNum,
-    scale,
-    setScale,
-    rotation,
-    setRotation,
-    updateCurrentFileData,
-  } = useCreation(() => {
-    const updateData = (key: string, newVal: any | ((preVal: any) => any)) => {
-      const id = currentFileData?.fileId;
-      setFileDataMap((pre: any) => ({
-        ...pre,
-        [id]: {
-          ...(pre[id] || {}),
-          [key]: typeof newVal === 'function' ? newVal(pre[id]?.[key]) : newVal,
-        },
-      }));
-    };
-    return {
-      // pdf/ppt/doc等文件会转成多张图片，切换文件页码
-      pageNum: currentFileData?.pageNum || 1,
-      setPageNum: (newVal: any) => updateData('pageNum', newVal || 1),
-      // 放大缩小比例
-      scale: currentFileData?.scale || 0.7,
-      setScale: (newVal: any) => updateData('scale', newVal || 0.7),
-      rotation: currentFileData?.rotation,
-      setRotation: (angle?: number) =>
-        updateData(
-          'rotation',
-          (rotation: any) => ((rotation || 0) + angle) % 360,
-        ),
-      updateCurrentFileData: updateData,
-    };
-  }, [currentFileData]);
-
-  const throttle = (fn: any) => (v?: any) => {
-    if (!timeId?.current) {
-      timeId.current = setTimeout(() => {
-        fn(v);
-        clearTimeout(timeId.current);
-        timeId.current = null;
-      }, 500);
-    }
-  };
-
-  const handleOnResize = () => {
-    setWindowWidth(window.innerWidth);
-  };
-
-  const onResizeThrottle = useCallback(() => {
-    return throttle(handleOnResize)();
-  }, []);
-
-  useEffect(() => {
-    const resize = () => {
-      onResizeThrottle();
-    };
-    window.addEventListener('resize', resize);
-    return () => {
-      window.removeEventListener('resize', resize);
-      if (timeId.current) {
-        clearTimeout(timeId.current);
-      }
-    };
-  }, []);
-
-  const getFilePreviewUrl = (id: string) =>
-    /^\d+$/.test(id) ? api.previewFileById(id) : id;
-
-  // 签名每次会增加一个时间戳，需要缓存url
-  const filePreviewUrl = useMemo(() => {
-    let url =
-      currentFileData?.serverFileUrl ||
-      currentFileData?.data?.dataUrl ||
-      currentFileData?.data?.url;
-
-    if (url) return url;
-    if (currentFileData?.serverFileId) {
-      url = getFilePreviewUrl(currentFileData?.serverFileId);
-      currentFileData.serverFileUrl = url;
-    } else {
-      url = getFilePreviewUrl(currentFileData?.fileId);
-    }
-    return url;
-  }, [currentFileData?.fileId]);
-
-  // 下载当前文件
-  const mydownloadClick = () => {
-    if (file) {
-      downloadClick && downloadClick(file);
-    }
-  };
-
-  const renderIMG = (src: string) => {
-    return <img width={windowWidth * 0.5 * scale} src={src} alt="" />;
-  };
-
-  // 根据下载接口获取文件，判断文件类型是否可以预览
-  const getFileData = (fileId: string): Promise<any> => {
-    const url = isUrlFormat(fileId) ? fileId : getFilePreviewUrl(fileId);
-    if (url) {
-      const xhr = new XMLHttpRequest(); // ActiveXObject只存在于IE7及以下，无需兼容
-      xhr.open('GET', url);
-      xhr.responseType = 'blob'; // 设置接受类型
-
-      const headers: any = {
-        // 'X-B-TARGET-ID': pageId,
-        'X-B-AUTH': '1',
-        // 'APP-ID': props?.appId,
-      };
-      Object.keys(headers).forEach((header) => {
-        xhr.setRequestHeader(header, headers[header]); // 设置请求头参数
-      });
-      xhr.setRequestHeader(
-        'X-SIGN',
-        security.httpEncryption.createHttpSignStr(url, {
-          method: 'GET',
-          headers,
-          body: '',
-          search: '',
-        }),
-      );
-      xhr.withCredentials = true;
-      return new Promise((resolve, reject) => {
-        xhr.onload = () => {
-          const data = xhr.response; // 获取响应体数据
-          if (xhr.status === 200) {
-            const position = xhr.getResponseHeader('Content-Disposition');
-            const filename = position?.match(/filename\*?=[^;]*/)?.[0];
-            if (filename) {
-              data.name = filename;
-            }
-            data.url = url;
-            try {
-              const reader = new FileReader();
-              reader.addEventListener('load', () => {
-                data.dataUrl = reader.result;
-                resolve(data);
-              });
-              reader.readAsDataURL(data);
-            } catch (e) {
-              resolve(data);
-            }
-          }
-        };
-        xhr.onerror = () => {
-          const previewUrl = new URL(url);
-          if (previewUrl.origin !== window.location.origin) {
-            // 非同源的根据url后缀判断
-            resolve({
-              name: url,
-              cors: true,
-            });
-          }
-          setResultInfo(tip);
-          reject();
-        };
-        xhr.onloadend = () => {
-          if (xhr.status === 404) {
-            setResultInfo(getLocale('fileNotExist', '文件资源不存在'));
-            reject();
-          }
-        };
-        xhr.send();
-      });
-    }
-    return Promise.resolve(null);
-  };
-
-  // 获取zip压缩文件目录
-  const getZipFileDir = async (fileItem: fileItem) => {
-    try {
-      const id = fileItem?.fileId;
-      if (!id) return undefined;
-      setLoading(true);
-      const zipDir = await api.getZipFileNode({ sourceFileId: id });
-      return {
-        ...fileItem,
-        zipDir,
-      };
-    } catch (e) {
-      return undefined;
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  // 校验是否为指定格式
-  // 部分格式后端不支持预览转换，由前端处理
-  const checkPreview = async (fileItem: fileItem) => {
-    let fileInfo: fileItem = fileItem;
-    // 切换文件时优先从缓存取，若无则重新加载
-    const fileData = fileCacheMap[fileInfo?.fileId!];
-    let fileBlob: File & {
-      cors: boolean;
-      name: string;
-    } = fileData?.data;
-    if (fileInfo?.fileId && !fileData) {
-      try {
-        fileBlob = await getFileData(fileInfo?.fileId);
-      } catch (error) {
-        console.error('预览文件时候错误error', error);
-      }
-    }
-    let target = LOCAL_PREVIEW.find((val) => {
-      if (
-        val.suffix?.test(
-          fileInfo?.name || fileBlob?.name || fileInfo?.fileId || '',
-        ) ||
-        val.mimeTypeReg?.test(fileBlob?.type || '')
-      ) {
-        fileInfo.previewMode = val.previewMode;
-        if (fileBlob?.cors && !val.cors) {
-          // 预览跨域文件地址且无法通过平台定制方式预览的，通过iframe展示
-          fileInfo.previewMode = PREVIEW_MODE.IFRAME;
-        }
-        return true;
-      }
-      return false;
-    });
-    if (target?.previewMode === PREVIEW_MODE.TXT && fileBlob instanceof Blob) {
-      if (fileBlob?.text) {
-        // 兼容ie11
-        fileInfo.content = await fileBlob.text();
-      } else {
-        target = undefined;
-      }
-    }
-    if (target?.previewMode === PREVIEW_MODE.ZIP && !fileData) {
-      // ZIP 预览需要特殊处理,先获取zip文件的目录结构，在分层进行预览
-      const zipInfo = await getZipFileDir(fileInfo);
-      if (!zipInfo) return undefined;
-      fileInfo = zipInfo;
-    }
-    if (target && fileInfo) {
-      fileInfo.data = fileBlob;
-      setFileDataMap((pre: any) => ({
-        ...pre,
-        [fileInfo?.fileId!]: {
-          ...(pre[fileInfo?.fileId!] || {}),
-          ...fileInfo,
-        },
-      }));
-    }
-    return target;
-  };
-
-  const getFileInfo = async (fileItem: fileItem) => {
-    setLoading(true);
-    try {
-      const target = await checkPreview({
-        fileId: fileItem.fileId,
-        name: fileItem?.name,
-      });
-      if (target) {
-        setLoading(false);
-        return;
-      }
-      await getFile(fileItem);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const viewFile = async (fileItem: fileItem, viewSource?: string) => {
-    if (!fileItem) return undefined;
-    switch (viewSource) {
-      // 来源压缩包子文件预览处理
-      case PREVIEW_MODE.ZIP: {
-        const { zipSourceFileId, filePath } = fileItem || {};
-        // 预览zip 子文件
-        const fileInfo = await api.viewZipFile({
-          filePath,
-          sourceFileId: zipSourceFileId,
-        });
-        return fileInfo;
-      }
-      default: {
-        // 常规文件预览处理
-        const id = fileItem.fileId;
-        if (!id) return undefined;
-        let fileInfo = fileCacheMap[id];
-        const isUrl = isUrlFormat(id);
-        // 当传入的fileIdOrUrl是合法的网络地址时，则视为外部地址，所有不支持浏览器直接预览
-        if (!fileInfo && !isUrl) {
-          fileInfo = await api.viewFile({
-            fileId: id,
-            // appId,
-            // pageId
-          });
-        }
-        return fileInfo;
-      }
-    }
-  };
-
-  // 根据平台预览接口获取转换后的文件格式
-  const getFile = async (fileItem: fileItem, viewSource?: string) => {
-    setLoading(true);
-    let fileInfo: any = null;
-    try {
-      fileInfo = await viewFile(fileItem, viewSource);
-      if (fileInfo && fileInfo?.resultCode !== '-2') {
-        const id = fileItem?.fileId;
-        if (id) {
-          // 根据预览接口返回参数补充文件参数
-          fileInfo = parseFileInfo(fileItem, fileInfo);
-          setFileDataMap((pre: any) => ({
-            ...pre,
-            [id]: {
-              // 切换文件的时候使用上一次的旋转
-              rotation: pre?.[fileInfo?.fileId]?.rotation,
-              ...fileInfo,
-            },
-          }));
-        }
-      } else if (!fileInfo?.previewMode) {
-        setResultInfo(tip);
-      }
-    } catch (e: any) {
-      const { resultCode } = e;
-      if (resultCode === '-2') {
-        if (!fileInfo?.previewMode) {
-          setResultInfo(tip);
-        }
-      } else {
-        setResultInfo(e.resultMsg);
-      }
-    } finally {
-      setLoading(false);
-    }
-    return fileInfo;
-  };
-
-  const initFile = async (curFile: fileItem) => {
-    setCurPreviewFile(curFile);
-    if (curFile?.fileId) {
-      await getFileInfo(curFile);
-    }
-  };
-
-  useEffect(() => {
-    const curFile: fileItem = {
-      ...(file || {}),
-      fileId: file?.fileId || fileIdOrUrl,
-    };
-    initFile(curFile);
-  }, [file, fileIdOrUrl]);
-
-  const renderPPT = () => {
-    return (
-      <div className="preview_content ppt">
-        {renderIMG(getFilePreviewUrl(currentFileData?.fileIdList[pageNum - 1]))}
-      </div>
-    );
-  };
-  const renderContent = () => (
-    <div className="preview_content txt">
-      <div className="code">{currentFileData?.content}</div>
-    </div>
-  );
-
-  const renderPDF = (fileUrl: string) => {
-    return (
-      <div className="pdf-container">
-        <Document
-          file={fileUrl}
-          loading={
-            <div className="pdf-loading">
-              <Spin size="large" />
-            </div>
-          }
-          options={{
-            cMapUrl: 'cmaps/',
-            cMapPacked: true,
-          }}
-          onLoadSuccess={onDocumentLoadSuccess}
-        >
-          <Page
-            pageNumber={pageNum}
-            width={windowWidth * 0.5}
-            scale={scale}
-            loading={
-              <div className="pdf-loading">
-                <Spin size="large" />
-              </div>
-            }
-          />
-        </Document>
-      </div>
-    );
-  };
-
-  const render = () => {
-    switch (currentFileData?.previewMode) {
-      case PREVIEW_MODE.IMG:
-        return renderIMG(filePreviewUrl);
-      case PREVIEW_MODE.PDF:
-        return renderPDF(filePreviewUrl);
-      case PREVIEW_MODE.HTML:
-        // eslint-disable-next-line react/no-danger
-        return (
-          <div className="preview_content">
-            <iframe
-              ref={(r) => {
-                if (r?.contentDocument?.write) {
-                  // r.contentDocument?.write(addFileUrlSign(currentFileData?.content));
-                  // r.contentDocument?.close?.();
-                  // contentDocument.write 会直接往内存里面写，如果数据量较大会导致浏览器内存溢出，用其他方法修改下
-                  const content = addFileUrlSign(currentFileData?.content);
-                  const blob = new Blob([content], { type: 'text/html' });
-                  const url = URL.createObjectURL(blob);
-                  r.src = url;
-                }
-              }}
-              title={getLocale('preview', '预览')}
-              style={{
-                backgroundColor: '#fff',
-                overflow: 'auto',
-                height: '80vh',
-                width: '50vw',
-              }}
-            />
-          </div>
-        );
-      case PREVIEW_MODE.VIDEO:
-        return (
-          <div className="preview_content">
-            <video
-              src={getFilePreviewUrl(currentFileData?.fileId)}
-              loop
-              height="100%"
-              width={windowWidth * 0.8}
-              autoPlay={!loading}
-              muted
-            />
-          </div>
-        );
-      case PREVIEW_MODE.PPT:
-        return renderPPT();
-      case PREVIEW_MODE.TXT:
-        return renderContent();
-      case PREVIEW_MODE.IFRAME:
-        return (
-          <div className="preview_content">
-            <iframe
-              src={getFilePreviewUrl(currentFileData?.fileId)}
-              key={currentFileData?.fileId}
-              title={currentFileData?.name}
-              className="iframe"
-            />
-          </div>
-        );
-      default: {
-        let info = resultInfo;
-        let tips = '';
-        if (PREVIEW_MODE.ZIP === currentFileData?.previewMode) {
-          info = getLocale(
-            'zipPreviewTitle',
-            '当前预览内容为压缩包，不支持直接预览',
-          );
-          tips = getLocale(
-            'zipPreviewTips',
-            '请在下方选择压缩包内文件进行预览',
-          );
-        }
-        if (info) {
-          return (
-            <div className="error">
-              <div className="error-title">{info}</div>
-              {tips && <div className={`${prefix}-error-tips`}>{tips}</div>}
-            </div>
-          );
-        }
-        return null;
-      }
-    }
-  };
-
-  const onDocumentLoadSuccess = (params: any) => {
-    const { numPages } = params || {};
-    updateCurrentFileData('totalPage', numPages);
-  };
-
-  // 预览zip包里面的文件
-  const handlePreviewZipFile = async (val: any[], selectOptions: any[]) => {
-    if (val) {
-      const filePath = [...val].pop();
-      // 防止多次点击同一个文件
-      if (filePath === currentFileData?.fullFilePath) return;
-      const zipSourceFileId = file?.id || fileIdOrUrl;
-      const fileItem: fileItem = {
-        filePath,
-        fullFilePath: val,
-        fullFilePathName: selectOptions.map((opt) => opt.fileName),
-        zipSourceFileId,
-        // zip包内的文件部分后端转换后，不一定能返回fileId，根据zip的fileId和filePath临时生成一个用来渲染
-        fileId: `${zipSourceFileId}_${filePath}`,
-      };
-      let fileInfo = fileItem;
-      try {
-        // 预览当前文件
-        fileInfo = await getFile(fileItem, PREVIEW_MODE.ZIP);
-      } catch (e) {
-        //
-      }
-      setFileDataMap((pre: any) => ({
-        ...pre,
-        [zipSourceFileId]: {
-          ...(pre[zipSourceFileId] || {}),
-          zipChildFileId: fileInfo?.fileId,
-        },
-      }));
-      setCurPreviewFile(fileInfo);
-    }
-  };
-
-  const renderDisBtn = () => {
-    return (
-      <div className="pdf-disbtn" onClick={(e) => e.stopPropagation()}>
-        {fileData?.previewMode === PREVIEW_MODE.ZIP && (
-          <Cascader
-            placement="topLeft"
-            onChange={handlePreviewZipFile}
-            fieldNames={{
-              label: 'fileName',
-              value: 'filePath',
-              children: 'children',
-            }}
-            value={currentFileData?.fullFilePath}
-            dropdownClassName={`${prefix}-dropdown`}
-            options={fileData?.zipDir ? [fileData.zipDir] : []}
-          >
-            <div
-              className={classnames(`${prefix}-zip-select`, `${prefix}-group`)}
-            >
-              <span className={`${prefix}-zip-select-label`}>
-                {currentFileData?.fileId !== fileData?.fileId &&
-                currentFileData?.fullFilePathName
-                  ? currentFileData?.fullFilePathName?.join('/')
-                  : getLocale(
-                      'zipPreviewPlaceholder',
-                      '请选择包内文件进行预览',
-                    )}
-              </span>
-              <DownOutlined rev="" />
-            </div>
-          </Cascader>
-        )}
-        {pageSwitch && (
-          <>
-            <div className={`${prefix}-group`}>
-              <div
-                className="pdf-bt"
-                onClick={() => {
-                  if (pageNum > 1) setPageNum(pageNum - 1);
-                }}
-              >
-                <img src={pageIcon.leftIcon} alt="" />
-              </div>
-              <div className="pdf-bt-text">{`${pageNum}/${
-                currentFileData?.totalPage || 1
-              }`}</div>
-              <div
-                className="pdf-bt"
-                onClick={() => {
-                  if (pageNum < (currentFileData?.totalPage || 1))
-                    setPageNum(pageNum + 1);
-                }}
-              >
-                <img src={pageIcon.rightIcon} alt="" />
-              </div>
-            </div>
-            <div className={`${prefix}-group`}>
-              <div
-                className="pdf-bt"
-                onClick={() => {
-                  if (scale <= 0.1) {
-                    message.info(getLocale('scaleMin'));
-                    return;
-                  }
-                  const newScale = (scale * 10 - 0.1 * 10) / 10;
-                  setScale(newScale);
-                }}
-              >
-                <img src={pageIcon.zoomOutIcon} alt="" />
-              </div>
-              <div className="pdf-bt-text">{`${Math.round(scale * 100)}%`}</div>
-              <div
-                className="pdf-bt"
-                onClick={() => {
-                  if (scale >= 2) {
-                    message.info(getLocale('scaleMax'));
-                    return;
-                  }
-                  const newScale = (scale * 10 + 0.1 * 10) / 10;
-                  setScale(newScale);
-                }}
-              >
-                <img src={pageIcon.zoomInIcon} alt="" />
-              </div>
-            </div>
-            <div className={`${prefix}-group`}>
-              <div
-                className="pdf-bt"
-                onClick={() => {
-                  setRotation(-90);
-                }}
-              >
-                <RotateLeftOutlined rev="" />
-              </div>
-              <div
-                className="pdf-bt"
-                onClick={() => {
-                  setRotation(90);
-                }}
-              >
-                <RotateRightOutlined rev="" />
-              </div>
-            </div>
-          </>
-        )}
-        {(showDownLoad || showDelete) && (
-          <div className={`${prefix}-group`}>
-            {showDownLoad && (
-              <div className="pdf-bt" onClick={mydownloadClick}>
-                <img src={pageIcon.downloadIcon} alt="" />
-              </div>
-            )}
-            {showDelete && (
-              <div
-                className="pdf-bt"
-                onClick={() => {
-                  if (typeof deleteClick === 'function') {
-                    deleteClick(file);
-                  }
-                }}
-              >
-                <img src={pageIcon.deleteIcon} alt="" />
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    );
-  };
-
-  return (
-    <div
-      className={classnames(`${prefix}-wrap`, {
-        [`${prefix}-wrapPic`]:
-          currentFileData?.previewMode === PREVIEW_MODE.IMG || loading,
-      })}
-    >
-      <Spin size="large" spinning={loading} />
-      <div
-        className="content"
-        onClick={(e) => e.stopPropagation()}
-        style={
-          currentFileData?.previewMode
-            ? {
-                transform: `rotate(${rotation || 0}deg)`,
-              }
-            : undefined
-        }
-      >
-        {!loading && render()}
-      </div>
-      {renderDisBtn()}
-    </div>
-  );
-};
-
-PreviewFile.defaultProps = {
-  // eslint-disable-next-line react/default-props-match-prop-types
-  getLocale: (_l, t) => t ?? '',
-};
-
-export default PreviewFile;