feffery_antd_components 0.1.2 → 0.1.3

package/feffery_antd_components/metadata.json

@@ -114,7 +114,7 @@
       },
       "description": {
         "type": {
-          "name": "string"
+          "name": "any"
         },
         "required": false,
         "description": ""
@@ -124,12 +124,12 @@
           "name": "union",
           "value": [
             {
-              "name": "string"
+              "name": "any"
             },
             {
               "name": "arrayOf",
               "value": {
-                "name": "string"
+                "name": "any"
               }
             }
           ]
@@ -9587,12 +9587,35 @@
         "type": {
           "name": "arrayOf",
           "value": {
-            "name": "string"
+            "name": "union",
+            "value": [
+              {
+                "name": "string"
+              },
+              {
+                "name": "number"
+              }
+            ]
           }
         },
         "required": false,
         "description": ""
       },
+      "rowSelectionWidth": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "number"
+            }
+          ]
+        },
+        "required": false,
+        "description": ""
+      },
       "selectedRows": {
         "type": {
           "name": "array"
@@ -9600,6 +9623,13 @@
         "required": false,
         "description": ""
       },
+      "sticky": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": ""
+      },
       "enableHoverListen": {
         "type": {
           "name": "bool"

package/feffery_antd_components/package-info.json

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

package/package.json

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

package/src/FefferyAntdComponents.jl

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

package/src/jl/'feffery'_antdalert.jl

@@ -11,13 +11,13 @@ Keyword arguments:
 - `id` (String; optional)
 - `className` (String; optional)
 - `closable` (Bool; optional)
-- `description` (String; optional)
+- `description` (Bool | Real | String | Dict | Array; optional)
 - `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
 Those elements have the following types:
   - `is_loading` (Bool; optional): Determines if the component is loading or not
   - `prop_name` (String; optional): Holds which property is loading
   - `component_name` (String; optional): Holds the name of the component that is loading
-- `message` (String | Array of Strings; optional)
+- `message` (Bool | Real | String | Dict | Array | Array of Bool | Real | String | Dict | Arrays; optional)
 - `messageRenderMode` (a value equal to: 'default', 'loop-text', 'marquee'; optional)
 - `showIcon` (Bool; optional)
 - `style` (Dict; optional)

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

@@ -69,7 +69,8 @@ Those elements have the following types:
 - `recentlyMouseEnterColumn` (String; optional)
 - `recentlyMouseEnterRow` (String | Real; optional)
 - `rowSelectionType` (a value equal to: 'checkbox', 'radio'; optional)
-- `selectedRowKeys` (Array of Strings; optional)
+- `rowSelectionWidth` (String | Real; optional)
+- `selectedRowKeys` (Array of String | Reals; optional)
 - `selectedRows` (Array; optional)
 - `size` (a value equal to: 'small', 'default', 'large'; optional)
 - `sortOptions` (optional): . sortOptions has the following type: lists containing elements 'sortDataIndexes', 'multiple'.
@@ -80,11 +81,12 @@ Those elements have the following types:
 Those elements have the following types:
   - `columns` (Array of Strings; optional)
   - `orders` (Array of a value equal to: 'ascend', 'descend's; optional)
+- `sticky` (Bool; optional)
 - `style` (Dict; optional)
 - `titlePopoverInfo` (Dict; optional)
 """
 function 'feffery'_antdtable(; kwargs...)
-        available_props = Symbol[:id, :bordered, :className, :clickedContent, :columns, :columnsFormatConstraint, :containerId, :currentData, :data, :enableHoverListen, :filter, :filterOptions, :loading_state, :locale, :maxHeight, :mode, :nClicksButton, :pagination, :recentlyButtonClickedRow, :recentlyChangedRow, :recentlyMouseEnterColumn, :recentlyMouseEnterRow, :rowSelectionType, :selectedRowKeys, :selectedRows, :size, :sortOptions, :sorter, :style, :titlePopoverInfo]
+        available_props = Symbol[:id, :bordered, :className, :clickedContent, :columns, :columnsFormatConstraint, :containerId, :currentData, :data, :enableHoverListen, :filter, :filterOptions, :loading_state, :locale, :maxHeight, :mode, :nClicksButton, :pagination, :recentlyButtonClickedRow, :recentlyChangedRow, :recentlyMouseEnterColumn, :recentlyMouseEnterRow, :rowSelectionType, :rowSelectionWidth, :selectedRowKeys, :selectedRows, :size, :sortOptions, :sorter, :sticky, :style, :titlePopoverInfo]
         wild_props = Symbol[]
         return Component("'feffery'_antdtable", "AntdTable", "feffery_antd_components", available_props, wild_props; kwargs...)
 end

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

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import TextLoop from 'react-text-loop'
 import { Alert } from 'antd';
+import { omit } from "ramda";
+import { renderDashComponents } from "dash-extensions-js";
 import Marquee from 'react-fast-marquee';
 import 'antd/dist/antd.css';
 
@@ -13,8 +15,6 @@ export default class AntdAlert extends Component {
             id,
             className,
             style,
-            description,
-            message,
             type,
             showIcon,
             closable,
@@ -23,18 +23,25 @@ export default class AntdAlert extends Component {
             loading_state
         } = this.props;
 
-        if (messageRenderMode === 'loop-text' && Array.isArray(message)) {
+        // 解析非children参数传入的其他组件数组
+        let nProps = omit(
+            ["setProps", "children", "loading_state", "className"],
+            this.props
+        );
+        nProps = renderDashComponents(nProps, ["message", "description"]);
+
+        if (messageRenderMode === 'loop-text' && Array.isArray(nProps.message)) {
             return (
                 <Alert id={id}
                     className={className}
                     style={style}
                     message={
                         <TextLoop mask>
-                            {message.map(item => <div>{item}</div>)}
+                            {nProps.message.map(item => <div>{item}</div>)}
                         </TextLoop>
                     }
                     type={type}
-                    description={description}
+                    description={nProps.description}
                     showIcon={showIcon}
                     closable={closable}
                     data-dash-is-loading={
@@ -51,12 +58,12 @@ export default class AntdAlert extends Component {
                 message={
                     messageRenderMode === 'marquee' ?
                         <Marquee pauseOnHover gradient={false}>
-                            {message}
+                            {nProps.message}
                         </Marquee> :
-                        message
+                        nProps.message
                 }
                 type={type}
-                description={description}
+                description={nProps.description}
                 showIcon={showIcon}
                 closable={closable}>
             </Alert>
@@ -66,6 +73,7 @@ export default class AntdAlert extends Component {
 
 // 定义参数或属性
 AntdAlert.propTypes = {
+
     // 组件id
     id: PropTypes.string,
 
@@ -76,12 +84,12 @@ AntdAlert.propTypes = {
     style: PropTypes.object,
 
     // 设置警告组件内的额外信息元素
-    description: PropTypes.string,
+    description: PropTypes.any,
 
     // 设置显示的文字信息
     message: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.arrayOf(PropTypes.string)
+        PropTypes.any,
+        PropTypes.arrayOf(PropTypes.any)
     ]),
 
     // 设置提示类型，可选的有'success'、'info'、'warning'和'error'四种

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

@@ -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,84 @@ 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,
+            rowSelectionType,
+            selectedRowKeys,
+            rowSelectionWidth,
+            sticky,
+            titlePopoverInfo,
+            columnsFormatConstraint,
+            enableHoverListen,
+            data,
+            sortOptions,
+            filterOptions,
+            pagination,
+            bordered,
+            maxHeight,
+            size,
+            mode,
+            nClicksButton,
+            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 +367,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') {
@@ -756,13 +768,6 @@ export default class AntdTable extends Component {
             }
         }
 
-        // 配置自定义组件
-        const components = {
-            body: {
-                row: EditableRow,
-                cell: EditableCell,
-            },
-        };
 
         // 处理columns.title的增广功能设置
         if (titlePopoverInfo) {
@@ -802,12 +807,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 +848,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,6 +860,7 @@ 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={{
@@ -870,7 +878,7 @@ export default class AntdTable extends Component {
                     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>
         );
@@ -960,11 +968,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,
 

package/usage.py

@@ -8,7 +8,123 @@ app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
+        fac.AntdTable(
+            selectedRowKeys=['2', '4'],
+            rowSelectionWidth='5rem',
+            columns=[
+                {
+                    'title': '默认的checkbox模式',
+                    'dataIndex': f'默认的checkbox模式',
+                    'width': 400
+                },
+                {
+                    'title': '自定义选项的checkbox模式',
+                    'dataIndex': '自定义选项的checkbox模式',
+                    'width': 400
+                },
+                {
+                    'title': 'keyword模式',
+                    'dataIndex': 'keyword模式',
+                    'width': 400
+                }
+            ],
+            containerId='docs-content',
+            sticky=True,
+            pagination={
+                'pageSize': 100
+            },
+            data=[
+                {
+                    '默认的checkbox模式': i,
+                    '自定义选项的checkbox模式': i,
+                    'keyword模式': i
+                }
+                for i in range(500)
+            ],
+            filterOptions={
+                '默认的checkbox模式': {
+                    'filterMode': 'keyword'
+                },
+                '自定义选项的checkbox模式': {
+                    'filterMode': 'keyword'
+                },
+                'keyword模式': {
+                    'filterMode': 'keyword'
+                }
+            },
+            rowSelectionType='checkbox',
+            style={
+                'width': '600px'
+            }
+        ),
+
+        html.Div(
+            [
+                fac.AntdAlert(
+                    description='好样的',
+                    message=[
+                        html.Div(
+                            [
+                                fac.AntdText(
+                                    '这是一段测试文字，'
+                                ),
+                                fac.AntdText(
+                                    '加粗',
+                                    strong=True
+                                ),
+                                html.A(
+                                    '链接',
+                                    href='/'
+                                )
+                            ]
+                        )
+                    ],
+                    showIcon=True
+                )
+            ]
+        ),
+
+
+        html.Div(
+            [
+                fac.AntdAlert(
+                    description='这是一段辅助说明文字',
+                    message=[
+                        '君不见黄河之水天上来',
+                        '奔流到海不复回',
+                        '君不见高堂明镜悲白发',
+                        '朝如青丝暮成雪',
+                        '人生得意须尽欢',
+                        '莫使金樽空对月',
+                        '天生我材必有用',
+                        '千金散尽还复来'
+                    ],
+                    showIcon=True,
+                    messageRenderMode='loop-text'
+                )
+            ]
+        ),
 
+        html.Div(
+            [
+                fac.AntdAlert(
+                    '这是一段辅助说明文字',
+                    message='，'.join([
+                        '君不见黄河之水天上来',
+                        '奔流到海不复回',
+                        '君不见高堂明镜悲白发',
+                        '朝如青丝暮成雪',
+                        '人生得意须尽欢',
+                        '莫使金樽空对月',
+                        '天生我材必有用',
+                        '千金散尽还复来'
+                    ]) + '。',
+                    description='这是跑马灯模式示例',
+                    showIcon=True,
+                    messageRenderMode='marquee'
+                )
+            ]
+        ),
 
         fac.AntdRadioGroup(
             options=[