feffery_antd_components 0.2.10-rc13 → 0.2.10-rc15

package/src/lib/components/navigation/AntdPagination.react.js

@@ -36,9 +36,23 @@ const AntdPagination = (props) => {
         loading_state,
         persistence,
         persisted_props,
-        persistence_type
+        persistence_type,
+        batchPropsNames
     } = props;
 
+    // 批属性监听
+    useEffect(() => {
+        if (batchPropsNames && batchPropsNames.length !== 0) {
+            let _batchPropsValues = {};
+            for (let propName of batchPropsNames) {
+                _batchPropsValues[propName] = props[propName];
+            }
+            setProps({
+                batchPropsValues: _batchPropsValues
+            })
+        }
+    })
+
     const context = useContext(PropsContext)
     locale = (context && context.locale) || locale
 
@@ -248,18 +262,4 @@ AntdPagination.defaultProps = {
     batchPropsNames: []
 }
 
-export default React.memo(
-    AntdPagination,
-    (prevProps, nextProps) => {
-        if (nextProps.batchPropsNames && nextProps.batchPropsNames.length !== 0) {
-            let _batchPropsValues = {};
-            for (let propName of nextProps.batchPropsNames) {
-                _batchPropsValues[propName] = nextProps[propName];
-            }
-            nextProps.setProps({
-                batchPropsValues: _batchPropsValues
-            })
-        }
-        return false;
-    }
-);
+export default AntdPagination;

package/src/lib/components/styles.css

@@ -164,4 +164,9 @@
 
 .ant-tree-title .ant-rate {
     font-size: 16px;
+}
+
+/* 针对上传组件允许按钮block模式 */
+.ant-upload-button-block .ant-upload {
+    display: block;
 }

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

@@ -40,7 +40,7 @@ import {
     QuestionCircleOutlined,
     DownOutlined
 } from '@ant-design/icons';
-import { isNumber, isEqual, isString } from 'lodash';
+import { isNumber, isEqual, isString, cloneDeep } from 'lodash';
 import { str2Locale, locale2text } from '../components/locales.react';
 import { propTypes, defaultProps } from '../components/dataDisplay/AntdTable.react';
 
