feffery_antd_components 0.1.7 → 0.1.8

package/src/lib/components/AntdUpload.react.js

@@ -27,6 +27,7 @@ const AntdUpload = (props) => {
         multiple,
         directory,
         failedTooltipInfo,
+        listUploadTaskRecord,
         loading_state,
         setProps
     } = props;
@@ -34,7 +35,6 @@ const AntdUpload = (props) => {
     uploadId = uploadId || uuid;
 
     const [fileList, updateFileList] = useState([]);
-    const [lastFileError, updateLastFileError] = useState(false);
 
     let uploadProps = {
         name: 'file',
@@ -52,87 +52,158 @@ const AntdUpload = (props) => {
                 if (fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) === -1) {
                     message.error(`上传失败，${file.name} 文件格式不符合要求！`);
                 }
-                updateLastFileError(!sizeCheck || fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) === -1)
+
                 return sizeCheck && fileTypes.indexOf(file.name.split('.')[file.name.split('.').length - 1]) !== -1;
             }
 
-            updateLastFileError(!sizeCheck)
             return sizeCheck;
         },
         onChange(info) {
 
-            if (info.file.status === 'done') {
+            // 计算最近一次任务的子任务数量
+            let lastTaskCount
+            if (info.file.status === 'removed') {
+                lastTaskCount = 0
+            } else {
+                lastTaskCount = info.fileList.length - listUploadTaskRecord.length;
+            }
+
+            // 当上传模式为multiple或directory时
+            if (multiple || directory) {
+                // 若当前事件为removed
+                if (info.file.status === 'removed') {
 
-                // 检查是否为多文件上传模式
-                if (multiple || directory) {
-                    // 检查上传列表中是否全部文件都已完成上传
-                    if (info.fileList.every(file => file.status === 'done')) {
-                        console.log(info.fileList)
-                        // 更新任务记录
-                        setProps({
-                            lastUploadTaskRecord: info.fileList.map(
-                                (file) => {
-                                    return {
-                                        fileName: file.name,
-                                        fileSize: file.size,
-                                        completeTimestamp: new Date().getTime(),
-                                        taskStatus: 'success',
-                                        taskId: uploadId
-                                    }
+                    // 更新任务记录
+                    setProps({
+                        listUploadTaskRecord: info.fileList.map(
+                            (file) => {
+                                return {
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    completeTimestamp: new Date().getTime(),
+                                    taskStatus: file.status === 'done' ? 'success' : 'failed',
+                                    taskId: uploadId
                                 }
-                            )
-                        })
-                    }
+                            }
+                        )
+                    })
                 } else {
+                    // 其他常规事件
+                    // 判断此次任务所有文件是否已上传结束（done或error）
+                    if (info.fileList.slice(-lastTaskCount).every(file => file.status !== 'uploading')) {
+
+                        if (info.fileList.slice(-lastTaskCount).every(file => !file.status)) {
+                        } else {
+                            if (lastTaskCount > 0) {
+
+                                // 更新任务记录
+                                setProps({
+                                    lastUploadTaskRecord: info.fileList.slice(-lastTaskCount).map(
+                                        (file) => {
+                                            return {
+                                                fileName: file.name,
+                                                fileSize: file.size,
+                                                completeTimestamp: new Date().getTime(),
+                                                taskStatus: file.status === 'done' ? 'success' : 'failed',
+                                                taskId: uploadId
+                                            }
+                                        }
+                                    ),
+                                    listUploadTaskRecord: info.fileList.map(
+                                        (file) => {
+                                            return {
+                                                fileName: file.name,
+                                                fileSize: file.size,
+                                                completeTimestamp: new Date().getTime(),
+                                                taskStatus: file.status === 'done' ? 'success' : 'failed',
+                                                taskId: uploadId
+                                            }
+                                        }
+                                    )
+                                })
+                            }
+                        }
+
+                    }
+
+                }
+
+            } else {
+                // 单文件上传模式
+                // 若当前事件为removed
+                if (info.file.status === 'removed') {
+
                     // 更新任务记录
+                    setProps({
+                        listUploadTaskRecord: info.fileList.map(
+                            (file) => {
+                                return {
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    completeTimestamp: new Date().getTime(),
+                                    taskStatus: file.status === 'done' ? 'success' : 'failed',
+                                    taskId: uploadId
+                                }
+                            }
+                        )
+                    })
+                } else if (info.file.status === 'done' || info.file.status === 'error' || !info.file.status) {
                     setProps({
                         lastUploadTaskRecord: {
                             fileName: info.file.name,
                             fileSize: info.file.size,
                             completeTimestamp: new Date().getTime(),
-                            taskStatus: 'success',
+                            taskStatus: info.file.status === 'done' ? 'success' : 'failed',
                             taskId: uploadId
-                        }
+                        },
+                        listUploadTaskRecord: info.fileList.map(
+                            (file) => {
+                                return {
+                                    fileName: file.name,
+                                    fileSize: file.size,
+                                    completeTimestamp: new Date().getTime(),
+                                    taskStatus: file.status === 'done' ? 'success' : 'failed',
+                                    taskId: uploadId
+                                }
+                            }
+                        )
                     })
                 }
+            }
 
+            if (info.file.status === 'done') {
                 message.success(`${info.file.name} 上传成功！`);
             } else if (info.file.status === 'error') {
-
-                // 更新任务记录
-                setProps({
-                    lastUploadTaskRecord: {
-                        fileName: info.file.name,
-                        fileSize: info.file.size,
-                        completeTimestamp: new Date().getTime(),
-                        taskStatus: 'failed'
-                    }
-                })
                 message.error(`${info.file.name} 上传失败！`);
             }
 
-            if (lastFileError && info.fileList.length !== 0) {
-                info.fileList[info.fileList.length - 1].status = 'error'
 
-                updateLastFileError(false)
-            }
+            // 获取当前上传文件列表
+            let _fileList = [...info.fileList];
 
-            info.fileList = info.fileList.map(
-                item => {
-                    if (item.status === 'error') {
-                        item.response = failedTooltipInfo ? failedTooltipInfo : '上传失败'
-                    }
-                    return item
-                }
-            )
-
-            // 基于fileListMaxLength参数设置，对fileList状态进行更新
+            // 是否限制上传记录列表最大数量
             if (fileListMaxLength) {
-                updateFileList(info.fileList.slice(-fileListMaxLength))
-            } else {
-                updateFileList(info.fileList)
+                _fileList = _fileList.slice(-fileListMaxLength);
             }
-        },
+
+            if (lastTaskCount !== 0) {
+                _fileList = _fileList.slice(0, _fileList.length - lastTaskCount)
+                    .concat(
+                        _fileList.slice(-lastTaskCount).map(
+                            item => {
+                                if (item.status === 'error' || !item.status) {
+    
+                                    item.status = 'error'
+                                    item.response = failedTooltipInfo ? failedTooltipInfo : '上传失败'
+                                }
+                                return item
+                            }
+                        )
+                    )
+            }
+
+            updateFileList(_fileList)
+        }
     };
 
     // 添加accept参数
