feffery_antd_components 0.1.3 → 0.1.6

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

@@ -0,0 +1,115 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { WaterMark } from '@ant-design/pro-layout';
+import '@ant-design/pro-layout/dist/layout.css';
+
+const parseChildrenToArray = children => {
+    if (children && !Array.isArray(children)) {
+        return [children];
+    }
+    return children;
+};
+
+// 定义水印组件AntdWatermark，api参数参考https://procomponents.ant.design/components/water-mark
+export default class AntdWatermark extends Component {
+    render() {
+        // 取得必要属性或参数
+        let {
+            id,
+            children,
+            className,
+            style,
+            content,
+            rotate,
+            zIndex,
+            fontColor,
+            fontSize,
+            gapX,
+            gapY,
+            loading_state
+        } = this.props;
+
+        children = parseChildrenToArray(children)
+
+        return (
+            <WaterMark id={id}
+                className={className}
+                style={style}
+                content={content}
+                rotate={rotate}
+                zIndex={zIndex}
+                fontColor={fontColor}
+                fontSize={fontSize}
+                gapX={gapX}
+                gapY={gapY}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }>
+                {children}
+            </WaterMark>
+        );
+    }
+}
+
+// 定义参数或属性
+AntdWatermark.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    /**
+     * The content of the tab - will only be displayed if this tab is selected
+     */
+    children: PropTypes.node,
+
+    // css类名
+    className: PropTypes.string,
+
+    // 自定义css字典
+    style: PropTypes.object,
+
+    // 设置水印文字内容
+    content: PropTypes.string,
+
+    // 设置水印旋转角度，默认-22
+    rotate: PropTypes.number,
+
+    // 设置水印z-index
+    zIndex: PropTypes.number,
+
+    // 设置水印文字颜色
+    fontColor: PropTypes.string,
+
+    // 设置水印字体像素大小，默认16
+    fontSize: PropTypes.number,
+
+    // 水印之间的水平像素间距，默认为212
+    gapX: PropTypes.number,
+
+    // 水印之间的垂直间距，默认为222
+    gapY: PropTypes.number,
+
+    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
+};
+
+// 设置默认参数
+AntdWatermark.defaultProps = {
+}

package/src/lib/components/styles.css

@@ -39,14 +39,6 @@
     line-height: 1;
 }
 
-/* .ant-spin-nested-loading {
-    height: 100%!important;
-}
-
-.ant-spin-container {
-    height: 100%!important;
-} */
-
 .comment-action {
     padding-left: 8px;
     cursor: 'auto';
@@ -61,6 +53,15 @@
     vertical-align: -0.125em !important;
 }
 
-/* .ant-breadcrumb-link > svg {
-    vertical-align: middle;
-} */
+
+.feffery-paste-image-container {
+    height: 400px;
+    overflow: auto;
+    border: 1px solid #d9d9d9;
+    transition: all .3s, height 0s;
+    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAkdJREFUSEtjZMABcnNny3ByMpQyMzNpISv59u3XtokTM/tx6UMXZ4QJJCTM5+Dh+WIB4zMxMe83M1NhkJUVRdFz8eJ9hgcPXr/+9etXGEzi3z+mG9OmZb/AZinYgqbqqWVvvzC2Gyv8YgLxP3xjYvjwR4AhM8sTq0Obm1czmCj+gsu9+cx879MPxicNbTn2WH2Qnzftb5rTF7Dhh2+yM7z8yMzw8x8rgyAfKwPci1Cd/xkYGF69+8Ugwv2bQV3yN4OqxB+wzPaLnA+fvGdxmDAh8wGyJWD9teVT70dYflUAsb/+ZGTgZAMZQxgwIdl+9Bbbg0uPmBOnTMk9gNcCwsZiV0GRBTP38eC1l52dlYGL+efnt1/++5Hlg23XJRmi4/1xWjJ16jqGz5+/MTAw/N84aVJ2AMlBRMiCSZPWMLS3JzLk509nYGRknDZxYmY2zBKMSMbmTEIW9PevZOjqSgFrBVnCwMAwf9KkrCQQgyoW9PQsZ+jtTYO7DdkSqljQ2bmU4f9/rEm7iioWgJz+8+d3hl+/fsJ9cfHi7W+HDl3zppoF6JbQxAJkS2hmAcyS06evUD+IkJP44cNnvh4+fNWHqnGAbMGhQ+c/HzlyyQ9sQU3ZlIeRVt/kcJUFhDIaNn0oFlSXTX0UZfVVlmYWVJVNeRxk8l2GlQV7PbDrJv7CjhgfzFEQ/R0oyvtPCJvim+/FGWLjfUmqKlCCCKSzrHhyAA87QzA2U5i5RMKcXUzYSLHhwYNniEgmpLGsbG4XITXY5Lu6kssAynVWbI/9nxAAAAAASUVORK5CYII=), auto;
+}
+
+.feffery-paste-image-container:hover {
+    border: 1px solid rgb(64, 169, 255);
+}

