ydb-components-material 0.1.195 → 0.1.197

package/es/components/sign-file/mobile.js

@@ -0,0 +1,158 @@
+import _Loading from "@alifd/next/es/loading";
+import React from 'react';
+import previewIcon from "./icon/preview.svg";
+import downloadIcon from "./icon/download.svg";
+import fileIcon from "./icon/file.svg";
+import closeIcon from "./icon/close.svg";
+import SignPage from "../file-list/sign";
+import SealPage from "../file-list/seal";
+import { useSignFile } from "./useSignFile";
+import "./index.scss";
+var SignFileMobile = function SignFileMobile(props) {
+  var style = props.style,
+    toSign = props.toSign,
+    userInfo = props.userInfo,
+    token = props.token,
+    tokenTY = props.tokenTY,
+    accessToken = props.accessToken,
+    baseUrl = props.baseUrl,
+    env = props.env,
+    isPC = props.isPC,
+    parentPageUrl = props.parentPageUrl;
+  var _useSignFile = useSignFile(props, {
+      withThumbnail: true
+    }),
+    fileName = _useSignFile.fileName,
+    originalFileId = _useSignFile.originalFileId,
+    guideImg = _useSignFile.guideImg,
+    thumbnail = _useSignFile.thumbnail,
+    loading = _useSignFile.loading,
+    isShowSignPage = _useSignFile.isShowSignPage,
+    isShowSealPage = _useSignFile.isShowSealPage,
+    isShowPreview = _useSignFile.isShowPreview,
+    isShowGuide = _useSignFile.isShowGuide,
+    previewIframeUrl = _useSignFile.previewIframeUrl,
+    guideurl = _useSignFile.guideurl,
+    sealedFile = _useSignFile.sealedFile,
+    hasSigned = _useSignFile.hasSigned,
+    fileCopy = _useSignFile.fileCopy,
+    preview = _useSignFile.preview,
+    onDownload = _useSignFile.onDownload,
+    showGuide = _useSignFile.showGuide,
+    seal = _useSignFile.seal,
+    getSealRes = _useSignFile.getSealRes,
+    closeSignPage = _useSignFile.closeSignPage,
+    closeSealPage = _useSignFile.closeSealPage,
+    closePreview = _useSignFile.closePreview,
+    closeGuide = _useSignFile.closeGuide,
+    stopLoading = _useSignFile.stopLoading;
+  return /*#__PURE__*/React.createElement(_Loading, {
+    tip: '加载中...',
+    fullScreen: true,
+    visible: loading
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sign_file_main",
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sign_file_item"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "file"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "file_img"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "filed"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "small_img",
+    style: !thumbnail ? {
+      width: '30px',
+      height: '30px'
+    } : {},
+    src: thumbnail || fileIcon,
+    alt: ""
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "operation"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "btn"
+  }, guideImg && /*#__PURE__*/React.createElement("div", {
+    className: "img_btn",
+    onClick: showGuide
+  }, "\u7B7E\u7AE0\u5F15\u5BFC")))), /*#__PURE__*/React.createElement("div", {
+    className: "file_item_bottom",
+    style: {
+      justifyContent: 'space-around'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "icon_text",
+    onClick: preview
+  }, /*#__PURE__*/React.createElement("img", {
+    src: previewIcon,
+    alt: ""
+  }), "\u9884\u89C8"), /*#__PURE__*/React.createElement("div", {
+    className: "line"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "icon_text",
+    onClick: onDownload
+  }, /*#__PURE__*/React.createElement("img", {
+    src: downloadIcon,
+    alt: ""
+  }), "\u4E0B\u8F7D")), isShowSignPage && /*#__PURE__*/React.createElement(SignPage, {
+    toSign: toSign,
+    isShowSignPage: isShowSignPage,
+    userInfo: userInfo,
+    file: sealedFile || fileCopy.current,
+    token: token,
+    tokenTY: tokenTY,
+    baseUrl: baseUrl,
+    env: env,
+    isPC: isPC,
+    handleClose: closeSignPage,
+    closeLoading: stopLoading,
+    showClose: false,
+    parentPageUrl: parentPageUrl,
+    originalFileId: originalFileId,
+    isReSign: hasSigned
+  }), isShowSealPage && /*#__PURE__*/React.createElement(SealPage, {
+    showClose: false,
+    isShowSealPage: isShowSealPage,
+    userInfo: userInfo,
+    file: fileCopy.current,
+    token: token,
+    tokenTY: tokenTY,
+    baseUrl: baseUrl,
+    env: env,
+    isPC: isPC,
+    getSealRes: getSealRes,
+    accessToken: accessToken,
+    handleClose: closeSealPage,
+    closeLoading: stopLoading
+  }), isShowPreview && /*#__PURE__*/React.createElement("div", {
+    className: "preview"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "close",
+    src: closeIcon,
+    alt: "",
+    onClick: closePreview
+  }), /*#__PURE__*/React.createElement("iframe", {
+    src: previewIframeUrl + '#toolbar=0&navpanes=0&scrollbar=0&messages=0&statusbar=0',
+    frameBorder: "0",
+    height: "600px",
+    width: "100%"
+  })), isShowGuide && /*#__PURE__*/React.createElement("div", {
+    className: "preview"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "close",
+    src: closeIcon,
+    alt: "",
+    onClick: closeGuide
+  }), /*#__PURE__*/React.createElement("img", {
+    src: guideurl,
+    style: {
+      width: '100%'
+    }
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "sign_btn",
+    onClick: seal
+  }, hasSigned ? '重新签署' : '签署文件')));
+};
+SignFileMobile.displayName = 'SignFileMobile';
+export default SignFileMobile;

