feffery_antd_components 0.1.6 → 0.1.7

package/feffery_antd_components/metadata.json

@@ -3546,7 +3546,7 @@
         "required": false,
         "description": "",
         "defaultValue": {
-          "value": "3",
+          "value": "null",
           "computed": false
         }
       },
@@ -3599,6 +3599,13 @@
         "required": false,
         "description": ""
       },
+      "showUploadList": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": ""
+      },
       "lastUploadTaskRecord": {
         "type": {
           "name": "exact",
@@ -4281,14 +4288,30 @@
       },
       "width": {
         "type": {
-          "name": "number"
+          "name": "union",
+          "value": [
+            {
+              "name": "number"
+            },
+            {
+              "name": "string"
+            }
+          ]
         },
         "required": false,
         "description": ""
       },
       "height": {
         "type": {
-          "name": "number"
+          "name": "union",
+          "value": [
+            {
+              "name": "number"
+            },
+            {
+              "name": "string"
+            }
+          ]
         },
         "required": false,
         "description": ""
@@ -9727,6 +9750,10 @@
                       {
                         "value": "'status-badge'",
                         "computed": false
+                      },
+                      {
+                        "value": "'image'",
+                        "computed": false
                       }
                     ],
                     "required": false
@@ -10252,6 +10279,31 @@
                       "required": false
                     }
                   }
+                },
+                {
+                  "name": "exact",
+                  "value": {
+                    "src": {
+                      "name": "string",
+                      "required": false
+                    },
+                    "height": {
+                      "name": "union",
+                      "value": [
+                        {
+                          "name": "string"
+                        },
+                        {
+                          "name": "number"
+                        }
+                      ],
+                      "required": false
+                    },
+                    "preview": {
+                      "name": "bool",
+                      "required": false
+                    }
+                  }
                 }
               ]
             }
@@ -12618,7 +12670,7 @@
         "required": false,
         "description": "",
         "defaultValue": {
-          "value": "3",
+          "value": "null",
           "computed": false
         }
       },
@@ -12678,31 +12730,71 @@
         "required": false,
         "description": ""
       },
