feffery_antd_components 0.1.16 → 0.2.0-rc1

package/tests/TableMiniChartAdvanceTest/app.py

@@ -0,0 +1,85 @@
+if True:
+    import sys
+    sys.path.append('../..')
+    import dash
+    import numpy as np
+    from dash import html
+    import feffery_antd_components as fac
+    from dash.dependencies import Input, Output
+
+app = dash.Dash(
+    __name__,
+    suppress_callback_exceptions=True
+)
+
+app.layout = html.Div(
+    [
+        fac.AntdTable(
+            columns=[
+                {
+                    'title': 'mini-line示例',
+                    'dataIndex': 'mini-line示例',
+                    'width': '20%',
+                    'renderOptions': {
+                        'renderType': 'mini-line'
+                    }
+                },
+                {
+                    'title': 'mini-bar示例',
+                    'dataIndex': 'mini-bar示例',
+                    'width': '20%',
+                    'renderOptions': {
+                        'renderType': 'mini-bar'
+                    }
+                },
+                {
+                    # 注意，mini-progress模式接受的输入应当在0到1之间
+                    'title': 'mini-progress示例',
+                    'dataIndex': 'mini-progress示例',
+                    'width': '20%',
+                    'renderOptions': {
+                        'renderType': 'mini-progress'
+                    }
+                },
+                {
+                    # 注意，mini-ring-progress模式接受的输入应当在0到1之间
+                    'title': 'mini-ring-progress示例',
+                    'dataIndex': 'mini-ring-progress示例',
+                    'width': '20%',
+                    'renderOptions': {
+                        'renderType': 'mini-ring-progress',
+                        'ringProgressFontSize': 12
+                    }
+                },
+                {
+                    'title': 'mini-area示例',
+                    'dataIndex': 'mini-area示例',
+                    'width': '20%',
+                    'renderOptions': {
+                        'renderType': 'mini-area'
+                    }
+                }
+            ],
+            data=[
+                {
+                    'key': i,
+                    'mini-line示例': np.random.randint(1, 20, 10),
+                    'mini-bar示例': np.random.randint(1, 20, 10),
+                    'mini-progress示例': 1,
+                    'mini-ring-progress示例': 1,
+                    'mini-area示例': np.random.randint(1, 20, 10)
+                }
+                for i in range(3)
+            ],
+            miniChartHeight=50,
+            bordered=True
+        )
+    ],
+    style={
+        'width': '800px',
+        'margin': '0 auto'
+    }
+)
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/TreeNodeStyleTest/app.py

