feffery_antd_components 0.3.0-a0 → 0.3.0-a2

package/feffery_antd_components/metadata.json

@@ -2569,6 +2569,274 @@
       }
     }
   },
+  "src/lib/components/dataDisplay/AntdQRCode.react.js": {
+    "description": "",
+    "displayName": "AntdQRCode",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "className": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "string"
+            },
+            {
+              "name": "object"
+            }
+          ]
+        },
+        "required": false,
+        "description": ""
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": ""
+      },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "locale": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'zh-cn'",
+              "computed": false
+            },
+            {
+              "value": "'en-us'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "'zh-cn'",
+          "computed": false
+        }
+      },
+      "value": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7528\u4e8e\u8bbe\u7f6e\u626b\u63cf\u540e\u7684\u6587\u672c"
+      },
+      "type": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'canvas'",
+              "computed": false
+            },
+            {
+              "value": "'svg'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u6e32\u67d3\u7c7b\u578b\uff0c\u53ef\u9009\u7684\u6709'canvas'\u3001'primary'\r\n\u9ed8\u8ba4\uff1a'canvas'",
+        "defaultValue": {
+          "value": "'canvas'",
+          "computed": false
+        }
+      },
+      "icon": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7528\u4e8e\u8bbe\u7f6e\u4e8c\u7ef4\u7801\u4e2d\u56fe\u7247\u7684\u5730\u5740\uff08\u76ee\u524d\u53ea\u652f\u6301\u56fe\u7247\u5730\u5740\uff09"
+      },
+      "size": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u4e8c\u7ef4\u7801\u50cf\u7d20\u5c3a\u5bf8\r\n\u9ed8\u8ba4\uff1a160",
+        "defaultValue": {
+          "value": "160",
+          "computed": false
+        }
+      },
+      "iconSize": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u4e8c\u7ef4\u7801\u4e2d\u56fe\u7247\u7684\u5927\u5c0f\r\n\u9ed8\u8ba4\uff1a40",
+        "defaultValue": {
+          "value": "40",
+          "computed": false
+        }
+      },
+      "color": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u4e8c\u7ef4\u7801\u989c\u8272\r\n\u9ed8\u8ba4\uff1a'#000'",
+        "defaultValue": {
+          "value": "'#000'",
+          "computed": false
+        }
+      },
+      "bgColor": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u4e8c\u7ef4\u7801\u80cc\u666f\u989c\u8272\r\n\u9ed8\u8ba4\uff1a'transparent'",
+        "defaultValue": {
+          "value": "'transparent'",
+          "computed": false
+        }
+      },
+      "bordered": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u4e8c\u7ef4\u7801\u662f\u5426\u6709\u8fb9\u6846\r\n\u9ed8\u8ba4\uff1atrue",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
+      "errorLevel": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'L'",
+              "computed": false
+            },
+            {
+              "value": "'M'",
+              "computed": false
+            },
+            {
+              "value": "'Q'",
+              "computed": false
+            },
+            {
+              "value": "'H'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u4e8c\u7ef4\u7801\u7ea0\u9519\u7b49\u7ea7\uff0c\u53ef\u9009\u7684\u6709'L'\u3001'M'\u3001'Q'\u3001'H'\r\n\u9ed8\u8ba4\uff1a'M'",
+        "defaultValue": {
+          "value": "'M'",
+          "computed": false
+        }
+      },
+      "status": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'active'",
+              "computed": false
+            },
+            {
+              "value": "'expired'",
+              "computed": false
+            },
+            {
+              "value": "'loading'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u4e8c\u7ef4\u7801\u72b6\u6001\uff0c\u53ef\u9009\u7684\u6709'active'\u3001'expired'\u3001'loading'\r\n\u9ed8\u8ba4\uff1a'active'",
+        "defaultValue": {
+          "value": "'active'",
+          "computed": false
+        }
+      },
+      "expires": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u5f53\u524d\u4e8c\u7ef4\u7801\u8fc7\u671f\u65f6\u95f4\uff0c\u5355\u4f4d\uff1a\u79d2\uff0c\u5230\u671f\u540e\u4e8c\u7ef4\u7801\u72b6\u6001\u5c06\u4f1a\u88ab\u5f3a\u5236\u66f4\u65b0\u4e3a'expired'"
+      },
+      "autoSpin": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u662f\u5426\u5728value\u5904\u4e8e\u56de\u8c03\u66f4\u65b0\u4e2d\u65f6\uff0c\u81ea\u52a8\u5207\u6362\u5230loading\u72b6\u6001\r\n\u9ed8\u8ba4\uff1afalse",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "refreshClicks": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u5f53\u524d\"\u70b9\u51fb\u5237\u65b0\"\u6309\u94ae\u7d2f\u8ba1\u70b9\u51fb\u6b21\u6570\uff0c\u4ec5\u5728status\u4e3a'expired'\u65f6\u6709\u610f\u4e49",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
+      "loading_state": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "is_loading": {
+              "name": "bool",
+              "description": "Determines if the component is loading or not",
+              "required": false
+            },
+            "prop_name": {
+              "name": "string",
+              "description": "Holds which property is loading",
+              "required": false
+            },
+            "component_name": {
+              "name": "string",
+              "description": "Holds the name of the component that is loading",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": ""
+      },
+      "setProps": {
+        "type": {
+          "name": "func"
+        },
+        "required": false,
+        "description": "Dash-assigned callback that should be called to report property changes\r\nto Dash, to make them available for callbacks."
+      }
+    }
+  },
   "src/lib/components/dataDisplay/AntdRibbon.react.js": {
     "description": "",
     "displayName": "AntdRibbon",
@@ -26553,6 +26821,30 @@
         "required": false,
         "description": ""
       },
