feffery_utils_components 0.0.20 → 0.0.22

package/feffery_utils_components/metadata.json

@@ -844,6 +844,13 @@
         "required": false,
         "description": ""
       },
+      "refresh": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": ""
+      },
       "loading_state": {
         "type": {
           "name": "shape",
@@ -877,6 +884,76 @@
       }
     }
   },
+  "src/lib/components/FefferyCountDown.react.js": {
+    "description": "",
+    "displayName": "FefferyCountDown",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "delay": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": ""
+      },
+      "interval": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "1",
+          "computed": false
+        }
+      },
+      "countdown": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": ""
+      },
+      "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/FefferyExecuteJs.react.js": {
     "description": "",
     "displayName": "FefferyExecuteJs",
@@ -2539,6 +2616,69 @@
       }
     }
   },
+  "src/lib/components/FefferyTimeout.react.js": {
+    "description": "",
+    "displayName": "FefferyTimeout",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "timeoutCount": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
+      "delay": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": ""
+      },
+      "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/FefferyTopProgress.react.js": {
     "description": "",
     "displayName": "FefferyTopProgress",
@@ -2846,7 +2986,7 @@
           "computed": false
         }
       },
-      "mouseEnterCounts": {
+      "mouseEnterCount": {
         "type": {
           "name": "number"
         },
@@ -2857,7 +2997,7 @@
           "computed": false
         }
       },
-      "mouseLeaveCounts": {
+      "mouseLeaveCount": {
         "type": {
           "name": "number"
         },
@@ -2929,6 +3069,17 @@
         "required": false,
         "description": ""
       },
+      "clickAwayCount": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
       "setProps": {
         "type": {
           "name": "func"
@@ -3205,6 +3356,69 @@
       }
     }
   },