@@ -248,6 +319,48 @@ AntdUpload.propTypes = {
         )
     ]),
 
+    // 用于在每次的上传任务完成后，更新当前文件列表中全部文件的上传信息
+    listUploadTaskRecord: PropTypes.oneOfType([
+        // 单文件
+        PropTypes.exact({
+            // 记录文件名称
+            fileName: PropTypes.string,
+
+            // 记录文件大小
+            fileSize: PropTypes.number,
+
+            // 记录完成时间戳信息
+            completeTimestamp: PropTypes.number,
+
+            // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
+            taskStatus: PropTypes.string,
+
+            // 记录本次任务的id信息，若最近一次任务状态为'failed'，则不会携带此信息
+            taskId: PropTypes.string
+
+        }),
+        // 文件夹或多文件上传
+        PropTypes.arrayOf(
+            PropTypes.exact({
+                // 记录文件名称
+                fileName: PropTypes.string,
+
+                // 记录文件大小
+                fileSize: PropTypes.number,
+
+                // 记录完成时间戳信息
+                completeTimestamp: PropTypes.number,
+
+                // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
+                taskStatus: PropTypes.string,
+
+                // 记录本次任务的id信息，若最近一次任务状态为'failed'，则不会携带此信息
+                taskId: PropTypes.string
+
+            })
+        )
+    ]),
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not
@@ -274,7 +387,8 @@ AntdUpload.propTypes = {
 AntdUpload.defaultProps = {
     fileListMaxLength: null,
     fileMaxSize: 500,
-    lastUploadTaskRecord: {},
+    lastUploadTaskRecord: null,
+    listUploadTaskRecord: [],
     locale: 'zh-cn'
 }
 

package/usage.py

@@ -8,145 +8,120 @@ from dash.dependencies import Input, Output, State
 app = dash.Dash(__name__)
 
 
-@app.server.route('/upload/', methods=['POST'])
-def upload():
-    '''
-    构建文件上传服务
-    :return:
-    '''
-
-    # 获取上传id参数，用于指向保存路径
-    uploadId = request.values.get('uploadId')
-
-    # 获取上传的文件名称
-    filename = request.files['file'].filename
-
-    print({'filename': filename})
-
-    return {'filename': filename}
-
-
-@app.callback(
-    Output('output', 'children'),
-    Input('input', 'lastUploadTaskRecord')
-)
-def test(lastUploadTaskRecord):
-    if lastUploadTaskRecord:
-        print(lastUploadTaskRecord)
-
-    return dash.no_update
-
 app.layout = html.Div(
     [
 
-        fac.AntdUpload(
-            id='input',
-            apiUrl='/upload/',
-            directory=True
-        ),
-
-        html.Div(
-            id='output'
-        ),
-
         fac.AntdTable(
             columns=[
                 {
-                    'title': '图片字段测试',
-                    'dataIndex': '图片字段测试',
-                    'width': '200px',
+                    'title': '超链接示例',
+                    'dataIndex': '超链接示例',
                     'renderOptions': {
-                        'renderType': 'image'
+                        'renderType': 'link',
+                        'renderLinkText': '点击跳转'
                     }
                 }
             ],
             data=[
                 {
-                    '图片字段测试': {
-                        'src': 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
-                        'height': '100%'
+                    'key': i,
+                    '超链接示例': {
+                        'href': 'https://github.com/CNFeffery/feffery-antd-components'
                     }
                 }
-            ] * 100,
+                for i in range(3)
+            ],
             bordered=True,
             style={
-                'width': '300px'
+                'width': '250px'
             }
         ),
 
         fac.AntdTable(
-            selectedRowKeys=['2', '4'],
-            rowSelectionWidth='4rem',
             columns=[
                 {
                     'title': '默认的checkbox模式',
-                    'dataIndex': f'默认的checkbox模式',
-                    'width': '33.33%',
-                    'conditionStyle': '''
-                    (record, index) => {
-                        if (record.默认的checkbox模式 >= 10) {
-                            return {
-                                style: {
-                                    color: "red"
-                                }
-                            }
-                        }
-                        if (record.默认的checkbox模式 % 2 === 0) {
-                            return {
-                                style: {
-                                    backgroundColor: "#ffe7ba"
-                                }
-                            }
-                        }
-                        return {
-                            style: {
-                                fontWeight: "bold"
-                            }
-                        }
-                    }
-                    '''
-                    # 'fixed': 'left'
+                    'dataIndex': '默认的checkbox模式',
+                    'width': '25%'
                 },
                 {
                     'title': '自定义选项的checkbox模式',
                     'dataIndex': '自定义选项的checkbox模式',
-                    'width': '33.33%'
+                    'width': '25%'
                 },
                 {
                     'title': 'keyword模式',
                     'dataIndex': 'keyword模式',
-                    'width': '33.33%'
+                    'width': '25%'
+                },
+                {
+                    'title': '数值测试',
+                    'dataIndex': '数值测试',
+                    'width': '25%',
+                    'renderOptions': {
+                        'renderType': 'custom-format'
+                    }
                 }
             ],
-            sticky=True,
-            pagination={
-                'pageSize': 100
-            },
             data=[
                 {
                     '默认的checkbox模式': i,
                     '自定义选项的checkbox模式': i,
-                    'keyword模式': i
+                    'keyword模式': i,
+                    '数值测试': np.random.rand()
                 }
-                for i in range(500)
+                for i in range(20)
             ],
+            bordered=True,
             filterOptions={
-                '默认的checkbox模式': {
-                    'filterMode': 'keyword'
-                },
+                '默认的checkbox模式': {},
                 '自定义选项的checkbox模式': {
-                    'filterMode': 'keyword'
+                    'filterMode': 'checkbox',
+                    'filterCustomItems': [1, 2, 3],
+                    'filterMultiple': False,
+                    'filterSearch': True
                 },
                 'keyword模式': {
                     'filterMode': 'keyword'
                 }
             },
-            rowSelectionType='checkbox',
-            bordered=True,
-            # maxHeight=200,
-            maxWidth=1000,
-            style={
-                # 'width': '800px'
+            pagination={
+                'pageSize': 20
+            },
+            customFormatFuncs={
+                '数值测试': '(x) => `${(x*100).toFixed(2)}%`'
+            },
+            conditionalStyleFuncs={
+                **{
+                    key: '''
+                        (record, index) => {
+                            if ( index % 2 === 1 ) {
+                                return {
+                                    style: {
+                                        backgroundColor: "rgb(250, 250, 250)"
+                                    }
+                                }
+                            }
+                        }
+                    '''
+                    for key in ['默认的checkbox模式', '自定义选项的checkbox模式', 'keyword模式']
+                },
+                '数值测试': '''
+                    (record, index) => {
+                        if ( record['数值测试'] <= 0.5 ) {
+                            return {
+                                    style: {
+                                        background: `linear-gradient(90deg, rgb(61, 153, 112) 0%, rgb(61, 153, 112) ${record['数值测试']*100}%, white ${record['数值测试']*100}%, white 100%)`
+                                }
+                            };
+                        }
+                        return {
+                            style: {
+                                background: `linear-gradient(90deg, rgb(255, 65, 54) 0%, rgb(255, 65, 54) ${record['数值测试']*100}%, white ${record['数值测试']*100}%, white 100%)`
+                            }
+                        };
+                    }
+                '''
             }
         )
     ],