package/es/components/sign-file/pc.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SignFileProps } from './useSignFile';
+import './pc.scss';
+export interface SignFilePcProps extends SignFileProps {
+    /**
+     * 面板标题
+     */
+    title?: string;
+}
+declare const SignFilePc: React.FC<SignFilePcProps>;
+export default SignFilePc;

package/es/components/sign-file/pc.js

@@ -0,0 +1,163 @@
+import _Loading from "@alifd/next/es/loading";
+import React from 'react';
+import previewIcon from "./icon/preview_pc.svg";
+import downloadIcon from "./icon/download_pc.svg";
+import guideIcon from "./icon/guide_pc.svg";
+import signIcon from "./icon/sign_pc.svg";
+import fileIcon from "./icon/file_pc.svg";
+import delIcon from "./icon/del.svg";
+import SignPage from "../file-list/sign";
+import SealPage from "../file-list/seal";
+import { useSignFile } from "./useSignFile";
+import "./pc.scss";
+var SignFilePc = function SignFilePc(props) {
+  var style = props.style,
+    _props$title = props.title,
+    title = _props$title === void 0 ? '待签署文件' : _props$title,
+    toSign = props.toSign,
+    userInfo = props.userInfo,
+    token = props.token,
+    tokenTY = props.tokenTY,
+    accessToken = props.accessToken,
+    baseUrl = props.baseUrl,
+    env = props.env,
+    isPC = props.isPC,
+    parentPageUrl = props.parentPageUrl;
+  var _useSignFile = useSignFile(props),
+    fileName = _useSignFile.fileName,
+    originalFileId = _useSignFile.originalFileId,
+    guideImg = _useSignFile.guideImg,
+    loading = _useSignFile.loading,
+    isShowSignPage = _useSignFile.isShowSignPage,
+    isShowSealPage = _useSignFile.isShowSealPage,
+    isShowPreview = _useSignFile.isShowPreview,
+    isShowGuide = _useSignFile.isShowGuide,
+    previewIframeUrl = _useSignFile.previewIframeUrl,
+    guideurl = _useSignFile.guideurl,
+    sealedFile = _useSignFile.sealedFile,
+    hasSigned = _useSignFile.hasSigned,
+    fileCopy = _useSignFile.fileCopy,
+    preview = _useSignFile.preview,
+    onDownload = _useSignFile.onDownload,
+    showGuide = _useSignFile.showGuide,
+    seal = _useSignFile.seal,
+    getSealRes = _useSignFile.getSealRes,
+    closeSignPage = _useSignFile.closeSignPage,
+    closeSealPage = _useSignFile.closeSealPage,
+    closePreview = _useSignFile.closePreview,
+    closeGuide = _useSignFile.closeGuide,
+    stopLoading = _useSignFile.stopLoading;
+  return /*#__PURE__*/React.createElement(_Loading, {
+    tip: '加载中...',
+    fullScreen: true,
+    visible: loading
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sign_file_pc",
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sign_file_pc_header"
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: "sign_file_pc_body"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "sign_file_pc_content"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "file_icon",
+    src: fileIcon,
+    alt: ""
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "file_name"
+  }, fileName), /*#__PURE__*/React.createElement("div", {
+    className: "operation"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "operation_item",
+    onClick: preview
+  }, /*#__PURE__*/React.createElement("img", {
+    src: previewIcon,
+    alt: ""
+  }), "\u9884\u89C8"), /*#__PURE__*/React.createElement("div", {
+    className: "operation_line"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "operation_item",
+    onClick: onDownload
+  }, /*#__PURE__*/React.createElement("img", {
+    src: downloadIcon,
+    alt: ""
+  }), "\u4E0B\u8F7D"), guideImg && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "operation_line"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "operation_item",
+    onClick: showGuide
+  }, /*#__PURE__*/React.createElement("img", {
+    src: guideIcon,
+    alt: ""
+  }), "\u7B7E\u7AE0\u5F15\u5BFC"))), /*#__PURE__*/React.createElement("div", {
+    className: "sign_btn",
+    onClick: seal
+  }, /*#__PURE__*/React.createElement("img", {
+    src: signIcon,
+    alt: ""
+  }), hasSigned ? '重新签署' : '签署文件'))), isShowSignPage && /*#__PURE__*/React.createElement(SignPage, {
+    toSign: toSign,
+    isShowSignPage: isShowSignPage,
+    userInfo: userInfo,
+    file: sealedFile || fileCopy.current,
+    token: token,
+    tokenTY: tokenTY,
+    baseUrl: baseUrl,
+    env: env,
+    isPC: isPC,
+    handleClose: closeSignPage,
+    closeLoading: stopLoading,
+    showClose: false,
+    parentPageUrl: parentPageUrl,
+    originalFileId: originalFileId,
+    isReSign: hasSigned
+  }), isShowSealPage && /*#__PURE__*/React.createElement(SealPage, {
+    style: {
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%'
+    },
+    showClose: false,
+    isShowSealPage: isShowSealPage,
+    userInfo: userInfo,
+    file: fileCopy.current,
+    token: token,
+    tokenTY: tokenTY,
+    baseUrl: baseUrl,
+    env: env,
+    isPC: isPC,
+    getSealRes: getSealRes,
+    accessToken: accessToken,
+    handleClose: closeSealPage,
+    closeLoading: stopLoading
+  }), isShowPreview && /*#__PURE__*/React.createElement("div", {
+    className: "preview"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "close",
+    src: delIcon,
+    alt: "",
+    onClick: closePreview
+  }), /*#__PURE__*/React.createElement("iframe", {
+    src: previewIframeUrl + '#toolbar=0&navpanes=0&scrollbar=0&messages=0&statusbar=0',
+    frameBorder: "0",
+    height: "600px",
+    width: "100%"
+  })), isShowGuide && /*#__PURE__*/React.createElement("div", {
+    className: "preview"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "close",
+    src: delIcon,
+    alt: "",
+    onClick: closeGuide
+  }), /*#__PURE__*/React.createElement("img", {
+    src: guideurl,
+    style: {
+      width: '100%'
+    }
+  }))));
+};
+SignFilePc.displayName = 'SignFilePc';
+export default SignFilePc;