package/src/lib/components/tabs/AntdTabs.react.js

@@ -107,6 +107,10 @@ export default class AntdTabs extends Component {
                                     }
                                     overlayStyle={{ maxWidth: "250px" }}
                                     placement={"right"}
+                                    getPopupContainer={(triggerNode) => {
+                                        console.log(triggerNode.parentNode)
+                                        return triggerNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
+                                    }}
                                 >
                                     <InfoCircleOutlined
                                         style={{

package/src/lib/index.js

@@ -76,6 +76,8 @@ import AntdCalendar from './components/AntdCalendar.react'
 import AntdComment from './components/AntdComment.react'
 import AntdDescriptions from './components/descriptions/AntdDescriptions.react'
 import AntdDescriptionItem from './components/descriptions/AntdDescriptionItem.react'
+import AntdWatermark from './components/AntdWatermark.react'
+import AntdPasteImage from './components/AntdPasteImage.react'
 
 export {
     AntdDatePicker,
@@ -154,5 +156,7 @@ export {
     AntdCalendar,
     AntdComment,
     AntdDescriptions,
-    AntdDescriptionItem
+    AntdDescriptionItem,
+    AntdWatermark,
+    AntdPasteImage
 };

package/usage.py

@@ -8,28 +8,73 @@ app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
+        fac.AntdPasteImage(
+            id='test',
+            style={
+                'height': '500px',
+                'width': '800px',
+                'marginBottom': '100px'
+            }
+        ),
+
+        html.Div(id='test-output'),
+        fac.AntdWatermark(
+            html.Div(
+                style={
+                    'width': '800px',
+                    'height': '400px'
+                }
+            ),
+            content='水印测试',
+            fontSize=28
+        ),
         fac.AntdTable(
             selectedRowKeys=['2', '4'],
-            rowSelectionWidth='5rem',
+            rowSelectionWidth='4rem',
             columns=[
                 {
                     'title': '默认的checkbox模式',
                     'dataIndex': f'默认的checkbox模式',
-                    'width': 400
+                    'width': '33.33%',
+                    'conditionStyle': '''
+                    (record, index) => {
+                        if (record.默认的checkbox模式 >= 10) {
+                            return {
+                                style: {
+                                    color: "red"
+                                }
+                            }
+                        }
+                        if (record.默认的checkbox模式 % 2 === 0) {
+                            return {
+                                style: {
+                                    backgroundColor: "#ffe7ba"
+                                }
+                            }
+                        }
+                        return {
+                            style: {
+                                fontWeight: "bold"
+                            }
+                        }
+                    }
+                    '''
+                    # 'fixed': 'left'
                 },
                 {
                     'title': '自定义选项的checkbox模式',
                     'dataIndex': '自定义选项的checkbox模式',
-                    'width': 400
+                    'width': '33.33%'
                 },
                 {
                     'title': 'keyword模式',
                     'dataIndex': 'keyword模式',
-                    'width': 400
+                    'width': '33.33%'
                 }
             ],
-            containerId='docs-content',
-            sticky=True,
+            sticky={
+                'offsetHeader': 800
+            },
             pagination={
                 'pageSize': 100
             },
@@ -53,11 +98,181 @@ app.layout = html.Div(
                 }
             },
             rowSelectionType='checkbox',
+            bordered=True,
+            # maxHeight=200,
+            maxWidth=1000,
             style={
-                'width': '600px'
+                # 'width': '800px'
             }
         ),
 
+
+        fac.AntdImage(
+            src='https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp'
+        ),
+
+        fac.AntdRate(
+            count=10,
+            tooltips=[f'等级{i + 1}' for i in range(10)]
+        ),
+
+        fac.AntdButton(
+            '触发对话框',
+            type='primary',
+            id='modal-demo-trigger-1'
+        ),
+
+        fac.AntdModal(
+            fac.AntdText('对话框内容测试'),
+            id='modal-demo-1',
+            visible=False,
+            title={
+                'content': '标题测试',
+                'prefixIcon': 'search'
+            },
+            renderFooter=True
+        ),
+
+        fac.AntdTree(
+            id='tree-demo',
+            treeData=[
+                {
+                    'title': '重庆市',
+                    'key': '重庆市',
+                    'children': [
+                        {
+                            'title': '渝北区',
+                            'key': '渝北区'
+                        },
+                        {
+                            'title': '江北区',
+                            'key': '江北区',
+                            'disabled': True
+                        }
+                    ]
+                },
+                {
+                    'title': '北京市',
+                    'key': '北京市',
+                    'children': [
+                        {
+                            'title': '西城区',
+                            'key': '西城区'
+                        },
+                        {
+                            'title': '东城区',
+                            'key': '东城区'
+                        }
+                    ]
+                },
+                {
+                    'title': '四川省',
+                    'key': '四川省',
+                    'children': [
+                        {
+                            'title': '成都市',
+                            'key': '成都市',
+                            'children': [
+                                {
+                                    'title': '天府新区',
+                                    'key': '天府新区'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            multiple=True,
+            checkable=True
+        ),
+
+        fac.AntdParagraph('巴拉巴拉'*100, style={'textIndent': '2em'}),
+
+        fac.AntdTable(
+            miniChartHeight=60,
+            miniChartAnimation=False,
+            summaryRowContents=[{'content': '测试', 'align': 'center'}] *
+            5+[{'content': '测试测试', 'colSpan': 2, 'align': 'center'}],
+            summaryRowFixed=True,
+            columns=[
+                {
+                    'title': 'status-badge示例',
+                    'dataIndex': 'status-badge示例',
+                    # 'width': '25%',
+                    'renderOptions': {
+                        'renderType': 'status-badge'
+                    }
+                },
+                {
+                    'title': 'mini-bar示例',
+                    'dataIndex': 'mini-bar示例',
+                    # 'width': '25%',
+                    'renderOptions': {
+                        'renderType': 'mini-bar'
+                    }
+                },
+                {
+                    'title': 'ellipsis内容省略示例',
+                    'dataIndex': 'ellipsis内容省略示例',
+                    'renderOptions': {'renderType': 'ellipsis'}
+                },
+                {
+                    # 注意，mini-progress模式接受的输入应当在0到1之间
+                    'title': 'mini-progress示例',
+                    'dataIndex': 'mini-progress示例',
+                    # 'width': '25%',
+                    'renderOptions': {
+                        'renderType': 'mini-progress'
+                    }
+                },
+                {
+                    # 注意，mini-ring-progress模式接受的输入应当在0到1之间
+                    'title': 'mini-ring-progress示例',
+                    'dataIndex': 'mini-ring-progress示例',
+                    # 'width': '25%',
+                    'renderOptions': {
+                        'renderType': 'mini-ring-progress'
+                    }
+                },
+                {
+                    'title': 'mini-area示例',
+                    'dataIndex': 'mini-area示例',
+                    # 'width': '25%',
+                    'renderOptions': {
+                        'renderType': 'mini-area'
+                    }
+                },
+                {
+                    'title': 'mini-line示例',
+                    'dataIndex': 'mini-line示例',
+                    # 'width': '25%',
+                    'renderOptions': {
+                        'renderType': 'mini-line'
+                    }
+                },
+            ],
+            data=[
+                {
+                    'key': i,
+                    'ellipsis内容省略示例': '这是一段废话，用来演示超长内容再渲染巴拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉',
+                    'status-badge示例': {
+                        'status': 'processing',
+                        'text': '处理中'
+                    },
+                    'mini-line示例': np.random.randint(1, 20, 10),
+                    'mini-bar示例': np.random.randint(1, 20, 10),
+                    'mini-progress示例': np.random.rand(),
+                    'mini-ring-progress示例': np.random.rand(),
+                    'mini-area示例': np.random.randint(1, 20, 10)
+                }
+                for i in range(50)
+            ],
+            maxHeight=400,
+            # maxWidth=800,
+            bordered=True,
+            containerId='docs-content'  # 绑定局部滚动容器以确保悬浮层正常显示
+        ),
+
         html.Div(
             [
                 fac.AntdAlert(
@@ -105,6 +320,66 @@ app.layout = html.Div(
             ]
         ),
 
+
+        fac.AntdTabs(
+            [
+                fac.AntdTabPane(
+                    html.Div(
+                        '标签页1测试',
+                        style={
+                            'backgroundColor': 'rgba(241, 241, 241, 0.4)',
+                            'height': '200px',
+                            'display': 'flex',
+                            'justifyContent': 'center',
+                            'alignItems': 'center'
+                        }
+                    ),
+                    tab='标签页1',
+                    key='标签页1',
+                    titleSideInfoPopover={
+                        'title': '标签页1说明',
+                        'content': '这是标签页1的说明文字内容示例'
+                    }
+                ),
+                fac.AntdTabPane(
+                    html.Div(
+                        fac.AntdButton('标签页2测试', type='primary'),
+                        style={
+                            'backgroundColor': 'rgba(241, 241, 241, 0.4)',
+                            'height': '200px',
+                            'display': 'flex',
+                            'justifyContent': 'center',
+                            'alignItems': 'center'
+                        }
+                    ),
+                    tab='标签页2',
+                    key='标签页2',
+                    titleSideInfoPopover={
+                        'title': '标签页2说明',
+                        'content': '这是标签页2的说明文字内容示例'
+                    }
+                ),
+                fac.AntdTabPane(
+                    html.Div(
+                        fac.AntdButton('标签页3测试', type='dashed'),
+                        style={
+                            'backgroundColor': 'rgba(241, 241, 241, 0.4)',
+                            'height': '200px',
+                            'display': 'flex',
+                            'justifyContent': 'center',
+                            'alignItems': 'center'
+                        }
+                    ),
+                    tab='标签页3',
+                    key='标签页3',
+                    titleSideInfoPopover={
+                        'title': '标签页3说明',
+                        'content': '这是标签页3的说明文字内容示例'
+                    }
+                )
+            ]
+        ),
+
         html.Div(
             [
                 fac.AntdAlert(
@@ -537,24 +812,6 @@ app.layout = html.Div(
                             '触发全局提示框', id='message-trigger-button-demo1', type='primary'),
                         html.Div(id='message-container-demo1'),
 
-                        fac.AntdButton(
-                            '触发对话框',
-                            type='primary',
-                            id='modal-demo-trigger-1'
-                        ),
-
-                        fac.AntdModal(
-                            fac.AntdText('对话框内容测试'),
-                            id='modal-demo-1',
-                            visible=False,
-                            title={
-                                'content': '标题测试',
-                                'prefixIcon': 'search'
-                            },
-                            renderFooter=True
-                        ),
-
-
                         fac.AntdPopover(
                             fac.AntdButton(
                                 '鼠标悬浮于此',
@@ -1007,6 +1264,7 @@ def test_(replyClicks, deleteClicks):
     prevent_initial_call=True
 )
 def message_demo1(nClicks):
+
     return fac.AntdMessage(
         content='全局提示框示例',
         icon='fc-overtime',
@@ -1023,5 +1281,20 @@ def modal_demo_callback1(nClicks):
     return True
 
 
+@app.callback(
+    Output('test-output', 'children'),
+    Input('test', 'currentPastedImages')
+)
+def paste_image_test(currentPastedImages):
+
+    if currentPastedImages:
+        return [
+            html.Img(
+                src=currentPastedImage
+            )
+            for currentPastedImage in currentPastedImages
+        ]
+
+
 if __name__ == '__main__':
     app.run_server(debug=True)

package/webpack.config.js

@@ -25,12 +25,12 @@ module.exports = (env, argv) => {
     }
 
     let filename = (overrides.output || {}).filename;
-    if(!filename) {
+    if (!filename) {
         const modeSuffix = mode === 'development' ? 'dev' : 'min';
         filename = `${dashLibraryName}.${modeSuffix}.js`;
     }
 
-    const entry = overrides.entry || {main: './src/lib/index.js'};
+    const entry = overrides.entry || { main: './src/lib/index.js' };
 
     const devtool = overrides.devtool || 'source-map';
 
@@ -62,7 +62,7 @@ module.exports = (env, argv) => {
                     },
                 },
                 {
-                    test: /\.css$/,
+                    test: /\.(css|less)$/,
                     use: [
                         {
                             loader: 'style-loader',
@@ -73,6 +73,12 @@ module.exports = (env, argv) => {
                         {
                             loader: 'css-loader',
                         },
+                        {
+                            loader: 'less-loader',
+                            options: {
+                                javascriptEnabled: true
+                            }
+                        }
                     ],
                 },
             ],

package/build/lib/feffery_antd_components/AntdAffix.py

@@ -1,54 +0,0 @@
-# AUTO GENERATED FILE - DO NOT EDIT
-
-from dash.development.base_component import Component, _explicitize_args
-
-
-class AntdAffix(Component):
-    """An AntdAffix component.
-
-
-Keyword arguments:
-
-- children (a list of or a singular dash component, string or number; optional)
-
-- id (string; optional)
-
-- className (string; optional)
-
-- loading_state (dict; optional)
-
-    `loading_state` is a dict with keys:
-
-    - component_name (string; optional):
-        Holds the name of the component that is loading.
-
-    - is_loading (boolean; optional):
-        Determines if the component is loading or not.
-
-    - prop_name (string; optional):
-        Holds which property is loading.
-
-- offsetBottom (number; optional)
-
-- offsetTop (number; optional)
-
-- style (dict; optional)
-
-- target (string; optional)"""
-    @_explicitize_args
-    def __init__(self, children=None, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, offsetBottom=Component.UNDEFINED, offsetTop=Component.UNDEFINED, target=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['children', 'id', 'className', 'loading_state', 'offsetBottom', 'offsetTop', 'style', 'target']
-        self._type = 'AntdAffix'
-        self._namespace = 'feffery_antd_components'
-        self._valid_wildcard_attributes =            []
-        self.available_properties = ['children', 'id', 'className', 'loading_state', 'offsetBottom', 'offsetTop', 'style', 'target']
-        self.available_wildcard_properties =            []
-        _explicit_args = kwargs.pop('_explicit_args')
-        _locals = locals()
-        _locals.update(kwargs)  # For wildcard attrs
-        args = {k: _locals[k] for k in _explicit_args if k != 'children'}
-        for k in []:
-            if k not in args:
-                raise TypeError(
-                    'Required argument `' + k + '` was not specified.')
-        super(AntdAffix, self).__init__(children=children, **args)