+  "src/lib/components/listeners/FefferyKeyPress.react.js": {
+    "description": "",
+    "displayName": "FefferyKeyPress",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "keys": {
+        "type": {
+          "name": "string"
+        },
+        "required": true,
+        "description": ""
+      },
+      "pressedTimes": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
+      "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/FefferyResponsive.react.js": {
     "description": "",
     "displayName": "FefferyResponsive",

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",

package/src/FefferyUtilsComponents.jl

@@ -3,7 +3,7 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.0.20"
+const version = "0.0.22"
 
 include("jl/''_fefferyblockcolorpicker.jl")
 include("jl/''_fefferycirclecolorpicker.jl")
@@ -15,6 +15,7 @@ include("jl/''_fefferywheelcolorpicker.jl")
 include("jl/''_fefferyexternalcss.jl")
 include("jl/''_fefferysettitle.jl")
 include("jl/''_fefferycaptcha.jl")
+include("jl/''_fefferycountdown.jl")
 include("jl/''_fefferyexecutejs.jl")
 include("jl/''_fefferyextraspinner.jl")
 include("jl/''_fefferyguide.jl")
@@ -25,6 +26,7 @@ include("jl/''_fefferyscroll.jl")
 include("jl/''_fefferyscrollbars.jl")
 include("jl/''_fefferyshortcutpanel.jl")
 include("jl/''_fefferysyntaxhighlighter.jl")
+include("jl/''_fefferytimeout.jl")
 include("jl/''_fefferytopprogress.jl")
 include("jl/''_fefferyvirtuallist.jl")
 include("jl/''_fefferydiv.jl")
@@ -32,6 +34,7 @@ include("jl/''_fefferydocumentvisibility.jl")
 include("jl/''_fefferygeolocation.jl")
 include("jl/''_fefferyidle.jl")
 include("jl/''_fefferyinviewport.jl")
+include("jl/''_fefferykeypress.jl")
 include("jl/''_fefferyresponsive.jl")
 include("jl/''_fefferywindowsize.jl")
 include("jl/''_fefferysplit.jl")
@@ -46,14 +49,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.20/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.22/feffery_utils_components/feffery_utils_components.min.js",
     dynamic = nothing,
     async = nothing,
     type = :js
 ),
 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js.map",
-    external_url = "https://unpkg.com/feffery_utils_components@0.0.20/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.0.22/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferycaptcha.jl

@@ -20,11 +20,12 @@ Those elements have the following types:
   - `is_loading` (Bool; optional): Determines if the component is loading or not
   - `prop_name` (String; optional): Holds which property is loading
   - `component_name` (String; optional): Holds the name of the component that is loading
+- `refresh` (Bool; optional)
 - `style` (Dict; optional)
 - `width` (Real; optional)
 """
 function ''_fefferycaptcha(; kwargs...)
-        available_props = Symbol[:id, :bgColor, :captcha, :charNum, :className, :fontSize, :height, :loading_state, :style, :width]
+        available_props = Symbol[:id, :bgColor, :captcha, :charNum, :className, :fontSize, :height, :loading_state, :refresh, :style, :width]
         wild_props = Symbol[]
         return Component("''_fefferycaptcha", "FefferyCaptcha", "feffery_utils_components", available_props, wild_props; kwargs...)
 end

package/src/jl/''_fefferycountdown.jl

@@ -0,0 +1,26 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferycountdown
+
+"""
+    ''_fefferycountdown(;kwargs...)
+
+A FefferyCountDown component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `countdown` (Real; optional)
+- `delay` (Real; optional)
+- `interval` (Real; optional)
+- `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
+Those elements have the following types:
+  - `is_loading` (Bool; optional): Determines if the component is loading or not
+  - `prop_name` (String; optional): Holds which property is loading
+  - `component_name` (String; optional): Holds the name of the component that is loading
+"""
+function ''_fefferycountdown(; kwargs...)
+        available_props = Symbol[:id, :countdown, :delay, :interval, :loading_state]
+        wild_props = Symbol[]
+        return Component("''_fefferycountdown", "FefferyCountDown", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/jl/''_fefferydiv.jl

@@ -16,6 +16,7 @@ Keyword arguments:
 - `_height` (Real; optional)
 - `_width` (Real; optional)
 - `className` (String; optional)
+- `clickAwayCount` (Real; optional)
 - `contextMenuEvent` (optional): . contextMenuEvent has the following type: lists containing elements 'pageX', 'pageY', 'timestamp'.
 Those elements have the following types:
   - `pageX` (Real; optional)
@@ -29,14 +30,14 @@ Those elements have the following types:
   - `is_loading` (Bool; optional): Determines if the component is loading or not
   - `prop_name` (String; optional): Holds which property is loading
   - `component_name` (String; optional): Holds the name of the component that is loading
-- `mouseEnterCounts` (Real; optional)
-- `mouseLeaveCounts` (Real; optional)
+- `mouseEnterCount` (Real; optional)
+- `mouseLeaveCount` (Real; optional)
 - `nClicks` (Real; optional)
 - `nDoubleClicks` (Real; optional)
 - `style` (Dict; optional)
 """
 function ''_fefferydiv(; kwargs...)
-        available_props = Symbol[:children, :id, :_height, :_width, :className, :contextMenuEvent, :debounceWait, :enableListenContextMenu, :isHovering, :loading_state, :mouseEnterCounts, :mouseLeaveCounts, :nClicks, :nDoubleClicks, :style]
+        available_props = Symbol[:children, :id, :_height, :_width, :className, :clickAwayCount, :contextMenuEvent, :debounceWait, :enableListenContextMenu, :isHovering, :loading_state, :mouseEnterCount, :mouseLeaveCount, :nClicks, :nDoubleClicks, :style]
         wild_props = Symbol[]
         return Component("''_fefferydiv", "FefferyDiv", "feffery_utils_components", available_props, wild_props; kwargs...)
 end

package/src/jl/''_fefferykeypress.jl

@@ -0,0 +1,25 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferykeypress
+
+"""
+    ''_fefferykeypress(;kwargs...)
+
+A FefferyKeyPress component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `keys` (String; required)
+- `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
+Those elements have the following types:
+  - `is_loading` (Bool; optional): Determines if the component is loading or not
+  - `prop_name` (String; optional): Holds which property is loading
+  - `component_name` (String; optional): Holds the name of the component that is loading
+- `pressedTimes` (Real; optional)
+"""
+function ''_fefferykeypress(; kwargs...)
+        available_props = Symbol[:id, :keys, :loading_state, :pressedTimes]
+        wild_props = Symbol[]
+        return Component("''_fefferykeypress", "FefferyKeyPress", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/jl/''_fefferytimeout.jl

@@ -0,0 +1,25 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferytimeout
+
+"""
+    ''_fefferytimeout(;kwargs...)
+
+A FefferyTimeout component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `delay` (Real; optional)
+- `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
+Those elements have the following types:
+  - `is_loading` (Bool; optional): Determines if the component is loading or not
+  - `prop_name` (String; optional): Holds which property is loading
+  - `component_name` (String; optional): Holds the name of the component that is loading
+- `timeoutCount` (Real; optional)
+"""
+function ''_fefferytimeout(; kwargs...)
+        available_props = Symbol[:id, :delay, :loading_state, :timeoutCount]
+        wild_props = Symbol[]
+        return Component("''_fefferytimeout", "FefferyTimeout", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import Captcha from 'react-captcha-code';
 
@@ -15,6 +15,7 @@ const FefferyCaptcha = (props) => {
         width,
         bgColor,
         fontSize,
+        refresh,
         setProps,
         loading_state
     } = props;
@@ -24,6 +25,14 @@ const FefferyCaptcha = (props) => {
         setProps({ captcha: captcha })
     }, []);
 
+    // 当refresh变化为true时强制刷新验证码
+    useEffect(() => {
+        if (refresh && captchaRef.current) {
+            captchaRef.current.refresh()
+            setProps({ refresh: false })
+        }
+    }, [refresh])
+
     const captchaRef = useRef(< HTMLCanvasElement />);
 
     return (
@@ -72,6 +81,9 @@ FefferyCaptcha.propTypes = {
     // 设置验证码字体像素大小，默认为25
     fontSize: PropTypes.number,
 
+    // 用于手动刷新验证码，当传入true时会强制刷新验证码，再自动重置为false
+    refresh: PropTypes.bool,
+
     loading_state: PropTypes.shape({
         /**
          * Determines if the component is loading or not
@@ -99,4 +111,4 @@ FefferyCaptcha.defaultProps = {
     charNum: 4
 }
 
-export default FefferyCaptcha;
+export default React.memo(FefferyCaptcha);

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

@@ -0,0 +1,92 @@
+import { useEffect, useState } from 'react';
+import { useCountDown } from 'ahooks';
+import PropTypes from 'prop-types';
+
+// 定义倒计时执行组件FefferyCountDown
+const FefferyCountDown = (props) => {
+
+    const {
+        id,
+        delay,
+        interval,
+        setProps,
+        loading_state
+    } = props;
+
+    const [targetDate, setTargetDate] = useState(null);
+
+    useEffect(() => {
+        if (delay) {
+            setTargetDate(Date.now() + 1000 * delay)
+        }
+    }, [delay])
+
+    const [_countdown] = useCountDown({
+        targetDate: targetDate,
+        interval: interval * 1000,
+        onEnd: () => {
+            setProps({
+                delay: undefined,
+                countdown: 0
+            })
+        }
+    });
+
+    useEffect(() => {
+        if (_countdown && delay) {
+            setProps({
+                countdown: Math.round(_countdown / 1000)
+            })
+        }
+    }, [_countdown])
+
+    return (<div
+        id={id}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />);
+}
+
+// 定义参数或属性
+FefferyCountDown.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 用于设置距离下一次超时事件触发的倒计时间隔（单位：秒）
+    // 每次有效的delay对应超时事件结束后都会被重置为undefined
+    delay: PropTypes.number,
+
+    // 设置倒计时时间间隔（单位：秒），默认为1
+    interval: PropTypes.number,
+
+    // 监听当前剩余时间秒数，默认为0
+    countdown: 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
+    })
+};
+
+// 设置默认参数
+FefferyCountDown.defaultProps = {
+    interval: 1
+}
+
+export default React.memo(FefferyCountDown);

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

@@ -0,0 +1,68 @@
+import { useTimeout } from 'ahooks';
+import PropTypes from 'prop-types';
+
+// 定义定时执行组件FefferyTimeout
+const FefferyTimeout = (props) => {
+
+    const {
+        id,
+        delay,
+        timeoutCount,
+        setProps,
+        loading_state
+    } = props;
+
+    useTimeout(() => {
+        setProps({
+            timeoutCount: timeoutCount + 1,
+            delay: undefined
+        });
+    }, delay);
+
+    return (<div
+        id={id}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />);
+}
+
+// 定义参数或属性
+FefferyTimeout.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 监听超时事件完成次数，默认为0
+    timeoutCount: PropTypes.number,
+
+    // 用于设置距离下一次超时事件触发的倒计时间隔（单位：毫秒）
+    // 每次有效的delay对应超时事件结束后都会被重置为undefined
+    delay: 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
+    })
+};
+
+// 设置默认参数
+FefferyTimeout.defaultProps = {
+    timeoutCount: 0
+}
+
+export default React.memo(FefferyTimeout);