feffery_utils_components 0.2.0-rc11 → 0.2.0-rc12

package/feffery_utils_components/metadata.json

@@ -13294,8 +13294,60 @@
       }
     }
   },
+  "src/lib/components/FefferySetFavicon.react.js": {
+    "description": "favicon\u8bbe\u7f6e\u7ec4\u4ef6FefferySetFavicon",
+    "displayName": "FefferySetFavicon",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7ec4\u4ef6id"
+      },
+      "favicon": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7528\u4e8e\u8bbe\u7f6e\u8981\u66f4\u65b0\u7684favicon\u56fe\u7247\u6587\u4ef6\u5730\u5740\uff0c\u652f\u6301svg\u3001png\u3001ico\u3001gif\u683c\u5f0f"
+      },
+      "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/FefferySetTitle.react.js": {
-    "description": "",
+    "description": "\u9875\u9762title\u8bbe\u7f6e\u7ec4\u4ef6FefferySetTitle",
     "displayName": "FefferySetTitle",
     "methods": [],
     "props": {
@@ -13313,6 +13365,13 @@
         "required": false,
         "description": "\u7528\u4e8e\u8bbe\u7f6e\u8981\u66f4\u65b0\u7684title\u4fe1\u606f"
       },
+      "originTitle": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u5f53title\u53c2\u6570\u4e3a\u7a7a\uff0c\u6216\u5f53\u524d\u7ec4\u4ef6\u4ece\u9875\u9762\u4e2d\u5378\u8f7d\u540e\u5e94\u5f53\u8fd8\u539f\u7684title"
+      },
       "setProps": {
         "type": {
           "name": "func"

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc11",
+  "version": "0.2.0-rc12",
   "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-rc11",
+  "version": "0.2.0-rc12",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",

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

@@ -0,0 +1,58 @@
+import { useFavicon } from 'ahooks';
+import PropTypes from 'prop-types';
+
+/**
+ * favicon设置组件FefferySetFavicon
+ */
+const FefferySetFavicon = (props) => {
+
+    const {
+        favicon,
+        setProps,
+        loading_state
+    } = props;
+
+    useFavicon(favicon);
+
+    return <></>;
+}
+
+// 定义参数或属性
+FefferySetFavicon.propTypes = {
+    /**
+     * 组件id
+     */
+    id: PropTypes.string,
+
+    /**
+     * 用于设置要更新的favicon图片文件地址，支持svg、png、ico、gif格式
+     */
+    favicon: PropTypes.string,
+
+    /**
+     * 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
+    })
+};
+
+// 设置默认参数
+FefferySetFavicon.defaultProps = {
+}
+
+export default FefferySetFavicon;

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

@@ -1,20 +1,30 @@
+import { useEffect } from 'react';
 import { useTitle } from 'ahooks';
 import PropTypes from 'prop-types';
 
-// 定义页面title设置组件FefferySetTitle
+/**
+ * 页面title设置组件FefferySetTitle
+ */
 const FefferySetTitle = (props) => {
 
     const {
-        id,
         title,
+        originTitle,
         setProps,
         loading_state
     } = props;
 
-    // 随着title更新进而改变页面title
-    if (title) {
-        useTitle(title)
-    }
+    // 组件卸载时，还原有效的originTitle
+    useEffect(() => {
+        return () => {
+            if (originTitle) {
+                document.title = originTitle;
+            }
+        }
+    }, [])
+
+    // 处理title变化时的更新
+    useTitle(title || originTitle);
 
     return <></>;
 }
@@ -31,6 +41,11 @@ FefferySetTitle.propTypes = {
      */
     title: PropTypes.string,
 
+    /**
+     * 当title参数为空，或当前组件从页面中卸载后应当还原的title
+     */
+    originTitle: PropTypes.string,
+
     /**
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.

package/src/lib/index.js

@@ -103,6 +103,7 @@ import FefferySortable from "./components/sortable/FefferySortable.react";
 import FefferyAnimatedImage from "./components/FefferyAnimatedImage.react";
 import FefferyDebugGuardian from "./components/security/FefferyDebugGuardian.react";
 import FefferyDom2Image from "./components/FefferyDom2Image.react";
+import FefferySetFavicon from "./components/FefferySetFavicon.react";
 import './components/styles.css';
 
 // 自定义sessionStorage事件监听
@@ -230,5 +231,6 @@ export {
     FefferySortable,
     FefferyAnimatedImage,
     FefferyDebugGuardian,
-    FefferyDom2Image
+    FefferyDom2Image,
+    FefferySetFavicon
 };

package/usage.py

@@ -1,5 +1,4 @@
 import dash
-import json
 from dash import html
 import feffery_utils_components as fuc
 from dash.dependencies import Input, Output
@@ -8,34 +7,16 @@ app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
-        # 测试元素
-        fuc.FefferyDiv(
-            '测试内容',
-            id='demo-target',
-            shadow='always-shadow-light',
-            style={
-                'width': 300,
-                'height': 200,
-                'display': 'flex',
-                'justifyContent': 'center',
-                'alignItems': 'center',
-                'fontSize': 18,
-                'fontWeight': 'bold',
-                'color': 'white',
-                'background': 'linear-gradient(135deg,#17ead9,#6078ea)'
-            }
-        ),
-        # 测试激活元素转图片
         html.Button(
-            '打印',
-            id='execute-screenshot'
-        ),
-        # 测试元素转图片组件
-        fuc.FefferyDom2Image(
-            id='demo-dom2image',
-            scale=2
+            '还原favicon',
+            id='clear-demo-output'
         ),
-        html.Div(id='demo-dom2image-output')
+        html.Div(
+            fuc.FefferySetFavicon(
+                favicon='https://www.google.com/favicon.ico'
+            ),
+            id='demo-output'
+        )
     ],
     style={
         'padding': '50px 50px 0 50px'
@@ -44,34 +25,15 @@ app.layout = html.Div(
 
 
 @app.callback(
-    Output('demo-dom2image', 'targetSelector'),
-    Input('execute-screenshot', 'n_clicks'),
+    Output('demo-output', 'children'),
+    Input('clear-demo-output', 'n_clicks'),
     prevent_initial_call=True
 )
 def demo(n_clicks):
 
-    return '#demo-target'
-
-
-@app.callback(
-    Output('demo-dom2image-output', 'children'),
-    Input('demo-dom2image', 'screenshotResult'),
-    prevent_initial_call=True
-)
-def update_result(screenshotResult):
-
-    return [
-        html.Pre(
-            json.dumps(
-                screenshotResult,
-                ensure_ascii=False,
-                indent=4
-            )
-        ),
-        html.Img(
-            src=screenshotResult['dataUrl']
-        )
-    ]
+    return fuc.FefferySetFavicon(
+        favicon='/_favicon.ico'
+    )
 
 
 if __name__ == '__main__':