feffery_utils_components 0.2.0-rc17 → 0.2.0-rc19

package/feffery_utils_components/metadata.json

@@ -11251,6 +11251,159 @@
       }
     }
   },
+  "src/lib/components/FefferyEventSource.react.js": {
+    "description": "EventSource\u901a\u4fe1\u7ec4\u4ef6FefferyEventSource",
+    "displayName": "FefferyEventSource",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7ec4\u4ef6id"
+      },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u5f3a\u5236\u5237\u65b0\u7528\u552f\u4e00\u6807\u8bc6key\u503c"
+      },
+      "url": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": "\u5fc5\u586b\uff0c\u76ee\u6807\u670d\u52a1\u5730\u5740"
+      },
+      "events": {
+        "type": {
+          "name": "arrayOf",
+          "value": {
+            "name": "string"
+          }
+        },
+        "required": false,
+        "description": "\u76ee\u6807\u4e8b\u4ef6\u540d\u79f0\u5217\u8868",
+        "defaultValue": {
+          "value": "[]",
+          "computed": false
+        }
+      },
+      "immediate": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u662f\u5426\u7acb\u5373\u5efa\u7acb\u8fde\u63a5\r\n\u9ed8\u8ba4\uff1a`true`",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
+      "autoReconnect": {
+        "type": {
+          "name": "union",
+          "value": [
+            {
+              "name": "shape",
+              "value": {
+                "retries": {
+                  "name": "number",
+                  "description": "\u91cd\u8bd5\u6b21\u6570",
+                  "required": false
+                },
+                "delay": {
+                  "name": "number",
+                  "description": "\u91cd\u8bd5\u524d\u7684\u5ef6\u65f6\u65f6\u957f\uff0c\u5355\u4f4d\uff1a\u6beb\u79d2",
+                  "required": false
+                }
+              }
+            },
+            {
+              "name": "bool"
+            }
+          ]
+        },
+        "required": false,
+        "description": "\u914d\u7f6e\u8fde\u63a5\u65ad\u5f00\u81ea\u52a8\u91cd\u8fde\u76f8\u5173\u53c2\u6570\uff0c\u8bbe\u7f6e\u4e3a`false`\u65f6\u5c06\u4e0d\u4f1a\u81ea\u52a8\u91cd\u8fde\r\n\u9ed8\u8ba4\uff1a`false`",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "status": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u6700\u65b0\u7684\u8fde\u63a5\u72b6\u6001"
+      },
+      "data": {
+        "type": {
+          "name": "any"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u6700\u65b0\u7684\u8fd4\u56de\u6570\u636e"
+      },
+      "event": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u6700\u65b0\u7684\u4e8b\u4ef6\u540d\u79f0"
+      },
+      "operation": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'open'",
+              "computed": false
+            },
+            {
+              "value": "'close'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "\u63a7\u5236\u8981\u7acb\u5373\u6267\u884c\u7684\u64cd\u4f5c\uff0c\u53ef\u9009\u9879\u6709`'open'`\u3001`'close'`\uff0c\u6bcf\u6b21\u65b0\u7684\u64cd\u4f5c\u6267\u884c\u5b8c\u6210\u540e\u90fd\u4f1a\u91cd\u7f6e\u4e3a\u7a7a\u503c"
+      },
+      "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/FefferyExecuteJs.react.js": {
     "description": "js\u76f4\u63a5\u6267\u884c\u7ec4\u4ef6FefferyExecuteJs",
     "displayName": "FefferyExecuteJs",

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc17",
+  "version": "0.2.0-rc19",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc17",
+  "version": "0.2.0-rc19",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",

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

@@ -21,6 +21,31 @@ const FefferyCountUp = (props) => {
         loading_state
     } = props;
 
+    if (enableScrollSpy) {
+        // #70 
+        // 参考资料：https://stackoverflow.com/questions/76977652/countup-target-is-null-or-undefined-null-react-js
+        return (
+            <CountUp
+                id={id}
+                className={className}
+                style={style}
+                key={key}
+                end={end}
+                start={start}
+                duration={duration}
+                decimals={decimals}
+                enableScrollSpy={enableScrollSpy}
+                scrollSpyDelay={scrollSpyDelay}
+                scrollSpyOnce={scrollSpyOnce}
+                separator={separator}
+                data-dash-is-loading={
+                    (loading_state && loading_state.is_loading) || undefined
+                } >
+                {({ countUpRef }) => <span ref={countUpRef} />}
+            </CountUp>
+        )
+    }
+
     return (
         <CountUp
             id={id}
@@ -31,14 +56,12 @@ const FefferyCountUp = (props) => {
             start={start}
             duration={duration}
             decimals={decimals}
-            enableScrollSpy={enableScrollSpy}
-            scrollSpyDelay={scrollSpyDelay}
-            scrollSpyOnce={scrollSpyOnce}
             separator={separator}
             data-dash-is-loading={
                 (loading_state && loading_state.is_loading) || undefined
-            } />
-    );
+            }
+        />
+    )
 }
 
 

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

