Merge pull request #613 from JeromeLin/master

fix: error in dynamic image data. fix #612
ZhongAnTech · Apr 24, 2021 · 4cf51b9 · 4cf51b9
2 parents ad28a38 + a7e8842
commit 4cf51b9
Show file tree

Hide file tree

Showing 7 changed files with 241 additions and 221 deletions.
diff --git a/components/date-select/__tests__/__snapshots__/index.test.tsx.snap b/components/date-select/__tests__/__snapshots__/index.test.tsx.snap
diff --git a/components/image-preview/ImagePreview.tsx b/components/image-preview/ImagePreview.tsx
@@ -157,6 +157,7 @@ export default class ImagePreview extends Component<ImagePreviewProps, ImagePrev
   renderImages = () => {
     const { prefixCls, minScale, maxScale } = this.props;
     const { images } = this.state;
+
     return images.map((item, i) => {
       return (
         <div className={`${prefixCls}__item`} key={+i}>
@@ -182,10 +183,31 @@ export default class ImagePreview extends Component<ImagePreviewProps, ImagePrev
     return null;
   }
 
-  render() {
+  renderOriginButton() {
+    const { images, currentIndex = 0 } = this.state;
+    if (images.length === 0) return;
+
     const { prefixCls, locale, activeIndex } = this.props;
-    const { currentIndex = 0, visible, images } = this.state;
     const { loaded } = images[currentIndex];
+
+    if (loaded && showOriginButton(images, activeIndex) && loaded !== LOAD_STATUS.after) {
+      return (
+        <button className={`${prefixCls}__origin__button`} onClick={this.loadOrigin}>
+          {loaded === LOAD_STATUS.start && (
+            <ActivityIndicator className={`${prefixCls}__loading`} type="spinner" />
+          )}
+          {locale && locale[loaded]}
+        </button>
+      );
+    }
+
+    return null;
+  }
+
+  render() {
+    const { prefixCls } = this.props;
+    const { currentIndex = 0, visible } = this.state;
+
     return (
       <Popup direction="center" visible={visible} className={prefixCls}>
         <div
@@ -199,23 +221,14 @@ export default class ImagePreview extends Component<ImagePreviewProps, ImagePrev
           onMouseUp={this.onWrapperMouseUp}
           onClick={this.close}
         >
-          <Carousel showPagination={false} onChange={this.onChange} activeIndex={currentIndex}>
-            {visible ? this.renderImages() : []}
-          </Carousel>
+          {visible && (
+            <Carousel showPagination={false} onChange={this.onChange} activeIndex={currentIndex}>
+              {this.renderImages()}
+            </Carousel>
+          )}
         </div>
         <div className={`${prefixCls}__footer`}>
-          {loaded && showOriginButton(images, activeIndex) && loaded !== LOAD_STATUS.after ? (
-            <button className={`${prefixCls}__origin__button`} onClick={this.loadOrigin}>
-              {loaded === LOAD_STATUS.start ? (
-                <ActivityIndicator className={`${prefixCls}__loading`} type="spinner" />
-              ) : (
-                ''
-              )}
-              {locale && locale[loaded]}
-            </button>
-          ) : (
-            ''
-          )}
+          {this.renderOriginButton()}
           {this.renderPagination()}
         </div>
       </Popup>

diff --git a/components/image-preview/__tests__/__snapshots__/index.test.tsx.snap b/components/image-preview/__tests__/__snapshots__/index.test.tsx.snap
@@ -126,7 +126,6 @@ exports[`ImagePreview snapshot renders correctly 1`] = `
                       <div
                         class="za-image-preview__footer"
                       >
-                        
                         <div
                           class="za-image-preview__index"
                         >
@@ -464,9 +463,7 @@ exports[`ImagePreview snapshot renders correctly with origin 1`] = `
                       >
                         <button
                           class="za-image-preview__origin__button"
-                        >
-                          
-                        </button>
+                        />
                         <div
                           class="za-image-preview__index"
                         >

diff --git a/components/image-preview/demo.md b/components/image-preview/demo.md
@@ -3,7 +3,7 @@
 ## 基本用法
 
 ```jsx
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Cell, Button, ImagePreview, NoticeBar } from 'zarm';
 
 const commonImages = [
@@ -12,22 +12,8 @@ const commonImages = [
   'https://cdn-health.zhongan.com/zarm/imagePreview/3-small.jpg',
 ];
 
-const originImages = [
-  {
-    url: 'https://cdn-health.zhongan.com/zarm/imagePreview/1-small.jpg',
-    originUrl: 'https://cdn-health.zhongan.com/zarm/imagePreview/1.jpg',
-  },
-  {
-    url: 'https://cdn-health.zhongan.com/zarm/imagePreview/2-small.jpg',
-    originUrl: 'https://cdn-health.zhongan.com/zarm/imagePreview/2.jpg',
-  },
-  {
-    url: 'https://cdn-health.zhongan.com/zarm/imagePreview/3-small.jpg',
-    originUrl: 'https://cdn-health.zhongan.com/zarm/imagePreview/3.jpg',
-  },
-];
-
 const Demo = () => {
+  const [originImages, setOriginImages] = useState(null);
   const [visibleState, setVisibleState] = useState({
     origin: false,
     common: false,
@@ -48,6 +34,30 @@ const Demo = () => {
     });
   };
 
+  // 模拟异步数据
+  const fetchData = () => {
+    setTimeout(() => {
+      setOriginImages([
+        {
+          url: 'https://cdn-health.zhongan.com/zarm/imagePreview/1-small.jpg',
+          originUrl: 'https://cdn-health.zhongan.com/zarm/imagePreview/1.jpg',
+        },
+        {
+          url: 'https://cdn-health.zhongan.com/zarm/imagePreview/2-small.jpg',
+          originUrl: 'https://cdn-health.zhongan.com/zarm/imagePreview/2.jpg',
+        },
+        {
+          url: 'https://cdn-health.zhongan.com/zarm/imagePreview/3-small.jpg',
+          originUrl: 'https://cdn-health.zhongan.com/zarm/imagePreview/3.jpg',
+        },
+      ]);
+    }, 5000);
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
   return (
     <>
       <NoticeBar>图片缩放只支持Touch事件，建议使用移动模式/设备浏览以获得最佳体验。</NoticeBar>
@@ -69,18 +79,18 @@ const Demo = () => {
       >
         有查看原始图片功能
       </Cell>
-      <ImagePreview
-        visible={visibleState.origin}
-        images={originImages}
-        onClose={() => hide('origin')}
-        maxScale={5}
-      />
       <ImagePreview
         visible={visibleState.common}
         images={commonImages}
         onClose={() => hide('common')}
         maxScale={10}
       />
+      <ImagePreview
+        visible={visibleState.origin}
+        images={originImages}
+        onClose={() => hide('origin')}
+        maxScale={5}
+      />
     </>
   );
 };

diff --git a/components/image-preview/utils/formatImages.ts b/components/image-preview/utils/formatImages.ts
@@ -11,7 +11,7 @@ function isImageObject(image: ImageObject | string): image is ImageObject {
 
 const formatImages = (images: ReadonlyArray<ImageObject | string>): Images => {
   const previewImages: Images = [];
-  images.forEach((image: ImageObject | string) => {
+  (images || []).forEach((image: ImageObject | string) => {
     if (isImageString(image)) {
       previewImages.push({
         url: image,

diff --git a/components/picker/__tests__/__snapshots__/index.test.jsx.snap b/components/picker/__tests__/__snapshots__/index.test.jsx.snap
@@ -154,13 +154,13 @@ exports[`Picker Picker render visible 1`] = `
                                   >
                                     <div
                                       class="za-wheel__item za-wheel__item--selected"
-                                      style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 800ms; pointer-events: none; transform: rotateX(NaNdeg);"
+                                      style="transform: rotateX(NaNdeg); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 800ms; pointer-events: none;"
                                     >
                                       选项一
                                     </div>
                                     <div
                                       class="za-wheel__item"
-                                      style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 800ms; pointer-events: none; transform: rotateX(NaNdeg);"
+                                      style="transform: rotateX(NaNdeg); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 800ms; pointer-events: none;"
                                     >
                                       选项二
                                     </div>

diff --git a/components/select/__tests__/__snapshots__/index.test.jsx.snap b/components/select/__tests__/__snapshots__/index.test.jsx.snap
@@ -1076,13 +1076,13 @@ exports[`Select Select disabled 1`] = `
                                           >
                                             <div
                                               class="za-wheel__item za-wheel__item--selected"
-                                              style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 800ms; pointer-events: none; transform: rotateX(NaNdeg);"
+                                              style="transform: rotateX(NaNdeg); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 800ms; pointer-events: none;"
                                             >
                                               选项一
                                             </div>
                                             <div
                                               class="za-wheel__item"
-                                              style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 800ms; pointer-events: none; transform: rotateX(NaNdeg);"
+                                              style="transform: rotateX(NaNdeg); transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 800ms; pointer-events: none;"
                                             >
                                               选项二
                                             </div>