From 6e92cc5ae72157b1395be1a5d62e70849bb55223 Mon Sep 17 00:00:00 2001
From: yupeng12 <yupeng12@baidu.com>
Date: Wed, 22 May 2024 15:55:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96pdf-view=E3=80=81offi?=
 =?UTF-8?q?ce-view=20=E5=8F=96=E5=80=BC=E9=80=BB=E8=BE=91=20=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E4=BB=8E=E5=AF=B9=E8=B1=A1=E4=B8=AD=E8=8E=B7=E5=8F=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 examples/components/App.tsx                  |  2 +-
 examples/components/SchemaRender.jsx         |  2 +-
 packages/amis/src/renderers/OfficeViewer.tsx | 23 ++++++++++++++--
 packages/amis/src/renderers/PdfViewer.tsx    | 29 ++++++++++++++++----
 4 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/examples/components/App.tsx b/examples/components/App.tsx
index 62ef6a8ddba..d3fd5ca077b 100644
--- a/examples/components/App.tsx
+++ b/examples/components/App.tsx
@@ -14,7 +14,7 @@ import {
 } from 'amis';
 import {eachTree} from 'amis-core';
 import 'amis-ui/lib/locale/en-US';
-import {withRouter} from 'react-router';
+import {withRouter} from 'react-router-dom';
 // @ts-ignore
 import DocSearch from './DocSearch';
 import Doc from './Doc';
diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx
index 99f4cdf4cc4..0a66fd12199 100644
--- a/examples/components/SchemaRender.jsx
+++ b/examples/components/SchemaRender.jsx
@@ -3,7 +3,7 @@ import {render, toast, makeTranslator, LazyComponent, Drawer} from 'amis';
 import axios from 'axios';
 import Portal from 'react-overlays/Portal';
 import {normalizeLink} from 'amis-core';
-import {withRouter} from 'react-router';
+import {withRouter} from 'react-router-dom';
 import copy from 'copy-to-clipboard';
 import {qsparse, parseQuery, attachmentAdpator} from 'amis-core';
 import isPlainObject from 'lodash/isPlainObject';
diff --git a/packages/amis/src/renderers/OfficeViewer.tsx b/packages/amis/src/renderers/OfficeViewer.tsx
index 98cd763ef11..00467478927 100644
--- a/packages/amis/src/renderers/OfficeViewer.tsx
+++ b/packages/amis/src/renderers/OfficeViewer.tsx
@@ -166,12 +166,20 @@ export default class OfficeViewer extends React.Component<
 
   async fetchWord() {
     const {env, src, data, translate: __} = this.props;
-    const finalSrc = src
+    let finalSrc;
+    const resolveSrc = src
       ? resolveVariableAndFilter(src, data, '| raw')
       : undefined;
 
-    if (typeof finalSrc === 'string') {
+    if (typeof resolveSrc === 'string') {
+      finalSrc = resolveSrc;
       this.fileName = finalSrc.split('/').pop();
+    } else if (
+      typeof resolveSrc === 'object' &&
+      typeof resolveSrc.value === 'string'
+    ) {
+      finalSrc = resolveSrc.value;
+      this.fileName = resolveSrc.name || finalSrc.split('/').pop();
     }
 
     if (!finalSrc) {
@@ -198,7 +206,6 @@ export default class OfficeViewer extends React.Component<
         this.rootElement.current.innerHTML =
           __('loadingFailed') + ' url:' + finalSrc;
       }
-    } finally {
       this.setState({
         loading: false
       });
@@ -268,6 +275,9 @@ export default class OfficeViewer extends React.Component<
       }
 
       this.office = office;
+      this.setState({
+        loading: false
+      });
     });
   }
 
@@ -275,6 +285,10 @@ export default class OfficeViewer extends React.Component<
    * 渲染本地文件，用于预览 input-file
    */
   renderFormFile() {
+    this.setState({
+      loading: true
+    });
+
     const {wordOptions, name, data, display} = this.props;
     const file = data[name];
     if (file instanceof File) {
@@ -291,6 +305,9 @@ export default class OfficeViewer extends React.Component<
             this.rootElement.current.innerHTML = '';
           }
           this.office = office;
+          this.setState({
+            loading: false
+          });
         });
       };
       reader.readAsArrayBuffer(file);
diff --git a/packages/amis/src/renderers/PdfViewer.tsx b/packages/amis/src/renderers/PdfViewer.tsx
index d5089528abe..c3e24fe49d3 100644
--- a/packages/amis/src/renderers/PdfViewer.tsx
+++ b/packages/amis/src/renderers/PdfViewer.tsx
@@ -74,9 +74,15 @@ export default class PdfViewer extends React.Component<
   componentDidUpdate(prevProps: PdfViewerProps) {
     const props = this.props;
 
-    if (isApiOutdated(prevProps.src, props.src, prevProps.data, props.data)) {
+    if (
+      isApiOutdated(prevProps.src, props.src, prevProps.data, props.data) ||
+      resolveVariableAndFilter(props.src, props.data, '| raw') !==
+        resolveVariableAndFilter(prevProps.src, prevProps.data, '| raw')
+    ) {
       this.abortLoad();
-      this.fetchPdf();
+      setTimeout(() => {
+        this.fetchPdf();
+      }, 0);
     }
 
     if (getVariable(props.data, props.name)) {
@@ -123,9 +129,19 @@ export default class PdfViewer extends React.Component<
   @autobind
   async fetchPdf() {
     const {env, src, data, translate: __} = this.props;
-    const finalSrc = src
-      ? resolveVariableAndFilter(src, data, '| raw')
-      : undefined;
+    let finalSrc;
+
+    if (src) {
+      const resolveSrc = resolveVariableAndFilter(src, data, '| raw');
+      if (typeof resolveSrc === 'string') {
+        finalSrc = resolveSrc;
+      } else if (
+        typeof resolveSrc === 'object' &&
+        typeof resolveSrc.value === 'string'
+      ) {
+        finalSrc = resolveSrc.value;
+      }
+    }
 
     if (!finalSrc) {
       console.warn('file src is empty');
@@ -134,7 +150,8 @@ export default class PdfViewer extends React.Component<
 
     this.setState({
       inited: true,
-      loading: true
+      loading: true,
+      error: false
     });
 
     try {