feffery_antd_components 0.1.2 → 0.1.5

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';
@@ -153,61 +153,6 @@ export default class AntdTable extends Component {
 
     render() {
 
-        // 取得必要属性或参数
-        let {
-            id,
-            className,
-            style,
-            locale,
-            containerId,
-            setProps,
-            columns,
-            rowSelectionType,
-            titlePopoverInfo,
-            columnsFormatConstraint,
-            enableHoverListen,
-            data,
-            sortOptions,
-            filterOptions,
-            pagination,
-            bordered,
-            maxHeight,
-            size,
-            mode,
-            nClicksButton,
-            loading_state
-        } = this.props;
-
-        let size2size = new Map([
-            ['small', 'default'],
-            ['default', 'small'],
-            ['large', 'middle']
-        ])
-
-        pagination = {
-            ...pagination,
-            ...{
-                showTotalPrefix: pagination?.showTotalPrefix ? pagination?.showTotalPrefix : '共 ',
-                showTotalSuffix: pagination?.showTotalSuffix ? pagination?.showTotalSuffix : ' 条记录',
-            }
-        }
-
-        // 为columns添加默认属性
-        for (let i in columns) {
-
-            columns[i] = {
-                ...{ align: 'center' },
-                ...columns[i]
-            }
-        }
-
-        // 当未设置行key时，自动以自增1作为key
-        for (let i in data) {
-            if (!data[i].hasOwnProperty('key')) {
-                data[i]['key'] = i.toString()
-            }
-        }
-
         // 自定义可编辑单元格
         const EditableContext = React.createContext(null);
 
@@ -325,6 +270,89 @@ export default class AntdTable extends Component {
             return <td {...restProps}>{childNode}</td>;
         };
 
+        // 配置自定义组件
+        const components = {
+            body: {
+                row: EditableRow,
+                cell: EditableCell,
+            },
+        };
+
+        // 数值比较函数
+        const compareNumeric = (x, y) => {
+            if (x.value < y.value) {
+                return -1;
+            } else if (x.value > y.value) {
+                return 1;
+            } else {
+                return 0;
+            }
+        }
+
+        // 取得必要属性或参数
+        let {
+            id,
+            className,
+            style,
+            locale,
+            containerId,
+            setProps,
+            columns,
+            miniChartHeight,
+            miniChartAnimation,
+            rowSelectionType,
+            selectedRowKeys,
+            rowSelectionWidth,
+            sticky,
+            titlePopoverInfo,
+            columnsFormatConstraint,
+            enableHoverListen,
+            data,
+            sortOptions,
+            filterOptions,
+            pagination,
+            bordered,
+            maxHeight,
+            maxWidth,
+            size,
+            mode,
+            nClicksButton,
+            summaryRowContents,
+            summaryRowFixed,
+            loading_state
+        } = this.props;
+
+        // 重新映射size到符合常识的顺序
+        let size2size = new Map([
+            ['small', 'default'],
+            ['default', 'small'],
+            ['large', 'middle']
+        ])
+
+        pagination = {
+            ...pagination,
+            ...{
+                showTotalPrefix: pagination?.showTotalPrefix ? pagination.showTotalPrefix : '共 ',
+                showTotalSuffix: pagination?.showTotalSuffix ? pagination.showTotalSuffix : ' 条记录',
+            }
+        }
+
+        // 当未设置行key时，自动以自增1作为key
+        for (let i in data) {
+            if (!data[i].hasOwnProperty('key')) {
+                data[i]['key'] = i.toString()
+            }
+        }
+
+        // 为columns添加默认属性
+        for (let i in columns) {
+
+            columns[i] = {
+                ...{ align: 'center' },
+                ...columns[i]
+            }
+        }
+
         // 处理可编辑特性
         columns = columns.map((col) => {
             if (!col.editable) {
@@ -344,17 +372,6 @@ export default class AntdTable extends Component {
 
         // 处理可筛选特性
 
-        // 数值比较比较函数
-        const compareNumeric = (x, y) => {
-            if (x.value < y.value) {
-                return -1;
-            } else if (x.value > y.value) {
-                return 1;
-            } else {
-                return 0;
-            }
-        }
-
         // 若为前端渲染模式，在filterOptions中每个字段filterCustomItems缺失的情况下
         // 则会自动根据前端一次性灌入的数据推算出所有添加过滤器字段的唯一值集合作为待选菜单
         if (mode !== 'server-side') {
@@ -511,14 +528,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的相关参数
@@ -569,6 +589,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参数是字典时
@@ -592,7 +627,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,
@@ -616,7 +651,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,
@@ -707,62 +742,62 @@ 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>;
                     }
                 }
             }
         }
 
-        // 配置自定义组件
-        const components = {
-            body: {
-                row: EditableRow,
-                cell: EditableCell,
-            },
-        };
 
         // 处理columns.title的增广功能设置
         if (titlePopoverInfo) {
@@ -788,7 +823,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',
@@ -802,12 +837,33 @@ export default class AntdTable extends Component {
             }
         }
 
+        // 添加表头单元格监听事件
+        if (enableHoverListen) {
+            columns = columns.map(
+                item => (
+                    {
+                        ...item,
+                        ...{
+                            onHeaderCell: (e) => {
+                                return {
+                                    onMouseEnter: event => { setProps({ recentlyMouseEnterColumn: e.dataIndex }) }, // 鼠标移入字段名
+                                };
+                            }
+                        }
+                    }
+                )
+            )
+        }
+
         let rowSelection
         // 处理行选择功能设置
         if (rowSelectionType) {
 
             rowSelection = {
+                columnWidth: rowSelectionWidth,
+                fixed: true,
                 type: rowSelectionType,
+                selectedRowKeys: selectedRowKeys,
                 selections: [
                     Table.SELECTION_ALL,
                     Table.SELECTION_INVERT,
@@ -822,25 +878,6 @@ export default class AntdTable extends Component {
             }
         }
 
-        // 添加表头单元格监听事件
-        if (enableHoverListen) {
-            columns = columns.map(
-                item => (
-                    {
-                        ...item,
-                        ...{
-                            onHeaderCell: (e) => {
-                                return {
-                                    onMouseEnter: event => { setProps({ recentlyMouseEnterColumn: e.dataIndex }) }, // 鼠标移入字段名
-                                };
-                            }
-                        }
-                    }
-                )
-            )
-        }
-
-
         return (
             <ConfigProvider locale={str2Locale.get(locale)}>
                 <Table
@@ -853,11 +890,10 @@ export default class AntdTable extends Component {
                     columns={columns}
                     size={size2size.get(size)}
                     rowSelection={rowSelection}
+                    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 ?
@@ -867,10 +903,21 @@ 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
                     }
-                    getPopupContainer={containerId ? () => document.getElementById(containerId) : undefined}
+                    getPopupContainer={containerId ? () => (document.getElementById(containerId) ? document.getElementById(containerId) : document.body) : undefined}
                 />
             </ConfigProvider>
         );
@@ -906,9 +953,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的显示文字内容
@@ -953,6 +1003,12 @@ AntdTable.propTypes = {
         })
     ),
 
+    // 为迷你图模式单元格设置像素高度，默认为30
+    miniChartHeight: PropTypes.number,
+
+    // 设置迷你图模式是否启用出现动画，默认为false
+    miniChartAnimation: PropTypes.bool,
+
     // 设置表格单元格尺寸规格，可选的有'small'、'default'和'large'
     size: PropTypes.oneOf(['small', 'default', 'large']),
 
@@ -960,11 +1016,25 @@ AntdTable.propTypes = {
     rowSelectionType: PropTypes.oneOf(['checkbox', 'radio']),
 
     // 记录已被选择的行key值数组
-    selectedRowKeys: PropTypes.arrayOf(PropTypes.string),
+    selectedRowKeys: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number
+        ])
+    ),
+
+    // 设置行选择框宽度，默认为'32px'
+    rowSelectionWidth: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
 
     // 记录已被选择的行记录值列表
     selectedRows: PropTypes.array,
 
+    // 设置是否开启粘性头部，默认为false
+    sticky: PropTypes.bool,
+
     // 设置是否启用行悬浮事件监听（此功能可能会干扰其他正常表格功能，慎用），默认为false
     enableHoverListen: PropTypes.bool,
 
@@ -996,7 +1066,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({
@@ -1012,7 +1169,7 @@ AntdTable.propTypes = {
     // 定义筛选参数
     filterOptions: PropTypes.object,
 
-    // 翻页相关参数
+    // 翻页相关参数，设置为false时不展示和进行分页
     pagination: PropTypes.oneOfType([
         PropTypes.bool,
         PropTypes.exact({
@@ -1028,10 +1185,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,
 
             // 定义总记录行数显示部分的前缀文字，默认为"共 "
@@ -1047,8 +1210,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'])
         })
     ]),
 
@@ -1058,6 +1229,9 @@ AntdTable.propTypes = {
     // 设置组件最大高度，每页超出部分将自动转换为竖向滑动浏览方式
     maxHeight: PropTypes.number,
 
+    // 设置组件最大宽度，每页超出部分将自动转换为横向滑动浏览方式
+    maxWidth: PropTypes.number,
+
     // 经过修改操作后，当前状态下最新的dataSource数据
     currentData: PropTypes.array,
 
@@ -1088,6 +1262,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
@@ -1112,6 +1306,9 @@ AntdTable.propTypes = {
 
 // 设置默认参数
 AntdTable.defaultProps = {
+    summaryRowFixed: false,
+    miniChartHeight: 30,
+    miniChartAnimation: false,
     enableHoverListen: false,
     bordered: false,
     data: [],