package/es/components/sign-file/pc.scss

@@ -0,0 +1,144 @@
+.sign_file_pc {
+  width: 1200px;
+  margin: 0 auto;
+  box-sizing: border-box;
+  background: #ffffff;
+  border-radius: 12px;
+
+  .sign_file_pc_header {
+    padding: 24px 24px 18px;
+    font-size: 16px;
+    line-height: 22px;
+    color: #222222;
+    border-bottom: 1px solid #eef1f5;
+  }
+
+  .sign_file_pc_body {
+    padding: 34px 24px 28px;
+  }
+
+  .sign_file_pc_content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 16px;
+    min-height: 592px;
+    box-sizing: border-box;
+    background: #f5f9ff;
+    border-radius: 8px;
+  }
+
+  .file_icon {
+    width: 104px;
+    height: 104px;
+    user-select: none;
+  }
+
+  .file_name {
+    margin-top: 24px;
+    max-width: 100%;
+    padding: 0 24px;
+    box-sizing: border-box;
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22px;
+    color: #222222;
+    text-align: center;
+    word-break: break-all;
+  }
+
+  .operation {
+    display: flex;
+    align-items: center;
+    margin-top: 14px;
+
+    .operation_item {
+      display: flex;
+      align-items: center;
+      font-size: 14px;
+      line-height: 20px;
+      color: #1678ff;
+      cursor: pointer;
+      user-select: none;
+
+      img {
+        width: 14px;
+        height: 14px;
+        margin-right: 5px;
+        user-select: none;
+      }
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .operation_line {
+      width: 1px;
+      height: 13px;
+      margin: 0 18px;
+      background: #dbe4f0;
+    }
+  }
+
+  .sign_btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 34px;
+    padding: 0 26px;
+    height: 40px;
+    box-sizing: border-box;
+    font-size: 15px;
+    color: #ffffff;
+    background: #1678ff;
+    border-radius: 6px;
+    cursor: pointer;
+    user-select: none;
+    box-shadow: 0 8px 16px rgba(22, 120, 255, 0.25);
+    transition: background 0.2s;
+
+    img {
+      width: 14px;
+      height: 14px;
+      margin-right: 6px;
+      user-select: none;
+    }
+
+    &:hover {
+      background: #0f6be8;
+    }
+
+    &:active {
+      background: #0a5ccb;
+    }
+  }
+
+  // 预览 / 签章引导 弹层
+  .preview {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    z-index: 1000;
+    width: 900px;
+    max-width: 90vw;
+    max-height: 90vh;
+    transform: translate(-50%, -50%);
+    padding: 16px;
+    box-sizing: border-box;
+    overflow: auto;
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
+
+    .close {
+      display: block;
+      width: 20px;
+      height: 20px;
+      margin-left: auto;
+      margin-bottom: 12px;
+      cursor: pointer;
+    }
+  }
+}

