feffery_utils_components 0.2.0-rc20 → 0.2.0-rc22

package/feffery_utils_components/metadata.json

@@ -4383,26 +4383,33 @@
         "required": false,
         "description": "\u4f20\u5165\u5185\u90e8\u7684\u5404\u4e2aFefferyGridItem\u5143\u7d20"
       },
+      "placeholder": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": "\u5360\u4f4d\u5143\u7d20\uff0c\u7528\u4e8e\u5728children\u4e3a\u7a7a\u65f6\u5448\u73b0\u76f8\u5173\u63d0\u793a\u4fe1\u606f"
+      },
       "key": {
         "type": {
           "name": "string"
         },
         "required": false,
-        "description": "\u552f\u4e00\u6807\u8bc6\u7b26\uff0c\u5f3a\u5236\u5237\u65b0\u7528"
+        "description": "\u5f3a\u5236\u5237\u65b0\u7528"
       },
       "style": {
         "type": {
           "name": "object"
         },
         "required": false,
-        "description": ""
+        "description": "\u5f53\u524d\u7ec4\u4ef6css\u6837\u5f0f"
       },
       "className": {
         "type": {
           "name": "string"
         },
         "required": false,
-        "description": ""
+        "description": "\u5f53\u524d\u7ec4\u4ef6css\u7c7b\u540d"
       },
       "height": {
         "type": {
@@ -18338,6 +18345,224 @@
       }
     }
   },
