@lingxiteam/ebe-utils 0.0.8 → 0.0.10

package/lib/h5public/src/components/common/BannerModal/index.tsx

@@ -0,0 +1,269 @@
+import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import { LocaleFunction } from '@lingxiteam/types';
+import { useThrottleFn } from 'ahooks';
+import Toast from 'antd-mobile-5/es/components/toast';
+import Animate from 'rc-animate';
+import { FC, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import Loadable from 'react-loadable';
+import closeIcon from './assets/closeIcon.png';
+import downloadIcon from './assets/downloadIcon.png';
+import leftIcon from './assets/leftIcon.png';
+import rightIcon from './assets/rightIcon.png';
+import zoomInIcon from './assets/zoomInIcon.png';
+import zoomOutIcon from './assets/zoomOutIcon.png';
+import './index.less';
+
+export interface BannerModalProps {
+  visible?: boolean;
+  src: string;
+  type: 'Image' | 'Iframe' | string;
+  onClose: () => void;
+  onComplete?: () => void;
+  showDownLad?: boolean;
+  downloadClick?: (url: string) => void;
+  isEnableWaterMark?: boolean;
+  appId: string;
+  fileId: string;
+  pageId: string;
+  fileObj?: any;
+  getLocale: LocaleFunction;
+  doNotShowClose?: boolean;
+  language: string;
+}
+
+export interface BMFC<T> extends FC<T> {
+  open: (props: Omit<T, 'visible'>) => void;
+}
+
+const prefixCls = 'lcdp-bannermodal';
+const PreviewFile = Loadable({
+  loader: async () => {
+    const factoryCom = await import(
+      /* webpackChunkName: "PreviewFile" */ '../PreviewFile/index'
+    );
+    const com: any = factoryCom?.default ?? factoryCom;
+    return com;
+  },
+  loading: () => <></>,
+});
+const BannerModal: BMFC<BannerModalProps> = (props) => {
+  const {
+    visible,
+    src,
+    onClose,
+    onComplete = () => {},
+    showDownLad = false,
+    downloadClick,
+    appId,
+    fileId,
+    pageId,
+    isEnableWaterMark = true,
+    getLocale,
+    doNotShowClose = false,
+    language,
+  } = props;
+  const [exists, setExists] = useState(visible);
+  const mydownloadClick = () => {
+    downloadClick && downloadClick(src);
+  };
+  const [totalPage, setTotalPage] = useState(1);
+  const [pageNum, setPageNum] = useState(1);
+  const [scale, setScale] = useState(0.65);
+  const [pdfDisShow, setPdfDisShow] = useState(false);
+  // 不支持预览文件不展示浮层
+  const [loadedFile, setIsLoadedFile] = useState<boolean>(false);
+  const [fullScreen, setFullScreen] = useState(true);
+
+  const { run } = useThrottleFn(
+    (onClick) => {
+      onClick && onClick();
+    },
+    {
+      wait: 200,
+      trailing: false,
+    },
+  );
+
+  const onDocumentLoadSuccess = ({ numPages }: any) => {
+    setPdfDisShow(true);
+    setTotalPage(numPages);
+  };
+
+  const renderDisBtn = () => {
+    return (
+      <div className="pdf-disbtn">
+        {pdfDisShow && (
+          <>
+            <div
+              className="pdf-bt"
+              onClick={() => {
+                if (pageNum > 1) setPageNum(pageNum - 1);
+              }}
+            >
+              <img src={leftIcon} alt="" />
+            </div>
+            <div className="pdf-bt-text">{`${pageNum}/${totalPage}`}</div>
+            <div
+              className="pdf-bt"
+              onClick={() => {
+                if (pageNum < totalPage) setPageNum(pageNum + 1);
+              }}
+            >
+              <img src={rightIcon} alt="" />
+            </div>
+            <div className="pdf-bt-line" />
+            <div
+              className="pdf-bt"
+              onClick={() => {
+                const onClick = () => {
+                  if (scale <= 0.1) {
+                    Toast.show({
+                      content: getLocale('scaleMin'),
+                      duration: 1500,
+                    });
+                    return;
+                  }
+                  const newScale = (scale * 10 - 0.1 * 10) / 10;
+                  setScale(newScale);
+                };
+                run(onClick);
+              }}
+            >
+              <img src={zoomOutIcon} alt="" />
+            </div>
+            <div className="pdf-bt-text">{`${Math.round(scale * 100)}%`}</div>
+            <div
+              className="pdf-bt"
+              onClick={() => {
+                if (scale >= 2) {
+                  Toast.show({
+                    content: getLocale('scaleMax'),
+                    duration: 1500,
+                  });
+                  return;
+                }
+                const newScale = (scale * 10 + 0.1 * 10) / 10;
+                setScale(newScale);
+              }}
+            >
+              <img src={zoomInIcon} alt="" />
+            </div>
+          </>
+        )}
+        {showDownLad && pdfDisShow && <div className="pdf-bt-line" />}
+        {showDownLad && (
+          <div className="pdf-bt" onClick={mydownloadClick}>
+            <img src={downloadIcon} alt="" />
+          </div>
+        )}
+      </div>
+    );
+  };
+  return (
+    <div
+      className={
+        exists
+          ? `${prefixCls}-mask ${prefixCls}-${
+              fullScreen ? 'fullScreen' : 'modal'
+            }`
+          : ''
+      }
+    >
+      <Animate
+        transitionName={prefixCls}
+        component="div"
+        onEnd={(key: string, exist: boolean) => {
+          setExists(exist);
+          if (!exist) {
+            onComplete();
+          }
+        }}
+      >
+        {visible && (
+          <div
+            className={
+              loadedFile ? `${prefixCls} ${prefixCls}-with-mask` : prefixCls
+            }
+          >
+            <div className={`${prefixCls}-content`}>
+              {loadedFile && !doNotShowClose && (
+                <span
+                  className={`${prefixCls}-left-icon`}
+                  onClick={() => {
+                    setFullScreen((pre) => !pre);
+                  }}
+                >
+                  <LegacyIcon
+                    type={!fullScreen ? 'fullscreen' : 'fullscreen-exit'}
+                  />
+                </span>
+              )}
+              {loadedFile && !doNotShowClose && (
+                <div
+                  className={`${prefixCls}-content-closeIcon`}
+                  onClick={onClose}
+                >
+                  <img src={closeIcon} alt="" />
+                </div>
+              )}
+              <PreviewFile
+                // @ts-ignore
+                appId={appId}
+                fileId={fileId}
+                pageId={pageId}
+                isEnableWaterMark={isEnableWaterMark}
+                file={src}
+                onClose={onClose}
+                pdfInfo={{ pageNum, scale, onDocumentLoadSuccess }}
+                // 不支持预览文件不展示浮层
+                onLoaded={setIsLoadedFile}
+                getLocale={getLocale}
+                language={language}
+              />
+              {(pdfDisShow || showDownLad) && renderDisBtn()}
+            </div>
+          </div>
+        )}
+      </Animate>
+    </div>
+  );
+};
+
+BannerModal.open = (props) => {
+  let closed = false;
+
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+
+  function close() {
+    ReactDOM.unmountComponentAtNode(div);
+    if (div && div.parentNode) {
+      div.parentNode.removeChild(div);
+    }
+  }
+
+  ReactDOM.render(
+    (() => {
+      return (
+        <BannerModal
+          visible
+          {...props}
+          onClose={() => {
+            if (closed) {
+              return;
+            }
+            closed = true;
+            close();
+            if (props.onClose) {
+              props.onClose();
+            }
+          }}
+        />
+      );
+    })(),
+    div,
+  );
+};
+
+export default BannerModal;

package/lib/h5public/src/components/common/DocViewer/DocViewer.tsx

@@ -0,0 +1,88 @@
+import jspreviewExcel from '@js-preview/excel';
+import '@js-preview/excel/lib/index.css';
+import { SpinLoading } from 'antd-mobile-5';
+import { renderAsync as docxRenderAsync } from 'docx-preview';
+import React, { useEffect, useRef, useState } from 'react';
+import './index.less';
+
+const prefixCls = 'lcdp-docviewer';
+
+interface ViewerProps {
+  docData?: Blob;
+  docUrl?: string;
+  type?: string;
+}
+
+const Viewer: React.FC<ViewerProps> = (props) => {
+  const { docData, docUrl, type } = props;
+  const viewRef = useRef(null);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (docData) {
+      switch (type) {
+        case 'WORD':
+          if (docData?.name) {
+            setLoading(true);
+            const xhr = new XMLHttpRequest();
+            xhr.open('GET', docData.name, true);
+            xhr.responseType = 'arraybuffer';
+            xhr.onload = () => {
+              setLoading(false);
+              if (xhr.status === 200) {
+                docxRenderAsync(
+                  xhr.response,
+                  viewRef.current as any,
+                  undefined,
+                  { inWrapper: false },
+                );
+              }
+            };
+            xhr.onerror = () => {
+              setLoading(false);
+              // eslint-disable-next-line
+              console.log('文件预览失败：', xhr.status);
+            };
+            xhr.send();
+          } else {
+            docxRenderAsync(docData, viewRef.current as any, undefined, {
+              inWrapper: false,
+            });
+          }
+          break;
+
+        case 'EXCEL':
+          {
+            const previewData = docData?.name ? docUrl : docData;
+            setLoading(true);
+            jspreviewExcel
+              .init(viewRef.current as any)
+              .preview(previewData || '')
+              .then(() => {
+                setLoading(false);
+              })
+              .catch((e) => {
+                setLoading(false);
+                // eslint-disable-next-line
+                console.log('文件预览失败：', e);
+              });
+          }
+          break;
+        case 'MARKDOWN':
+          break;
+        default:
+          break;
+      }
+    }
+  }, [docData]);
+
+  return (
+    <div className={prefixCls} ref={viewRef}>
+      {loading && (
+        <SpinLoading style={{ '--size': '48px' }} className="spin-loading" />
+      )}
+    </div>
+  );
+};
+
+export default Viewer;

