feffery_utils_components 0.2.0-rc26 → 0.2.0-rc27

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc26",
+  "version": "0.2.0-rc27",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "@js-preview/excel": "^1.6.0",
     "@microlink/react-json-view": "^1.23.4",
     "@photo-sphere-viewer/autorotate-plugin": "^5.7.3",
-    "@reactuses/core": "^5.0.23",
+    "@reactuses/core": "^6.0.0",
     "@shoelace-style/shoelace": "^2.14.0",
     "@uiw/color-convert": "^1.1.0",
     "@uiw/react-color-wheel": "^1.1.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc26",
+  "version": "0.2.0-rc27",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "@js-preview/excel": "^1.6.0",
     "@microlink/react-json-view": "^1.23.4",
     "@photo-sphere-viewer/autorotate-plugin": "^5.7.3",
-    "@reactuses/core": "^5.0.23",
+    "@reactuses/core": "^6.0.0",
     "@shoelace-style/shoelace": "^2.14.0",
     "@uiw/color-convert": "^1.1.0",
     "@uiw/react-color-wheel": "^1.1.0",

package/src/lib/components/communication/FefferyPostEventSource.react.js

@@ -28,7 +28,8 @@ const FefferyPostEventSource = (props) => {
             headers,
             body,
             withCredentials,
-            method: 'POST'
+            method: 'POST',
+            openWhenHidden: true
         }
     );
 

package/src/lib/components/container/FefferyDiv.react.js

@@ -358,6 +358,19 @@ const FefferyDiv = (props) => {
                 () => setProps({ isTouching: false }) :
                 undefined
         }
