feffery_utils_components 0.1.7 → 0.1.9

package/feffery_utils_components/metadata.json

@@ -3494,6 +3494,79 @@
       }
     }
   },
+  "src/lib/components/FefferyShadowDom.react.js": {
+    "description": "",
+    "displayName": "FefferyShadowDom",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "children": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": ""
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": ""
+      },
+      "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/FefferyShortcutPanel.react.js": {
     "description": "",
     "displayName": "FefferyShortcutPanel",
@@ -4371,6 +4444,132 @@
       }
     }
   },
+  "src/lib/components/FefferyWebSocket.react.js": {
+    "description": "",
+    "displayName": "FefferyWebSocket",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "socketUrl": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
+      },
+      "reconnectLimit": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": ""
+      },
+      "reconnectInterval": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": ""
+      },
+      "operation": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'connect'",
+              "computed": false
+            },
+            {
+              "value": "'disconnect'",
+              "computed": false
+            },
+            {
+              "value": "'send'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": ""
+      },
+      "message": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "latestMessage": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "state": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'connecting'",
+              "computed": false
+            },
+            {
+              "value": "'open'",
+              "computed": false
+            },
+            {
+              "value": "'closing'",
+              "computed": false
+            },
+            {
+              "value": "'closed'",
+              "computed": 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."
+      },
+      "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": ""
+      }
+    }
+  },
   "src/lib/components/listeners/FefferyDocumentVisibility.react.js": {
     "description": "",
     "displayName": "FefferyDocumentVisibility",

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -45,6 +45,7 @@
     "react-lazy-load-image-component": "^1.5.5",
     "react-resize-detector": "^7.1.2",
     "react-scroll": "^1.8.6",
+    "react-shadow": "^19.0.3",
     "react-sortable-hoc": "^2.0.0",
     "react-spinners-kit": "^1.9.1",
     "react-split": "^2.0.14",
@@ -101,4 +102,4 @@
     "node": ">=8.11.0",
     "npm": ">=6.1.0"
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -45,6 +45,7 @@
     "react-lazy-load-image-component": "^1.5.5",
     "react-resize-detector": "^7.1.2",
     "react-scroll": "^1.8.6",
+    "react-shadow": "^19.0.3",
     "react-sortable-hoc": "^2.0.0",
     "react-spinners-kit": "^1.9.1",
     "react-split": "^2.0.14",
@@ -101,4 +102,4 @@
     "node": ">=8.11.0",
     "npm": ">=6.1.0"
   }
-}
+}

package/src/FefferyUtilsComponents.jl

@@ -3,7 +3,7 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.1.7"
+const version = "0.1.9"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
@@ -33,6 +33,7 @@ include("jl/''_fefferyreload.jl")
 include("jl/''_fefferyscroll.jl")
 include("jl/''_fefferyscrollbars.jl")
 include("jl/''_fefferysettitle.jl")
+include("jl/''_fefferyshadowdom.jl")
 include("jl/''_fefferyshortcutpanel.jl")
 include("jl/''_fefferysticky.jl")
 include("jl/''_fefferystyle.jl")
@@ -40,6 +41,7 @@ include("jl/''_fefferysyntaxhighlighter.jl")
 include("jl/''_fefferytimeout.jl")
 include("jl/''_fefferytopprogress.jl")
 include("jl/''_fefferyvirtuallist.jl")
+include("jl/''_fefferywebsocket.jl")
 include("jl/''_fefferydocumentvisibility.jl")
 include("jl/''_fefferygeolocation.jl")
 include("jl/''_fefferyidle.jl")
@@ -62,14 +64,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.1.7/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.9/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.1.7/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.9/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferyshadowdom.jl

@@ -0,0 +1,33 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferyshadowdom
+
+"""
+    ''_fefferyshadowdom(;kwargs...)
+    ''_fefferyshadowdom(children::Any;kwargs...)
+    ''_fefferyshadowdom(children_maker::Function;kwargs...)
+
+
+A FefferyShadowDom component.
+
+Keyword arguments:
+- `children` (a list of or a singular dash component, string or number; optional)
+- `id` (String; optional)
+- `className` (String; optional)
+- `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
+- `style` (Dict; optional)
+"""
+function ''_fefferyshadowdom(; kwargs...)
+        available_props = Symbol[:children, :id, :className, :key, :loading_state, :style]
+        wild_props = Symbol[]
+        return Component("''_fefferyshadowdom", "FefferyShadowDom", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+
+''_fefferyshadowdom(children::Any; kwargs...) = ''_fefferyshadowdom(;kwargs..., children = children)
+''_fefferyshadowdom(children_maker::Function; kwargs...) = ''_fefferyshadowdom(children_maker(); kwargs...)
+

package/src/jl/''_fefferywebsocket.jl

@@ -0,0 +1,30 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferywebsocket
+
+"""
+    ''_fefferywebsocket(;kwargs...)
+
+A FefferyWebSocket component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `latestMessage` (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
+- `message` (String; optional)
+- `operation` (a value equal to: 'connect', 'disconnect', 'send'; optional)
+- `reconnectInterval` (Real; optional)
+- `reconnectLimit` (Real; optional)
+- `socketUrl` (String; required)
+- `state` (a value equal to: 'connecting', 'open', 'closing', 'closed'; optional)
+"""
+function ''_fefferywebsocket(; kwargs...)
+        available_props = Symbol[:id, :latestMessage, :loading_state, :message, :operation, :reconnectInterval, :reconnectLimit, :socketUrl, :state]
+        wild_props = Symbol[]
+        return Component("''_fefferywebsocket", "FefferyWebSocket", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

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

@@ -0,0 +1,72 @@
+import root from 'react-shadow';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// 定义Shadow DOM组件FefferyShadowDom
+const FefferyShadowDom = (props) => {
+    // 取得必要属性或参数
+    const {
+        id,
+        key,
+        children,
+        className,
+        style,
+        setProps,
+        loading_state
+    } = props;
+
+    return (
+        <root.div
+            id={id}
+            key={key}
+            className={className}
+            style={style}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } >
+            {children}
+        </ root.div>
+    );
+}
+
+
+// 定义参数或属性
+FefferyShadowDom.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    key: PropTypes.string,
+
+    children: PropTypes.node,
+
+    className: PropTypes.string,
+
+    style: PropTypes.object,
+
+    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,
+};
+
+// 设置默认参数
+FefferyShadowDom.defaultProps = {
+}
+
+export default React.memo(FefferyShadowDom);

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

