feffery_utils_components 0.2.0-rc19 → 0.2.0-rc20

package/feffery_utils_components/metadata.json

@@ -18003,6 +18003,97 @@
       }
     }
   },
+  "src/lib/components/listeners/FefferyEventListener.react.js": {
+    "description": "\u901a\u7528\u4e8b\u4ef6\u76d1\u542c\u7ec4\u4ef6FefferyEventListener",
+    "displayName": "FefferyEventListener",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7ec4\u4ef6id"
+      },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u5f3a\u5236\u5237\u65b0\u7528key\u503c"
+      },
+      "eventName": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": "\u5fc5\u586b\uff0c\u76ee\u6807\u4e8b\u4ef6\u540d\u79f0"
+      },
+      "handler": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u5fc5\u586b\uff0c\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u5904\u7406js\u51fd\u6570\u5b57\u7b26\u4e32\uff0c\u552f\u4e00\u5165\u53c2\u4e3a\u4e8b\u4ef6\u5bf9\u8c61\uff0c\u8fd4\u56de\u503c\u5c06\u7528\u4e8e\u66f4\u65b0`result`\u5c5e\u6027"
+      },
+      "targetSelector": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u4e8b\u4ef6\u76d1\u542c\u76ee\u6807\u5bf9\u5e94\u7684\u9009\u62e9\u5668\u5b57\u7b26\u4e32\uff0c\u9ed8\u8ba4\u76d1\u542c\u76ee\u6807\u4e3a\u6574\u4e2a\u9875\u9762"
+      },
+      "enable": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u63a7\u5236\u662f\u5426\u5f00\u542f\u76d1\u542c\r\n\u9ed8\u8ba4\u503c\uff1a`true`",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
+      "result": {
+        "type": {
+          "name": "any"
+        },
+        "required": false,
+        "description": "\u76d1\u542c`handler`\u5bf9\u5e94\u51fd\u6570\u7684\u8fd4\u56de\u503c\uff0c\u4f5c\u4e3a\u4e8b\u4ef6\u76d1\u542c\u7684\u7ed3\u679c"
+      },
+      "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/FefferyGeolocation.react.js": {
     "description": "",
     "displayName": "FefferyGeolocation",
@@ -18247,6 +18338,145 @@
       }
     }
   },