+        // 监听容器内文本粘贴事件
+        onPaste={
+            enableEvents?.includes('paste') ?
+                (e) => {
+                    setProps({
+                        pasteEvent: {
+                            text: e.clipboardData.getData('text'),
+                            timestamp: Date.now()
+                        }
+                    })
+                } :
+                undefined
+        }
         tabIndex={enableFocus || enableEvents?.includes('focus') ? 0 : undefined}
         data-dash-is-loading={
             (loading_state && loading_state.is_loading) || undefined
@@ -399,7 +412,7 @@ FefferyDiv.propTypes = {
      * 控制要开启的事件监听类型数组，可选项有`'click'`（单击事件）、`'dbclick'`（双击事件）、`'size'`（尺寸变化事件）、
      * `'mouseenter'`（鼠标移入事件），`'mouseleave'`（鼠标移出事件）、`'contextmenu'`（鼠标右键点击事件）、
      * `'hover'`（鼠标悬停事件）、`'touch'`（移动端触碰事件）、`'clickaway'`（元素外点击事件）、`'position'`（左上角坐标位置变化事件）、
-     * `'focus'`（聚焦状态切换事件）
+     * `'focus'`（聚焦状态切换事件）、`'paste'`（文本粘贴事件）
      * 默认值：`['click', 'dbclick']`
      */
     enableEvents: PropTypes.arrayOf(
@@ -414,7 +427,8 @@ FefferyDiv.propTypes = {
             'touch',
             'clickaway',
             'position',
-            'focus'
+            'focus',
+            'paste'
         ])
     ),
 
@@ -613,6 +627,20 @@ FefferyDiv.propTypes = {
      */
     isFocused: PropTypes.bool,
 
+    /**
+     * 监听文本粘贴事件
+     */
+    pasteEvent: PropTypes.exact({
+        /**
+         * 已粘贴文本内容
+         */
+        text: PropTypes.string,
+        /**
+         * 粘贴事件对应的时间戳
+         */
+        timestamp: PropTypes.number
+    }),
+
     /**
      * 设置当前组件内部处理鼠标滑轮事件的策略，可选项有`'default'`、`'internally-only'`（不向外传递）
      * 默认值：`'default'

package/src/lib/components/feedback/FefferyWebNotification.react.js

@@ -0,0 +1,78 @@
+import { useEffect } from 'react';
+import { useWebNotification } from '@reactuses/core';
+import PropTypes from 'prop-types';
+
+/**
+ * web通知组件FefferyWebNotification
+ */
+const FefferyWebNotification = (props) => {
+    const {
+        message,
+        setProps,
+        loading_state
+    } = props;
+
+    const { isSupported: _isSupported, show } = useWebNotification(true);
+
+    useEffect(() => {
+        setProps({ isSupported: _isSupported })
+    }, [_isSupported])
+
+    useEffect(() => {
+        if (_isSupported && message) {
+            show(message);
+            // 重置message
+            setProps({ message: null });
+        }
+    }, [message])
+
+    return <></>;
+}
+
+FefferyWebNotification.propTypes = {
+    /**
+     * 组件唯一id
+     */
+    id: PropTypes.string,
+
+    /**
+     * 对当前组件的`key`值进行更新，可实现强制重绘当前组件的效果
+     */
+    key: PropTypes.string,
+
+    /**
+     * 设置要发送的信息内容，每次成功发送后都会重置为空
+     */
+    message: PropTypes.string,
+
+    /**
+     * 监听用户浏览器中是否支持web通知
+     */
+    isSupported: PropTypes.bool,
+
+    /**
+     * 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
+    })
+};
+
+FefferyWebNotification.defaultProps = {
+}
+
+export default FefferyWebNotification;

package/src/lib/index.js

@@ -131,6 +131,7 @@ import FefferySeamlessScroll from "./components/dataDisplay/FefferySeamlessScrol
 // 反馈
 import FefferyFancyMessage from "./components/feedback/FefferyFancyMessage.js";
 import FefferyFancyNotification from "./components/feedback/FefferyFancyNotification.js";
+import FefferyWebNotification from './components/feedback/FefferyWebNotification.react.js';
 // 存储
 import FefferyCookie from "./components/store/FefferyCookie.react";
 import FefferyLocalLargeStorage from "./components/store/FefferyLocalLargeStorage.react";
@@ -302,6 +303,7 @@ export {
     // 反馈
     FefferyFancyMessage,
     FefferyFancyNotification,
+    FefferyWebNotification,
     // 存储
     FefferyCookie,
     FefferyLocalLargeStorage,

package/tests/FefferyDiv/feat_paste.py

@@ -0,0 +1,38 @@
+if True:
+    import sys
+
+    sys.path.append('../../')
+    import dash
+    from dash import html
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output
+    from feffery_dash_utils.style_utils import style
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fuc.FefferyDiv(
+            id='div-demo',
+            enableEvents=['paste'],
+            style=style(
+                height=200,
+                border='1px solid #d9d9d9',
+            ),
+        )
+    ],
+    style=style(padding=100),
+)
+
+
+@app.callback(
+    Output('div-demo', 'children'),
+    Input('div-demo', 'pasteEvent'),
+    prevent_initial_call=True,
+)
+def demo(pasteEvent):
+    return pasteEvent.get('text')
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/FefferyPostEventSource/fix_extra_request.py

@@ -0,0 +1,22 @@
+if True:
+    import sys
+
+    sys.path.append('../../')
+    import dash
+    from dash import html
+    import feffery_utils_components as fuc
+    from feffery_dash_utils.style_utils import style
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fuc.FefferyPostEventSource(
+            url='https://broad-scene-1112.ploomberapp.io/stream-post',
+        )
+    ],
+    style=style(padding=100),
+)
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/FefferyWebNotification/feat.py

@@ -0,0 +1,35 @@
+if True:
+    import sys
+
+    sys.path.append('../../')
+    import uuid
+    import dash
+    from dash import html
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output
+    from feffery_dash_utils.style_utils import style
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        html.Button('新的通知', id='new-web-notification'),
+        fuc.FefferyWebNotification(
+            id='web-notification-demo',
+        ),
+    ],
+    style=style(padding=100),
+)
+
+
+@app.callback(
+    Output('web-notification-demo', 'message'),
+    Input('new-web-notification', 'n_clicks'),
+    prevent_initial_call=True,
+)
+def demo(n_clicks):
+    return '通知测试' + str(uuid.uuid4())
+
+
+if __name__ == '__main__':
+    app.run(debug=True)