feat: imagepreview 适配 taro (jdf2e#326)

* chore: 优化样式引入 imagepreview

* feat: imagepreview 适配 taro

* fix: 保留 useReady hook

Author: eiinu

src/config.json

@@ -956,6 +956,7 @@
           "desc": "图片预览",
           "sort": 23,
           "show": true,
+          "taro": true,
           "author": "yangjinjun3"
         }
       ]

src/packages/imagepreview/demo.taro.tsx

@@ -25,29 +25,6 @@ const images = [
   },
 ]
 
-const videos = [
-  {
-    source: {
-      src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-      type: 'video/mp4',
-    },
-    options: {
-      muted: true,
-      controls: true,
-    },
-  },
-  {
-    source: {
-      src: 'https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D',
-      type: 'video/mp4',
-    },
-    options: {
-      muted: true,
-      controls: true,
-    },
-  },
-]
-
 const ImagePreviewDemo = () => {
   const [translated] = useTranslate<T>({
     'zh-CN': {
@@ -69,7 +46,6 @@ const ImagePreviewDemo = () => {
   const [showPreview1, setShowPreview1] = useState(false)
   const [showPreview2, setShowPreview2] = useState(false)
   const [showPreview3, setShowPreview3] = useState(false)
-  const [showPreview4, setShowPreview4] = useState(false)
 
   const showFn1 = () => {
     setShowPreview1(true)
@@ -83,10 +59,6 @@ const ImagePreviewDemo = () => {
     setShowPreview3(true)
   }
 
-  const showFn4 = () => {
-    setShowPreview4(true)
-  }
-
   const hideFn1 = () => {
     setShowPreview1(false)
   }
@@ -99,10 +71,6 @@ const ImagePreviewDemo = () => {
     setShowPreview3(false)
   }
 
-  const hideFn4 = () => {
-    setShowPreview4(false)
-  }
-
   return (
     <>
       <div className="demo">
@@ -126,14 +94,6 @@ const ImagePreviewDemo = () => {
           onClose={hideFn3}
         />
         <Cell title={translated.withPagination} isLink onClick={showFn3} />
-        <h2>{translated.withVideos}</h2>
-        <ImagePreview
-          images={images}
-          videos={videos}
-          show={showPreview4}
-          onClose={hideFn4}
-        />
-        <Cell title={translated.withVideos} isLink onClick={showFn4} />
       </div>
     </>
   )

src/packages/imagepreview/imagepreview.scss

@@ -1,3 +1,6 @@
+@import '../popup/popup.scss';
+@import '../swiper/swiper.scss';
+@import '../video/video.scss';
 .nut-imagepreview {
   width: 100%;
 

src/packages/imagepreview/imagepreview.taro.tsx

@@ -7,7 +7,6 @@ import React, {
   TouchEvent,
 } from 'react'
 import Popup from '@/packages/popup/index.taro'
-import Video from '@/packages/video/index.taro'
 import Swiper from '@/packages/swiper/index.taro'
 import SwiperItem from '@/packages/swiperitem/index.taro'
 
@@ -257,24 +256,19 @@ export const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>> = (
           paginationColor={paginationColor}
           paginationVisible={paginationVisible}
         >
-          {videos &&
-            videos.length > 0 &&
-            videos.map((item, index) => {
-              return (
-                <SwiperItem key={index}>
-                  <Video source={item.source} options={item.options} />
-                </SwiperItem>
-              )
-            })}
-          {images &&
-            images.length > 0 &&
-            images.map((item, index) => {
-              return (
-                <SwiperItem key={index}>
-                  <img src={item.src} alt="" className="nut-imagepreview-img" />
-                </SwiperItem>
-              )
-            })}
+          {images && images.length > 0
+            ? images.map((item, index) => {
+                return (
+                  <SwiperItem key={index}>
+                    <img
+                      src={item.src}
+                      alt=""
+                      className="nut-imagepreview-img"
+                    />
+                  </SwiperItem>
+                )
+              })
+            : []}
         </Swiper>
       </div>
       <div className="nut-imagepreview-index">

src/packages/imagepreview/imagepreview.tsx

@@ -257,24 +257,30 @@ export const ImagePreview: FunctionComponent<Partial<ImagePreviewProps>> = (
           paginationColor={paginationColor}
           paginationVisible={paginationVisible}
         >
-          {videos &&
-            videos.length > 0 &&
-            videos.map((item, index) => {
-              return (
-                <SwiperItem key={index}>
-                  <Video source={item.source} options={item.options} />
-                </SwiperItem>
-              )
-            })}
-          {images &&
-            images.length > 0 &&
-            images.map((item, index) => {
-              return (
-                <SwiperItem key={index}>
-                  <img src={item.src} alt="" className="nut-imagepreview-img" />
-                </SwiperItem>
-              )
-            })}
+          {(videos && videos.length > 0
+            ? videos.map((item, index) => {
+                return (
+                  <SwiperItem key={index}>
+                    <Video source={item.source} options={item.options} />
+                  </SwiperItem>
+                )
+              })
+            : []
+          ).concat(
+            images && images.length > 0
+              ? images.map((item, index) => {
+                  return (
+                    <SwiperItem key={index}>
+                      <img
+                        src={item.src}
+                        alt=""
+                        className="nut-imagepreview-img"
+                      />
+                    </SwiperItem>
+                  )
+                })
+              : []
+          )}
         </Swiper>
       </div>
       <div className="nut-imagepreview-index">

src/packages/swiper/swiper.scss

@@ -1,3 +1,4 @@
+@import '../swiperitem/swiperitem.scss';
 .nut-swiper {
   position: relative;
   z-index: 1;

src/packages/swiper/swiper.taro.tsx

@@ -458,7 +458,9 @@ export const Swiper = React.forwardRef<
     autoplay()
   }, [children])
   useEffect(() => {
-    init()
+    nextTick(() => {
+      init()
+    })
   }, [propSwiper.initPage])
   useEffect(() => {
     return () => {

src/sites/mobile-taro/src/app.config.ts

@@ -74,6 +74,7 @@ const subPackages = [
       'pages/progress/index',
       'pages/audio/index',
       'pages/animatingnumbers/index',
+      'pages/imagepreview/index',
     ],
   },
   {