feat: 优化pdf-view、office-view 取值逻辑支持从对象中获取

allenve · May 22, 2024 · 6e92cc5 · 6e92cc5
1 parent bbb1d64
commit 6e92cc5
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,13 +275,20 @@ export default class OfficeViewer extends React.Component<
       }
 
       this.office = office;
+      this.setState({
+        loading: false
+      });
     });
   }
 
   /**
    * 渲染本地文件，用于预览 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
@@ -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 {