feffery_antd_components 0.2.2 → 0.2.6

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

@@ -465,6 +465,7 @@ class AntdTable extends Component {
             size,
             mode,
             nClicksButton,
+            nDoubleClicksCell,
             summaryRowContents,
             summaryRowFixed,
             customFormatFuncs,
@@ -820,101 +821,109 @@ class AntdTable extends Component {
                 }
                 // dropdown模式
                 else if (columns[i]['renderOptions']['renderType'] === 'dropdown') {
-                    columns[i]['render'] = (menuItems, record) => (
-                        <Dropdown
-                            overlay={
-                                <Menu onClick={(item, key, keyPath, domEvent) => {
-                                    setTimeout(function () {
-                                        setProps({
-                                            nClicksDropdownItem: nClicksDropdownItem + 1,
-                                            recentlyClickedDropdownItemTitle: item.key,
-                                            recentlyDropdownItemClickedDataIndex: columns[i].dataIndex,
-                                            recentlyDropdownItemClickedRow: record
-                                        })
-                                    }, 200);
-                                }}>
-                                    {
-                                        menuItems.map(
-                                            menuItem => (
-                                                menuItem ?
-                                                    // 判断isDivider参数是否不为false
-                                                    (
-                                                        menuItem.isDivider ?
-                                                            <Menu.Divider /> :
-                                                            <Menu.Item icon={<AntdIcon icon={menuItem.icon} />}
-                                                                disabled={menuItem.disabled}
-                                                                key={menuItem.title}>
-                                                                <a >{menuItem.title}</a>
-                                                            </Menu.Item>
-                                                    ) :
-                                                    null
+                    columns[i]['render'] = (menuItems, record) => {
+                        // 针对空值进行错误处理
+                        menuItems = menuItems || []
+                        return (
+                            <Dropdown
+                                overlay={
+                                    <Menu onClick={(item, key, keyPath, domEvent) => {
+                                        setTimeout(function () {
+                                            setProps({
+                                                nClicksDropdownItem: nClicksDropdownItem + 1,
+                                                recentlyClickedDropdownItemTitle: item.key,
+                                                recentlyDropdownItemClickedDataIndex: columns[i].dataIndex,
+                                                recentlyDropdownItemClickedRow: record
+                                            })
+                                        }, 200);
+                                    }}>
+                                        {
+                                            menuItems.map(
+                                                menuItem => (
+                                                    menuItem ?
+                                                        // 判断isDivider参数是否不为false
+                                                        (
+                                                            menuItem.isDivider ?
+                                                                <Menu.Divider /> :
+                                                                <Menu.Item icon={<AntdIcon icon={menuItem.icon} />}
+                                                                    disabled={menuItem.disabled}
+                                                                    key={menuItem.title}>
+                                                                    <a >{menuItem.title}</a>
+                                                                </Menu.Item>
+                                                        ) :
+                                                        null
+                                                )
                                             )
-                                        )
-                                    }
-                                </Menu>
-                            }
-                            arrow={columns[i]['renderOptions']?.dropdownProps?.arrow}
-                            disabled={columns[i]['renderOptions']?.dropdownProps?.disabled}
-                            overlayClassName={columns[i]['renderOptions']?.dropdownProps?.overlayClassName}
-                            overlayStyle={columns[i]['renderOptions']?.dropdownProps?.overlayStyle}
-                            placement={columns[i]['renderOptions']?.dropdownProps?.placement}
-                            trigger={
-                                columns[i]['renderOptions']?.dropdownProps?.trigger ?
-                                    [columns[i]['renderOptions'].dropdownProps.trigger] : ['hover']
-                            }
-                            getPopupContainer={containerId ? () => (document.getElementById(containerId) ? document.getElementById(containerId) : document.body) : undefined}>
-                            <a className="ant-dropdown-link"
-                                onClick={e => e.preventDefault()}>
-                                {columns[i]['renderOptions']?.dropdownProps?.title} <DownOutlined />
-                            </a>
-                        </Dropdown>
-                    )
+                                        }
+                                    </Menu>
+                                }
+                                arrow={columns[i]['renderOptions']?.dropdownProps?.arrow}
+                                disabled={columns[i]['renderOptions']?.dropdownProps?.disabled || menuItems.length === 0}
+                                overlayClassName={columns[i]['renderOptions']?.dropdownProps?.overlayClassName}
+                                overlayStyle={columns[i]['renderOptions']?.dropdownProps?.overlayStyle}
+                                placement={columns[i]['renderOptions']?.dropdownProps?.placement}
+                                trigger={
+                                    columns[i]['renderOptions']?.dropdownProps?.trigger ?
+                                        [columns[i]['renderOptions'].dropdownProps.trigger] : ['hover']
+                                }
+                                getPopupContainer={containerId ? () => (document.getElementById(containerId) ? document.getElementById(containerId) : document.body) : undefined}>
+                                <a className="ant-dropdown-link"
+                                    onClick={e => e.preventDefault()}>
+                                    {columns[i]['renderOptions']?.dropdownProps?.title} <DownOutlined />
+                                </a>
+                            </Dropdown>
+                        );
+                    }
                 }
                 // dropdown-links模式
                 else if (columns[i]['renderOptions']['renderType'] === 'dropdown-links') {
-                    columns[i]['render'] = menuItems => (
-                        <Dropdown
-                            overlay={
-                                <Menu>
-                                    {
-                                        menuItems.map(
-                                            menuItem => (
-                                                menuItem ?
-                                                    // 判断isDivider参数是否不为false
-                                                    (
-                                                        menuItem.isDivider ?
-                                                            <Menu.Divider /> :
-                                                            <Menu.Item icon={<AntdIcon icon={menuItem.icon} />}
-                                                                disabled={menuItem.disabled}
-                                                                key={menuItem.title}>
-                                                                <a href={menuItem.href}
-                                                                    target={'_blank'}>
-                                                                    {menuItem.title}
-                                                                </a>
-                                                            </Menu.Item>
-                                                    ) :
-                                                    null
+                    columns[i]['render'] = menuItems => {
+                        // 针对空值进行错误处理
+                        menuItems = menuItems || []
+                        return (
+                            <Dropdown
+                                overlay={
+                                    <Menu>
+                                        {
+                                            menuItems.map(
+                                                menuItem => (
+                                                    menuItem ?
+                                                        // 判断isDivider参数是否不为false
+                                                        (
+                                                            menuItem.isDivider ?
+                                                                <Menu.Divider /> :
+                                                                <Menu.Item icon={<AntdIcon icon={menuItem.icon} />}
+                                                                    disabled={menuItem.disabled}
+                                                                    key={menuItem.title}>
+                                                                    <a href={menuItem.href}
+                                                                        target={'_blank'}>
+                                                                        {menuItem.title}
+                                                                    </a>
+                                                                </Menu.Item>
+                                                        ) :
+                                                        null
+                                                )
                                             )
-                                        )
-                                    }
-                                </Menu>
-                            }
-                            arrow={columns[i]['renderOptions']?.dropdownProps?.arrow}
-                            disabled={columns[i]['renderOptions']?.dropdownProps?.disabled}
-                            overlayClassName={columns[i]['renderOptions']?.dropdownProps?.overlayClassName}
-                            overlayStyle={columns[i]['renderOptions']?.dropdownProps?.overlayStyle}
-                            placement={columns[i]['renderOptions']?.dropdownProps?.placement}
-                            trigger={
-                                columns[i]['renderOptions']?.dropdownProps?.trigger ?
-                                    [columns[i]['renderOptions'].dropdownProps.trigger] : ['hover']
-                            }
-                            getPopupContainer={containerId ? () => (document.getElementById(containerId) ? document.getElementById(containerId) : document.body) : undefined}>
-                            <a className="ant-dropdown-link"
-                                onClick={e => e.preventDefault()}>
-                                {columns[i]['renderOptions']?.dropdownProps?.title} <DownOutlined />
-                            </a>
-                        </Dropdown>
-                    )
+                                        }
+                                    </Menu>
+                                }
+                                arrow={columns[i]['renderOptions']?.dropdownProps?.arrow}
+                                disabled={columns[i]['renderOptions']?.dropdownProps?.disabled || menuItems.length === 0}
+                                overlayClassName={columns[i]['renderOptions']?.dropdownProps?.overlayClassName}
+                                overlayStyle={columns[i]['renderOptions']?.dropdownProps?.overlayStyle}
+                                placement={columns[i]['renderOptions']?.dropdownProps?.placement}
+                                trigger={
+                                    columns[i]['renderOptions']?.dropdownProps?.trigger ?
+                                        [columns[i]['renderOptions'].dropdownProps.trigger] : ['hover']
+                                }
+                                getPopupContainer={containerId ? () => (document.getElementById(containerId) ? document.getElementById(containerId) : document.body) : undefined}>
+                                <a className="ant-dropdown-link"
+                                    onClick={e => e.preventDefault()}>
+                                    {columns[i]['renderOptions']?.dropdownProps?.title} <DownOutlined />
+                                </a>
+                            </Dropdown>
+                        );
+                    }
                 }
                 // ellipsis-copyable模式
                 else if (columns[i]['renderOptions']['renderType'] === 'ellipsis-copyable') {
@@ -1040,7 +1049,7 @@ class AntdTable extends Component {
                 else if (columns[i]['renderOptions']['renderType'] === 'select') {
                     columns[i]['render'] = (content, record) => {
                         const currentDataIndex = columns[i]['dataIndex']
-                        // 防止未定义错误
+                        // 针对空值进行错误处理
                         content = content || {}
                         return (
                             <Select
@@ -1405,6 +1414,13 @@ class AntdTable extends Component {
                                                 recentlyCellClickRecord: e,
                                                 nClicksCell: nClicksCell + 1
                                             })
+                                        },
+                                        onDoubleClick: event => {
+                                            setProps({
+                                                recentlyCellDoubleClickColumn: currentDataIndex,
+                                                recentlyCellDoubleClickRecord: e,
+                                                nDoubleClicksCell: nDoubleClicksCell + 1
+                                            })
                                         }
                                     };
                                 }
@@ -1723,6 +1739,9 @@ AntdTable.propTypes = {
     data: PropTypes.arrayOf(
         PropTypes.objectOf(
             PropTypes.oneOfType([
+                // 针对向下嵌套children的兼容处理
+                PropTypes.arrayOf(PropTypes.any),
+
                 // 常规模式、ellipsis模式、copyable模式、custom-format模式、ellipsis-copyable模式
                 PropTypes.string,
 
@@ -1970,7 +1989,10 @@ AntdTable.propTypes = {
                             // 设置选项内容
                             label: PropTypes.string,
                             // 设置选项内容的值
-                            value: PropTypes.string
+                            value: PropTypes.oneOfType([
+                                PropTypes.string,
+                                PropTypes.number
+                            ])
                         })
                     ),
                     // 设置下拉选择菜单像素高度，默认为256
@@ -2269,6 +2291,7 @@ AntdTable.propTypes = {
     ),
 
     // 记录单元格点击事件
+    // 单击事件
     // 记录单元格点击事件对应的字段dataIndex信息
     recentlyCellClickColumn: PropTypes.string,
 
@@ -2278,6 +2301,16 @@ AntdTable.propTypes = {
     // 记录单元格单击事件发生的总次数
     nClicksCell: PropTypes.number,
 
+    // 双击事件
+    // 记录单元格点击事件对应的字段dataIndex信息
+    recentlyCellDoubleClickColumn: PropTypes.string,
+
+    // 记录单元格点击事件对应的行记录信息
+    recentlyCellDoubleClickRecord: PropTypes.object,
+
+    // 记录单元格单击事件发生的总次数
+    nDoubleClicksCell: PropTypes.number,
+
     // 自定义空数据状态内容
     emptyContent: PropTypes.node,
 
@@ -2413,6 +2446,7 @@ AntdTable.defaultProps = {
     expandRowByClick: false,
     enableCellClickListenColumns: [],
     nClicksCell: 0,
+    nDoubleClicksCell: 0,
     cellUpdateOptimize: false,
     summaryRowFixed: false,
     conditionalStyleFuncs: {},

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

@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Tree, Tooltip } from 'antd';
+import { Tree, Tooltip, Dropdown } from 'antd';
 import AntdIcon from './AntdIcon.react';
 import { omitBy, isUndefined, isString, isObject, isArray, cloneDeep } from 'lodash';
 import { flatToTree } from './utils';
@@ -65,21 +65,18 @@ const AntdTree = (props) => {
     const add_leaf_node_icon = (inputTreeData) => {
         if (isObject(inputTreeData)) {
             // 为节点添加tooltip相关参数
-            if (inputTreeData.tooltipProps) {
+            if (inputTreeData.tooltipProps && isString(inputTreeData.title)) {
                 inputTreeData.title = (<Tooltip {...inputTreeData.tooltipProps}>
                     {inputTreeData.title}
                 </Tooltip>)
             }
-
             if (inputTreeData.children) {
                 if (isString(inputTreeData.icon)) {
                     inputTreeData.icon = <AntdIcon icon={inputTreeData.icon} />
                 }
-
                 for (let i = 0; i < inputTreeData.children.length; i++) {
                     inputTreeData.children[i] = add_leaf_node_icon(inputTreeData.children[i])
                 }
-
             } else {
                 if (isString(inputTreeData.icon)) {
                     inputTreeData.icon = <AntdIcon icon={inputTreeData.icon} />
@@ -97,6 +94,7 @@ const AntdTree = (props) => {
     }
 
     const listenSelect = (e) => {
+        console.log('节点选择发生', e)
         setProps({ selectedKeys: e })
     }
 
@@ -217,10 +215,41 @@ const AntdTree = (props) => {
             height={height}
             titleRender={(nodeData) => {
                 return (
-                    <span className={nodeData.className ? `ant-tree-title ${nodeData.className}` : "ant-tree-title"}
-                        style={nodeData.style}>
-                        {nodeData.title}
-                    </span>
+                    nodeData.contextMenu ?
+                        <Dropdown
+                            menu={{
+                                items: nodeData.contextMenu.map(
+                                    itemProps => {
+                                        return {
+                                            ...itemProps,
+                                            icon: <AntdIcon icon={itemProps.icon} />
+                                        }
+                                    }
+                                ),
+                                // 右键菜单事件监听
+                                onClick: (e) => {
+                                    // 阻止事件蔓延
+                                    e.domEvent.stopPropagation()
+                                    // 更新相关事件信息
+                                    setProps({
+                                        clickedContextMenu: {
+                                            nodeKey: nodeData.key,
+                                            menuKey: e.key
+                                        }
+                                    })
+                                }
+                            }}
+                            trigger={['contextMenu']}
+                        >
+                            <span className={nodeData.className ? `ant-tree-title ${nodeData.className}` : "ant-tree-title"}
+                                style={nodeData.style}>
+                                {nodeData.title}
+                            </span>
+                        </Dropdown> :
+                        <span className={nodeData.className ? `ant-tree-title ${nodeData.className}` : "ant-tree-title"}
+                            style={nodeData.style}>
+                            {nodeData.title}
+                        </span>
                 );
             }}
             showLeafIcon={false}
@@ -278,7 +307,19 @@ const PropTreeNodeShape = {
             'top', 'left', 'right', 'bottom', 'topLeft',
             'topRight', 'bottomLeft', 'bottomRight'
         ])
-    })
+    }),
+
+    // 为当前节点设置右键菜单相关参数
+    contextMenu: PropTypes.arrayOf(
+        PropTypes.exact({
+            // 为当前右键菜单选项设置唯一key值
+            key: PropTypes.string,
+            // 为当前右键菜单项设置标题内容
+            label: PropTypes.string,
+            // 为当前选项设置前缀图标，同AntdIcon中的icon参数
+            icon: PropTypes.string
+        })
+    )
 };
 
 const PropTreeNode = PropTypes.shape(PropTreeNodeShape);
@@ -326,7 +367,19 @@ const PropFlatNodeShape = {
             'top', 'left', 'right', 'bottom', 'topLeft',
             'topRight', 'bottomLeft', 'bottomRight'
         ])
-    })
+    }),
+
+    // 为当前节点设置右键菜单相关参数
+    contextMenu: PropTypes.arrayOf(
+        PropTypes.exact({
+            // 为当前右键菜单选项设置唯一key值
+            key: PropTypes.string,
+            // 为当前右键菜单项设置标题内容
+            label: PropTypes.string,
+            // 为当前选项设置前缀图标，同AntdIcon中的icon参数
+            icon: PropTypes.string
+        })
+    )
 };
 
 // 定义参数或属性
@@ -416,6 +469,14 @@ AntdTree.propTypes = {
     // 当节点被拖拽时，监听该节点的key值信息
     draggedNodeKey: PropTypes.string,
 
+    // 当有节点的右键菜单选项被点击时，监听相关的事件信息
+    clickedContextMenu: PropTypes.exact({
+        // 记录对应的树节点key值
+        nodeKey: PropTypes.string,
+        // 记录对应的右键菜单选项key值
+        menuKey: PropTypes.string
+    }),
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not

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

@@ -84,7 +84,11 @@ const AntdDraggerUpload = (props) => {
     useEffect(() => {
         // 初始化uploadId
         if (!uploadId) {
-            setProps({ uploadId: uuidv4() })
+            if (defaultFileList && defaultFileList.length > 0) {
+                setProps({ uploadId: defaultFileList[0].taskId || uuidv4() })
+            } else {
+                setProps({ uploadId: uuidv4() })
+            }
         }
     }, [])
 
@@ -93,7 +97,8 @@ const AntdDraggerUpload = (props) => {
             name: item.fileName,
             status: item.taskStatus,
             uid: item.uid,
-            url: item.url
+            url: item.url,
+            fileSize: item.fileSize
         };
     }));
 
@@ -605,7 +610,13 @@ AntdDraggerUpload.propTypes = {
             uid: PropTypes.any,
 
             // 可选，用于渲染当前文件的下载链接
-            url: PropTypes.string
+            url: PropTypes.string,
+
+            // 标识当前任务的taskId，若设置，则默认会被作为当前组件的uploadId使用
+            taskId: PropTypes.string,
+
+            // 可选，记录文件大小
+            fileSize: PropTypes.number
         })
     ),
 

