feffery_antd_components 0.1.8 → 0.1.9

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

@@ -0,0 +1,167 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Segmented } from 'antd';
+import 'antd/dist/antd.css';
+
+// 定义分段控制器组件AntdSegmented，api参数参考https://ant.design/components/segmented-cn/
+export default class AntdSegmented extends Component {
+
+    constructor(props) {
+        super(props)
+        if (!props.value) {
+            props.setProps({ value: props.defaultValue })
+        }
+    }
+
+    render() {
+        // 取得必要属性或参数
+        let {
+            id,
+            style,
+            className,
+            options,
+            defaultValue,
+            value,
+            block,
+            disabled,
+            size,
+            setProps,
+            persistence,
+            persisted_props,
+            persistence_type,
+            loading_state
+        } = this.props;
+
+        const onSelect = (v) => {
+            setProps({ value: v })
+        }
+
+        // 返回定制化的前端组件
+        return (
+            <Segmented
+                id={id}
+                className={className}
+                style={style}
+                options={options}
+                defaultValue={defaultValue}
+                value={value}
+                block={block}
+                disabled={disabled}
+                size={size}
+                persistence={persistence}
+                persisted_props={persisted_props}
+                persistence_type={persistence_type}
+                onChange={onSelect}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                }
+            />
+        );
+
+    }
+}
+
+// 定义参数或属性
+AntdSegmented.propTypes = {
+    // 组件id
+    id: PropTypes.string,
+
+    // css类名
+    className: PropTypes.string,
+
+    // 自定义css字典
+    style: PropTypes.object,
+
+    // 设置选项参数数组
+    options: PropTypes.arrayOf(
+        PropTypes.exact({
+            // 设置选项的标题内容
+            label: PropTypes.string,
+
+            // 设置选项的对应值
+            value: PropTypes.oneOfType([
+                PropTypes.string,
+                PropTypes.number
+            ]),
+
+            // 设置是否禁用当前选项
+            disabled: PropTypes.bool
+        })
+    ),
+
+    // 对应当前已选中的值
+    value: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
+
+    // 设置初始化状态下被选中的值
+    defaultValue: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.number
+    ]),
+
+    // 设置是否占据父级容器全部宽度，默认为false
+    block: PropTypes.bool,
+
+    // 设置是否禁用整体组件
+    disabled: PropTypes.bool,
+
+    // 当optionType为'button'时，用于设置按钮的大小规格
+    // 可选的有'large'、'middle'和'small'，默认为'middle'
+    size: PropTypes.oneOf(['large', 'middle', 'small']),
+
+    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,
+
+    /**
+   * Used to allow user interactions in this component to be persisted when
+   * the component - or the page - is refreshed. If `persisted` is truthy and
+   * hasn't changed from its previous value, a `value` that the user has
+   * changed while using the app will keep that change, as long as
+   * the new `value` also matches what was given originally.
+   * Used in conjunction with `persistence_type`.
+   */
+    persistence: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.string,
+        PropTypes.number
+    ]),
+
+    /**
+     * Properties whose user interactions will persist after refreshing the
+     * component or the page. Since only `value` is allowed this prop can
+     * normally be ignored.
+     */
+    persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['value'])),
+
+    /**
+     * Where persisted user changes will be stored:
+     * memory: only kept in memory, reset on page refresh.
+     * local: window.localStorage, data is kept after the browser quit.
+     * session: window.sessionStorage, data is cleared once the browser quit.
+     */
+    persistence_type: PropTypes.oneOf(['local', 'session', 'memory'])
+};
+
+// 设置默认参数
+AntdSegmented.defaultProps = {
+}

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