+  "src/lib/components/listeners/FefferyListenDrag.react.js": {
+    "description": "\u62d6\u62fd\u4e8b\u4ef6\u76d1\u542c\u7ec4\u4ef6FefferyListenDrag",
+    "displayName": "FefferyListenDrag",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7ec4\u4ef6id"
+      },
+      "targetSelector": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u62d6\u62fd\u4e8b\u4ef6\u76d1\u542c\u76ee\u6807\u9009\u62e9\u5668\u89c4\u5219\u5b57\u7b26\u4e32"
+      },
+      "data": {
+        "type": {
+          "name": "any"
+        },
+        "required": false,
+        "description": "\u5f53\u524d\u76d1\u542c\u76ee\u6807\u6240\u643a\u5e26\u7684\u6570\u636e\uff0c\u914d\u5408**FefferyListenDrop**\u4f7f\u7528"
+      },
+      "isDragging": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u76ee\u6807\u662f\u5426\u5904\u4e8e\u62d6\u62fd\u4e2d\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/FefferyListenDrop.react.js": {
+    "description": "\u653e\u7f6e\u4e8b\u4ef6\u76d1\u542c\u7ec4\u4ef6FefferyListenDrop",
+    "displayName": "FefferyListenDrop",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7ec4\u4ef6id"
+      },
+      "targetSelector": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u653e\u7f6e\u4e8b\u4ef6\u76d1\u542c\u76ee\u6807\u5bb9\u5668\u9009\u62e9\u5668\u89c4\u5219\u5b57\u7b26\u4e32"
+      },
+      "dropEvent": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "time": {
+              "name": "number",
+              "description": "\u4e8b\u4ef6\u5bf9\u5e94\u65f6\u95f4\u6233",
+              "required": false
+            },
+            "data": {
+              "name": "any",
+              "description": "\u4e8b\u4ef6\u643a\u5e26\u6570\u636e",
+              "required": false
+            },
+            "pageX": {
+              "name": "number",
+              "description": "\u4ee5\u9875\u9762\u6574\u4f53\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55x\u5750\u6807",
+              "required": false
+            },
+            "pageY": {
+              "name": "number",
+              "description": "\u4ee5\u9875\u9762\u6574\u4f53\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55y\u5750\u6807",
+              "required": false
+            },
+            "clientX": {
+              "name": "number",
+              "description": "\u4ee5\u6d4f\u89c8\u5668\u7a97\u53e3\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55x\u5750\u6807",
+              "required": false
+            },
+            "clientY": {
+              "name": "number",
+              "description": "\u4ee5\u6d4f\u89c8\u5668\u7a97\u53e3\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55y\u5750\u6807",
+              "required": false
+            },
+            "screenX": {
+              "name": "number",
+              "description": "\u4ee5\u5c4f\u5e55\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55x\u5750\u6807",
+              "required": false
+            },
+            "screenY": {
+              "name": "number",
+              "description": "\u4ee5\u5c4f\u5e55\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55y\u5750\u6807",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u6700\u8fd1\u4e00\u6b21\u57fa\u4e8eFefferyListenDrag\u7684\u5143\u7d20\u62d6\u62fd\u653e\u7f6e\u4e8b\u4ef6"
+      },
+      "isHovering": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u653e\u7f6e\u4e8b\u4ef6\u76d1\u542c\u76ee\u6807\u5bb9\u5668\u662f\u5426\u6b63\u5904\u4e8e\u5f85\u653e\u7f6e\u9f20\u6807\u60ac\u505c\u72b6\u6001"
+      },
+      "hoverEvent": {
+        "type": {
+          "name": "shape",
+          "value": {
+            "time": {
+              "name": "number",
+              "description": "\u4e8b\u4ef6\u5bf9\u5e94\u65f6\u95f4\u6233",
+              "required": false
+            },
+            "pageX": {
+              "name": "number",
+              "description": "\u4ee5\u9875\u9762\u6574\u4f53\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55x\u5750\u6807",
+              "required": false
+            },
+            "pageY": {
+              "name": "number",
+              "description": "\u4ee5\u9875\u9762\u6574\u4f53\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55y\u5750\u6807",
+              "required": false
+            },
+            "clientX": {
+              "name": "number",
+              "description": "\u4ee5\u6d4f\u89c8\u5668\u7a97\u53e3\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55x\u5750\u6807",
+              "required": false
+            },
+            "clientY": {
+              "name": "number",
+              "description": "\u4ee5\u6d4f\u89c8\u5668\u7a97\u53e3\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55y\u5750\u6807",
+              "required": false
+            },
+            "screenX": {
+              "name": "number",
+              "description": "\u4ee5\u5c4f\u5e55\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55x\u5750\u6807",
+              "required": false
+            },
+            "screenY": {
+              "name": "number",
+              "description": "\u4ee5\u5c4f\u5e55\u5de6\u4e0a\u89d2\u4e3a\u539f\u70b9\uff0c\u8bb0\u5f55y\u5750\u6807",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u6700\u8fd1\u4e00\u6b21\u6b63\u5904\u4e8e\u5f85\u653e\u7f6e\u9f20\u6807\u60ac\u505c\u72b6\u6001\u65f6\u7684\u4e8b\u4ef6"
+      },
+      "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/FefferyListenElementSize.react.js": {
     "description": "\u5143\u7d20\u5c3a\u5bf8\u76d1\u542c\u7ec4\u4ef6FefferyListenElementSize",
     "displayName": "FefferyListenElementSize",

package/feffery_utils_components/package-info.json

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

package/src/lib/components/draggable/FefferyGrid.react.js

@@ -24,12 +24,23 @@ FefferyGrid.propTypes = {
     children: PropTypes.node,
 
     /**
-     * 唯一标识符，强制刷新用
+     * 占位元素，用于在children为空时呈现相关提示信息
+     */
+    placeholder: PropTypes.node,
+
+    /**
+     * 强制刷新用
      */
     key: PropTypes.string,
 
+    /**
+     * 当前组件css样式
+     */
     style: PropTypes.object,
 
+    /**
+     * 当前组件css类名
+     */
     className: PropTypes.string,
 
     /**

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

@@ -0,0 +1,83 @@
+import { useDrag } from 'ahooks';
+import PropTypes from 'prop-types';
+
+/**
+ * 拖拽事件监听组件FefferyListenDrag
+ */
+const FefferyListenDrag = (props) => {
+    const {
+        targetSelector,
+        data,
+        isDragging,
+        setProps,
+        loading_state
+    } = props;
+
+    useDrag(
+        data,
+        () => document.querySelector(targetSelector),
+        {
+            onDragStart: (e) => {
+                setProps({
+                    isDragging: true
+                })
+            },
+            onDragEnd: (e) => {
+                setProps({
+                    isDragging: false
+                })
+            }
+        }
+    )
+
+    return <></>;
+}
+
+FefferyListenDrag.propTypes = {
+    /**
+     * 组件id
+     */
+    id: PropTypes.string,
+
+    /**
+     * 拖拽事件监听目标选择器规则字符串
+     */
+    targetSelector: PropTypes.string,
+
+    /**
+     * 当前监听目标所携带的数据，配合**FefferyListenDrop**使用
+     */
+    data: PropTypes.any,
+
+    /**
+     * 监听目标是否处于拖拽中状态
+     */
+    isDragging: 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
+    })
+};
+
+// 设置默认参数
+FefferyListenDrag.defaultProps = {
+}
+
+export default FefferyListenDrag;

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

@@ -0,0 +1,177 @@
+import { useDrop, useRequest } from 'ahooks';
+import PropTypes from 'prop-types';
+
+/**
+ * 放置事件监听组件FefferyListenDrop
+ */
+const FefferyListenDrop = (props) => {
+    const {
+        targetSelector,
+        hoverEvent,
+        setProps,
+        loading_state
+    } = props;
+
+    const { run: onDragOver } = useRequest(
+        (e) => {
+            if (!(e.pageX === hoverEvent?.pageX && e.pageY === hoverEvent?.pageY)) {
+                setProps({
+                    hoverEvent: {
+                        time: Date.now(),
+                        pageX: e.pageX,
+                        pageY: e.pageY,
+                        clientX: e.clientX,
+                        clientY: e.clientY,
+                        screenX: e.screenX,
+                        screenY: e.screenY
+                    }
+                })
+            }
+        },
+        {
+            throttleWait: 200,
+            manual: true
+        });
+
+    useDrop(
+        () => document.querySelector(targetSelector),
+        {
+            onDom: (content, e) => {
+                setProps({
+                    dropEvent: {
+                        time: Date.now(),
+                        data: content,
+                        pageX: e.pageX,
+                        pageY: e.pageY,
+                        clientX: e.clientX,
+                        clientY: e.clientY,
+                        screenX: e.screenX,
+                        screenY: e.screenY
+                    },
+                    isHovering: false
+                })
+            },
+            onDragEnter: () => setProps({ isHovering: true }),
+            onDragLeave: () => setProps({ isHovering: false }),
+            onDragOver: onDragOver
+        }
+    )
+
+    return <></>;
+}
+
+FefferyListenDrop.propTypes = {
+    /**
+     * 组件id
+     */
+    id: PropTypes.string,
+
+    /**
+     * 放置事件监听目标容器选择器规则字符串
+     */
+    targetSelector: PropTypes.string,
+
+    /**
+     * 监听最近一次基于FefferyListenDrag的元素拖拽放置事件
+     */
+    dropEvent: PropTypes.shape({
+        /**
+         * 事件对应时间戳
+         */
+        time: PropTypes.number,
+        /**
+         * 事件携带数据
+         */
+        data: PropTypes.any,
+        /**
+         * 以页面整体左上角为原点，记录x坐标
+         */
+        pageX: PropTypes.number,
+        /**
+         * 以页面整体左上角为原点，记录y坐标
+         */
+        pageY: PropTypes.number,
+        /**
+         * 以浏览器窗口左上角为原点，记录x坐标
+         */
+        clientX: PropTypes.number,
+        /**
+         * 以浏览器窗口左上角为原点，记录y坐标
+         */
+        clientY: PropTypes.number,
+        /**
+         * 以屏幕左上角为原点，记录x坐标
+         */
+        screenX: PropTypes.number,
+        /**
+         * 以屏幕左上角为原点，记录y坐标
+         */
+        screenY: PropTypes.number,
+    }),
+
+    /**
+     * 监听放置事件监听目标容器是否正处于待放置鼠标悬停状态
+     */
+    isHovering: PropTypes.bool,
+
+    /**
+     * 监听最近一次正处于待放置鼠标悬停状态时的事件
+     */
+    hoverEvent: PropTypes.shape({
+        /**
+         * 事件对应时间戳
+         */
+        time: PropTypes.number,
+        /**
+         * 以页面整体左上角为原点，记录x坐标
+         */
+        pageX: PropTypes.number,
+        /**
+         * 以页面整体左上角为原点，记录y坐标
+         */
+        pageY: PropTypes.number,
+        /**
+         * 以浏览器窗口左上角为原点，记录x坐标
+         */
+        clientX: PropTypes.number,
+        /**
+         * 以浏览器窗口左上角为原点，记录y坐标
+         */
+        clientY: PropTypes.number,
+        /**
+         * 以屏幕左上角为原点，记录x坐标
+         */
+        screenX: PropTypes.number,
+        /**
+         * 以屏幕左上角为原点，记录y坐标
+         */
+        screenY: 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
+    })
+};
+
+// 设置默认参数
+FefferyListenDrop.defaultProps = {
+}
+
+export default FefferyListenDrop;