feffery_antd_components 0.1.3 → 0.1.6

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

@@ -1,7 +1,7 @@
 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, Space, message } from 'antd';
-import { TinyLine, TinyArea, TinyColumn, Progress } from '@ant-design/charts';
+import { Table, Tooltip, Popover, Popconfirm, ConfigProvider, Typography, Input, Form, Tag, Button, Badge, Space, 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';
 import { str2Locale } from './locales.react';
@@ -298,6 +298,8 @@ export default class AntdTable extends Component {
             containerId,
             setProps,
             columns,
+            miniChartHeight,
+            miniChartAnimation,
             rowSelectionType,
             selectedRowKeys,
             rowSelectionWidth,
@@ -311,9 +313,12 @@ export default class AntdTable extends Component {
             pagination,
             bordered,
             maxHeight,
+            maxWidth,
             size,
             mode,
             nClicksButton,
+            summaryRowContents,
+            summaryRowFixed,
             loading_state
         } = this.props;
 
@@ -327,8 +332,8 @@ export default class AntdTable extends Component {
         pagination = {
             ...pagination,
             ...{
-                showTotalPrefix: pagination?.showTotalPrefix ? pagination?.showTotalPrefix : '共 ',
-                showTotalSuffix: pagination?.showTotalSuffix ? pagination?.showTotalSuffix : ' 条记录',
+                showTotalPrefix: pagination?.showTotalPrefix ? pagination.showTotalPrefix : '共 ',
+                showTotalSuffix: pagination?.showTotalSuffix ? pagination.showTotalSuffix : ' 条记录',
             }
         }
 
@@ -344,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
+                }
             }
         }
 
@@ -523,14 +531,17 @@ export default class AntdTable extends Component {
                     if (columns[i]['renderOptions']['renderType'] == 'ellipsis') {
                         columns[i]['ellipsis'] = true
                         columns[i]['render'] = content => (
-                            <Tooltip placement="topLeft" title={content}>
+                            <Tooltip
+                                placement="topLeft"
+                                title={content}
+                                getPopupContainer={containerId ? () => (document.getElementById(containerId) ? document.getElementById(containerId) : document.body) : undefined}
+                            >
                                 {content}
                             </Tooltip>
                         )
                     }
                 }
             }
-
         }
 
         // 配置字段渲染模式为link的相关参数
@@ -581,6 +592,21 @@ export default class AntdTable extends Component {
             }
         }
 