@@ -8,7 +8,9 @@ export default class AntdSwitch extends Component {
 
     constructor(props) {
         super(props)
-        if (!props.checked) {
+        if (props.defaultChecked) {
+            props.setProps({ checked: props.defaultChecked })
+        } else if (!props.checked) {
             props.setProps({ checked: false })
         }
     }
@@ -24,6 +26,7 @@ export default class AntdSwitch extends Component {
             checkedChildren,
             unCheckedChildren,
             size,
+            loading,
             setProps,
             persistence,
             persisted_props,
@@ -44,8 +47,10 @@ export default class AntdSwitch extends Component {
                 disabled={disabled}
                 defaultChecked={checked}
                 checkedChildren={checkedChildren}
+                checked={checked}
                 unCheckedChildren={unCheckedChildren}
                 size={size}
+                loading={loading}
                 onChange={onChange}
                 persistence={persistence}
                 persisted_props={persisted_props}
@@ -84,6 +89,9 @@ AntdSwitch.propTypes = {
     // 设置开关大小，可选的有'default'与'small'，默认为'default'
     size: PropTypes.oneOf(['default', 'small']),
 
+    // 设置是否渲染loading状态，默认为false
+    loading: PropTypes.bool,
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not

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

@@ -108,7 +108,6 @@ 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;
                                     }}
                                 >

package/src/lib/index.js

@@ -78,6 +78,7 @@ 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'
+import AntdSegmented from './components/AntdSegmented.react'
 
 export {
     AntdDatePicker,
@@ -158,5 +159,6 @@ export {
     AntdDescriptions,
     AntdDescriptionItem,
     AntdWatermark,
-    AntdPasteImage
+    AntdPasteImage,
+    AntdSegmented
 };

package/usage.py

@@ -1,132 +1,45 @@
 import dash
-import numpy as np
 from dash import html
-from flask import request
 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__
+)
+
+
+@app.callback(
+    Output('segmented-output-demo', 'children'),
+    Input('segmented-demo', 'value')
+)
+def segmented_demo(value):
+
+    return value
 
 
 app.layout = html.Div(
     [
-
-        fac.AntdTable(
-            columns=[
-                {
-                    'title': '超链接示例',
-                    'dataIndex': '超链接示例',
-                    'renderOptions': {
-                        'renderType': 'link',
-                        'renderLinkText': '点击跳转'
-                    }
-                }
-            ],
-            data=[
+        fac.AntdSegmented(
+            id='segmented-demo',
+            block=True,
+            options=[
                 {
-                    'key': i,
-                    '超链接示例': {
-                        'href': 'https://github.com/CNFeffery/feffery-antd-components'
-                    }
+                    'label': f'选项{i}',
+                    'value': i
                 }
-                for i in range(3)
-            ],
-            bordered=True,
-            style={
-                'width': '250px'
-            }
+                for i in range(5)
+            ]
         ),
-
-        fac.AntdTable(
-            columns=[
-                {
-                    'title': '默认的checkbox模式',
-                    'dataIndex': '默认的checkbox模式',
-                    'width': '25%'
-                },
-                {
-                    'title': '自定义选项的checkbox模式',
-                    'dataIndex': '自定义选项的checkbox模式',
-                    'width': '25%'
-                },
-                {
-                    'title': 'keyword模式',
-                    'dataIndex': 'keyword模式',
-                    'width': '25%'
-                },
-                {
-                    'title': '数值测试',
-                    'dataIndex': '数值测试',
-                    'width': '25%',
-                    'renderOptions': {
-                        'renderType': 'custom-format'
-                    }
-                }
-            ],
-            data=[
-                {
-                    '默认的checkbox模式': i,
-                    '自定义选项的checkbox模式': i,
-                    'keyword模式': i,
-                    '数值测试': np.random.rand()
-                }
-                for i in range(20)
-            ],
-            bordered=True,
-            filterOptions={
-                '默认的checkbox模式': {},
-                '自定义选项的checkbox模式': {
-                    'filterMode': 'checkbox',
-                    'filterCustomItems': [1, 2, 3],
-                    'filterMultiple': False,
-                    'filterSearch': True
-                },
-                'keyword模式': {
-                    'filterMode': 'keyword'
-                }
-            },
-            pagination={
-                'pageSize': 20
-            },
-            customFormatFuncs={
-                '数值测试': '(x) => `${(x*100).toFixed(2)}%`'
-            },
-            conditionalStyleFuncs={
-                **{
-                    key: '''
-                        (record, index) => {
-                            if ( index % 2 === 1 ) {
-                                return {
-                                    style: {
-                                        backgroundColor: "rgb(250, 250, 250)"
-                                    }
-                                }
-                            }
-                        }
-                    '''
-                    for key in ['默认的checkbox模式', '自定义选项的checkbox模式', 'keyword模式']
-                },
-                '数值测试': '''
-                    (record, index) => {
-                        if ( record['数值测试'] <= 0.5 ) {
-                            return {
-                                    style: {
-                                        background: `linear-gradient(90deg, rgb(61, 153, 112) 0%, rgb(61, 153, 112) ${record['数值测试']*100}%, white ${record['数值测试']*100}%, white 100%)`
-                                }
-                            };
-                        }
-                        return {
-                            style: {
-                                background: `linear-gradient(90deg, rgb(255, 65, 54) 0%, rgb(255, 65, 54) ${record['数值测试']*100}%, white ${record['数值测试']*100}%, white 100%)`
-                            }
-                        };
-                    }
-                '''
-            }
+        fac.AntdText(
+            id='segmented-output-demo'
+        ),
+        fac.AntdMessage(
+            content='AntdMessage top参数测试',
+            top=400,
+            duration=1000
         )
     ],
     style={
-        'height': '100vh',
         'padding': '50px'
     }
 )

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)

package/build/lib/feffery_antd_components/AntdAlert.py

@@ -1,58 +0,0 @@
-# AUTO GENERATED FILE - DO NOT EDIT
-
-from dash.development.base_component import Component, _explicitize_args
-
-
-class AntdAlert(Component):
-    """An AntdAlert component.
-
-
-Keyword arguments:
-
-- id (string; optional)
-
-- className (string; optional)
-
-- closable (boolean; default False)
-
-- description (boolean | number | string | dict | list; 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.
-
-- message (boolean | number | string | dict | list | list of boolean | number | string | dict | lists; optional)
-
-- messageRenderMode (a value equal to: 'default', 'loop-text', 'marquee'; default 'default')
-
-- showIcon (boolean; optional)
-
-- style (dict; optional)
-
-- type (a value equal to: 'success', 'info', 'warning', 'error'; optional)"""
-    @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, description=Component.UNDEFINED, message=Component.UNDEFINED, type=Component.UNDEFINED, showIcon=Component.UNDEFINED, closable=Component.UNDEFINED, messageRenderMode=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'className', 'closable', 'description', 'loading_state', 'message', 'messageRenderMode', 'showIcon', 'style', 'type']
-        self._type = 'AntdAlert'
-        self._namespace = 'feffery_antd_components'
-        self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'className', 'closable', 'description', 'loading_state', 'message', 'messageRenderMode', 'showIcon', 'style', 'type']
-        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(AntdAlert, self).__init__(**args)

package/build/lib/feffery_antd_components/AntdAnchor.py

@@ -1,60 +0,0 @@
-# AUTO GENERATED FILE - DO NOT EDIT
-
-from dash.development.base_component import Component, _explicitize_args
-
-
-class AntdAnchor(Component):
-    """An AntdAnchor component.
-
-
-Keyword arguments:
-
-- id (string; optional)
-
-- affix (boolean; optional)
-
-- align (a value equal to: 'left', 'right'; default 'right')
-
-- bounds (number; optional)
-
-- className (string; optional)
-
-- containerId (string; optional)
-
-- linkDict (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.
-
-- offsetTop (number; optional)
-
-- style (dict; optional)
-
-- targetOffset (number; optional)"""
-    @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, linkDict=Component.UNDEFINED, align=Component.UNDEFINED, containerId=Component.UNDEFINED, targetOffset=Component.UNDEFINED, affix=Component.UNDEFINED, bounds=Component.UNDEFINED, offsetTop=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'affix', 'align', 'bounds', 'className', 'containerId', 'linkDict', 'loading_state', 'offsetTop', 'style', 'targetOffset']
-        self._type = 'AntdAnchor'
-        self._namespace = 'feffery_antd_components'
-        self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'affix', 'align', 'bounds', 'className', 'containerId', 'linkDict', 'loading_state', 'offsetTop', 'style', 'targetOffset']
-        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(AntdAnchor, self).__init__(**args)

