feffery_utils_components 0.0.26 → 0.0.27

package/feffery_utils_components/metadata.json

@@ -2287,6 +2287,177 @@
       }
     }
   },
+  "src/lib/components/FefferyQRCode.react.js": {
+    "description": "",
+    "displayName": "FefferyQRCode",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "value": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
+      },
+      "size": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "128",
+          "computed": false
+        }
+      },
+      "bgColor": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "'#FFFFFF'",
+          "computed": false
+        }
+      },
+      "fgColor": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "'#000000'",
+          "computed": false
+        }
+      },
+      "level": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'L'",
+              "computed": false
+            },
+            {
+              "value": "'M'",
+              "computed": false
+            },
+            {
+              "value": "'Q'",
+              "computed": false
+            },
+            {
+              "value": "'H'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "'L'",
+          "computed": false
+        }
+      },
+      "includeMargin": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "imageSettings": {
+        "type": {
+          "name": "exact",
+          "value": {
+            "src": {
+              "name": "string",
+              "required": false
+            },
+            "height": {
+              "name": "number",
+              "required": false
+            },
+            "width": {
+              "name": "number",
+              "required": false
+            },
+            "excavate": {
+              "name": "bool",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": ""
+      },
+      "renderer": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'svg'",
+              "computed": false
+            },
+            {
+              "value": "'canvas'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "'svg'",
+          "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/FefferyScroll.react.js": {
     "description": "",
     "displayName": "FefferyScroll",

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -32,6 +32,7 @@
     "lodash": "^4.17.21",
     "ninja-keys": "^1.1.12",
     "nprogress": "^0.2.0",
+    "qrcode.react": "^3.1.0",
     "ramda": "^0.26.1",
     "rc-virtual-list": "^3.4.8",
     "react-captcha-code": "^1.0.7",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -32,6 +32,7 @@
     "lodash": "^4.17.21",
     "ninja-keys": "^1.1.12",
     "nprogress": "^0.2.0",
+    "qrcode.react": "^3.1.0",
     "ramda": "^0.26.1",
     "rc-virtual-list": "^3.4.8",
     "react-captcha-code": "^1.0.7",

package/src/FefferyUtilsComponents.jl

@@ -3,7 +3,7 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.0.26"
+const version = "0.0.27"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
@@ -25,6 +25,7 @@ include("jl/''_fefferyguide.jl")
 include("jl/''_fefferyhighlightwords.jl")
 include("jl/''_fefferylazyload.jl")
 include("jl/''_fefferylocation.jl")
+include("jl/''_fefferyqrcode.jl")
 include("jl/''_fefferyscroll.jl")
 include("jl/''_fefferyscrollbars.jl")
 include("jl/''_fefferyshortcutpanel.jl")
@@ -54,14 +55,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.26/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.27/feffery_utils_components/feffery_utils_components.min.js",
     dynamic = nothing,
     async = nothing,
     type = :js
 ),
 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js.map",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.26/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.27/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferyqrcode.jl

@@ -0,0 +1,36 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferyqrcode
+
+"""
+    ''_fefferyqrcode(;kwargs...)
+
+A FefferyQRCode component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `bgColor` (String; optional)
+- `fgColor` (String; optional)
+- `imageSettings` (optional): . imageSettings has the following type: lists containing elements 'src', 'height', 'width', 'excavate'.
+Those elements have the following types:
+  - `src` (String; optional)
+  - `height` (Real; optional)
+  - `width` (Real; optional)
+  - `excavate` (Bool; optional)
+- `includeMargin` (Bool; optional)
+- `level` (a value equal to: 'L', 'M', 'Q', 'H'; 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
+- `renderer` (a value equal to: 'svg', 'canvas'; optional)
+- `size` (Real; optional)
+- `value` (String; required)
+"""
+function ''_fefferyqrcode(; kwargs...)
+        available_props = Symbol[:id, :bgColor, :fgColor, :imageSettings, :includeMargin, :level, :loading_state, :renderer, :size, :value]
+        wild_props = Symbol[]
+        return Component("''_fefferyqrcode", "FefferyQRCode", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

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

@@ -0,0 +1,132 @@
+import React, { useEffect } from 'react';
+import { QRCodeSVG, QRCodeCanvas } from 'qrcode.react';
+import PropTypes from 'prop-types';
+
+// 定义二维码生成组件FefferyQRCode
+const FefferyQRCode = (props) => {
+    // 取得必要属性或参数
+    const {
+        id,
+        renderer,
+        value,
+        size,
+        bgColor,
+        fgColor,
+        level,
+        includeMargin,
+        imageSettings,
+        setProps,
+        loading_state
+    } = props;
+
+    if (renderer === 'canvas') {
+        return (<QRCodeCanvas
+            id={id}
+            value={value}
+            size={size}
+            bgColor={bgColor}
+            fgColor={fgColor}
+            level={level}
+            includeMargin={includeMargin}
+            imageSettings={{
+                excavate: true,
+                ...imageSettings
+            }}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            }
+        />);
+    }
+
+    return <QRCodeSVG
+        id={id}
+        value={value}
+        size={size}
+        bgColor={bgColor}
+        fgColor={fgColor}
+        level={level}
+        includeMargin={includeMargin}
+        imageSettings={{
+            excavate: true,
+            ...imageSettings
+        }}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />;
+}
+
+// 定义参数或属性
+FefferyQRCode.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 设置二维码所表达的信息值
+    value: PropTypes.string.isRequired,
+
+    // 设置像素边长，默认为128
+    size: PropTypes.number,
+
+    // 设置背景色，默认为'#FFFFFF'
+    bgColor: PropTypes.string,
+
+    // 设置前景色，默认为'#000000'
+    fgColor: PropTypes.string,
+
+    // 设置解析精度，可选的有'L'、'M'、'Q'、'H'
+    // 默认为'L'
+    level: PropTypes.oneOf(['L', 'M', 'Q', 'H']),
+
+    // 设置是否添加外边距，默认为false
+    includeMargin: PropTypes.bool,
+
+    // 配置二维码中心图片信息
+    imageSettings: PropTypes.exact({
+        // 设置图片src
+        src: PropTypes.string,
+
+        // 设置图片像素高度，默认为二维码size的10%
+        height: PropTypes.number,
+
+        // 设置图片像素宽度，默认为二维码size的10%
+        width: PropTypes.number,
+
+        // 设置图片四周是否添加环绕白边，默认为true
+        excavate: PropTypes.bool
+    }),
+
+    // 指定渲染引擎，可选的有'svg'、'canvas'，默认为'svg'
+    renderer: PropTypes.oneOf(['svg', 'canvas']),
+
+    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,
+};
+
+// 设置默认参数
+FefferyQRCode.defaultProps = {
+    renderer: 'svg',
+    size: 128,
+    bgColor: '#FFFFFF',
+    fgColor: '#000000',
+    level: 'L',
+    includeMargin: false
+}
+
+export default React.memo(FefferyQRCode);

package/src/lib/index.js

@@ -38,6 +38,7 @@ import FefferySortableItem from "./components/sortable/FefferySortableItem.react
 import FefferySortableContainer from "./components/sortable/FefferySortableContainer.react";
 import FefferyRawHTML from "./components/dom/FefferyRawHTML.react";
 import FefferyFancyNotification from "./components/FefferyFancyNotification";
+import FefferyQRCode from "./components/FefferyQrcode.react";
 
 /* 
 忽略部分设计React中规范的console警告信息
@@ -100,5 +101,6 @@ export {
     FefferySortableItem,
     FefferySortableContainer,
     FefferyRawHTML,
-    FefferyFancyNotification
+    FefferyFancyNotification,
+    FefferyQRCode
 };

package/tests/QRCodeTest/app.py

@@ -0,0 +1,41 @@
+if True:
+    import sys
+    sys.path.append('../..')
+    import dash
+    import json
+    from dash import html
+    import feffery_utils_components as fuc
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fuc.FefferyQRCode(
+            size=256,
+            value='https://fac.feffery.tech/'
+        ),
+
+        fuc.FefferyQRCode(
+            size=256,
+            value='https://fac.feffery.tech/',
+            imageSettings={
+                'src': 'https://fac.feffery.tech/assets/imgs/fac-logo.svg',
+                'height': 60,
+                'width': 60
+            }
+        ),
+    ],
+    style={
+        'width': '600px',
+        'paddingTop': '50px',
+        'margin': '0 auto',
+        'display': 'flex',
+        'flexDirection': 'column',
+        'alignItems': 'center',
+        'gap': '25px'
+    }
+)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)