@@ -0,0 +1,150 @@
+import { useEffect } from 'react';
+import { useEventSource } from '@reactuses/core';
+import PropTypes from 'prop-types';
+
+/**
+ * EventSource通信组件FefferyEventSource
+ */
+const FefferyEventSource = (props) => {
+    const {
+        url,
+        events,
+        immediate,
+        autoReconnect,
+        operation,
+        setProps,
+        loading_state
+    } = props;
+
+    const { status: _status, data: _data, event: _event, close, open } = useEventSource(
+        url,
+        events,
+        {
+            immediate,
+            autoReconnect,
+        }
+    );
+
+    useEffect(() => {
+        if (!autoReconnect && _status === 'DISCONNECTED' && _data) {
+            close();
+        }
+        setProps({ status: _status })
+    }, [_status])
+
+    useEffect(() => {
+        setProps({ data: _data })
+    }, [_data])
+
+    useEffect(() => {
+        setProps({ event: _event })
+    }, [_event])
+
+    useEffect(() => {
+        if (operation) {
+            if (operation === 'close') {
+                close();
+            } else if (operation === 'open') {
+                open();
+            }
+        }
+    }, [operation])
+
+    return <></>;
+}
+
+FefferyEventSource.propTypes = {
+    /**
+     * 组件id
+     */
+    id: PropTypes.string,
+
+    /**
+     * 强制刷新用唯一标识key值
+     */
+    key: PropTypes.string,
+
+    /**
+     * 必填，目标服务地址
+     */
+    url: PropTypes.string.isRequired,
+
+    /**
+     * 目标事件名称列表
+     */
+    events: PropTypes.arrayOf(PropTypes.string),
+
+    /**
+     * 是否立即建立连接
+     * 默认：`true`
+     */
+    immediate: PropTypes.bool,
+
+    /**
+     * 配置连接断开自动重连相关参数，设置为`false`时将不会自动重连
+     * 默认：`false`
+     */
+    autoReconnect: PropTypes.oneOfType([
+        PropTypes.shape({
+            /**
+             * 重试次数
+             */
+            retries: PropTypes.number,
+            /**
+             * 重试前的延时时长，单位：毫秒
+             */
+            delay: PropTypes.number
+        }),
+        PropTypes.bool
+    ]),
+
+    /**
+     * 监听最新的连接状态
+     */
+    status: PropTypes.string,
+
+    /**
+     * 监听最新的返回数据
+     */
+    data: PropTypes.any,
+
+    /**
+     * 监听最新的事件名称
+     */
+    event: PropTypes.string,
+
+    /**
+     * 控制要立即执行的操作，可选项有`'open'`、`'close'`，每次新的操作执行完成后都会重置为空值
+     */
+    operation: PropTypes.oneOf(['open', 'close']),
+
+    /**
+     * 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
+    })
+};
+
+// 设置默认参数
+FefferyEventSource.defaultProps = {
+    immediate: true,
+    autoReconnect: false,
+    events: []
+}
+
+export default FefferyEventSource;

package/src/lib/index.js

@@ -109,6 +109,7 @@ import FefferyPortal from "./components/FefferyPortal.react";
 import FefferyVditor from "./components/editor/FefferyVditor.react.js";
 import FefferyHttpRequests from "./components/FefferyHttpRequests.react.js";
 import FefferyBurger from './components/FefferyBurger.react';
+import FefferyEventSource from "./components/FefferyEventSource.react.js";
 import './components/styles.css';
 
 // 自定义sessionStorage事件监听
@@ -242,5 +243,6 @@ export {
     FefferyPortal,
     FefferyVditor,
     FefferyHttpRequests,
-    FefferyBurger
+    FefferyBurger,
+    FefferyEventSource
 };

package/usage.py

@@ -1,40 +1,45 @@
 import dash
+import time
+import random
 from dash import html
+from urllib.parse import unquote
 import feffery_utils_components as fuc
+from flask import request, Response
+from dash.dependencies import Input, Output, State
 
 app = dash.Dash(__name__)
 
+
+@app.server.route('/stream-chat')
+def chatgpt():
+    question = request.args.get('question', '')
+    question = unquote(question).strip()
+
+    def stream():
+        for s in '测试问题回复结果' + '巴拉' * 1000:
+            time.sleep(random.uniform(0.05, 0.25))
+            yield 'data: %s\n\n' % s
+
+    return Response(stream(), mimetype='text/event-stream')
+
+
 app.layout = html.Div(
     [
-        fuc.FefferyBurger(
-            type=t,
-            color='white',
-            size=18,
-            distance='sm',
-            toggled=True,
-        )
-        for t in [
-            'default',
-            'squash',
-            'cross',
-            'twirl',
-            'fade',
-            'slant',
-            'spiral',
-            'divide',
-            'turn',
-            'pivot',
-            'sling',
-            'squeeze',
-            'spin',
-            'rotate',
-        ]
+        fuc.FefferyEventSource(
+            id='sse-demo',
+            url='/stream-chat?question=%E4%BD%A0%E6%98%AF%E8%B0%81',
+            autoReconnect=False,
+        ),
+        html.Div('', id='sse-demo-output'),
     ],
-    style={
-        'height': '100vh',
-        'background': '#1a202c',
-        'padding': '0 100px',
-    },
+    style={'padding': 50},
+)
+
+app.clientside_callback(
+    """(data, children) => data ? children + data : ''""",
+    Output('sse-demo-output', 'children'),
+    Input('sse-demo', 'data'),
+    State('sse-demo-output', 'children'),
 )
 
 if __name__ == '__main__':