+      "showUploadList": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": ""
+      },
       "lastUploadTaskRecord": {
         "type": {
-          "name": "exact",
-          "value": {
-            "fileName": {
-              "name": "string",
-              "required": false
-            },
-            "fileSize": {
-              "name": "number",
-              "required": false
-            },
-            "completeTimestamp": {
-              "name": "number",
-              "required": false
-            },
-            "taskStatus": {
-              "name": "string",
-              "required": false
+          "name": "union",
+          "value": [
+            {
+              "name": "exact",
+              "value": {
+                "fileName": {
+                  "name": "string",
+                  "required": false
+                },
+                "fileSize": {
+                  "name": "number",
+                  "required": false
+                },
+                "completeTimestamp": {
+                  "name": "number",
+                  "required": false
+                },
+                "taskStatus": {
+                  "name": "string",
+                  "required": false
+                },
+                "taskId": {
+                  "name": "string",
+                  "required": false
+                }
+              }
             },
-            "taskId": {
-              "name": "string",
-              "required": false
+            {
+              "name": "arrayOf",
+              "value": {
+                "name": "exact",
+                "value": {
+                  "fileName": {
+                    "name": "string",
+                    "required": false
+                  },
+                  "fileSize": {
+                    "name": "number",
+                    "required": false
+                  },
+                  "completeTimestamp": {
+                    "name": "number",
+                    "required": false
+                  },
+                  "taskStatus": {
+                    "name": "string",
+                    "required": false
+                  },
+                  "taskId": {
+                    "name": "string",
+                    "required": false
+                  }
+                }
+              }
             }
-          }
+          ]
         },
         "required": false,
         "description": "",

package/feffery_antd_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_antd_components",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Best implementation of Antd components in Plotly Dash.",
   "repository": {
     "type": "git",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_antd_components",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Best implementation of Antd components in Plotly Dash.",
   "repository": {
     "type": "git",

package/src/FefferyAntdComponents.jl

@@ -3,7 +3,7 @@ module FefferyAntdComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.1.6"
+const version = "0.1.7"
 
 include("jl/'feffery'_antdaffix.jl")
 include("jl/'feffery'_antdalert.jl")
@@ -94,14 +94,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_antd_components.min.js",
-    external_url = "https://unpkg.com/feffery_antd_components@0.1.6/feffery_antd_components/feffery_antd_components.min.js",
+    external_url = "https://unpkg.com/feffery_antd_components@0.1.7/feffery_antd_components/feffery_antd_components.min.js",
     dynamic = nothing,
     async = nothing,
     type = :js
 ),
 DashBase.Resource(
     relative_package_path = "feffery_antd_components.min.js.map",
-    external_url = "https://unpkg.com/feffery_antd_components@0.1.6/feffery_antd_components/feffery_antd_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_antd_components@0.1.7/feffery_antd_components/feffery_antd_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/'feffery'_antddraggerupload.jl

@@ -31,12 +31,13 @@ Those elements have the following types:
   - `component_name` (String; optional): Holds the name of the component that is loading
 - `locale` (a value equal to: 'zh-cn', 'en-us'; optional)
 - `multiple` (Bool; optional)
+- `showUploadList` (Bool; optional)
 - `style` (Dict; optional)
 - `text` (String; optional)
 - `uploadId` (String; optional)
 """
 function 'feffery'_antddraggerupload(; kwargs...)
-        available_props = Symbol[:id, :apiUrl, :className, :directory, :failedTooltipInfo, :fileListMaxLength, :fileMaxSize, :fileTypes, :hint, :lastUploadTaskRecord, :loading_state, :locale, :multiple, :style, :text, :uploadId]
+        available_props = Symbol[:id, :apiUrl, :className, :directory, :failedTooltipInfo, :fileListMaxLength, :fileMaxSize, :fileTypes, :hint, :lastUploadTaskRecord, :loading_state, :locale, :multiple, :showUploadList, :style, :text, :uploadId]
         wild_props = Symbol[]
         return Component("'feffery'_antddraggerupload", "AntdDraggerUpload", "feffery_antd_components", available_props, wild_props; kwargs...)
 end

package/src/jl/'feffery'_antdimage.jl

@@ -12,7 +12,7 @@ Keyword arguments:
 - `alt` (String; optional)
 - `className` (String; optional)
 - `fallback` (String; optional)
-- `height` (Real; optional)
+- `height` (Real | String; optional)
 - `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
 Those elements have the following types:
   - `is_loading` (Bool; optional): Determines if the component is loading or not
@@ -23,7 +23,7 @@ Those elements have the following types:
 - `preview` (Bool; optional)
 - `src` (String | Array of Strings; optional)
 - `style` (Dict; optional)
-- `width` (Real; optional)
+- `width` (Real | String; optional)
 """
 function 'feffery'_antdimage(; kwargs...)
         available_props = Symbol[:id, :alt, :className, :fallback, :height, :loading_state, :locale, :multiImageMode, :preview, :src, :style, :width]

package/src/jl/'feffery'_antdtable.jl

@@ -18,7 +18,7 @@ Those elements have the following types:
   - `dataIndex` (String; required)
   - `renderOptions` (optional): . renderOptions has the following type: lists containing elements 'renderType', 'renderLinkText', 'renderButtonPopConfirmProps'.
 Those elements have the following types:
-  - `renderType` (a value equal to: 'link', 'ellipsis', 'mini-line', 'mini-bar', 'mini-progress', 'mini-ring-progress', 'mini-area', 'tags', 'button', 'copyable', 'status-badge'; optional)
+  - `renderType` (a value equal to: 'link', 'ellipsis', 'mini-line', 'mini-bar', 'mini-progress', 'mini-ring-progress', 'mini-area', 'tags', 'button', 'copyable', 'status-badge', 'image'; optional)
   - `renderLinkText` (String; optional)
   - `renderButtonPopConfirmProps` (optional): . renderButtonPopConfirmProps has the following type: lists containing elements 'title', 'okText', 'cancelText'.
 Those elements have the following types:
@@ -63,7 +63,11 @@ Those elements have the following types:
   - `content` (String | Real; optional)s | lists containing elements 'status', 'text'.
 Those elements have the following types:
   - `status` (a value equal to: 'success', 'processing', 'default', 'error', 'warning'; optional)
-  - `text` (String | Real; optional)s
+  - `text` (String | Real; optional) | lists containing elements 'src', 'height', 'preview'.
+Those elements have the following types:
+  - `src` (String; optional)
+  - `height` (String | Real; optional)
+  - `preview` (Bool; optional)s
 - `enableHoverListen` (Bool; optional)
 - `filter` (Dict; optional)
 - `filterOptions` (Dict; optional)

package/src/jl/'feffery'_antdupload.jl

@@ -23,7 +23,13 @@ Those elements have the following types:
   - `fileSize` (Real; optional)
   - `completeTimestamp` (Real; optional)
   - `taskStatus` (String; optional)
-  - `taskId` (String; optional)
+  - `taskId` (String; optional) | Array of lists containing elements 'fileName', 'fileSize', 'completeTimestamp', 'taskStatus', 'taskId'.
+Those elements have the following types:
+  - `fileName` (String; optional)
+  - `fileSize` (Real; optional)
+  - `completeTimestamp` (Real; optional)
+  - `taskStatus` (String; optional)
+  - `taskId` (String; optional)s
 - `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
 Those elements have the following types:
   - `is_loading` (Bool; optional): Determines if the component is loading or not
@@ -31,11 +37,12 @@ Those elements have the following types:
   - `component_name` (String; optional): Holds the name of the component that is loading
 - `locale` (a value equal to: 'zh-cn', 'en-us'; optional)
 - `multiple` (Bool; optional)
+- `showUploadList` (Bool; optional)
 - `style` (Dict; optional)
 - `uploadId` (String; optional)
 """
 function 'feffery'_antdupload(; kwargs...)
-        available_props = Symbol[:id, :apiUrl, :buttonContent, :className, :directory, :failedTooltipInfo, :fileListMaxLength, :fileMaxSize, :fileTypes, :lastUploadTaskRecord, :loading_state, :locale, :multiple, :style, :uploadId]
+        available_props = Symbol[:id, :apiUrl, :buttonContent, :className, :directory, :failedTooltipInfo, :fileListMaxLength, :fileMaxSize, :fileTypes, :lastUploadTaskRecord, :loading_state, :locale, :multiple, :showUploadList, :style, :uploadId]
         wild_props = Symbol[]
         return Component("'feffery'_antdupload", "AntdUpload", "feffery_antd_components", available_props, wild_props; kwargs...)
 end

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

@@ -26,6 +26,7 @@ const AntdDraggerUpload = (props) => {
         fileListMaxLength,
         fileTypes,
         fileMaxSize,
+        showUploadList,
         multiple,
         directory,
         failedTooltipInfo,
@@ -65,16 +66,38 @@ const AntdDraggerUpload = (props) => {
 
             if (info.file.status === 'done') {
 
-                // 更新任务记录
-                setProps({
-                    lastUploadTaskRecord: {
-                        fileName: info.file.name,
-                        fileSize: info.file.size,
-                        completeTimestamp: new Date().getTime(),
-                        taskStatus: 'success',
-                        taskId: uploadId
+                // 检查是否为多文件上传模式
+                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
+                                    }
+                                }
+                            )
+                        })
                     }
-                })
+                } else {
+                    // 更新任务记录
+                    setProps({
+                        lastUploadTaskRecord: {
+                            fileName: info.file.name,
+                            fileSize: info.file.size,
+                            completeTimestamp: new Date().getTime(),
+                            taskStatus: 'success',
+                            taskId: uploadId
+                        }
+                    })
+                }
                 message.success(`${info.file.name} 上传成功！`);
             } else if (info.file.status === 'error') {
 
@@ -106,7 +129,11 @@ const AntdDraggerUpload = (props) => {
             )
 
             // 基于fileListMaxLength参数设置，对fileList状态进行更新
-            updateFileList(info.fileList.slice(-fileListMaxLength))
+            if (fileListMaxLength) {
+                updateFileList(info.fileList.slice(-fileListMaxLength))
+            } else {
+                updateFileList(info.fileList)
+            }
         },
     };
 
@@ -187,6 +214,9 @@ AntdDraggerUpload.propTypes = {
     // 自定义上传失败文件鼠标悬浮tooltip文字内容，默认为'上传失败'
     failedTooltipInfo: PropTypes.string,
 
+    // 设置是否显示已上传文件列表，默认为true
+    showUploadList: PropTypes.bool,
+
     // 用于在每次文件上传动作完成后，记录相关的信息
     lastUploadTaskRecord: PropTypes.exact({
         // 记录文件名称
@@ -230,7 +260,7 @@ AntdDraggerUpload.propTypes = {
 
 // 设置默认参数
 AntdDraggerUpload.defaultProps = {
-    fileListMaxLength: 3,
+    fileListMaxLength: null,
     fileMaxSize: 500,
     lastUploadTaskRecord: {},
     locale: 'zh-cn'

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

@@ -96,10 +96,16 @@ AntdImage.propTypes = {
     alt: PropTypes.string,
 
     // 设置像素宽度
-    width: PropTypes.number,
+    width: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
 
     // 设置图像高度
-    height: PropTypes.number,
+    height: PropTypes.oneOfType([
+        PropTypes.number,
+        PropTypes.string
+    ]),
 
     // 设置图片源地址，单个字符串传入时为单图片模式
     // 多个字符串数组传入时为多图片切换模式

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

@@ -1,6 +1,6 @@
 import React, { Component, useContext, useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Table, Tooltip, Popover, Popconfirm, ConfigProvider, Typography, Input, Form, Tag, Button, Badge, Space, message } from 'antd';
+import { Table, Tooltip, Popover, Popconfirm, ConfigProvider, Typography, Input, Form, Tag, Button, Badge, Space, Image, message } from 'antd';
 import { TinyLine, TinyArea, TinyColumn, Progress, RingProgress } from '@ant-design/charts';
 import Highlighter from 'react-highlight-words';
 import { SearchOutlined, QuestionCircleOutlined } from '@ant-design/icons';
@@ -607,6 +607,21 @@ export default class AntdTable extends Component {
             }
         }
 
+        // 配置字段渲染模式为image的相关参数
+        for (let i = 0; i < columns.length; i++) {
+            // 当前字段具有renderOptions参数时且renderOptions参数是字典时
+            if (columns[i]['renderOptions']) {
+                if (columns[i]['renderOptions'].hasOwnProperty('renderType')) {
+                    // 当renderOptions参数的renderType值设置为image时
+                    if (columns[i]['renderOptions']['renderType'] == 'image') {
+                        columns[i]['render'] = content => (
+                            <Image src={content.src} height={content.height} preview={content.preview} />
+                        )
+                    }
+                }
+            }
+        }
+
         // 配置字段渲染模式为button的相关参数
         for (let i = 0; i < columns.length; i++) {
             // 当前字段具有renderOptions参数时且renderOptions参数是字典时
@@ -961,7 +976,7 @@ AntdTable.propTypes = {
                 renderType: PropTypes.oneOf([
                     'link', 'ellipsis', 'mini-line', 'mini-bar', 'mini-progress',
                     'mini-ring-progress', 'mini-area', 'tags', 'button', 'copyable',
-                    'status-badge'
+                    'status-badge', 'image'
                 ]),
 
                 // 当renderType='link'时，此参数会将传入的字符串作为渲染link的显示文字内容
@@ -1164,6 +1179,21 @@ AntdTable.propTypes = {
                         PropTypes.string,
                         PropTypes.number
                     ])
+                }),
+
+                // image模式
+                PropTypes.exact({
+                    // 设置图片的src属性
+                    src: PropTypes.string,
+
+                    // 设置图片的高度
+                    height: PropTypes.oneOfType([
+                        PropTypes.string,
+                        PropTypes.number
+                    ]),
+
+                    // 设置是否允许预览，默认为true
+                    preview: PropTypes.bool
                 })
             ])
         )

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

@@ -23,6 +23,7 @@ const AntdUpload = (props) => {
         buttonContent,
         fileTypes,
         fileMaxSize,
+        showUploadList,
         multiple,
         directory,
         failedTooltipInfo,
@@ -59,20 +60,42 @@ const AntdUpload = (props) => {
             return sizeCheck;
         },
         onChange(info) {
-            console.log(info)
 
             if (info.file.status === 'done') {
 
-                // 更新任务记录
-                setProps({
-                    lastUploadTaskRecord: {
-                        fileName: info.file.name,
-                        fileSize: info.file.size,
-                        completeTimestamp: new Date().getTime(),
-                        taskStatus: 'success',
-                        taskId: uploadId
+                // 检查是否为多文件上传模式
+                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
+                                    }
+                                }
+                            )
+                        })
                     }
-                })
+                } else {
+                    // 更新任务记录
+                    setProps({
+                        lastUploadTaskRecord: {
+                            fileName: info.file.name,
+                            fileSize: info.file.size,
+                            completeTimestamp: new Date().getTime(),
+                            taskStatus: 'success',
+                            taskId: uploadId
+                        }
+                    })
+                }
+
                 message.success(`${info.file.name} 上传成功！`);
             } else if (info.file.status === 'error') {
 
@@ -104,7 +127,11 @@ const AntdUpload = (props) => {
             )
 
             // 基于fileListMaxLength参数设置，对fileList状态进行更新
-            updateFileList(info.fileList.slice(-fileListMaxLength))
+            if (fileListMaxLength) {
+                updateFileList(info.fileList.slice(-fileListMaxLength))
+            } else {
+                updateFileList(info.fileList)
+            }
         },
     };
 
@@ -123,6 +150,7 @@ const AntdUpload = (props) => {
                 style={style}
                 fileList={fileList}
                 multiple={multiple}
+                showUploadList={showUploadList}
                 directory={directory}
                 data-dash-is-loading={
                     (loading_state && loading_state.is_loading) || undefined
@@ -175,24 +203,50 @@ AntdUpload.propTypes = {
     // 自定义上传失败文件鼠标悬浮tooltip文字内容，默认为'上传失败'
     failedTooltipInfo: PropTypes.string,
 
+    // 设置是否显示已上传文件列表，默认为true
+    showUploadList: PropTypes.bool,
+
     // 用于在每次文件上传动作完成后，记录相关的信息
-    lastUploadTaskRecord: PropTypes.exact({
-        // 记录文件名称
-        fileName: PropTypes.string,
+    lastUploadTaskRecord: PropTypes.oneOfType([
+        // 单文件
+        PropTypes.exact({
+            // 记录文件名称
+            fileName: PropTypes.string,
 
-        // 记录文件大小
-        fileSize: PropTypes.number,
+            // 记录文件大小
+            fileSize: PropTypes.number,
 
-        // 记录完成时间戳信息
-        completeTimestamp: PropTypes.number,
+            // 记录完成时间戳信息
+            completeTimestamp: PropTypes.number,
 
-        // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
-        taskStatus: PropTypes.string,
+            // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
+            taskStatus: PropTypes.string,
 
-        // 记录本次任务的id信息，若最近一次任务状态为'failed'，则不会携带此信息
-        taskId: 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({
         /**
@@ -218,7 +272,7 @@ AntdUpload.propTypes = {
 
 // 设置默认参数
 AntdUpload.defaultProps = {
-    fileListMaxLength: 3,
+    fileListMaxLength: null,
     fileMaxSize: 500,
     lastUploadTaskRecord: {},
     locale: 'zh-cn'