feffery_antd_components 0.3.0-b0 → 0.3.0-b2

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

@@ -14,8 +14,11 @@ const AntdDropdown = (props) => {
     // 取得必要属性或参数
     let {
         id,
+        children,
         className,
         style,
+        wrapperStyle,
+        wrapperClassName,
         key,
         title,
         buttonMode,
@@ -159,16 +162,32 @@ const AntdDropdown = (props) => {
                         />
                     ) :
                     (
-                        buttonMode ?
-                            <Button
-                                {...buttonProps}
-                            >
-                                {title} <DownOutlined />
-                            </Button>
-                            :
-                            <Link onClick={e => e.preventDefault()}>
-                                {title} <DownOutlined />
-                            </Link>
+                        children ?
+                            (
+                                <div className={
+                                    isString(wrapperClassName) ?
+                                        wrapperClassName :
+                                        (wrapperClassName ? useCss(wrapperClassName) : undefined)
+                                }
+                                    style={{
+                                        display: 'inline-block',
+                                        ...wrapperStyle
+                                    }}>
+                                    {children}
+                                </div>
+                            ) :
+                            (
+                                buttonMode ?
+                                    <Button
+                                        {...buttonProps}
+                                    >
+                                        {title} <DownOutlined />
+                                    </Button>
+                                    :
+                                    <Link onClick={e => e.preventDefault()}>
+                                        {title} <DownOutlined />
+                                    </Link>
+                            )
                     )
             }
         </Dropdown>
@@ -180,6 +199,11 @@ AntdDropdown.propTypes = {
     // 组件id
     id: PropTypes.string,
 
+    /**
+     * 自定义下拉菜单锚定的自定义元素，优先级最高
+     */
+    children: PropTypes.node,
+
     // css类名
     className: PropTypes.oneOfType([
         PropTypes.string,
@@ -189,6 +213,19 @@ AntdDropdown.propTypes = {
     // 自定义css字典
     style: PropTypes.object,
 
+    /**
+     * 针对自定义锚定元素的父容器设置css样式
+     */
+    wrapperStyle: PropTypes.object,
+
+    /**
+     * 针对自定义锚定元素的父容器设置css类名
+     */
+    wrapperClassName: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.object
+    ]),
+
     // 辅助刷新用唯一标识key值
     key: PropTypes.string,
 

package/src/lib/components/other/AntdConfigProvider.js

@@ -58,7 +58,9 @@ const AntdConfigProvider = (props) => {
             >
                 <StyleProvider hashPriority={'high'}
                     transformers={[legacyLogicalPropertiesTransformer]}>
-                    <App>
+                    <App notification={{
+                        stack: false
+                    }}>
                         <ConfigProvider id={id}
                             key={key}
                             theme={

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

@@ -1754,6 +1754,73 @@ class AntdTable extends Component {
             }
         }
 
+        // 统一合并处理onCell自定义函数逻辑
+        columns = [...columns].map(
+            item => {
+                return {
+                    ...item,
+                    ...{
+                        onCell: (record, index) => {
+                            // 初始化onCell返回值
+                            let returnValue = {}
+                            // 处理自定义样式特性
+                            if (conditionalStyleFuncs && conditionalStyleFuncs[item.dataIndex]) {
+                                try {
+                                    returnValue = {
+                                        ...returnValue,
+                                        ...eval(conditionalStyleFuncs[item.dataIndex])(record, index)
+                                    }
+                                } catch (e) {
+                                    console.error(e)
+                                }
+                            }
+                            // 处理单元格点击事件
+                            if (enableCellClickListenColumns && enableCellClickListenColumns.includes(item.dataIndex)) {
+                                try {
+                                    returnValue = {
+                                        ...returnValue,
+                                        onClick: e => {
+                                            setProps({
+                                                recentlyCellClickColumn: item.dataIndex,
+                                                recentlyCellClickRecord: record,
+                                                nClicksCell: nClicksCell + 1
+                                            })
+                                        },
+                                        onDoubleClick: e => {
+                                            setProps({
+                                                recentlyCellDoubleClickColumn: item.dataIndex,
+                                                recentlyCellDoubleClickRecord: record,
+                                                nDoubleClicksCell: nDoubleClicksCell + 1
+                                            })
+                                        }
+                                    }
+                                } catch (e) {
+                                    console.error(e)
+                                }
+                            }
+
+                            // 处理可编辑特性
+                            if (item.editable) {
+                                try {
+                                    returnValue = {
+                                        ...returnValue,
+                                        record,
+                                        editable: item.editable,
+                                        dataIndex: item.dataIndex,
+                                        title: item.title
+                                    }
+                                } catch (e) {
+                                    console.error(e)
+                                }
+                            }
+
+                            return returnValue;
+                        }
+                    }
+                };
+            }
+        )
+
         // 若存在至少一个字段有group参数，则对columns进行重构以支持多层表头
         let tempColumns = []
         if (columns.some(e => e.group)) {
@@ -1773,71 +1840,6 @@ class AntdTable extends Component {
             tempColumns = [...columns]
         }
 
-        // 统一合并处理onCell自定义函数逻辑
-        tempColumns = tempColumns.map(
-            item => ({
-                ...item,
-                ...{
-                    onCell: (record, index) => {
-                        // 初始化onCell返回值
-                        let returnValue = {}
-                        // 处理自定义样式特性
-                        if (conditionalStyleFuncs && conditionalStyleFuncs[item.dataIndex]) {
-                            try {
-                                returnValue = {
-                                    ...returnValue,
-                                    ...eval(conditionalStyleFuncs[item.dataIndex])(record, index)
-                                }
-                            } catch (e) {
-                                console.error(e)
-                            }
-                        }
-                        // 处理单元格点击事件
-                        if (enableCellClickListenColumns && enableCellClickListenColumns.includes(item.dataIndex)) {
-                            try {
-                                returnValue = {
-                                    ...returnValue,
-                                    onClick: e => {
-                                        setProps({
-                                            recentlyCellClickColumn: item.dataIndex,
-                                            recentlyCellClickRecord: record,
-                                            nClicksCell: nClicksCell + 1
-                                        })
-                                    },
-                                    onDoubleClick: e => {
-                                        setProps({
-                                            recentlyCellDoubleClickColumn: item.dataIndex,
-                                            recentlyCellDoubleClickRecord: record,
-                                            nDoubleClicksCell: nDoubleClicksCell + 1
-                                        })
-                                    }
-                                }
-                            } catch (e) {
-                                console.error(e)
-                            }
-                        }
-
-                        // 处理可编辑特性
-                        if (item.editable) {
-                            try {
-                                returnValue = {
-                                    ...returnValue,
-                                    record,
-                                    editable: item.editable,
-                                    dataIndex: item.dataIndex,
-                                    title: item.title
-                                }
-                            } catch (e) {
-                                console.error(e)
-                            }
-                        }
-
-                        return returnValue;
-                    }
-                }
-            })
-        )
-
         return (
             <ConfigProvider
                 locale={str2Locale.get(locale)}

package/src/lib/fragments/dataDisplay/AntdDraggablePanel.react.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import useCss from '../../hooks/useCss';
+import { isString } from 'lodash';
+import { DraggablePanel } from '@ant-design/pro-editor/es/DraggablePanel';
+import { propTypes, defaultProps } from '../../components/dataDisplay/AntdDraggablePanel.react';
+
+// 定义可拖拽面板组件AntdDraggablePanel，api参数参考https://pro-editor.antdigital.dev/zh-CN/components/draggable-panel
+const AntdDraggablePanel = (props) => {
+    // 取得必要属性或参数
+    let {
+        id,
+        children,
+        style,
+        className,
+        key,
+        mode,
+        defaultSize,
+        defaultPosition,
+        placement,
+        minWidth,
+        minHeight,
+        maxWidth,
+        maxHeight,
+        resize,
+        expandable,
+        isExpand,
+        setProps,
+        loading_state
+    } = props;
+
+    return (
+        <DraggablePanel id={id}
+            className={
+                isString(className) ?
+                    className :
+                    (className ? useCss(className) : undefined)
+            }
+            style={style}
+            key={key}
+            mode={mode}
+            defaultSize={defaultSize}
+            defaultPosition={defaultPosition}
+            placement={placement}
+            minWidth={minWidth}
+            minHeight={minHeight}
+            maxWidth={maxWidth}
+            maxHeight={maxHeight}
+            resize={resize}
+            expandable={expandable}
+            isExpand={isExpand}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } >
+            {children}
+        </DraggablePanel>
+    );
+}
+
+export default AntdDraggablePanel;
+
+AntdDraggablePanel.defaultProps = defaultProps;
+AntdDraggablePanel.propTypes = propTypes;

package/src/lib/index.js

@@ -47,6 +47,7 @@ import AntdCollapse from './components/dataDisplay/AntdCollapse.react';
 import AntdComment from './components/dataDisplay/AntdComment.react';
 import AntdDescriptions from './components/dataDisplay/descriptions/AntdDescriptions.react';
 import AntdDescriptionItem from './components/dataDisplay/descriptions/AntdDescriptionItem.react';
+import AntdDraggablePanel from './components/dataDisplay/AntdDraggablePanel.react';
 import AntdEmpty from './components/dataDisplay/AntdEmpty.react';
 import AntdImage from './components/dataDisplay/AntdImage.react';
 import AntdImageGroup from './fragments/dataDisplay/AntdImageGroup.react';
@@ -214,5 +215,6 @@ export {
     AntdCompact,
     AntdTour,
     AntdColorPicker,
-    AntdQRCode
+    AntdQRCode,
+    AntdDraggablePanel
 };

package/usage.py

@@ -1,39 +1,63 @@
 import dash
 from dash import html
 import feffery_antd_components as fac
+from dash.dependencies import Input, Output
 
 app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
-        fac.AntdDropdown(
-            title='触发点',
-            menuItems=[
+        fac.AntdTable(
+            columns=[
                 {
-                    'title': fac.AntdSpace(
-                        [
-                            fac.AntdAvatar(
-                                text='我',
-                                mode='text',
-                                style={
-                                    'background': '#2f54eb'
-                                }
-                            ),
-                            fac.AntdSpace(
-                                [
-                                    '用户示例',
-                                    fac.AntdTag(
-                                        content='vip',
-                                        color='red'
-                                    )
-                                ],
-                                direction='vertical',
-                                size=0
-                            )
-                        ]
-                    )
+                    'title': '字段1-1-1',
+                    'dataIndex': '字段1-1-1',
+                    'group': ['字段1', '字段1-1']
+                },
+                {
+                    'title': '字段1-1-2',
+                    'dataIndex': '字段1-1-2',
+                    'group': ['字段1', '字段1-1']
+                },
+                {
+                    'title': '字段1-2',
+                    'dataIndex': '字段1-2',
+                    'group': '字段1'
+                },
+                {
+                    'title': '字段2',
+                    'dataIndex': '字段2'
                 }
-            ]
+            ],
+            data=[
+                {
+                    '字段1-1-1': 1,
+                    '字段1-1-2': 1,
+                    '字段1-2': 1,
+                    '字段2': 1
+                }
+            ] * 3,
+            filterOptions={
+                '字段1-1-1': {}
+            },
+            sortOptions={
+                'sortDataIndexes': ['字段1-1-1']
+            },
+            bordered=True,
+            conditionalStyleFuncs={
+                '字段1-1-1': '''
+(record, index) => {
+    console.log(record)
+    if ( index % 2 === 1 ) {
+        return {
+            style: {
+                backgroundColor: "#ebfbee"
+            }
+        }
+    }
+}
+'''
+            }
         )
     ],
     style={