@@ -0,0 +1,73 @@
+if True:
+    import sys
+    sys.path.append('../..')
+    import os
+    import dash
+    from dash import html
+    import feffery_antd_components as fac
+
+app = dash.Dash(__name__)
+
+
+app.layout = html.Div(
+    html.Div(
+        [
+            fac.AntdTree(
+                treeData=[
+                    {
+                        'title': '世界',
+                        'key': '世界',
+                        'icon_name': 'user',
+                        'children': [
+                            {
+                                'title': '亚洲',
+                                'key': '亚洲',
+                                'children': [
+                                    {
+                                        'title': '中国',
+                                        'key': '中国',
+                                        'icon': 'antd-table',
+                                        'style': {
+                                            'color': 'red'
+                                        }
+                                    },
+                                    {
+                                        'title': '日本',
+                                        'key': '日本',
+                                        'icon_name': 'database',
+                                        'disabled': True
+                                    }
+                                ]
+                            },
+                            {
+                                'title': '北美洲',
+                                'key': '北美洲',
+                                'icon_name': 'file',
+                                'children': [
+                                    {
+                                        'title': '美国',
+                                        'key': '美国',
+                                        'icon_name': 'file-text',
+                                        'style': {
+                                            'color': 'green'
+                                        }
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            )
+        ],
+        style={
+            'padding': '30px 0'
+        }
+    ),
+    style={
+        'width': '800px',
+        'margin': '0 auto'
+    }
+)
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/TreeTest/app.py

@@ -0,0 +1,96 @@
+if True:
+    import sys
+    sys.path.append('../..')
+    import os
+    import dash
+    from dash import html
+    import feffery_antd_components as fac
+
+paths = [path[0].replace('C:\\Conda\\', '')
+         for path in os.walk(r'C:\Conda\envs')]
+
+pathTreeData = [
+    {
+        'title': path.split('\\')[-1],
+        'key': path,
+        'value': path,
+        'parent': '\\'.join(path.split('\\')[:-1])
+    }
+    for path in paths
+    if '\\' in path
+]
+
+pathTreeData.append(
+    {
+        'title': 'envs',
+        'key': 'envs',
+        'value': 'envs',
+    }
+)
+
+app = dash.Dash(__name__)
+
+treeData = [
+    {'label': "马云", 'value': "马云", 'key': "1"},
+    {'label': "前端技术专家", 'value': "前端技术专家", 'key': "3", 'parent': "2"},
+    {'label': "首席科学家", 'value': "首席科学家", 'key': "2", 'parent': "1"},
+    {'label': "前端架构师", 'value': "前端架构师", 'key': "4", 'parent': "3"},
+    {'label': "前端工程师", 'value': "前端工程师", 'key': "5", 'parent': "4"},
+    {'label': "前端菜鸟", 'value': "前端菜鸟", 'key': "6", 'parent': "5"},
+    {'label': "前端小白", 'value': "前端小白", 'key': "7", 'parent': "6"},
+    {'label': "马岳父", 'value': "马岳父", 'key': "8"},
+    {'label': "QQ", 'value': "QQ", 'key': "9", 'parent': "8"},
+    {'label': "微信", 'value': "微信", 'key': "10", 'parent': "8"},
+    {'label': "王者荣耀", 'value': "王者荣耀", 'key': "11", 'parent': "8"},
+    {'label': "绝地求生", 'value': "绝地求生", 'key': "12", 'parent': "8"},
+    {'label': "QQ会员", 'value': "QQ会员", 'key': "13", 'parent': "9"},
+    {'label': "QQ空间", 'value': "QQ空间", 'key': "14", 'parent': "9"},
+    {'label': "QQ钱包", 'value': "QQ钱包", 'key': "15", 'parent': "9"},
+    {'label': "沙漠地图", 'value': "沙漠地图", 'key': "16", 'parent': "12"},
+    {'label': "公众号", 'value': "公众号", 'key': "17", 'parent': "10"},
+    {'label': "群聊", 'value': "群聊", 'key': "18", 'parent': "10"},
+    {'label': "小程序", 'value': "小程序", 'key': "19", 'parent': "10"},
+    {'label': "花木兰", 'value': "花木兰", 'key': "20", 'parent': "11"},
+    {'label': "芈月", 'value': "芈月", 'key': "21", 'parent': "11"},
+    {'label': "马可波罗", 'value': "马可波罗", 'key': "22", 'parent': "11"},
+]
+
+app.layout = html.Div(
+    html.Div(
+        [
+            fac.AntdTreeSelect(
+                # treeData=treeData,
+                treeData=pathTreeData,
+                treeDataMode='flat',
+                treeDefaultExpandAll=True,
+                listHeight=600
+            ),
+
+            fac.AntdDivider(),
+
+            fac.AntdTree(
+                treeData=pathTreeData,
+                treeDataMode='flat',
+                defaultExpandAll=True,
+                height=700
+            ),
+
+            fac.AntdDivider(),
+
+            fac.AntdCascader(
+                options=treeData,
+                optionsMode='flat'
+            )
+        ],
+        style={
+            'padding': '30px 0'
+        }
+    ),
+    style={
+        'width': '800px',
+        'margin': '0 auto'
+    }
+)
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/VirtualClassNameTest/app.py

@@ -0,0 +1,49 @@
+if True:
+    import sys
+    sys.path.append('../..')
+    import dash
+    import json
+    from dash import html
+    import feffery_antd_components as fac
+    from dash.dependencies import Input, Output
+
+app = dash.Dash(
+    __name__,
+    suppress_callback_exceptions=True
+)
+
+app.layout = html.Div(
+    [
+        fac.AntdButton(
+            '按钮测试1',
+            type='link',
+            className={
+                'border': '2px solid red',
+                '&:hover': {
+                    'scale': 1.25,
+                    'border': '2px solid red'
+                }
+            }
+        ),
+        fac.AntdButton(
+            '按钮测试2',
+            type='link',
+            className={
+                'border': '2px solid green',
+                '&:hover': {
+                    'scale': 1.25
+                },
+                '&:before': {
+                    'content': '测试'
+                }
+            }
+        )
+    ],
+    style={
+        'width': '800px',
+        'margin': '0 auto'
+    }
+)
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/usage.py

@@ -1,98 +1,27 @@
+import json
 import dash
-import numpy as np
+import pandas as pd
 from dash import html
 import feffery_antd_components as fac
-from dash.dependencies import Input, Output
+from dash.dependencies import Input, Output, State
 
 app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
-        fac.AntdTable(
-            id='table-demo',
-            columns=[
-                {
-                    'title': f'字段{i}',
-                    'dataIndex': f'字段{i}',
-                    'width': '20%',
-                    'editable': True
-                }
-                for i in range(1, 6)
-            ],
-            data=[
-                {
-                    f'字段{i}': np.random.randint(1, 5)
-                    for i in range(1, 6)
-                }
-                for _ in range(20)
-            ],
-            sortOptions={
-                'sortDataIndexes': ['字段2', '字段4', '字段5'],
-                'multiple': True
-            },
-            filterOptions={
-                '字段1': {
-                    'filterMode': 'checkbox'
-                },
-                '字段3': {
-                    'filterMode': 'keyword'
-                }
-            },
-            bordered=True,
-            pagination={
-                'pageSize': 5
+        fac.AntdText(
+            '增删改一体化表格示例',
+            style={
+                'fontSize': '20px',
+                'borderLeft': '3px solid #2e94f7',
+                'paddingLeft': '5px',
             }
-        ),
-        fac.AntdSpin(
-            html.Div(id='table-demo-output'),
-            text='回调中'
         )
     ],
     style={
-        'width': '800px',
-        'margin': '0 auto',
+        'padding': '50px'
     }
 )
 
-
-@app.callback(
-    Output('table-demo-output', 'children'),
-    [Input('table-demo', 'currentData'),
-     Input('table-demo', 'recentlyChangedRow'),
-     Input('table-demo', 'sorter'),
-     Input('table-demo', 'filter'),
-     Input('table-demo', 'pagination')],
-    prevent_initial_call=True
-)
-def table_callback_demo(currentData,
-                        recentlyChangedRow,
-                        sorter,
-                        filter,
-                        pagination):
-
-    ctx = dash.callback_context
-
-    return [
-        fac.AntdTitle('本次回调由{}所触发'.format(
-            ctx.triggered[0]['prop_id'].split('.')[-1]), level=3),
-        fac.AntdDivider(),
-
-        fac.AntdTitle('currentData：', level=5),
-        html.Pre(str(currentData)),
-
-        fac.AntdTitle('recentlyChangedRow：', level=5),
-        html.Pre(str(recentlyChangedRow)),
-
-        fac.AntdTitle('sorter：', level=5),
-        html.Pre(str(sorter)),
-
-        fac.AntdTitle('filter：', level=5),
-        html.Pre(str(filter)),
-
-        fac.AntdTitle('pagination：', level=5),
-        html.Pre(str(pagination))
-    ]
-
-
 if __name__ == '__main__':
-    app.run_server(debug=True)
+    app.run(debug=True)

package/webpack.config.js

@@ -1,6 +1,9 @@
 const path = require('path');
-const packagejson = require('./package.json');
+const TerserPlugin = require('terser-webpack-plugin');
+const webpack = require('webpack');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
+const packagejson = require('./package.json');
 
 const dashLibraryName = packagejson.name.replace(/-/g, '_');
 
@@ -55,6 +58,19 @@ module.exports = (env, argv) => {
         externals,
         module: {
             rules: [
+                {
+                    test: /\.js?$/,
+                    exclude: /node_modules/,
+                    use: {
+                        loader: 'babel-loader',
+                        options: {
+                            presets: ['@babel/preset-env'],
+                            plugins: [
+                                "@babel/plugin-proposal-optional-chaining"
+                            ]
+                        }
+                    },
+                },
                 {
                     test: /\.jsx?$/,
                     exclude: /node_modules/,
@@ -85,17 +101,35 @@ module.exports = (env, argv) => {
             ],
         },
         optimization: {
-            minimizer: [new UglifyJsPlugin(
-                {
+            minimizer: [
+                new TerserPlugin({
+                    sourceMap: true,
                     parallel: true,
-                    uglifyOptions: {
-                        output: {
-                            comments: false,
-                        },
-                        warnings: false
+                    cache: './.build_cache/terser',
+                    terserOptions: {
+                        warnings: false,
+                        ie8: false
                     }
-                }
-            )],
-        }
+                }),
+                new UglifyJsPlugin(
+                    {
+                        parallel: true,
+                        uglifyOptions: {
+                            output: {
+                                comments: false,
+                            },
+                            warnings: false
+                        }
+                    }
+                )
+            ]
+        },
+        plugins: [
+            new WebpackDashDynamicImport(),
+            new webpack.SourceMapDevToolPlugin({
+                filename: '[file].map',
+                exclude: ['async-plotlyjs']
+            })
+        ]
     }
 };

package/tests/UploadTest/app.py

@@ -1,70 +0,0 @@
-if True:
-    import sys
-    sys.path.append('../..')
-    import json
-    import dash
-    from dash import html
-    from flask import request
-    import feffery_antd_components as fac
-    from dash.dependencies import Input, Output
-
-app = dash.Dash(__name__)
-
-
-@app.server.route('/upload/', methods=['POST'])
-def upload():
-    '''
-    构建文件上传服务
-    :return:
-    '''
-
-    # 获取上传id参数，用于指向保存路径
-    uploadId = request.values.get('uploadId')
-
-    # 获取上传的文件名称
-    filename = request.files['file'].filename
-
-    return {'filename': filename}
-
-
-app.layout = html.Div(
-    [
-        fac.AntdUpload(
-            id='upload-demo',
-            apiUrl='/upload/',
-            fileMaxSize=1,
-            multiple=True
-        ),
-
-        fac.AntdSpin(
-            html.Pre(id='upload-demo-output'),
-            text='回调中'
-        )
-    ],
-    style={
-        'width': '800px',
-        'margin': '0 auto',
-    }
-)
-
-
-@app.callback(
-    Output('upload-demo-output', 'children'),
-    [Input('upload-demo', 'lastUploadTaskRecord'),
-     Input('upload-demo', 'listUploadTaskRecord')],
-    prevent_initial_call=True
-)
-def upload_callback_demo(lastUploadTaskRecord, listUploadTaskRecord):
-    if lastUploadTaskRecord:
-        return json.dumps(
-            {
-                'lastUploadTaskRecord': lastUploadTaskRecord,
-                'listUploadTaskRecord': listUploadTaskRecord
-            },
-            indent=4,
-            ensure_ascii=False
-        )
-
-
-if __name__ == '__main__':
-    app.run(debug=True)