package/src/lib/components/upload/AntdPictureUpload.react.js

@@ -89,7 +89,11 @@ const AntdPictureUpload = (props) => {
     useEffect(() => {
         // 初始化uploadId
         if (!uploadId) {
-            setProps({ uploadId: uuidv4() })
+            if (defaultFileList && defaultFileList.length > 0) {
+                setProps({ uploadId: defaultFileList[0].taskId || uuidv4() })
+            } else {
+                setProps({ uploadId: uuidv4() })
+            }
         }
     }, [])
 
@@ -98,7 +102,8 @@ const AntdPictureUpload = (props) => {
             name: item.fileName,
             status: item.taskStatus,
             uid: item.uid,
-            url: item.url
+            url: item.url,
+            fileSize: item.fileSize
         };
     }));
     const [previewVisible, setPreviewVisible] = useState(false);
@@ -633,7 +638,13 @@ AntdPictureUpload.propTypes = {
             uid: PropTypes.any,
 
             // 可选，用于渲染当前文件的下载链接
-            url: PropTypes.string
+            url: PropTypes.string,
+
+            // 标识当前任务的taskId，若设置，则默认会被作为当前组件的uploadId使用
+            taskId: PropTypes.string,
+
+            // 可选，记录文件大小
+            fileSize: PropTypes.number
         })
     ),
 

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

@@ -79,7 +79,11 @@ const AntdUpload = (props) => {
     useEffect(() => {
         // 初始化uploadId
         if (!uploadId) {
-            setProps({ uploadId: uuidv4() })
+            if (defaultFileList && defaultFileList.length > 0) {
+                setProps({ uploadId: defaultFileList[0].taskId || uuidv4() })
+            } else {
+                setProps({ uploadId: uuidv4() })
+            }
         }
     }, [])
 
@@ -88,7 +92,8 @@ const AntdUpload = (props) => {
             name: item.fileName,
             status: item.taskStatus,
             uid: item.uid,
-            url: item.url
+            url: item.url,
+            fileSize: item.fileSize
         };
     }));
 
@@ -552,7 +557,13 @@ AntdUpload.propTypes = {
             uid: PropTypes.any,
 
             // 可选，用于渲染当前文件的下载链接
-            url: PropTypes.string
+            url: PropTypes.string,
+
+            // 标识当前任务的taskId，若设置，则默认会被作为当前组件的uploadId使用
+            taskId: PropTypes.string,
+
+            // 可选，记录文件大小
+            fileSize: PropTypes.number
         })
     ),