+      "selectable": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u83dc\u5355\u9879\u662f\u5426\u53ef\u9009\u4e2d\r\n\u9ed8\u8ba4\uff1afalse"
+      },
+      "multiple": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u83dc\u5355\u662f\u5426\u5141\u8bb8\u591a\u9009\r\n\u9ed8\u8ba4\uff1afalse"
+      },
+      "selectedKeys": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "string"
+          }
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u6216\u76d1\u542c\u5f53\u524d\u5df2\u9009\u4e2d\u83dc\u5355\u9879key\u503c\u6570\u7ec4"
+      },
       "arrow": {
         "type": {
           "name": "bool"

package/feffery_antd_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_antd_components",
-  "version": "0.3.0-a0",
+  "version": "0.3.0-a2",
   "description": "Best implementation of Antd components in Plotly Dash.",
   "repository": {
     "type": "git",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_antd_components",
-  "version": "0.3.0-a0",
+  "version": "0.3.0-a2",
   "description": "Best implementation of Antd components in Plotly Dash.",
   "repository": {
     "type": "git",

package/src/jl/'feffery'_antddropdown.jl

@@ -43,18 +43,23 @@ Those elements have the following types:
   - `iconRenderer` (a value equal to: 'AntdIcon', 'fontawesome'; optional)
   - `key` (String; optional)
   - `isDivider` (Bool; optional)s
+- `multiple` (Bool; optional): 设置菜单是否允许多选
+默认：false
 - `nClicks` (Real; optional)
 - `overlayClassName` (String | Dict; optional)
 - `overlayStyle` (Dict; optional)
 - `placement` (a value equal to: 'bottomLeft', 'bottomCenter', 'bottomRight', 'topLeft', 'topCenter', 'topRight'; optional)
 - `popupContainer` (a value equal to: 'parent', 'body'; optional)
+- `selectable` (Bool; optional): 设置菜单项是否可选中
+默认：false
+- `selectedKeys` (Array of Strings; optional): 设置或监听当前已选中菜单项key值数组
 - `style` (Dict; optional)
 - `title` (String; optional)
 - `trigger` (a value equal to: 'click', 'hover'; optional)
 - `visible` (Bool; optional)
 """
 function 'feffery'_antddropdown(; kwargs...)
-        available_props = Symbol[:id, :arrow, :autoAdjustOverflow, :batchPropsNames, :batchPropsValues, :buttonMode, :buttonProps, :className, :clickedKey, :disabled, :freePosition, :freePositionClassName, :freePositionStyle, :key, :loading_state, :menuItems, :nClicks, :overlayClassName, :overlayStyle, :placement, :popupContainer, :style, :title, :trigger, :visible]
+        available_props = Symbol[:id, :arrow, :autoAdjustOverflow, :batchPropsNames, :batchPropsValues, :buttonMode, :buttonProps, :className, :clickedKey, :disabled, :freePosition, :freePositionClassName, :freePositionStyle, :key, :loading_state, :menuItems, :multiple, :nClicks, :overlayClassName, :overlayStyle, :placement, :popupContainer, :selectable, :selectedKeys, :style, :title, :trigger, :visible]
         wild_props = Symbol[]
         return Component("'feffery'_antddropdown", "AntdDropdown", "feffery_antd_components", available_props, wild_props; kwargs...)
 end

package/src/jl/'feffery'_antdqrcode.jl

@@ -0,0 +1,49 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export 'feffery'_antdqrcode
+
+"""
+    'feffery'_antdqrcode(;kwargs...)
+
+An AntdQRCode component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `autoSpin` (Bool; optional): 是否在value处于回调更新中时，自动切换到loading状态
+默认：false
+- `bgColor` (String; optional): 设置二维码背景颜色
+默认：'transparent'
+- `bordered` (Bool; optional): 设置二维码是否有边框
+默认：true
+- `className` (String | Dict; optional)
+- `color` (String; optional): 设置二维码颜色
+默认：'#000'
+- `errorLevel` (a value equal to: 'L', 'M', 'Q', 'H'; optional): 设置二维码纠错等级，可选的有'L'、'M'、'Q'、'H'
+默认：'M'
+- `expires` (Real; optional): 设置当前二维码过期时间，单位：秒，到期后二维码状态将会被强制更新为'expired'
+- `icon` (String; optional): 用于设置二维码中图片的地址（目前只支持图片地址）
+- `iconSize` (Real; optional): 设置二维码中图片的大小
+默认：40
+- `key` (String; optional)
+- `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
+Those elements have the following types:
+  - `is_loading` (Bool; optional): Determines if the component is loading or not
+  - `prop_name` (String; optional): Holds which property is loading
+  - `component_name` (String; optional): Holds the name of the component that is loading
+- `locale` (a value equal to: 'zh-cn', 'en-us'; optional)
+- `refreshClicks` (Real; optional): 监听当前"点击刷新"按钮累计点击次数，仅在status为'expired'时有意义
+- `size` (Real; optional): 设置二维码像素尺寸
+默认：160
+- `status` (a value equal to: 'active', 'expired', 'loading'; optional): 设置二维码状态，可选的有'active'、'expired'、'loading'
+默认：'active'
+- `style` (Dict; optional)
+- `type` (a value equal to: 'canvas', 'svg'; optional): 设置渲染类型，可选的有'canvas'、'primary'
+默认：'canvas'
+- `value` (String; optional): 用于设置扫描后的文本
+"""
+function 'feffery'_antdqrcode(; kwargs...)
+        available_props = Symbol[:id, :autoSpin, :bgColor, :bordered, :className, :color, :errorLevel, :expires, :icon, :iconSize, :key, :loading_state, :locale, :refreshClicks, :size, :status, :style, :type, :value]
+        wild_props = Symbol[]
+        return Component("'feffery'_antdqrcode", "AntdQRCode", "feffery_antd_components", available_props, wild_props; kwargs...)
+end
+

package/src/lib/components/dataDisplay/AntdQRCode.react.js

@@ -0,0 +1,148 @@
+import React, { Suspense } from 'react';
+import PropTypes from 'prop-types';
+
+const LazyAntdQRCode = React.lazy(() => import(/* webpackChunkName: "data_display" */ '../../fragments/dataDisplay/AntdQRCode.react'));
+
+const AntdQRCode = (props) => {
+    return (
+        <Suspense fallback={null}>
+            <LazyAntdQRCode {...props} />
+        </Suspense>
+    );
+}
+
+// 定义参数或属性
+AntdQRCode.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']),
+
+    /**
+     * 用于设置扫描后的文本
+     */
+    value: PropTypes.string,
+
+    /**
+     * 设置渲染类型，可选的有'canvas'、'primary'
+     * 默认：'canvas'
+     */
+    type: PropTypes.oneOf(['canvas', 'svg']),
+
+    /**
+     * 用于设置二维码中图片的地址（目前只支持图片地址）
+     */
+    icon: PropTypes.string,
+
+    /**
+     * 设置二维码像素尺寸
+     * 默认：160
+     */
+    size: PropTypes.number,
+
+    /**
+     * 设置二维码中图片的大小
+     * 默认：40
+     */
+    iconSize: PropTypes.number,
+
+    /**
+     * 设置二维码颜色
+     * 默认：'#000'
+     */
+    color: PropTypes.string,
+
+    /**
+     * 设置二维码背景颜色
+     * 默认：'transparent'
+     */
+    bgColor: PropTypes.string,
+
+    /**
+     * 设置二维码是否有边框
+     * 默认：true
+     */
+    bordered: PropTypes.bool,
+
+    /**
+     * 设置二维码纠错等级，可选的有'L'、'M'、'Q'、'H'
+     * 默认：'M'
+     */
+    errorLevel: PropTypes.oneOf(['L', 'M', 'Q', 'H']),
+
+    /**
+     * 设置二维码状态，可选的有'active'、'expired'、'loading'
+     * 默认：'active'
+     */
+    status: PropTypes.oneOf(['active', 'expired', 'loading']),
+
+    /**
+     * 设置当前二维码过期时间，单位：秒，到期后二维码状态将会被强制更新为'expired'
+     */
+    expires: PropTypes.number,
+
+    /**
+     * 是否在value处于回调更新中时，自动切换到loading状态
+     * 默认：false
+     */
+    autoSpin: PropTypes.bool,
+
+    /**
+     * 监听当前"点击刷新"按钮累计点击次数，仅在status为'expired'时有意义
+     */
+    refreshClicks: 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
+};
+
+// 设置默认参数
+AntdQRCode.defaultProps = {
+    locale: 'zh-cn',
+    type: 'canvas',
+    size: 160,
+    iconSize: 40,
+    color: '#000',
+    bgColor: 'transparent',
+    bordered: true,
+    errorLevel: 'M',
+    status: 'active',
+    autoSpin: false,
+    refreshClicks: 0
+}
+
+export default AntdQRCode;
+
+export const propTypes = AntdQRCode.propTypes;
+export const defaultProps = AntdQRCode.defaultProps;

package/src/lib/components/dataEntry/AntdColorPicker.react.js

@@ -1,90 +1,13 @@
-import React, { useEffect } from 'react';
+import React, { Suspense } from 'react';
 import PropTypes from 'prop-types';
-import { ColorPicker } from 'antd';
-import { Color } from '@rc-component/color-picker';
-import useCss from '../../hooks/useCss';
-import { isString } from 'lodash';
 
-// 定义颜色选择器组件AntdColorPicker
-const AntdColorPicker = (props) => {
-    // 取得必要属性或参数
-    let {
-        id,
-        className,
-        style,
-        key,
-        allowClear,
-        arrow,
-        value,
-        format,
-        disabled,
-        disabledAlpha,
-        open,
-        presets,
-        placement,
-        showText,
-        size,
-        trigger,
-        setProps,
-        loading_state
-    } = props;
-
-    // 每次format发生变更时，同步更新value值
-    useEffect(() => {
-        if (value) {
-            let _color = new Color(value)
-            setProps({
-                value: (
-                    format === 'hex' ?
-                        _color.toHexString() :
-                        (
-                            format === 'rgb' ?
-                                _color.toRgbString() :
-                                _color.toHsbString()
-                        )
-                )
-            })
-        }
-    }, [format])
+const LazyAntdColorPicker = React.lazy(() => import(/* webpackChunkName: "data_entry" */ '../../fragments/dataEntry/AntdColorPicker.react'));
 
+const AntdColorPicker = (props) => {
     return (
-        <ColorPicker id={id}
-            className={
-                isString(className) ?
-                    className :
-                    (className ? useCss(className) : undefined)
-            }
-            style={style}
-            key={key}
-            allowClear={allowClear}
-            arrow={arrow}
-            value={value}
-            format={format}
-            disabled={disabled}
-            disabledAlpha={disabledAlpha}
-            open={open}
-            presets={presets}
-            placement={placement}
-            showText={showText}
-            size={size}
-            trigger={trigger}
-            onFormatChange={(e) => setProps({ format: e })}
-            onOpenChange={(e) => setProps({ open: e })}
-            onChangeComplete={(e) => setProps({
-                value: (
-                    format === 'hex' ?
-                        e.toHexString() :
-                        (
-                            format === 'rgb' ?
-                                e.toRgbString() :
-                                e.toHsbString()
-                        )
-                )
-            })}
-            onClear={() => setProps({ value: null })}
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            } />
+        <Suspense fallback={null}>
+            <LazyAntdColorPicker {...props} />
+        </Suspense>
     );
 }
 
@@ -242,4 +165,7 @@ AntdColorPicker.defaultProps = {
     value: '#1677FF'
 }
 
-export default AntdColorPicker;
+export default AntdColorPicker;
+
+export const propTypes = AntdColorPicker.propTypes;
+export const defaultProps = AntdColorPicker.defaultProps;