package/es/components/sign-file/useSignFile.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+export interface SignFileProps {
+    /**
+     * 标题
+     */
+    file: object;
+    token: string;
+    tokenTY: string;
+    accessToken: string;
+    userInfo: object;
+    baseUrl: string;
+    env: string;
+    isPC?: boolean;
+    style?: object;
+    parentPageUrl: string;
+    applySeal: () => void;
+    openLoading: () => void;
+    closeLoading: () => void;
+    download: (value: any) => void;
+    valChange: (value: any) => void;
+    toSign?: (url: string) => void;
+}
+export interface UseSignFileOptions {
+    /**
+     * 是否拉取文件缩略图。移动端用缩略图展示文件，PC 端用固定插图，不需要时就不请求。
+     */
+    withThumbnail?: boolean;
+}
+/**
+ * 签署文件的状态与业务逻辑，移动端（mobile.tsx）和 PC 端（pc.tsx）共用。
+ */
+export declare const useSignFile: (props: SignFileProps, options?: UseSignFileOptions) => {
+    fileName: any;
+    originalFileId: any;
+    guideImg: any;
+    thumbnail: string;
+    loading: boolean;
+    isShowSignPage: boolean;
+    isShowSealPage: boolean;
+    isShowPreview: boolean;
+    isShowGuide: boolean;
+    previewIframeUrl: string;
+    guideurl: string;
+    sealedFile: undefined;
+    hasSigned: boolean;
+    fileCopy: import("react").MutableRefObject<{}>;
+    preview: () => Promise<void>;
+    onDownload: () => void;
+    showGuide: () => Promise<void>;
+    seal: () => Promise<void>;
+    getSealRes: (val: any) => void;
+    closeSignPage: () => void;
+    closeSealPage: () => void;
+    closePreview: () => void;
+    closeGuide: () => void;
+    stopLoading: () => void;
+};