+        // 配置字段渲染模式为status-badge的相关参数
+        for (let i = 0; i < columns.length; i++) {
+            // 当前字段具有renderOptions参数时且renderOptions参数是字典时
+            if (columns[i]['renderOptions']) {
+                if (columns[i]['renderOptions'].hasOwnProperty('renderType')) {
+                    // 当renderOptions参数的renderType值设置为status-badge时
+                    if (columns[i]['renderOptions']['renderType'] == 'status-badge') {
+                        columns[i]['render'] = content => (
+                            <Badge status={content.status} text={content.text} />
+                        )
+                    }
+                }
+            }
+        }
+
         // 配置字段渲染模式为button的相关参数
         for (let i = 0; i < columns.length; i++) {
             // 当前字段具有renderOptions参数时且renderOptions参数是字典时
@@ -604,7 +630,7 @@ export default class AntdTable extends Component {
                                                         okText={columns[i]['renderOptions']['renderButtonPopConfirmProps'].okText}
                                                         cancelText={columns[i]['renderOptions']['renderButtonPopConfirmProps'].cancelText}
                                                         disabled={content_.disabled}
-                                                        getPopupContainer={containerId ? () => document.getElementById(containerId) : undefined}
+                                                        getPopupContainer={containerId ? () => (document.getElementById(containerId) ? document.getElementById(containerId) : document.body) : undefined}
                                                         onConfirm={() => setProps({
                                                             recentlyButtonClickedRow: record,
                                                             nClicksButton: nClicksButton + 1,
@@ -628,7 +654,7 @@ export default class AntdTable extends Component {
                                     okText={columns[i]['renderOptions']['renderButtonPopConfirmProps'].okText}
                                     cancelText={columns[i]['renderOptions']['renderButtonPopConfirmProps'].cancelText}
                                     disabled={content.disabled}
-                                    getPopupContainer={containerId ? () => document.getElementById(containerId) : undefined}
+                                    getPopupContainer={containerId ? () => (document.getElementById(containerId) ? document.getElementById(containerId) : document.body) : undefined}
                                     onConfirm={() => setProps({
                                         recentlyButtonClickedRow: record,
                                         nClicksButton: nClicksButton + 1,
@@ -719,50 +745,57 @@ export default class AntdTable extends Component {
                 // 当renderOptions参数的renderType值设置为mini-line时
                 if (columns[i]['renderOptions']['renderType'] == 'mini-line') {
                     columns[i]['render'] = data => {
-                        var config = {
-                            height: "100%",
-                            width: "100%",
+                        let config = {
                             autoFit: true,
                             padding: 0,
                             data: data,
+                            animation: miniChartAnimation,
                             smooth: true,
                         };
-                        return <div><TinyLine {...config} /></div>;
+                        return <div style={{ height: miniChartHeight }}><TinyLine {...config} /></div>;
                     }
                 } else if (columns[i]['renderOptions']['renderType'] == 'mini-bar') {
                     columns[i]['render'] = data => {
-                        var config = {
-                            height: "100%",
-                            width: "100%",
+                        let config = {
                             padding: 0,
                             autoFit: true,
                             data: data,
+                            animation: miniChartAnimation,
                         };
-                        return <div><TinyColumn {...config} /></div>;
+                        return <div style={{ height: miniChartHeight }}><TinyColumn {...config} /></div>;
                     }
                 } else if (columns[i]['renderOptions']['renderType'] == 'mini-progress') {
                     columns[i]['render'] = data => {
-                        var config = {
-                            height: "100%",
-                            width: "100%",
+                        let config = {
                             autoFit: true,
                             padding: 0,
                             percent: data,
+                            animation: miniChartAnimation,
                             color: ['#5B8FF9', '#E8EDF3'],
                         };
-                        return <div><Progress {...config} /></div>;
+                        return <div style={{ height: miniChartHeight }}><Progress {...config} /></div>;
+                    }
+                } else if (columns[i]['renderOptions']['renderType'] == 'mini-ring-progress') {
+                    columns[i]['render'] = data => {
+                        let config = {
+                            autoFit: true,
+                            padding: 0,
+                            percent: data,
+                            animation: miniChartAnimation,
+                            color: ['#5B8FF9', '#E8EDF3'],
+                        };
+                        return <div style={{ height: miniChartHeight }}><RingProgress {...config} /></div>;
                     }
                 } else if (columns[i]['renderOptions']['renderType'] == 'mini-area') {
                     columns[i]['render'] = data => {
-                        var config = {
-                            height: "100%",
-                            width: "100%",
+                        let config = {
                             autoFit: true,
                             padding: 0,
                             data: data,
+                            animation: miniChartAnimation,
                             smooth: true,
                         };
-                        return <div><TinyArea {...config} /></div>;
+                        return <div style={{ height: miniChartHeight }}><TinyArea {...config} /></div>;
                     }
                 }
             }
@@ -793,7 +826,7 @@ export default class AntdTable extends Component {
                                 }}>{content}</div>}
                                 overlayStyle={{ maxWidth: '250px' }}
                                 placement={'bottom'}
-                                getPopupContainer={containerId ? () => document.getElementById(containerId) : undefined}>
+                                getPopupContainer={containerId ? () => (document.getElementById(containerId) ? document.getElementById(containerId) : document.body) : undefined}>
                                 <QuestionCircleOutlined
                                     style={{
                                         color: '#8c8c8c',
@@ -863,9 +896,7 @@ export default class AntdTable extends Component {
                     sticky={sticky}
                     pagination={{ ...pagination, ...{ showTotal: total => `${pagination.showTotalPrefix}${total}${pagination.showTotalSuffix}` } }}
                     bordered={bordered}
-                    scroll={{
-                        y: maxHeight ? maxHeight : 99999
-                    }}
+                    scroll={{ x: maxWidth, y: maxHeight, scrollToFirstRowOnChange: true }}
                     onChange={this.onPageChange}
                     onRow={
                         enableHoverListen ?
@@ -875,6 +906,17 @@ export default class AntdTable extends Component {
                                 };
                             } : undefined
                     }
+                    summary={summaryRowContents ? () => (
+                        <Table.Summary fixed={summaryRowFixed}>
+                            <Table.Summary.Row>
+                                {summaryRowContents.map((item, i) =>
+                                    <Table.Summary.Cell index={i} colSpan={item.colSpan} align={item.align}>
+                                        {item.content}
+                                    </Table.Summary.Cell>
+                                )}
+                            </Table.Summary.Row>
+                        </Table.Summary>
+                    ) : undefined}
                     data-dash-is-loading={
                         (loading_state && loading_state.is_loading) || undefined
                     }
@@ -914,9 +956,12 @@ AntdTable.propTypes = {
             // 预处理方式
             renderOptions: PropTypes.exact({
 
-                // 设置渲染处理类型，可选项有'link'、'ellipsis'、'mini-line'、'mini-bar'、'mini-progress'、'mini-area'、"tags'、'button'
+                // 设置渲染处理类型，可选项有'link'、'ellipsis'、'mini-line'、'mini-bar'、'mini-progress'、'mini-area'、'tags'、'button'
+                // 'copyable'、'status-badge'
                 renderType: PropTypes.oneOf([
-                    'link', 'ellipsis', 'mini-line', 'mini-bar', 'mini-progress', 'mini-area', 'tags', 'button', 'copyable'
+                    'link', 'ellipsis', 'mini-line', 'mini-bar', 'mini-progress',
+                    'mini-ring-progress', 'mini-area', 'tags', 'button', 'copyable',
+                    'status-badge'
                 ]),
 
                 // 当renderType='link'时，此参数会将传入的字符串作为渲染link的显示文字内容
@@ -947,6 +992,9 @@ AntdTable.propTypes = {
             // 自定义列像素宽度
             width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
+            // 用于传入js函数字符串
+            conditionStyle: PropTypes.string,
+
             // 防止状态更新报错占位用，无实际意义
             ellipsis: PropTypes.any,
 
@@ -956,11 +1004,20 @@ AntdTable.propTypes = {
             // 防止状态更新报错占位用，无实际意义
             render: PropTypes.any,
 
+            // 确保onCell属性类型检查通过
+            onCell: PropTypes.any,
+
             // 备份title信息
             title_: PropTypes.string
         })
     ),
 
+    // 为迷你图模式单元格设置像素高度，默认为30
+    miniChartHeight: PropTypes.number,
+
+    // 设置迷你图模式是否启用出现动画，默认为false
+    miniChartAnimation: PropTypes.bool,
+
     // 设置表格单元格尺寸规格，可选的有'small'、'default'和'large'
     size: PropTypes.oneOf(['small', 'default', 'large']),
 
@@ -984,8 +1041,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,
@@ -1018,7 +1080,94 @@ AntdTable.propTypes = {
     ),
 
     // 定义与columns匹配的行记录数组
-    data: PropTypes.arrayOf(PropTypes.object),
+    data: PropTypes.arrayOf(
+        PropTypes.objectOf(
+            PropTypes.oneOfType([
+                // 常规模式、ellipsis模式、copyable模式
+                PropTypes.string,
+
+                // 常规模式、ellipsis模式、mini-prorgess模式、mini-ring-progress模式、copyable模式
+                // 其中mini-prorgess模式、mini-ring-progress模式输入值需在0~1之间
+                PropTypes.number,
+
+                // link模式
+                PropTypes.exact({
+                    // href链接
+                    href: PropTypes.string,
+                    // target行为属性，默认为'_blank'
+                    target: PropTypes.string,
+                    // 设置是否禁用当前链接，默认为false
+                    disabled: PropTypes.bool
+                }),
+
+                // mini-line模式、mini-bar模式、mini-area模式
+                PropTypes.arrayOf(PropTypes.number),
+
+                // tags模式
+                PropTypes.arrayOf(
+                    PropTypes.exact({
+                        // 标签颜色
+                        color: PropTypes.string,
+                        // 标签内容
+                        tag: PropTypes.oneOfType([
+                            PropTypes.string,
+                            PropTypes.number
+                        ])
+                    })
+                ),
+
+                // button模式
+                PropTypes.oneOfType([
+                    // 单按钮模式
+                    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
+                        ])
+                    }),
+
+                    // 多按钮模式
+                    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模式
+                PropTypes.exact({
+                    // 设置状态徽标的状态
+                    status: PropTypes.oneOf(['success', 'processing', 'default', 'error', 'warning']),
+                    // 设置状态徽标的后缀文字内容
+                    text: PropTypes.oneOfType([
+                        PropTypes.string,
+                        PropTypes.number
+                    ])
+                })
+            ])
+        )
+    ),
 
     // 定义排序参数
     sortOptions: PropTypes.exact({
@@ -1034,7 +1183,7 @@ AntdTable.propTypes = {
     // 定义筛选参数
     filterOptions: PropTypes.object,
 
-    // 翻页相关参数
+    // 翻页相关参数，设置为false时不展示和进行分页
     pagination: PropTypes.oneOfType([
         PropTypes.bool,
         PropTypes.exact({
@@ -1050,10 +1199,16 @@ AntdTable.propTypes = {
             // 当前的页码
             current: PropTypes.number,
 
+            // 设置是否展示pageSize切换器，当total大于50时默认为true
+            showSizeChanger: PropTypes.bool,
+
             // 设定每页尺寸切换可选的范围
             pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
 
-            // 设置是否渲染快速跳转控件
+            // 设置是否显示原生页面悬浮提示title信息，默认为true
+            showTitle: PropTypes.bool,
+
+            // 设置是否渲染快速跳转控件，默认为false
             showQuickJumper: PropTypes.bool,
 
             // 定义总记录行数显示部分的前缀文字，默认为"共 "
@@ -1069,8 +1224,16 @@ AntdTable.propTypes = {
             hideOnSinglePage: PropTypes.bool,
 
             // 设置是否开启简洁模式
-            simple: PropTypes.bool
+            simple: PropTypes.bool,
+
+            // 设置是否禁用分页，默认为false
+            disabled: PropTypes.bool,
 
+            // 设置是否开启响应式，即分页尺寸会根据屏幕宽度自动进行调整
+            responsive: PropTypes.bool,
+
+            // 设置分页器尺寸，可选的有'default'和'small'，默认为'default'
+            size: PropTypes.oneOf(['default', 'small'])
         })
     ]),
 
@@ -1080,6 +1243,9 @@ AntdTable.propTypes = {
     // 设置组件最大高度，每页超出部分将自动转换为竖向滑动浏览方式
     maxHeight: PropTypes.number,
 
+    // 设置组件最大宽度，每页超出部分将自动转换为横向滑动浏览方式
+    maxWidth: PropTypes.number,
+
     // 经过修改操作后，当前状态下最新的dataSource数据
     currentData: PropTypes.array,
 
@@ -1110,6 +1276,26 @@ AntdTable.propTypes = {
     // 设置数据操纵模式，可选的有'client-side'（前端）、'server-side'（后端），默认为'client-side'
     mode: PropTypes.oneOf(['client-side', 'server-side']),
 
+    // 设置总结栏内容数组，请与每个字段保持一一对应
+    summaryRowContents: PropTypes.arrayOf(
+        PropTypes.exact({
+            // 总结栏单元格内容
+            content: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number
+            ]),
+
+            // 设置当前值横跨的字段数量，默认为1
+            colSpan: PropTypes.number,
+
+            // 设置列对齐方式，可选项有'left'、'center'、'right'
+            align: PropTypes.oneOf(['left', 'center', 'right'])
+        })
+    ),
+
+    // 设置总结栏是否启用fixed功能，默认为false
+    summaryRowFixed: PropTypes.bool,
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not
@@ -1134,6 +1320,9 @@ AntdTable.propTypes = {
 
 // 设置默认参数
 AntdTable.defaultProps = {
+    summaryRowFixed: false,
+    miniChartHeight: 30,
+    miniChartAnimation: false,
     enableHoverListen: false,
     bordered: false,
     data: [],

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