+  "src/lib/components/listeners/FefferyListenElementSize.react.js": {
+    "description": "\u5143\u7d20\u5c3a\u5bf8\u76d1\u542c\u7ec4\u4ef6FefferyListenElementSize",
+    "displayName": "FefferyListenElementSize",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7ec4\u4ef6id"
+      },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u5f3a\u5236\u5237\u65b0\u7528key\u503c"
+      },
+      "target": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": "\u5fc5\u586b\uff0c\u8bbe\u7f6e\u5c3a\u5bf8\u76d1\u542c\u76ee\u6807\u5143\u7d20id"
+      },
+      "width": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u76ee\u6807\u5143\u7d20\u50cf\u7d20\u5bbd\u5ea6"
+      },
+      "height": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u76ee\u6807\u5143\u7d20\u50cf\u7d20\u9ad8\u5ea6"
+      },
+      "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/FefferyListenHover.js": {
+    "description": "\u9f20\u6807\u60ac\u505c\u76d1\u542c\u7ec4\u4ef6FefferyListenHover",
+    "displayName": "FefferyListenHover",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7ec4\u4ef6id"
+      },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u5f3a\u5236\u5237\u65b0\u7528key\u503c"
+      },
+      "targetSelector": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": "\u5fc5\u586b\uff0c\u76d1\u542c\u76ee\u6807\u9009\u62e9\u5668\u5b57\u7b26\u4e32"
+      },
+      "isHovering": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u76ee\u6807\u5143\u7d20\u662f\u5426\u5904\u4e8e\u9f20\u6807\u60ac\u505c\u72b6\u6001"
+      },
+      "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/FefferyListenPaste.react.js": {
     "description": "",
     "displayName": "FefferyListenPaste",
@@ -18329,7 +18559,7 @@
     }
   },
   "src/lib/components/listeners/FefferyListenScroll.react.js": {
-    "description": "",
+    "description": "\u6eda\u52a8\u6761\u76d1\u542c\u7ec4\u4ef6FefferyListenScroll",
     "displayName": "FefferyListenScroll",
     "methods": [],
     "props": {
@@ -18340,6 +18570,13 @@
         "required": false,
         "description": "\u7ec4\u4ef6id"
       },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u5f3a\u5236\u5237\u65b0\u7528key\u503c"
+      },
       "target": {
         "type": {
           "name": "string"
@@ -18354,6 +18591,70 @@
         "required": false,
         "description": "\u76d1\u542c\u76ee\u6807\u6eda\u52a8\u6761\u7684\u6c34\u5e73\u53ca\u7ad6\u76f4\u65b9\u5411\u4e0a\u7684\u50cf\u7d20\u504f\u79fb\u91cf"
       },
+      "isScrolling": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u76ee\u6807\u6eda\u52a8\u6761\u662f\u5426\u6b63\u5728\u6eda\u52a8\u4e2d"
+      },
+      "arrivedState": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u76ee\u6807\u6eda\u52a8\u6761\u7684\u5230\u8fbe\u8fb9\u754c\u72b6\u6001"
+      },
+      "directions": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u76ee\u6807\u6eda\u52a8\u6761\u7684\u6eda\u52a8\u65b9\u5411"
+      },
+      "throttle": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u6eda\u52a8\u4e8b\u4ef6\u76d1\u542c\u8282\u6d41\u65f6\u957f\uff0c\u5355\u4f4d\uff1a\u6beb\u79d2\r\n\u9ed8\u8ba4\uff1a`0`"
+      },
+      "idle": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u6eda\u52a8\u7ed3\u675f\u884c\u4e3a\u7684\u68c0\u67e5\u65f6\u957f\uff0c\u5355\u4f4d\uff1a\u6beb\u79d2\uff0c\u5f53`throttle>0`\u65f6\uff0c\u68c0\u67e5\u65f6\u957f\u5c06\u4e3a`throttle+idle`\r\n\u9ed8\u8ba4\uff1a`0`"
+      },
+      "offset": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "top": {
+              "name": "number",
+              "description": "\u4e0a\u9876\u7aef\u5230\u8fbe\u8fb9\u754c\u50cf\u7d20\u9608\u503c",
+              "required": false
+            },
+            "bottom": {
+              "name": "number",
+              "description": "\u4e0b\u5e95\u90e8\u5230\u8fbe\u8fb9\u754c\u50cf\u7d20\u9608\u503c",
+              "required": false
+            },
+            "left": {
+              "name": "number",
+              "description": "\u5de6\u4fa7\u5230\u8fbe\u8fb9\u754c\u50cf\u7d20\u9608\u503c",
+              "required": false
+            },
+            "right": {
+              "name": "number",
+              "description": "\u53f3\u4fa7\u5230\u8fbe\u8fb9\u754c\u50cf\u7d20\u9608\u503c",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "\u9488\u5bf9\u5404\u4e2a\u65b9\u5411\u7684\u5230\u8fbe\u8fb9\u754c\u72b6\u6001\uff0c\u8bbe\u7f6e\u50cf\u7d20\u9608\u503c"
+      },
       "setProps": {
         "type": {
           "name": "func"

package/feffery_utils_components/package-info.json

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

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

@@ -47,6 +47,8 @@ const FefferyEventSource = (props) => {
             } else if (operation === 'open') {
                 open();
             }
+            // 重置operation
+            setProps({ operation: null })
         }
     }, [operation])
 

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

