feat

src/components/Uploader/index.jsx

@@ -13,12 +13,17 @@ export default (props) => {
   // 单个元素结构为 { url, fileType }
   const { value, disabled = false, onChange } = props;
   const [loading, setLoading] = React.useState(false);
+  const [valueCopy, setValueCopy] = React.useState(value);
+  const valueCopyRef = React.useRef(valueCopy);
+  valueCopyRef.current = valueCopy;
 
   const onAdd = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
     if (disabled) return;
+
+    setValueCopy(valueCopyRef.current.concat(false));
     
     setLoading(true);
 
@@ -42,12 +47,13 @@ export default (props) => {
               reject(err);
             });
         });
-      }, 60 * 1000);
+      }, 10 * 1000);
 
       p.then((resp) => {
         setLoading(false);
         onChange((value || []).concat(resp));
       }).catch(() => {
+        setValueCopy(valueCopyRef.current.filter(Boolean))
         setLoading(false);
       });
     } else {
@@ -75,6 +81,11 @@ export default (props) => {
   };
 
   const onDelete = (item) => {
+    if (!item) {
+      setValueCopy(valueCopyRef.current.filter(Boolean));
+      return;
+    }
+
     const newVal = value.filter((x) => x.url != item.url);
     onChange(newVal);
   };
@@ -93,32 +104,37 @@ export default (props) => {
     });
   };
 
+  React.useEffect(() => {
+    setValueCopy(value || []);
+  }, [value]);
+
   return (
     <View className={style["uploader-wrapper"]}>
       <View className={style["uploader-box"]}>
         {!disabled && (
           <View className={style["uploader-add"]}>
             <Image src={icon} onClick={onAdd} />
-            {loading && (
-              <View>
-                <Loading color="#fff" />
-              </View>
-            )}
           </View>
         )}
-        {(value || []).map((item, inx) => (
-          <View key={item.url} className={style["uploader-item"]}>
-            {item.fileType.indexOf("image") == 0 ? (
-              <Image src={item.url} onClick={() => onPreview(inx)} />
-            ) : (
-              <Video
-                src={item.url}
-                controls={false}
-                onClick={() => onPreview(inx)}
-              />
-            )}
+        {valueCopy.map((item, inx) => (
+          <View key={item?.url || '123'} className={style["uploader-item"]}>
+            {
+              !item ? (
+                <Loading color="gray" style={{ width: '100%', height: '100%' }} />
+              ) : (
+                item.fileType.indexOf("image") == 0 ? (
+                  <Image src={item.url} onClick={() => onPreview(inx)} />
+                ) : (
+                  <Video
+                    src={item.url}
+                    controls={false}
+                    onClick={() => onPreview(inx)}
+                  />
+                )
+              )
+            }
             {!disabled && (
-              <View onClick={() => onDelete(item)}>
+              <View onClick={() => onDelete(item)} style={{ zIndex: 99 }}>
                 <Image src={closeIcon} />
               </View>
             )}