feffery_utils_components 0.2.0-rc19 → 0.2.0-rc20

package/src/lib/components/listeners/FefferyListenScroll.react.js

@@ -1,35 +1,67 @@
 import { useEffect } from 'react';
-import { useScroll } from 'ahooks';
+import { useScroll } from '@reactuses/core';
 import PropTypes from 'prop-types';
 
-// 定义滚动条监听组件FefferyListenScroll
+/**
+ * 滚动条监听组件FefferyListenScroll
+ */
 const FefferyListenScroll = (props) => {
     let {
         target,
+        throttle,
+        idle,
+        offset,
         setProps,
         loading_state
     } = props;
 
-    const position_ = useScroll(target ? document.getElementById(target) : document)
+    const [x, y, _isScrolling, _arrivedState, _directions] = useScroll(
+        () => target ? document.getElementById(target) : document,
+        {
+            throttle,
+            idle,
+            offset
+        }
+    );
 
     useEffect(() => {
-        if (position_) {
-            setProps({
-                position: position_
-            })
-        }
-    }, [position_])
+        setProps({
+            position: { left: x, top: y }
+        })
+    }, [x, y])
+
+    useEffect(() => {
+        setProps({
+            isScrolling: _isScrolling
+        })
+    }, [_isScrolling])
+
+    useEffect(() => {
+        setProps({
+            arrivedState: _arrivedState
+        })
+    }, [_arrivedState])
+
+    useEffect(() => {
+        setProps({
+            directions: _directions
+        })
+    }, [_directions])
 
     return <></>;
 }
 
-// 定义参数或属性
 FefferyListenScroll.propTypes = {
     /**
      * 组件id
      */
     id: PropTypes.string,
 
+    /**
+     * 强制刷新用key值
+     */
+    key: PropTypes.string,
+
     /**
      * 设置滚动条监听目标元素id，默认为整个页面
      */
@@ -40,6 +72,55 @@ FefferyListenScroll.propTypes = {
      */
     position: PropTypes.object,
 
+    /**
+     * 监听目标滚动条是否正在滚动中
+     */
+    isScrolling: PropTypes.bool,
+
+    /**
+     * 监听目标滚动条的到达边界状态
+     */
+    arrivedState: PropTypes.object,
+
+    /**
+     * 监听目标滚动条的滚动方向
+     */
+    directions: PropTypes.object,
+
+    /**
+     * 滚动事件监听节流时长，单位：毫秒
+     * 默认：`0`
+     */
+    throttle: PropTypes.number,
+
+    /**
+     * 滚动结束行为的检查时长，单位：毫秒，当`throttle>0`时，检查时长将为`throttle+idle`
+     * 默认：`0`
+     */
+    idle: PropTypes.number,
+
+    /**
+     * 针对各个方向的到达边界状态，设置像素阈值
+     */
+    offset: PropTypes.shape({
+        /**
+         * 上顶端到达边界像素阈值
+         */
+        top: PropTypes.number,
+        /**
+         * 下底部到达边界像素阈值
+         */
+        bottom: PropTypes.number,
+        /**
+         * 左侧到达边界像素阈值
+         */
+        left: PropTypes.number,
+        /**
+         * 右侧到达边界像素阈值
+         */
+        right: PropTypes.number
+    }),
+
     /**
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.

package/src/lib/index.js

@@ -110,6 +110,9 @@ 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 FefferyEventListener from "./components/listeners/FefferyEventListener.react.js";
+import FefferyListenHover from "./components/listeners/FefferyListenHover.js";
+import FefferyListenElementSize from "./components/listeners/FefferyListenElementSize.react.js";
 import './components/styles.css';
 
 // 自定义sessionStorage事件监听
@@ -244,5 +247,8 @@ export {
     FefferyVditor,
     FefferyHttpRequests,
     FefferyBurger,
-    FefferyEventSource
+    FefferyEventSource,
+    FefferyEventListener,
+    FefferyListenHover,
+    FefferyListenElementSize
 };

package/usage.py

@@ -1,45 +1,33 @@
 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
+from dash.dependencies import Input, Output
 
 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.FefferyEventSource(
-            id='sse-demo',
-            url='/stream-chat?question=%E4%BD%A0%E6%98%AF%E8%B0%81',
-            autoReconnect=False,
+        html.Div(
+            id='target-element',
+            style={
+                'width': '20vw',
+                'height': '20vh',
+                'border': '1px solid black',
+            },
+        ),
+        fuc.FefferyListenElementSize(
+            id='listen-element-size-demo',
+            target='target-element',
         ),
-        html.Div('', id='sse-demo-output'),
     ],
-    style={'padding': 50},
+    style={'padding': 50, 'height': 99999, 'width': 99999},
 )
 
 app.clientside_callback(
-    """(data, children) => data ? children + data : ''""",
-    Output('sse-demo-output', 'children'),
-    Input('sse-demo', 'data'),
-    State('sse-demo-output', 'children'),
+    """(width, height) => `width: ${width}px; height: ${height}px`""",
+    Output('target-element', 'children'),
+    Input('listen-element-size-demo', 'width'),
+    Input('listen-element-size-demo', 'height'),
 )
 
 if __name__ == '__main__':