@@ -0,0 +1,97 @@
+import { useEventListener } from 'ahooks';
+import PropTypes from 'prop-types';
+
+/**
+ * 通用事件监听组件FefferyEventListener
+ */
+const FefferyEventListener = (props) => {
+    const {
+        eventName,
+        handler,
+        targetSelector,
+        enable,
+        setProps,
+        loading_state
+    } = props;
+
+    useEventListener(
+        eventName,
+        (e) => {
+            setProps({
+                result: eval(handler)(e)
+            });
+        },
+        {
+            target: () => document.querySelector(targetSelector),
+            enabled: enable
+        }
+    )
+
+    return <></>;
+}
+
+FefferyEventListener.propTypes = {
+    /**
+     * 组件id
+     */
+    id: PropTypes.string,
+
+    /**
+     * 强制刷新用key值
+     */
+    key: PropTypes.string,
+
+    /**
+     * 必填，目标事件名称
+     */
+    eventName: PropTypes.string.isRequired,
+
+    /**
+     * 必填，自定义事件处理js函数字符串，唯一入参为事件对象，返回值将用于更新`result`属性
+     */
+    handler: PropTypes.string,
+
+    /**
+     * 事件监听目标对应的选择器字符串，默认监听目标为整个页面
+     */
+    targetSelector: PropTypes.string,
+
+    /**
+     * 控制是否开启监听
+     * 默认值：`true`
+     */
+    enable: PropTypes.bool,
+
+    /**
+     * 监听`handler`对应函数的返回值，作为事件监听的结果
+     */
+    result: PropTypes.any,
+
+    /**
+     * 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
+    })
+};
+
+// 设置默认参数
+FefferyEventListener.defaultProps = {
+    enable: true
+}
+
+export default FefferyEventListener;

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

@@ -0,0 +1,86 @@
+import { useEffect } from 'react';
+import { useElementSize } from '@reactuses/core';
+import PropTypes from 'prop-types';
+
+/**
+ * 元素尺寸监听组件FefferyListenElementSize
+ */
+const FefferyListenElementSize = (props) => {
+    let {
+        target,
+        width,
+        height,
+        setProps,
+        loading_state
+    } = props;
+
+    const [_width, _height] = useElementSize(() => target ? document.getElementById(target) : document);
+
+    useEffect(() => {
+        if (width !== parseInt(_width)) {
+            setProps({ width: _width })
+        }
+    }, [_width])
+
+    useEffect(() => {
+        if (height !== parseInt(_height)) {
+            setProps({ height: _height })
+        }
+    }, [_height])
+
+    return <></>;
+}
+
+FefferyListenElementSize.propTypes = {
+    /**
+     * 组件id
+     */
+    id: PropTypes.string,
+
+    /**
+     * 强制刷新用key值
+     */
+    key: PropTypes.string,
+
+    /**
+     * 必填，设置尺寸监听目标元素id
+     */
+    target: PropTypes.string.isRequired,
+
+    /**
+     * 监听目标元素像素宽度
+     */
+    width: PropTypes.number,
+
+    /**
+     * 监听目标元素像素高度
+     */
+    height: PropTypes.number,
+
+    /**
+     * 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
+    })
+};
+
+// 设置默认参数
+FefferyListenElementSize.defaultProps = {
+}
+
+export default FefferyListenElementSize;

package/src/lib/components/listeners/FefferyListenHover.js

@@ -0,0 +1,75 @@
+import { useHover } from 'ahooks';
+import PropTypes from 'prop-types';
+
+/**
+ * 鼠标悬停监听组件FefferyListenHover
+ */
+const FefferyListenHover = (props) => {
+    const {
+        targetSelector,
+        setProps,
+        loading_state
+    } = props;
+
+    useHover(
+        () => document.querySelector(targetSelector),
+        {
+            onChange: (e) => {
+                setProps({
+                    isHovering: e
+                })
+            }
+        }
+    )
+
+    return <></>;
+}
+
+FefferyListenHover.propTypes = {
+    /**
+     * 组件id
+     */
+    id: PropTypes.string,
+
+    /**
+     * 强制刷新用key值
+     */
+    key: PropTypes.string,
+
+    /**
+     * 必填，监听目标选择器字符串
+     */
+    targetSelector: PropTypes.string.isRequired,
+
+    /**
+     * 监听目标元素是否处于鼠标悬停状态
+     */
+    isHovering: 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
+    })
+};
+
+// 设置默认参数
+FefferyListenHover.defaultProps = {
+}
+
+export default FefferyListenHover;