@@ -0,0 +1,128 @@
+import { useEffect } from 'react';
+import { useWebSocket } from 'ahooks';
+import PropTypes from 'prop-types';
+
+const num2state = new Map([
+    [0, 'connecting'],
+    [1, 'open'],
+    [2, 'closing'],
+    [3, 'closed']
+])
+
+// 定义WebSocket通信组件FefferyWebSocket
+const FefferyWebSocket = (props) => {
+
+    const {
+        id,
+        socketUrl,
+        reconnectLimit,
+        reconnectInterval,
+        operation,
+        message,
+        setProps,
+        loading_state
+    } = props;
+
+    const { readyState: _readyState, sendMessage, latestMessage: _latestMessage, disconnect, connect } = useWebSocket(
+        socketUrl,
+        {
+            reconnectLimit,
+            reconnectInterval
+        }
+    );
+
+    // 监听服务器发送来的最新信息
+    useEffect(() => {
+        if (_latestMessage) {
+            setProps({
+                latestMessage: _latestMessage.data
+            })
+        }
+    }, [_latestMessage])
+
+    // 监听当前WebSocket连接的状态
+    useEffect(() => {
+        setProps({
+            state: num2state.get(_readyState)
+        })
+    }, [_readyState])
+
+    // 监听operation，从而执行不同操作
+    useEffect(() => {
+        if (operation) {
+            // 断开连接操作
+            if (operation === 'connect') {
+                connect()
+            } else if (operation === 'disconnect') {
+                disconnect()
+            } else if (operation === 'send') {
+                sendMessage(message)
+            }
+            // 重置operation
+            setProps({
+                operation: null
+            })
+        }
+    }, [operation])
+
+    return (<div
+        id={id}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />);
+}
+
+// 定义参数或属性
+FefferyWebSocket.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 设置要建立连接的WebSocket服务url
+    socketUrl: PropTypes.string.isRequired,
+
+    // 设置连接重试次数，默认为3
+    reconnectLimit: PropTypes.number,
+
+    // 设置连接重试间隔，默认为3000，单位：毫秒
+    reconnectInterval: PropTypes.number,
+
+    // 用于执行连接/断开连接/发送信息操作，可选项有'connect'、'disconnect'、'send'
+    // 每次新操作执行后，operation参数都会被重置为null
+    operation: PropTypes.oneOf(['connect', 'disconnect', 'send']),
+
+    // 当operation更新为'send'时，用于设置要通过WebSocket服务向服务器发送的数据
+    message: PropTypes.string,
+
+    // 监听从服务器传来的最新信息
+    latestMessage: PropTypes.string,
+
+    // 用于监听当前此连接的状态，有'connecting'、'open'、'closing'、'closed'四种状态
+    state: PropTypes.oneOf(['connecting', 'open', 'closing', 'closed']),
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func,
+
+    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
+    })
+};
+
+// 设置默认参数
+FefferyWebSocket.defaultProps = {
+}
+
+export default React.memo(FefferyWebSocket);

package/src/lib/index.js

@@ -46,6 +46,8 @@ import FefferyEyeDropper from "./components/colorPickers/FefferyEyeDropper.react
 import FefferySticky from "./components/FefferySticky.react";
 import FefferyLazyLoadImage from "./components/FefferyLazyLoadImage.react";
 import FefferySessionStorage from "./components/store/FefferySessionStorage";
+import FefferyWebSocket from "./components/FefferyWebSocket.react";
+import FefferyShadowDom from "./components/FefferyShadowDom.react";
 
 /* 
 忽略部分设计React中规范的console警告信息
@@ -126,5 +128,7 @@ export {
     FefferyEyeDropper,
     FefferySticky,
     FefferyLazyLoadImage,
-    FefferySessionStorage
+    FefferySessionStorage,
+    FefferyWebSocket,
+    FefferyShadowDom
 };

package/tests/FefferyShadowDomTest/app.py

@@ -0,0 +1,53 @@
+if True:
+    import sys
+    import time
+    sys.path.append('../..')
+    import dash
+    from dash import html, dcc
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output, State
+
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fuc.FefferyShadowDom(
+            [
+                fuc.FefferyStyle(
+                    rawStyle='''
+.div-demo {
+    width: 200px;
+    height: 200px;
+    background: black;
+}
+'''
+                ),
+                html.Div(
+                    className='div-demo'
+                )
+            ]
+        ),
+
+        fuc.FefferyShadowDom(
+            [
+                fuc.FefferyStyle(
+                    rawStyle='''
+.div-demo {
+    width: 200px;
+    height: 200px;
+    background: grey;
+}
+'''
+                ),
+                html.Div(
+                    className='div-demo'
+                )
+            ]
+        )
+    ]
+)
+
+
+if __name__ == '__main__':
+    app.run(debug=True)