@@ -1112,7 +1112,7 @@ class AntdTable extends Component {
                     columns[i]['render'] = (content, record) => {
                         const currentDataIndex = columns[i]['dataIndex']
                         return (
-                            <Checkbox defaultChecked={content.checked}
+                            <Checkbox checked={content.checked}
                                 disabled={content.disabled}
                                 onChange={(e) => {
                                     // 修改对应行对应字段item.checked值
@@ -1150,7 +1150,7 @@ class AntdTable extends Component {
                     columns[i]['render'] = (content, record) => {
                         const currentDataIndex = columns[i]['dataIndex']
                         return (
-                            <Switch defaultChecked={content.checked}
+                            <Switch checked={content.checked}
                                 disabled={content.disabled}
                                 checkedChildren={content.checkedChildren}
                                 unCheckedChildren={content.unCheckedChildren}

package/src/lib/fragments/upload/AntdUpload.react.js

@@ -325,7 +325,9 @@ const AntdUpload = (props) => {
                     ...style
                 }}
                 key={key}>
-                <Upload {...uploadProps}
+                <Upload
+                    {...uploadProps}
+                    className={buttonProps?.block ? 'ant-upload-button-block' : undefined}
                     fileList={fileList}
                     multiple={multiple}
                     showUploadList={showUploadList}
@@ -385,254 +387,6 @@ const AntdUpload = (props) => {
     );
 }
 
-// 定义参数或属性
-AntdUpload.propTypes = {
-    // 组件id
-    id: PropTypes.string,
-
-    // css类名
-    className: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object
-    ]),
-
-    // 自定义css字典
-    style: PropTypes.object,
-
-    // 辅助刷新用唯一标识key值
-    key: PropTypes.string,
-
-    // 设置语言环境，可选的有'zh-cn'、'en-us'
-    locale: PropTypes.oneOf(['zh-cn', 'en-us']),
-
-    // 设置文件上传服务的接口url
-    apiUrl: PropTypes.string,
-
-    // 设置文件上传服务额外的headers信息
-    headers: PropTypes.object,
-
-    // 可选，用于设置已上传完成文件的下载接口，get接口，具有参数taskId、filename
-    downloadUrl: PropTypes.string,
-
-    // 设置已上传文件列表的最大显示长度，默认为3
-    fileListMaxLength: PropTypes.number,
-
-    // 设置允许上传的文件后缀名数组
-    fileTypes: PropTypes.arrayOf(PropTypes.string),
-
-    // 按钮模式下设置按钮内的文字内容
-    buttonContent: PropTypes.node,
-
-    // 配置上传按钮常用参数
-    buttonProps: PropTypes.exact({
-        // 设置按钮尺寸规格，可选的有'default'/'small'/'large'
-        size: PropTypes.oneOf(['default', 'small', 'large']),
-
-        // 设置按钮整体风格（可选项有primary、ghost、dashed、link、text、default）
-        type: PropTypes.oneOf(['primary', 'ghost', 'dashed', 'link', 'text', 'default']),
-
-        // 设置按钮是否显示为危险状态
-        danger: PropTypes.bool,
-
-        // 设置按钮的css样式
-        style: PropTypes.object,
-
-        // 设置按钮的css类名
-        className: PropTypes.string
-    }),
-
-    // 设置当前组件生命周期内的上传路径id信息，若未传入则会自动生成uuid
-    uploadId: PropTypes.string,
-
-    // 设置 文件上传尺寸上限，单位：兆
-    fileMaxSize: PropTypes.number,
-
-    // 设置是否开启多文件上传模式，默认为false
-    multiple: PropTypes.bool,
-
-    // 设置是否开启文件夹上传模式，默认为false
-    directory: PropTypes.bool,
-
-    // 自定义上传失败文件鼠标悬浮tooltip文字内容，默认为'上传失败'
-    failedTooltipInfo: PropTypes.string,
-
-    // 设置是否显示已上传文件列表，默认为true
-    showUploadList: PropTypes.bool,
-
-    // 设置是否为删除操作添加二次确认模态框，默认为false
-    confirmBeforeDelete: PropTypes.bool,
-
-    // 用于设置是否启用进度百分比显示，配合progressProps.format实现更多配置功能
-    // 默认为false
-    showPercent: PropTypes.bool,
-
-    // 用于配置进度条相关参数
-    progressProps: PropTypes.exact({
-        // 设置进度条的颜色，与css接受的颜色值格式相同
-        strokeColor: PropTypes.oneOfType([
-            PropTypes.string,
-            // 配置渐变色
-            PropTypes.exact({
-                // 配置开始颜色
-                from: PropTypes.string,
-
-                // 配置结束颜色
-                to: PropTypes.string
-            })
-        ]),
-
-        // 配置进度条线像素宽度
-        strokeWidth: PropTypes.number,
-
-        // 自定义提示格式
-        format: PropTypes.exact({
-            // 设置前缀文字，默认为''
-            prefix: PropTypes.string,
-
-            // 设置后缀文字，默认为'%'
-            suffix: PropTypes.string
-        })
-    }),
-
-    // 设置是否在每次文件上传成功后，弹出提示消息，默认为true
-    showSuccessMessage: PropTypes.bool,
-
-    // 设置是否在每次文件上传失败后，弹出提示消息，默认为true
-    showErrorMessage: PropTypes.bool,
-
-    // 用于在每次文件上传动作完成后，记录相关的信息
-    lastUploadTaskRecord: PropTypes.oneOfType([
-        // 单文件
-        PropTypes.exact({
-            // 记录文件名称
-            fileName: PropTypes.string,
-
-            // 记录文件大小
-            fileSize: PropTypes.number,
-
-            // 记录完成时间戳信息
-            completeTimestamp: PropTypes.number,
-
-            // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
-            taskStatus: 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
-            })
-        )
-    ]),
-
-    // 用于在每次的上传任务完成后，更新当前文件列表中全部文件的上传信息
-    listUploadTaskRecord: PropTypes.arrayOf(
-        PropTypes.exact({
-            // 记录文件名称
-            fileName: PropTypes.string,
-
-            // 记录文件大小
-            fileSize: PropTypes.number,
-
-            // 记录完成时间戳信息
-            completeTimestamp: PropTypes.number,
-
-            // 记录此次上传任务的状态信息，'success'表示成功，'failed'表示失败
-            taskStatus: PropTypes.string,
-
-            // 记录本次任务的id信息，若最近一次任务状态为'failed'，则不会携带此信息
-            taskId: PropTypes.string,
-
-            // 唯一标识当前任务的uuid信息，前端生成与后端无关
-            uid: PropTypes.string,
-
-            url: PropTypes.string
-        })
-    ),
-
-    // 仅作初始化展示用，用于定义组件初始化时已存在在上传列表中的附件信息
-    defaultFileList: PropTypes.arrayOf(
-        PropTypes.exact({
-            // 文件名称
-            name: PropTypes.string,
-
-            // 文件状态，可选的有'done'、'error'、'removed'
-            status: PropTypes.oneOf(['done', 'error', 'removed']),
-
-            // 唯一标识当前任务的uuid信息
-            uid: PropTypes.any,
-
-            // 可选，用于渲染当前文件的下载链接
-            url: PropTypes.string,
-
-            // 标识当前任务的taskId，若设置，则默认会被作为当前组件的uploadId使用
-            taskId: PropTypes.string,
-
-            // 可选，记录文件大小
-            fileSize: PropTypes.number
-        })
-    ),
-
-    // 设置是否禁用当前组件，默认为false
-    disabled: PropTypes.bool,
-
-    // 设置校验状态，可选的有'error'、'warning'
-    status: PropTypes.oneOf(['error', 'warning']),
-
-    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
-};
-
-// 设置默认参数
-AntdUpload.defaultProps = {
-    disabled: false,
-    multiple: false,
-    directory: false,
-    showUploadList: true,
-    fileListMaxLength: null,
-    fileMaxSize: 500,
-    confirmBeforeDelete: false,
-    showPercent: false,
-    showSuccessMessage: true,
-    showErrorMessage: true,
-    lastUploadTaskRecord: null,
-    listUploadTaskRecord: [],
-    locale: 'zh-cn'
-}
-
 export default AntdUpload;
 
 AntdUpload.defaultProps = defaultProps;

package/usage.py

@@ -1,33 +1,65 @@
 import dash
-from dash import html, dcc
 import feffery_antd_components as fac
-from dash.dependencies import Input, Output, State
+from dash.dependencies import Input, Output
 
-app = dash.Dash(__name__)
+app = dash.Dash(__name__, compress=True)
 
-app.layout = html.Div(
+app.layout = dash.html.Div(
     [
-        dcc.Store(id='clicked-row-key'),
-        fac.AntdTable(
-            id='demo-table',
-            columns=[
-                {
-                    'title': f'示例字段{i}',
-                    'dataIndex': f'示例字段{i}'
-                }
-                for i in range(1, 9)
-            ],
-            data=[
-                {
-                    f'示例字段{j}': i
-                    for j in range(1, 9)
-                }
-                for i in range(10)
+        fac.AntdSpace(
+            [
+                fac.AntdInput(
+                    id='search-keyword',
+                    placeholder='请输入搜索关键词',
+                    style={
+                        'width': 250
+                    }
+                ),
+                fac.AntdTree(
+                    id='demo-tree',
+                    treeData=[
+                        {
+                            'title': '四川省',
+                            'key': '四川省',
+                            'children': [
+                                {
+                                    'title': '成都市',
+                                    'key': '成都市'
+                                },
+                                {
+                                    'title': '广安市',
+                                    'key': '广安市'
+                                }
+                            ]
+                        },
+                        {
+                            'title': '重庆市',
+                            'key': '重庆市',
+                            'children': [
+                                {
+                                    'title': '渝中区',
+                                    'key': '渝中区',
+                                    'children': [
+                                        {
+                                            'title': '解放碑街道',
+                                            'key': '解放碑街道'
+                                        }
+                                    ]
+                                },
+                                {
+                                    'title': '渝北区',
+                                    'key': '渝北区'
+                                }
+                            ]
+                        }
+                    ],
+                    defaultExpandAll=True
+                )
             ],
-            bordered=True,
-            enableCellClickListenColumns=[
-                f'示例字段{i}' for i in range(1, 9)
-            ]
+            direction='vertical',
+            style={
+                'width': '100%'
+            }
         )
     ],
     style={
@@ -37,73 +69,12 @@ app.layout = html.Div(
 
 
 @app.callback(
-    [Output('clicked-row-key', 'data'),
-     Output('demo-table', 'conditionalStyleFuncs')],
-    Input('demo-table', 'nClicksCell'),
-    [State('demo-table', 'recentlyCellClickColumn'),
-     State('demo-table', 'recentlyCellClickRecord'),
-     State('clicked-row-key', 'data')],
-    prevent_initial_call=True
+    Output('demo-tree', 'searchKeyword'),
+    Input('search-keyword', 'value')
 )
-def highlight_clicked_cell(nClicksCell,
-                           recentlyCellClickColumn,
-                           recentlyCellClickRecord,
-                           clicked_row_key):
-
-    if clicked_row_key:
-        # 若为同一单元格反复点击
-        if (
-            clicked_row_key['key'] == recentlyCellClickRecord['key'] and
-            clicked_row_key['column'] == recentlyCellClickColumn
-        ):
-            return [
-                None,
-                {}
-            ]
-
-        return [
-            {
-                'key': recentlyCellClickRecord['key'],
-                'column': recentlyCellClickColumn
-            },
-            {
-                recentlyCellClickColumn: '''
-                (record, index) => {
-                    if ( record.key === "%s" ) {
-                        return {
-                            style: {
-                                backgroundColor: "#e6f7ff",
-                                border: "1px solid #1890ff",
-                                boxSizing: "content-box"
-                            }
-                        }
-                    }
-                }
-                ''' % recentlyCellClickRecord['key']
-            }
-        ]
+def filter_tree(keyword):
 
-    return [
-        {
-            'key': recentlyCellClickRecord['key'],
-            'column': recentlyCellClickColumn
-        },
-        {
-            recentlyCellClickColumn: '''
-            (record, index) => {
-                if ( record.key === "%s" ) {
-                    return {
-                        style: {
-                            backgroundColor: "#e6f7ff",
-                            border: "1px solid #1890ff",
-                            boxSizing: "content-box"
-                        }
-                    }
-                }
-            }
-            ''' % recentlyCellClickRecord['key']
-        }
-    ]
+    return keyword
 
 
 if __name__ == '__main__':