feffery_utils_components 0.2.0-rc8 → 0.2.0-rc9

package/feffery_utils_components/metadata.json

@@ -5262,6 +5262,31 @@
         "required": false,
         "description": "\u8bbe\u7f6e\u5f53\u524d\u7ec4\u4ef6\u5c3a\u5bf8\u8c03\u6574\u53ca\u62d6\u62fd\u7684\u5916\u8fb9\u754c\u7c7b\u578b\uff0c\u53ef\u9009\u7684\u6709'window'\u3001'parent'\r\n\u9ed8\u8ba4\u4e3a'window'"
       },
+      "selected": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u6216\u76d1\u542c\u5f53\u524d\u7ec4\u4ef6\u662f\u5426\u5904\u4e8e\u9009\u62e9\u72b6\u6001\r\n\u9ed8\u8ba4\uff1afalse",
+        "defaultValue": {
+          "value": "false",
+          "computed": false
+        }
+      },
+      "selectedStyle": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u5f53\u524d\u7ec4\u4ef6\u5728\u9009\u4e2d\u72b6\u6001\u4e0b\u7684css\u6837\u5f0f"
+      },
+      "selectedClassName": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u914d\u7f6e\u5f53\u524d\u7ec4\u4ef6\u5728\u9009\u4e2d\u72b6\u6001\u4e0b\u7684css\u7c7b\u540d"
+      },
       "setProps": {
         "type": {
           "name": "func"
@@ -7123,7 +7148,7 @@
     }
   },
   "src/lib/components/FefferyExecuteJs.react.js": {
-    "description": "",
+    "description": "js\u76f4\u63a5\u6267\u884c\u7ec4\u4ef6FefferyExecuteJs",
     "displayName": "FefferyExecuteJs",
     "methods": [],
     "props": {
@@ -7141,6 +7166,63 @@
         "required": false,
         "description": "\u8bbe\u7f6e\u8981\u6267\u884c\u7684js\u4ee3\u7801\u5b57\u7b26\u4e32"
       },
+      "mode": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'default'",
+              "computed": false
+            },
+            {
+              "value": "'delay'",
+              "computed": false
+            },
+            {
+              "value": "'interval'",
+              "computed": false
+            },
+            {
+              "value": "'wait-until-element-rendered'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "\u8bbe\u7f6e\u6267\u884c\u6a21\u5f0f\uff0c\u53ef\u9009\u7684\u6709'default'\uff08\u7acb\u5373\u6267\u884c\uff09\u3001'delay'\uff08\u5ef6\u8fdf\u6267\u884c\uff09\u3001'interval'\uff08\u5b9a\u65f6\u8f6e\u8be2\u6267\u884c\uff09\u3001'wait-until-element-rendered'\uff08\u7b49\u5f85\u76ee\u6807\u5143\u7d20\u6e32\u67d3\u540e\u6267\u884c\uff09\r\n\u9ed8\u8ba4\uff1a'default'",
+        "defaultValue": {
+          "value": "'default'",
+          "computed": false
+        }
+      },
+      "delay": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "delay\u6a21\u5f0f\u4e0b\uff0c\u8bbe\u7f6e\u5ef6\u65f6\u6267\u884c\u65f6\u957f\uff0c\u5355\u4f4d\uff1a\u6beb\u79d2"
+      },
+      "interval": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "interval\u6a21\u5f0f\u4e0b\uff0c\u8bbe\u7f6e\u8f6e\u8be2\u6267\u884c\u95f4\u9694\u65f6\u957f\uff0c\u5355\u4f4d\uff1a\u6beb\u79d2"
+      },
+      "targetSelector": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "wait-until-element-rendered\u6a21\u5f0f\u4e0b\uff0c\u8bbe\u7f6e\u9700\u8981\u7b49\u5f85\u6e32\u67d3\u5b8c\u6210\u7684\u76ee\u6807\u5143\u7d20css\u9009\u62e9\u5668"
+      },
+      "targetWaitTimeout": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "wait-until-element-rendered\u6a21\u5f0f\u4e0b\uff0c\u8bbe\u7f6e\u76ee\u6807\u5143\u7d20\u6e32\u67d3\u68c0\u6d4b\u6700\u5927\u7b49\u5f85\u65f6\u957f\uff0c\u5355\u4f4d\uff1a\u6beb\u79d2\uff0c\u9ed8\u8ba4\u65e0\u9650\u5236"
+      },
       "loading_state": {
         "type": {
           "name": "shape",

package/feffery_utils_components/package-info.json

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

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

@@ -1,25 +1,99 @@
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-// 定义js直接执行部件FefferyExecuteJs
+/**
+ * js直接执行组件FefferyExecuteJs
+ */
 const FefferyExecuteJs = (props) => {
     // 取得必要属性或参数
     const {
-        id,
         jsString,
+        mode,
+        delay,
+        interval,
+        targetSelector,
+        targetWaitTimeout,
         setProps,
         loading_state
     } = props;
 
     useEffect(() => {
-        // 执行原生js程序
-        if (jsString) {
-            try { eval(jsString) }
-            catch (exception) { console.log(exception) }
-            // 清空jsString
-            setProps({
-                jsString: ''
-            })
+        // delay模式
+        if (mode === 'delay') {
+            // 延时执行原生js程序
+            if (jsString) {
+                setTimeout(
+                    () => {
+                        try { eval(jsString) }
+                        catch (exception) { console.error(exception) }
+                        // 重置jsString
+                        setProps({
+                            jsString: null
+                        })
+                    },
+                    delay
+                )
+            }
+        } else if (mode === 'interval') {
+            // 定时执行原生js程序
+            if (jsString) {
+                // 创建轮询器
+                const _interval = setInterval(
+                    () => {
+                        try { eval(jsString) }
+                        catch (exception) { console.error(exception) }
+                    },
+                    interval
+                )
+                // jsString更新或组件卸载时，销毁轮询器
+                return () => clearInterval(_interval);
+            }
+        } else if (mode === 'wait-until-element-rendered') {
+            // 等待目标元素渲染后执行
+            if (jsString) {
+                // 记录逻辑开始时间戳
+                const startTime = Date.now()
+
+                // 创建定时器
+                let _interval = setInterval(
+                    () => {
+                        // 若目标元素出现
+                        if (document.querySelector(targetSelector)) {
+                            clearInterval(_interval)
+                            _interval = false;
+                            try { eval(jsString) }
+                            catch (exception) { console.error(exception) }
+                            // 重置jsString
+                            setProps({
+                                jsString: null
+                            })
+                        }
+                        // 若距离startTime时长超出targetWaitTimeout限制，则强制终止轮询检查过程
+                        if (targetWaitTimeout && Date.now() - startTime > targetWaitTimeout) {
+                            clearInterval(_interval)
+                            _interval = false;
+                            // 重置jsString
+                            setProps({
+                                jsString: null
+                            })
+                        }
+                    },
+                    200 // 默认200毫秒检测一次目标元素出现情况
+                )
+
+                // 若jsString更新或组件卸载时，轮询器仍然未被清除，则进行清除
+                return () => !_interval && clearInterval(_interval)
+            }
+        } else {
+            // 执行原生js程序
+            if (jsString) {
+                try { eval(jsString) }
+                catch (exception) { console.error(exception) }
+                // 重置jsString
+                setProps({
+                    jsString: null
+                })
+            }
         }
     }, [jsString])
 
@@ -39,6 +113,32 @@ FefferyExecuteJs.propTypes = {
      */
     jsString: PropTypes.string,
 
+    /**
+     * 设置执行模式，可选的有'default'（立即执行）、'delay'（延迟执行）、'interval'（定时轮询执行）、'wait-until-element-rendered'（等待目标元素渲染后执行）
+     * 默认：'default'
+     */
+    mode: PropTypes.oneOf(['default', 'delay', 'interval', 'wait-until-element-rendered']),
+
+    /**
+     * delay模式下，设置延时执行时长，单位：毫秒
+     */
+    delay: PropTypes.number,
+
+    /**
+     * interval模式下，设置轮询执行间隔时长，单位：毫秒
+     */
+    interval: PropTypes.number,
+
+    /**
+     * wait-until-element-rendered模式下，设置需要等待渲染完成的目标元素css选择器
+     */
+    targetSelector: PropTypes.string,
+
+    /**
+     * wait-until-element-rendered模式下，设置目标元素渲染检测最大等待时长，单位：毫秒，默认无限制
+     */
+    targetWaitTimeout: PropTypes.number,
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not
@@ -63,6 +163,7 @@ FefferyExecuteJs.propTypes = {
 
 // 设置默认参数
 FefferyExecuteJs.defaultProps = {
+    mode: 'default'
 }
 
 export default FefferyExecuteJs;

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

@@ -191,6 +191,22 @@ FefferyRND.propTypes = {
      */
     bounds: PropTypes.oneOf(['window', 'parent']),
 
+    /**
+     * 设置或监听当前组件是否处于选择状态
+     * 默认：false
+     */
+    selected: PropTypes.bool,
+
+    /**
+     * 设置当前组件在选中状态下的css样式
+     */
+    selectedStyle: PropTypes.object,
+
+    /**
+     * 配置当前组件在选中状态下的css类名
+     */
+    selectedClassName: PropTypes.string,
+
     /**
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.
@@ -215,7 +231,8 @@ FefferyRND.propTypes = {
 
 // 设置默认参数
 FefferyRND.defaultProps = {
-    direction: ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft']
+    direction: ['top', 'right', 'bottom', 'left', 'topRight', 'bottomRight', 'bottomLeft', 'topLeft'],
+    selected: false
 }
 
 export default FefferyRND;

package/src/lib/fragments/draggable/FefferyRND.react.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { Rnd } from 'react-rnd';
 import { propTypes, defaultProps } from '../../components/draggable/FefferyRND.react';
 import { clone } from 'lodash';
@@ -28,10 +28,16 @@ const FefferyRND = (props) => {
         disableDragging,
         dragAxis,
         bounds,
+        selected,
+        selectedStyle,
+        selectedClassName,
         setProps,
         loading_state
     } = props;
 
+    // 记录拖拽或尺寸调整结束事件时间戳
+    const [dragOrResizeStopTimestamp, setDragOrResizeStopTimestamp] = useState(0);
+
     useEffect(() => {
         // size缺省且defaultState.width，defaultState.height有效时，进行赋值
         if (!size && defaultState.width && defaultState.height) {
@@ -74,8 +80,8 @@ const FefferyRND = (props) => {
 
     return (
         <Rnd id={id}
-            style={style}
-            className={className}
+            style={{ ...style, ...(selected ? selectedStyle : {}) }}
+            className={(selected && selectedClassName) ? className + ' ' + selectedClassName : className}
             default={defaultState}
             size={size}
             position={position}
@@ -92,8 +98,15 @@ const FefferyRND = (props) => {
             disableDragging={disableDragging}
             dragAxis={dragAxis}
             bounds={bounds}
-            onDragStop={(e, d) => setProps({ position: { x: d.x, y: d.y } })}
+            onDragStop={(e, d) => {
+                // 若本次拖拽事件导致了有效偏移，则更新拖拽结束事件时间戳
+                if (position && (position.x !== d.x || position.y !== d.y)) {
+                    setDragOrResizeStopTimestamp(new Date().getTime());
+                }
+                setProps({ position: { x: d.x, y: d.y } })
+            }}
             onResizeStop={(e, direction, ref, delta, p) => {
+                setDragOrResizeStopTimestamp(new Date().getTime());
                 setProps({
                     size: {
                         width: ref.style.width,
@@ -105,6 +118,13 @@ const FefferyRND = (props) => {
                     }
                 })
             }}
+            onClick={() => {
+                // 若距离最近一次拖拽结束事件时间戳大于200ms，则切换选中状态
+                // 从而避免拖拽导致的选中误操作
+                if (new Date().getTime() - dragOrResizeStopTimestamp >= 200) {
+                    setProps({ selected: !selected })
+                }
+            }}
             data-dash-is-loading={
                 (loading_state && loading_state.is_loading) || undefined
             }>

package/usage.py

@@ -1,33 +1,63 @@
 import dash
+import json
 from dash import html
 import feffery_utils_components as fuc
+from dash.dependencies import Input, Output
 
-app = dash.Dash(__name__, compress=True)
+app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
-        fuc.FefferyAnimatedImage(
-            src="https://shoelace.style/assets/images/walk.gif",
-            alt="Animation of untied shoes walking on pavement",
-            play=True,
-            style={
-                'width': 300
-            }
+        # wait-until-element-rendered模式示例
+        html.Button(
+            'wait-until-element-rendered模式',
+            id='execute-js'
         ),
-        fuc.FefferyAnimatedImage(
-            src="https://shoelace.style/assets/images/tie.webp",
-            alt="Animation of a shoe being tied",
-            play=True,
-            style={
-                'width': 300
-            }
+        # 控制目标元素渲染
+        html.Button(
+            '渲染目标元素',
+            id='render-target-element'
+        ),
+        html.Div(
+            id='execute-js-output'
+        ),
+        html.Div(
+            id='target-element-container'
         )
     ],
     style={
-        'padding': '50px 100px'
+        'padding': '50px 50px 0 50px'
     }
 )
 
 
+@app.callback(
+    Output('target-element-container', 'children'),
+    Input('render-target-element', 'n_clicks'),
+    prevent_initial_call=True
+)
+def render_target_element(n_clicks):
+
+    return html.Span(
+        '我来也！',
+        id='target-element'
+    )
+
+
+@app.callback(
+    Output('execute-js-output', 'children'),
+    Input('execute-js', 'n_clicks'),
+    prevent_initial_call=True
+)
+def handle_execute_js(n_clicks):
+
+    return fuc.FefferyExecuteJs(
+        jsString="alert('目标元素出现！')",
+        mode='wait-until-element-rendered',
+        targetSelector='#target-element',
+        targetWaitTimeout=5000  # 至多等待5秒
+    )
+
+
 if __name__ == '__main__':
     app.run(debug=True)