file-explorer 增加默认图标处理；增加未识别文件的扩展名展示; 下载文件增加loading和progress; 支持关键词筛选

src/components/FileExplorer/fileExplorer.module.scss

@@ -51,11 +51,20 @@
       height: 100%;
     }
     .itemThumb {
+      position: relative;
       width: $itemHeight;
       height: $itemHeight;
       padding: 10px;
       margin-right: 0;
       box-sizing: border-box;
+      .ext {
+        position: absolute;
+        right: 28px;
+        bottom: 16px;
+        color: #32323c;
+        font-size: 11px * 2;
+        
+      }
     }
 
     .itemContent {

src/components/FileExplorer/index.jsx

@@ -1,13 +1,35 @@
 import { getFileUrl } from '@root/service/oss';
 import { downloadFile } from '@root/utils/request';
-import { ScrollView, View, MovableArea, MovableView, Image } from '@tarojs/components';
+import { ScrollView, View, MovableArea, MovableView, Image, Text } from '@tarojs/components';
 import React, { useCallback, useState } from 'react';
 import { AtIcon, AtList, AtListItem } from 'taro-ui';
 import styles from './fileExplorer.module.scss';
-import Taro from '@tarojs/taro';
+import Taro, { hideLoading, showLoading } from '@tarojs/taro';
+import { useSelector } from 'react-redux';
+import { hint } from '@root/utils/tool';
+
+const supportFilesType = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf'];
+const oneOfType = ext => supportFilesType.indexOf(ext) !== -1;
+
+function matchFileImage(extension) {
+  switch (extension) {
+    case 'ppt':
+    case 'pptx':
+      return 'PPT';
+    case 'xls':
+    case 'xlsx':
+      return 'excel';
+    case 'doc':
+    case 'docx':
+      return 'word';
+    default:
+      return extension;
+  }
+}
 
 export default function FileExplorer(props) {
-  const { className, node, nodeHash, gotoNode } = props;
+  const { className, node, nodeHash, gotoNode, keywords } = props;
+  const isAndroid = useSelector(state => state.app.isAndroid);
   return (
     <ScrollView scrollY className={className}>
       <AtList className={styles.list}>
@@ -15,6 +37,7 @@ export default function FileExplorer(props) {
           node && node.mapChildrenIds(nodeId => {
             const fileNode = nodeHash[nodeId];
             if (!fileNode) return null;
+            if(keywords && fileNode.label.toLowerCase().indexOf(keywords) === -1) { return null; }
             return (
               fileNode.type === 'folder'
                 ? (
@@ -33,24 +56,51 @@ export default function FileExplorer(props) {
                     key={fileNode.id}
                     className={[styles.listItem, styles.fileItem]}
                     title={fileNode.label}
-                    note="版本: xxx"
-                    thumb={getFileUrl('oss://assets/file-icon/default.svg')}
+                    note={`版本: ${fileNode.data.version}`}
+                    thumb={getFileUrl(`oss://assets/file-icon/${matchFileImage(fileNode.data.extension)}.svg`)}
                     extraThumb={
                       getFileUrl('oss://assets/file-icon/download.png')
                     }
+                    ext={fileNode.data.extension}
                     onExtraThumbClick={() => {
+                      if (!isAndroid && !oneOfType(fileNode.data.extension)) {
+                        hint('小程序目前仅支持ppt, excel, word, pdf文件的预览');
+                        return;
+                      }
+                      showLoading({ mask: true });
                       const task = downloadFile(fileNode.data.ipfsCid, {
                         success: (param) => {
                           console.log('success:', param);
                           Taro.openDocument({
                             filePath: param.tempFilePath,
+                            fileType: fileNode.data.extension,
+                            showMenu: true,
+                            fail: (...args) => {
+                              console.log('open document failed:', args);
+                              console.log(fileNode.data)
+                            }
                           })
                         },
-                        fail: (...args) => {
-                          console.log('fail:', args);
+                        fail: (e) => {
+                          console.log('download fail:', e);
+                          if (e.errMsg.indexOf('file data is empty') !== -1) {
+                            hint('文件内容为空');
+                            return;
+                          }
+                          hint(e.errMsg);
                         },
+                        complete() {
+                          hideLoading();
+                        }
                       });
-                      console.log('task:', task);
+                      // console.log('task:', task);
+                      const progressCb = task.progress || task.onProgressUpdate;
+                      if (progressCb) {
+                        progressCb(({ progress }) => {
+                          // console.log('loading:', args);
+                          showLoading({ title: `${progress}%`, mask: true });
+                        })
+                      }
                     }}
                   />
                 )
@@ -65,9 +115,11 @@ export default function FileExplorer(props) {
 
 const deleteBtnWidth = 64;
 function ListItem(props) {
-  const { className, enableDelete = false, title, note, arrow, thumb, extraThumb, onClick, onExtraThumbClick } = props;
+  const { className, enableDelete = false, title, ext, note, arrow, thumb: propsThumb, defaultThumb = getFileUrl(`oss://assets/file-icon/default.svg`), extraThumb, onClick, onExtraThumbClick } = props;
   const [initX, setInitX] = useState();
   const [swipeWidth, setSwipeWidth] = useState(0);
+  const [thumb, setThumb] = useState(propsThumb);
+  const [showExt, setShowExt] = useState(false);
 
   const onTouchStart = useCallback((e) => {
     setInitX(e.touches[0].pageX);
@@ -105,7 +157,15 @@ function ListItem(props) {
         {
           thumb ? (
             <View className={styles.itemThumb}>
-              <Image className={styles.img} src={thumb} />
+              <Image className={styles.img} src={thumb} onError={(...args) => {
+                setThumb(defaultThumb);
+                setShowExt(true);
+              }} />
+              {
+                showExt
+                  ? <Text className={styles.ext}>{ext}</Text>
+                  : null
+              }
             </View>
           )
             : null