package/lib/h5public/src/components/common/DocViewer/index.less

@@ -0,0 +1,21 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+@prefixCls: lcdp-docviewer;
+
+.@{prefixCls} {
+  position: relative;
+  margin: 40* @hd 20 * @hd;
+  height: 100%;
+  // padding: 30 * @hd 0;
+  overflow: scroll;
+  background-color: #ffffff;
+
+  .vue-office-excel .x-spreadsheet-sheet {
+    width: 100% !important;
+  }
+  .spin-loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1000;
+  }
+}

package/lib/h5public/src/components/common/DocViewer/index.tsx

@@ -0,0 +1,11 @@
+import Loadable from 'react-loadable';
+
+const DocViewer = Loadable({
+  loader: async () =>
+    (await import(
+      /* webpackChunkName: "engine-app-DocViewer" */ './DocViewer'
+    )) as unknown as React.ComponentType<any>,
+  loading: () => <></>,
+});
+
+export default DocViewer;

package/lib/h5public/src/components/common/PreviewFile/index.less

@@ -0,0 +1,135 @@
+@import '~@lingxiteam/antd-mobile-v2-theme/es/index.less';
+@prefixCls: lcdp-preview;
+
+.@{prefixCls} {
+  &-wrapPic {
+    display: flex;
+    align-items: center; /*垂直居中*/
+    justify-content: center; /*水平居中*/
+    height: auto !important;
+    // min-height: 100%;
+  }
+  &-wrap {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    overflow: scroll;
+    // background-color: #fff;
+    .content {
+      width: 100%;
+      height: 100%;
+      padding: 30 * @hd;
+      .code {
+        height: 100%;
+        padding: 10 * @hd;
+        overflow-y: auto;
+        white-space: pre;
+        background-color: #fff;
+        border: 1 * @hd solid rgba(0, 0, 0, 0.15);
+      }
+    }
+    .ppt {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      padding: 30 * @hd;
+      text-align: center;
+      .adm-mask {
+        background: transparent !important;
+      }
+      .pptList {
+        padding-right: 10 * @hd;
+        overflow-y: auto;
+        border-right: 3 * @hd solid rgb(200, 200, 200);
+      }
+      .selectedImg {
+        flex: 1;
+        padding-left: 20 * @hd;
+        img {
+          max-width: calc(100% - 20 * @hd);
+          max-height: calc(100% - 20 * @hd);
+          padding: 4 * @hd;
+          -webkit-box-shadow: 0 0 10 * @hd 3 * @hd #888;
+          box-shadow: 0 0 10 * @hd 3 * @hd #888;
+        }
+      }
+      .pptImgs {
+        img {
+          max-width: 200 * @hd;
+          max-height: 110 * @hd;
+          padding: 4 * @hd;
+          border: 3 * @hd solid #ddd;
+        }
+      }
+      .selected {
+        img {
+          border: 3 * @hd solid darkorange !important;
+        }
+      }
+    }
+    .iframe {
+      width: 90%;
+      height: 80%;
+      border: medium none;
+      background-color: white;
+      margin: 0 auto;
+    }
+  
+    .preview_html {
+      width: 100%;
+      height: 100%;
+      padding: 30 * @hd 0;
+      overflow: scroll;
+    }
+
+    .preview_docx {
+      margin: 40* @hd 20 * @hd;
+      height: 100%;
+      padding: 30 * @hd 0;
+      overflow: scroll;
+      background-color: #ffffff;
+    }
+  
+    .preview_content {
+      img {
+        width: 100%;
+      }
+    }
+  
+    .pdf-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 30 * @hd 0;
+      overflow: hidden;
+  
+      .react-pdf__Document {
+        max-width: 100%;
+        height: 100%;
+        margin: 0 auto;
+        overflow: scroll;
+      }
+  
+      .react-pdf__Page__textContent {
+        display: none;
+      }
+      .react-pdf__Page__annotations {
+        display: none;
+      }
+      .pdf-content {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+
+    .adm-mask {
+      overflow: hidden;
+    }
+  }
+}