feffery_antd_components 0.1.4 → 0.1.7

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';
@@ -349,7 +349,10 @@ export default class AntdTable extends Component {
 
             columns[i] = {
                 ...{ align: 'center' },
-                ...columns[i]
+                ...columns[i],
+                ...{
+                    onCell: columns[i]?.conditionStyle ? eval(columns[i].conditionStyle) : columns[i]?.onCell
+                }
             }
         }
 
@@ -604,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参数是字典时
@@ -958,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的显示文字内容
@@ -989,6 +1007,9 @@ AntdTable.propTypes = {
             // 自定义列像素宽度
             width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+            // 用于传入js函数字符串
+            conditionStyle: PropTypes.string,
+
             // 防止状态更新报错占位用，无实际意义
             ellipsis: PropTypes.any,
 
@@ -998,6 +1019,9 @@ AntdTable.propTypes = {
             // 防止状态更新报错占位用，无实际意义
             render: PropTypes.any,
 
+            // 确保onCell属性类型检查通过
+            onCell: PropTypes.any,
+
             // 备份title信息
             title_: PropTypes.string
         })
@@ -1032,8 +1056,13 @@ AntdTable.propTypes = {
     // 记录已被选择的行记录值列表
     selectedRows: PropTypes.array,
 
-    // 设置是否开启粘性头部，默认为false
-    sticky: PropTypes.bool,
+    // 设置粘性表头属性，默认为false
+    sticky: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.exact({
+            offsetHeader: PropTypes.number
+        })
+    ]),
 
     // 设置是否启用行悬浮事件监听（此功能可能会干扰其他正常表格功能，慎用），默认为false
     enableHoverListen: PropTypes.bool,
@@ -1119,7 +1148,26 @@ AntdTable.propTypes = {
                             PropTypes.string,
                             PropTypes.number
                         ])
-                    })
+                    }),
+
+                    // 多按钮模式
+                    PropTypes.arrayOf(
+                        PropTypes.exact({
+                            // 设置是否禁用按钮，默认为false
+                            disabled: PropTypes.bool,
+                            // 设置按钮的type属性，同AntdButton
+                            type: PropTypes.oneOf(['primary', 'ghost', 'dashed', 'link', 'text', 'default']),
+                            // 设置按钮的danger属性，同AntdButton
+                            danger: PropTypes.bool,
+                            // 设置按钮的css样式
+                            style: PropTypes.object,
+                            // 设置按钮的文本内容
+                            content: PropTypes.oneOfType([
+                                PropTypes.string,
+                                PropTypes.number
+                            ])
+                        })
+                    )
                 ]),
 
                 // status-badge模式
@@ -1131,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/AntdTimePicker.react.js

@@ -37,6 +37,7 @@ export default class AntdTimePicker extends Component {
             placeholder,
             bordered,
             size,
+            status,
             persistence,
             persisted_props,
             persistence_type,
@@ -70,6 +71,7 @@ export default class AntdTimePicker extends Component {
                         defaultValue={defaultValue ? moment(defaultValue, format) : undefined}
                         use12Hours={use12Hours}
                         allowClear={allowClear}
+                        status={status}
                         persistence={persistence}
                         persisted_props={persisted_props}
                         persistence_type={persistence_type}
@@ -136,6 +138,9 @@ AntdTimePicker.propTypes = {
         'small', 'middle', 'large'
     ]),
 
+    // 设置校验状态，可选的有'error'、'warning'
+    status: PropTypes.oneOf(['error', 'warning']),
+
     /**
     * Object that holds the loading state object coming from dash-renderer
     */

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

@@ -39,6 +39,7 @@ export default class AntdTimeRangePicker extends Component {
             allowClear,
             bordered,
             size,
+            status,
             persistence,
             persisted_props,
             persistence_type,
@@ -88,6 +89,7 @@ export default class AntdTimeRangePicker extends Component {
                                 ) :
                                 undefined
                         }
+                        status={status}
                         persistence={persistence}
                         persisted_props={persisted_props}
                         persistence_type={persistence_type}
@@ -157,6 +159,9 @@ AntdTimeRangePicker.propTypes = {
         'small', 'middle', 'large'
     ]),
 
+    // 设置校验状态，可选的有'error'、'warning'
+    status: PropTypes.oneOf(['error', 'warning']),
+
     /**
     * Object that holds the loading state object coming from dash-renderer
     */

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

