feat: fix CommonPopup nesting use and fix some style problem

src/components/UploadCover/upload-source-popup.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react'
 import { Image, View, Text, ScrollView, Button } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import img from '../../config/images'
@@ -17,12 +17,10 @@ type ImageItem = {
 }
 
 interface UploadImageProps {
-  sourceType: SourceType
   onAdd: (images: ImageItem[]) => void
-  maxCount: number
 }
 
-const sourceMap = new Map<SourceType, string>([
+export const sourceMap = new Map<SourceType, string>([
   ['history', '历史图库'],
   ['preset', '预设图库']
 ])
@@ -31,13 +29,13 @@ const checkImageSelected = (images: ImageItem[], image: ImageItem) => {
   return images.some(item => item.id === image.id)
 }
 
-export default function UploadImage(props: UploadImageProps) {
+export default forwardRef(function UploadImage(props: UploadImageProps, ref) {
   const {
-    sourceType = 'history',
     onAdd = () => void 0,
-    maxCount = 9,
   } = props
   const [visible, setVisible] = useState(false)
+  const [sourceType, setSourceType] = useState<SourceType>('history')
+  const [maxCount, setMaxCount] = useState(9)
   const [images, setImages] = useState<ImageItem[]>([])
   const [selectedImages, setSelectedImages] = useState<ImageItem[]>([])
 
@@ -54,36 +52,50 @@ export default function UploadImage(props: UploadImageProps) {
     }
   }
 
-  useEffect(() => {
-    if (visible) {
-      publishService.getPictures({
-        pageOption: {
-          page: 1,
-          pageSize: 100,
-        },
-        seachOption: {
-          tag: '',
-          resource_type: 'image',
-          dateRange: [],
-        },
-      }).then(res => {
-        if (res.success) {
-          setImages(res.data.data.rows.map(item => ({
-            id: Date.now().toString(),
-            url: item.thumbnail_url,
-          })))
-        } else {
-          // TODO: 显示错误信息
-          Taro.showToast({
-            title: res.message,
-            icon: 'none'
-          })
-        }
-      })
-    } else {
-      setSelectedImages([])
+  useImperativeHandle(ref, () => ({
+    show: (sourceType: SourceType, maxCount: number) => {
+      setVisible(true)
+      setSourceType(sourceType)
+      setMaxCount(maxCount)
+      fetchImages()
     }
-  }, [visible])
+  }))
+
+  function fetchImages() {
+    publishService.getPictures({
+      pageOption: {
+        page: 1,
+        pageSize: 100,
+      },
+      seachOption: {
+        tag: '',
+        resource_type: 'image',
+        dateRange: [],
+      },
+    }).then(res => {
+      if (res.success) {
+        let start = 0
+        setImages(res.data.data.rows.map(item => ({
+          id: (Date.now() + start++).toString(),
+          url: item.thumbnail_url,
+        })))
+      } else {
+        // TODO: 显示错误信息
+        Taro.showToast({
+          title: res.message,
+          icon: 'none'
+        })
+      }
+    })
+  }
+
+  function onClose() {
+    setVisible(false)
+    setSelectedImages([])
+    setImages([])
+    setSourceType('history')
+    setMaxCount(9)
+  }
 
   const handleConfirm = () => {
     if (selectedImages.length > 0) {
@@ -103,10 +115,11 @@ export default function UploadImage(props: UploadImageProps) {
     <>
       <CommonPopup
         visible={visible}
-        onClose={() => setVisible(false)}
+        onClose={onClose}
         round
         hideFooter
         position='bottom'
+        zIndex={1001}
       >
         <View className="upload-popup">
           <View className="upload-popup-title">{sourceMap.get(sourceType)}</View>
@@ -154,8 +167,7 @@ export default function UploadImage(props: UploadImageProps) {
           )}
         </View>
       </CommonPopup>
-      <View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View>
+      {/* <View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View> */}
     </>
   );
-};
-
+});