package/build/lib/feffery_antd_components/AntdAvatar.py

@@ -1,79 +0,0 @@
-# AUTO GENERATED FILE - DO NOT EDIT
-
-from dash.development.base_component import Component, _explicitize_args
-
-
-class AntdAvatar(Component):
-    """An AntdAvatar component.
-
-
-Keyword arguments:
-
-- id (string; optional)
-
-- alt (string; optional)
-
-- className (string; optional)
-
-- gap (number; optional)
-
-- icon (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.
-
-- mode (a value equal to: 'text', 'icon', 'image'; default 'icon')
-
-- shape (a value equal to: 'circle', 'square'; optional)
-
-- size (dict; optional)
-
-    `size` is a number | a value equal to: 'large', 'small', 'default'
-    | dict with keys:
-
-    - lg (number; optional)
-
-    - md (number; optional)
-
-    - sm (number; optional)
-
-    - xl (number; optional)
-
-    - xs (number; optional)
-
-    - xxl (number; optional)
-
-- src (string; optional)
-
-- srcSet (string; optional)
-
-- style (dict; optional)
-
-- text (string; optional)"""
-    @_explicitize_args
-    def __init__(self, id=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, gap=Component.UNDEFINED, mode=Component.UNDEFINED, text=Component.UNDEFINED, icon=Component.UNDEFINED, alt=Component.UNDEFINED, src=Component.UNDEFINED, srcSet=Component.UNDEFINED, size=Component.UNDEFINED, shape=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
-        self._prop_names = ['id', 'alt', 'className', 'gap', 'icon', 'loading_state', 'mode', 'shape', 'size', 'src', 'srcSet', 'style', 'text']
-        self._type = 'AntdAvatar'
-        self._namespace = 'feffery_antd_components'
-        self._valid_wildcard_attributes =            []
-        self.available_properties = ['id', 'alt', 'className', 'gap', 'icon', 'loading_state', 'mode', 'shape', 'size', 'src', 'srcSet', 'style', 'text']
-        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(AntdAvatar, self).__init__(**args)