@@ -98,12 +98,11 @@ export default class AntdTree extends Component {
             setProps({ selectedKeys: e })
         }
 
-        const listenCheck = (e) => {
-            setProps({ checkedKeys: e })
+        const listenCheck = (checkedKeys, e) => {
+            setProps({ checkedKeys: checkedKeys, halfCheckedKeys: e.halfCheckedKeys })
         }
 
         const listenExpand = (e) => {
-            console.log({ e })
             setProps({ expandedKeys: e })
         }
 
@@ -222,16 +221,10 @@ AntdTree.propTypes = {
     selectedKeys: PropTypes.array,
 
     // 用于存储当前已被勾选的节点key数组
-    checkedKeys: PropTypes.oneOfType([
-        PropTypes.array,
-        PropTypes.exact({
-            // 对应完整勾选状态下的节点key数组
-            checked: PropTypes.array,
-
-            // 对应半勾选状态下的节点key数组
-            halfChecked: PropTypes.array
-        })
-    ]),
+    checkedKeys: PropTypes.array,
+
+    // 不可控属性，用于记录当前状态下处于半勾选状态下的节点key数组
+    halfCheckedKeys: PropTypes.array,
 
     // 对应当前已展开节点的key值数组
     expandedKeys: PropTypes.arrayOf(PropTypes.string),

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

@@ -41,6 +41,8 @@ export default class AntdTreeSelect extends Component {
             treeExpandedKeys,
             virtual,
             disabled,
+            placement,
+            status,
             setProps,
             persistence,
             persisted_props,
@@ -87,6 +89,8 @@ export default class AntdTreeSelect extends Component {
                     showSearch={true}
                     virtual={virtual}
                     disabled={disabled}
+                    placement={placement}
+                    status={status}
                     persistence={persistence}
                     persisted_props={persisted_props}
                     persistence_type={persistence_type}
@@ -217,6 +221,13 @@ AntdTreeSelect.propTypes = {
     // 设置是否禁用整个组件
     disabled: PropTypes.bool,
 
+    // 设置悬浮展开层的方位，可选的有'bottomLeft'、'bottomRight'、'topLeft'、'topRight'
+    // 默认为'bottomLeft'
+    placement: PropTypes.oneOf(['bottomLeft', 'bottomRight', 'topLeft', 'topRight']),
+
+    // 设置校验状态，可选的有'error'、'warning'
+    status: PropTypes.oneOf(['error', 'warning']),
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not

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'

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

@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { WaterMark } from '@ant-design/pro-layout';
+import '@ant-design/pro-layout/dist/layout.css';
+
+const parseChildrenToArray = children => {
+    if (children && !Array.isArray(children)) {
+        return [children];
+    }
+    return children;
+};
+
+// 定义水印组件AntdWatermark，api参数参考https://procomponents.ant.design/components/water-mark
+export default class AntdWatermark extends Component {
+    render() {
+        // 取得必要属性或参数
+        let {
+            id,
+            children,
+            className,
+            style,
+            content,
+            rotate,
+            zIndex,
+            fontColor,
+            fontSize,
+            gapX,
+            gapY,
+            loading_state
+        } = this.props;
+
+        children = parseChildrenToArray(children)
+
+        return (
+            <WaterMark id={id}
+                className={className}
+                style={style}
+                content={content}
+                rotate={rotate}
+                zIndex={zIndex}
+                fontColor={fontColor}
+                fontSize={fontSize}
+                gapX={gapX}
+                gapY={gapY}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }>
+                {children}
+            </WaterMark>
+        );
+    }
+}
+
+// 定义参数或属性
+AntdWatermark.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    /**
+     * The content of the tab - will only be displayed if this tab is selected
+     */
+    children: PropTypes.node,
+
+    // css类名
+    className: PropTypes.string,
+
+    // 自定义css字典
+    style: PropTypes.object,
+
+    // 设置水印文字内容
+    content: PropTypes.string,
+
+    // 设置水印旋转角度，默认-22
+    rotate: PropTypes.number,
+
+    // 设置水印z-index
+    zIndex: PropTypes.number,
+
+    // 设置水印文字颜色
+    fontColor: PropTypes.string,
+
+    // 设置水印字体像素大小，默认16
+    fontSize: PropTypes.number,
+
+    // 水印之间的水平像素间距，默认为212
+    gapX: PropTypes.number,
+
+    // 水印之间的垂直间距，默认为222
+    gapY: PropTypes.number,
+
+    loading_state: PropTypes.shape({
+        /**
+         * Determines if the component is loading or not
+         */
+        is_loading: PropTypes.bool,
+        /**
+         * Holds which property is loading
+         */
+        prop_name: PropTypes.string,
+        /**
+         * Holds the name of the component that is loading
+         */
+        component_name: PropTypes.string
+    }),
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func
+};
+
+// 设置默认参数
+AntdWatermark.defaultProps = {
+}

package/src/lib/components/styles.css

@@ -39,14 +39,6 @@
     line-height: 1;
 }
 
-/* .ant-spin-nested-loading {
-    height: 100%!important;
-}
-
-.ant-spin-container {
-    height: 100%!important;
-} */
-
 .comment-action {
     padding-left: 8px;
     cursor: 'auto';
@@ -61,6 +53,15 @@
     vertical-align: -0.125em !important;
 }
 
-/* .ant-breadcrumb-link > svg {
-    vertical-align: middle;
-} */
+
+.feffery-paste-image-container {
+    height: 400px;
+    overflow: auto;
+    border: 1px solid #d9d9d9;
+    transition: all .3s, height 0s;
+    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAkdJREFUSEtjZMABcnNny3ByMpQyMzNpISv59u3XtokTM/tx6UMXZ4QJJCTM5+Dh+WIB4zMxMe83M1NhkJUVRdFz8eJ9hgcPXr/+9etXGEzi3z+mG9OmZb/AZinYgqbqqWVvvzC2Gyv8YgLxP3xjYvjwR4AhM8sTq0Obm1czmCj+gsu9+cx879MPxicNbTn2WH2Qnzftb5rTF7Dhh2+yM7z8yMzw8x8rgyAfKwPci1Cd/xkYGF69+8Ugwv2bQV3yN4OqxB+wzPaLnA+fvGdxmDAh8wGyJWD9teVT70dYflUAsb/+ZGTgZAMZQxgwIdl+9Bbbg0uPmBOnTMk9gNcCwsZiV0GRBTP38eC1l52dlYGL+efnt1/++5Hlg23XJRmi4/1xWjJ16jqGz5+/MTAw/N84aVJ2AMlBRMiCSZPWMLS3JzLk509nYGRknDZxYmY2zBKMSMbmTEIW9PevZOjqSgFrBVnCwMAwf9KkrCQQgyoW9PQsZ+jtTYO7DdkSqljQ2bmU4f9/rEm7iioWgJz+8+d3hl+/fsJ9cfHi7W+HDl3zppoF6JbQxAJkS2hmAcyS06evUD+IkJP44cNnvh4+fNWHqnGAbMGhQ+c/HzlyyQ9sQU3ZlIeRVt/kcJUFhDIaNn0oFlSXTX0UZfVVlmYWVJVNeRxk8l2GlQV7PbDrJv7CjhgfzFEQ/R0oyvtPCJvim+/FGWLjfUmqKlCCCKSzrHhyAA87QzA2U5i5RMKcXUzYSLHhwYNniEgmpLGsbG4XITXY5Lu6kssAynVWbI/9nxAAAAAASUVORK5CYII=), auto;
+}
+
+.feffery-paste-image-container:hover {
+    border: 1px solid rgb(64, 169, 255);
+}

package/src/lib/components/tabs/AntdTabs.react.js

@@ -107,6 +107,10 @@ export default class AntdTabs extends Component {
                                     }
                                     overlayStyle={{ maxWidth: "250px" }}
                                     placement={"right"}
+                                    getPopupContainer={(triggerNode) => {
+                                        console.log(triggerNode.parentNode)
+                                        return triggerNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
+                                    }}
                                 >
                                     <InfoCircleOutlined
                                         style={{

package/src/lib/index.js

@@ -76,6 +76,8 @@ import AntdCalendar from './components/AntdCalendar.react'
 import AntdComment from './components/AntdComment.react'
 import AntdDescriptions from './components/descriptions/AntdDescriptions.react'
 import AntdDescriptionItem from './components/descriptions/AntdDescriptionItem.react'
+import AntdWatermark from './components/AntdWatermark.react'
+import AntdPasteImage from './components/AntdPasteImage.react'
 
 export {
     AntdDatePicker,
@@ -154,5 +156,7 @@ export {
     AntdCalendar,
     AntdComment,
     AntdDescriptions,
-    AntdDescriptionItem
+    AntdDescriptionItem,
+    AntdWatermark,
+    AntdPasteImage
 };