feffery_utils_components 0.1.21 → 0.1.22

package/feffery_utils_components/metadata.json

@@ -120,6 +120,13 @@
         "required": false,
         "description": ""
       },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
       "initial": {
         "type": {
           "name": "union",
@@ -1797,9 +1804,9 @@
       }
     }
   },
-  "src/lib/components/FefferyCssVar.react.js": {
+  "src/lib/components/FefferyCountUp.react.js": {
     "description": "",
-    "displayName": "FefferyCssVar",
+    "displayName": "FefferyCountUp",
     "methods": [],
     "props": {
       "id": {
@@ -1809,13 +1816,111 @@
         "required": false,
         "description": ""
       },
-      "cssVars": {
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "style": {
         "type": {
           "name": "object"
         },
         "required": false,
         "description": ""
       },
+      "key": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": ""
+      },
+      "end": {
+        "type": {
+          "name": "number"
+        },
+        "required": true,
+        "description": ""
+      },
+      "start": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
+      "duration": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "2",
+          "computed": false
+        }
+      },
+      "decimals": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
+      "enableScrollSpy": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
+      "scrollSpyDelay": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "0",
+          "computed": false
+        }
+      },
+      "scrollSpyOnce": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
+      "separator": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "",
+        "defaultValue": {
+          "value": "','",
+          "computed": false
+        }
+      },
       "loading_state": {
         "type": {
           "name": "shape",
@@ -1849,9 +1954,9 @@
       }
     }
   },
-  "src/lib/components/FefferyDiv.react.js": {
+  "src/lib/components/FefferyCssVar.react.js": {
     "description": "",
-    "displayName": "FefferyDiv",
+    "displayName": "FefferyCssVar",
     "methods": [],
     "props": {
       "id": {
@@ -1861,64 +1966,68 @@
         "required": false,
         "description": ""
       },
-      "key": {
+      "cssVars": {
         "type": {
-          "name": "string"
+          "name": "object"
         },
         "required": false,
         "description": ""
       },
-      "children": {
+      "loading_state": {
         "type": {
-          "name": "node"
+          "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": ""
       },
-      "appendChild": {
+      "setProps": {
         "type": {
-          "name": "node"
+          "name": "func"
         },
         "required": false,
-        "description": ""
-      },
-      "insertChild": {
+        "description": "Dash-assigned callback that should be called to report property changes\r\nto Dash, to make them available for callbacks."
+      }
+    }
+  },
+  "src/lib/components/FefferyDiv.react.js": {
+    "description": "",
+    "displayName": "FefferyDiv",
+    "methods": [],
+    "props": {
+      "id": {
         "type": {
-          "name": "exact",
-          "value": {
-            "index": {
-              "name": "number",
-              "required": false
-            },
-            "element": {
-              "name": "node",
-              "required": false
-            }
-          }
+          "name": "string"
         },
         "required": false,
         "description": ""
       },
-      "replaceChild": {
+      "key": {
         "type": {
-          "name": "exact",
-          "value": {
-            "index": {
-              "name": "number",
-              "required": false
-            },
-            "element": {
-              "name": "node",
-              "required": false
-            }
-          }
+          "name": "string"
         },
         "required": false,
         "description": ""
       },
-      "deleteChildIndex": {
+      "children": {
         "type": {
-          "name": "number"
+          "name": "node"
         },
         "required": false,
         "description": ""
@@ -2037,6 +2146,22 @@
               "name": "number",
               "required": false
             },
+            "clientX": {
+              "name": "number",
+              "required": false
+            },
+            "clientY": {
+              "name": "number",
+              "required": false
+            },
+            "screenX": {
+              "name": "number",
+              "required": false
+            },
+            "screenY": {
+              "name": "number",
+              "required": false
+            },
             "timestamp": {
               "name": "number",
               "required": false

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -44,6 +44,7 @@
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-copy-to-clipboard": "^5.0.4",
+    "react-countup": "^6.4.2",
     "react-device-detect": "^2.2.2",
     "react-flip-numbers": "^3.0.7",
     "react-grid-layout": "^1.3.4",
@@ -114,4 +115,4 @@
     "node": ">=8.11.0",
     "npm": ">=6.1.0"
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -44,6 +44,7 @@
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-copy-to-clipboard": "^5.0.4",
+    "react-countup": "^6.4.2",
     "react-device-detect": "^2.2.2",
     "react-flip-numbers": "^3.0.7",
     "react-grid-layout": "^1.3.4",
@@ -114,4 +115,4 @@
     "node": ">=8.11.0",
     "npm": ">=6.1.0"
   }
-}
+}

package/src/FefferyUtilsComponents.jl

@@ -3,7 +3,7 @@ module FefferyUtilsComponents
 using Dash
 
 const resources_path = realpath(joinpath( @__DIR__, "..", "deps"))
-const version = "0.1.21"
+const version = "0.1.22"
 
 include("jl/''_fefferyautoanimate.jl")
 include("jl/''_fefferymotion.jl")
@@ -19,6 +19,7 @@ include("jl/''_fefferygrid.jl")
 include("jl/''_fefferygriditem.jl")
 include("jl/''_fefferycaptcha.jl")
 include("jl/''_fefferycountdown.jl")
+include("jl/''_fefferycountup.jl")
 include("jl/''_fefferycssvar.jl")
 include("jl/''_fefferydiv.jl")
 include("jl/''_fefferyexecutejs.jl")
@@ -71,14 +72,14 @@ function __init__()
             [
                 DashBase.Resource(
     relative_package_path = "feffery_utils_components.min.js",
-    external_url = "https://unpkg.com/feffery_utils_components@0.1.21/feffery_utils_components/feffery_utils_components.min.js",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.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.1.21/feffery_utils_components/feffery_utils_components.min.js.map",
+    external_url = "https://unpkg.com/feffery_utils_components@0.1.22/feffery_utils_components/feffery_utils_components.min.js.map",
     dynamic = true,
     async = nothing,
     type = :js

package/src/jl/''_fefferycountup.jl

@@ -0,0 +1,34 @@
+# AUTO GENERATED FILE - DO NOT EDIT
+
+export ''_fefferycountup
+
+"""
+    ''_fefferycountup(;kwargs...)
+
+A FefferyCountUp component.
+
+Keyword arguments:
+- `id` (String; optional)
+- `className` (String; optional)
+- `decimals` (Real; optional)
+- `duration` (Real; optional)
+- `enableScrollSpy` (Bool; optional)
+- `end` (Real; required)
+- `key` (String; 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
+- `scrollSpyDelay` (Real; optional)
+- `scrollSpyOnce` (Bool; optional)
+- `separator` (String; optional)
+- `start` (Real; optional)
+- `style` (Dict; optional)
+"""
+function ''_fefferycountup(; kwargs...)
+        available_props = Symbol[:id, :className, :decimals, :duration, :enableScrollSpy, :key, :loading_state, :scrollSpyDelay, :scrollSpyOnce, :separator, :start, :style]
+        wild_props = Symbol[]
+        return Component("''_fefferycountup", "FefferyCountUp", "feffery_utils_components", available_props, wild_props; kwargs...)
+end
+

package/src/jl/''_fefferydiv.jl

@@ -15,22 +15,20 @@ Keyword arguments:
 - `id` (String; optional)
 - `_height` (Real; optional)
 - `_width` (Real; optional)
-- `appendChild` (a list of or a singular dash component, string or number; optional)
 - `className` (String | Dict; optional)
 - `clickAwayCount` (Real; optional)
-- `contextMenuEvent` (optional): . contextMenuEvent has the following type: lists containing elements 'pageX', 'pageY', 'timestamp'.
+- `contextMenuEvent` (optional): . contextMenuEvent has the following type: lists containing elements 'pageX', 'pageY', 'clientX', 'clientY', 'screenX', 'screenY', 'timestamp'.
 Those elements have the following types:
   - `pageX` (Real; optional)
   - `pageY` (Real; optional)
+  - `clientX` (Real; optional)
+  - `clientY` (Real; optional)
+  - `screenX` (Real; optional)
+  - `screenY` (Real; optional)
   - `timestamp` (Real; optional)
 - `debounceWait` (Real; optional)
-- `deleteChildIndex` (Real; optional)
 - `enableClickAway` (Bool; optional)
 - `enableListenContextMenu` (Bool; optional)
-- `insertChild` (optional): . insertChild has the following type: lists containing elements 'index', 'element'.
-Those elements have the following types:
-  - `index` (Real; optional)
-  - `element` (a list of or a singular dash component, string or number; optional)
 - `isHovering` (Bool; optional)
 - `key` (String; optional)
 - `loading_state` (optional): . loading_state has the following type: lists containing elements 'is_loading', 'prop_name', 'component_name'.
@@ -42,16 +40,12 @@ Those elements have the following types:
 - `mouseLeaveCount` (Real; optional)
 - `nClicks` (Real; optional)
 - `nDoubleClicks` (Real; optional)
-- `replaceChild` (optional): . replaceChild has the following type: lists containing elements 'index', 'element'.
-Those elements have the following types:
-  - `index` (Real; optional)
-  - `element` (a list of or a singular dash component, string or number; optional)
 - `scrollbar` (a value equal to: 'default', 'simple', 'hidden'; optional)
 - `shadow` (a value equal to: 'no-shadow', 'hover-shadow', 'always-shadow'; optional)
 - `style` (Dict; optional)
 """
 function ''_fefferydiv(; kwargs...)
-        available_props = Symbol[:children, :id, :_height, :_width, :appendChild, :className, :clickAwayCount, :contextMenuEvent, :debounceWait, :deleteChildIndex, :enableClickAway, :enableListenContextMenu, :insertChild, :isHovering, :key, :loading_state, :mouseEnterCount, :mouseLeaveCount, :nClicks, :nDoubleClicks, :replaceChild, :scrollbar, :shadow, :style]
+        available_props = Symbol[:children, :id, :_height, :_width, :className, :clickAwayCount, :contextMenuEvent, :debounceWait, :enableClickAway, :enableListenContextMenu, :isHovering, :key, :loading_state, :mouseEnterCount, :mouseLeaveCount, :nClicks, :nDoubleClicks, :scrollbar, :shadow, :style]
         wild_props = Symbol[]
         return Component("''_fefferydiv", "FefferyDiv", "feffery_utils_components", available_props, wild_props; kwargs...)
 end

package/src/jl/''_fefferymotion.jl

@@ -17,6 +17,7 @@ Keyword arguments:
 - `className` (String; optional)
 - `exit` (Dict | String; optional)
 - `initial` (Dict | Bool | String; optional)
+- `key` (String; 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
@@ -44,7 +45,7 @@ Those elements have the following types:
 - `whileTap` (Dict | String; optional)
 """
 function ''_fefferymotion(; kwargs...)
-        available_props = Symbol[:children, :id, :animate, :className, :exit, :initial, :loading_state, :style, :transition, :variants, :viewport, :whileHover, :whileInView, :whileTap]
+        available_props = Symbol[:children, :id, :animate, :className, :exit, :initial, :key, :loading_state, :style, :transition, :variants, :viewport, :whileHover, :whileInView, :whileTap]
         wild_props = Symbol[]
         return Component("''_fefferymotion", "FefferyMotion", "feffery_utils_components", available_props, wild_props; kwargs...)
 end

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

@@ -0,0 +1,116 @@
+import PropTypes from 'prop-types';
+import CountUp from 'react-countup';
+
+// 定义数字递增组件FefferyCountUp
+const FefferyCountUp = (props) => {
+    // 取得必要属性或参数
+    const {
+        id,
+        className,
+        style,
+        key,
+        end,
+        start,
+        duration,
+        decimals,
+        enableScrollSpy,
+        scrollSpyDelay,
+        scrollSpyOnce,
+        separator,
+        setProps,
+        loading_state
+    } = props;
+
+    return (
+        <CountUp
+            id={id}
+            className={className}
+            style={style}
+            key={key}
+            end={end}
+            start={start}
+            duration={duration}
+            decimals={decimals}
+            enableScrollSpy={enableScrollSpy}
+            scrollSpyDelay={scrollSpyDelay}
+            scrollSpyOnce={scrollSpyOnce}
+            separator={separator}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } />
+    );
+}
+
+
+// 定义参数或属性
+FefferyCountUp.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    className: PropTypes.string,
+
+    style: PropTypes.object,
+
+    key: PropTypes.string,
+
+    // 设置数字递增目标，必填
+    // 对此参数的更新会重新触发递增动画
+    end: PropTypes.number.isRequired,
+
+    // 设置数字递增起点，默认为0
+    // 对此参数的更新会重新触发递增动画
+    start: PropTypes.number,
+
+    // 设置数字递增动画耗时，单位：秒，默认为2
+    // 对此参数的更新会重新触发递增动画
+    duration: PropTypes.number,
+
+    // 设置小数精度，默认为0
+    decimals: PropTypes.number,
+
+    // 设置是否在当前元素进入视口后才开始执行递增动画，默认为true
+    enableScrollSpy: PropTypes.bool,
+
+    // 当enableScrollSpy为true时，设置当前元素进入视口后延时多久开始执行递增动画，单位：毫秒，默认为0
+    scrollSpyDelay: PropTypes.number,
+
+    // 设置是否仅进行一次视口出现后启用动画行为，默认为true
+    scrollSpyOnce: PropTypes.bool,
+
+    // 设置自定义千分符，默认为','
+    separator: PropTypes.string,
+
+    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
+    }),
+
+    /**
+     * Dash-assigned callback that should be called to report property changes
+     * to Dash, to make them available for callbacks.
+     */
+    setProps: PropTypes.func,
+};
+
+// 设置默认参数
+FefferyCountUp.defaultProps = {
+    start: 0,
+    duration: 2,
+    decimals: 0,
+    enableScrollSpy: true,
+    scrollSpyDelay: 0,
+    scrollSpyOnce: true,
+    separator: ','
+}
+
+export default FefferyCountUp;

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

@@ -74,10 +74,6 @@ const FefferyDiv = (props) => {
         enableListenContextMenu,
         debounceWait,
         clickAwayCount,
-        appendChild,
-        insertChild,
-        replaceChild,
-        deleteChildIndex,
         shadow,
         scrollbar,
         enableClickAway,
@@ -89,46 +85,6 @@ const FefferyDiv = (props) => {
     const size = useSize(ref);
     const _isHovering = useHover(ref);
 
-    // 快捷children数组增删操作
-    useEffect(() => {
-        if (children && appendChild) {
-            setProps({
-                children: children.concat(appendChild),
-                appendChild: null // 重置
-            })
-        }
-    }, [appendChild])
-
-    useEffect(() => {
-        if (children && insertChild && insertChild.index && insertChild.element) {
-            setProps({
-                children: children.slice(0, insertChild.index)
-                    .concat([insertChild.element])
-                    .concat(children.slice(insertChild.index)),
-                insertChild: null // 重置
-            })
-        }
-    }, [insertChild])
-
-    useEffect(() => {
-        if (children && replaceChild && replaceChild.index && replaceChild.element) {
-            children[replaceChild.index] = replaceChild.element
-            setProps({
-                children: children,
-                replaceChild: null // 重置
-            })
-        }
-    }, [replaceChild])
-
-    useEffect(() => {
-        if (children && (deleteChildIndex || deleteChildIndex === 0)) {
-            setProps({
-                children: children.filter((_, i) => i !== deleteChildIndex),
-                deleteChildIndex: null // 重置
-            })
-        }
-    }, [deleteChildIndex])
-
     // 防抖更新容器尺寸
     const { run: updateWidthHeight } = useRequest(
         (e) => {
@@ -259,29 +215,6 @@ FefferyDiv.propTypes = {
 
     children: PropTypes.node,
 
-    // 快捷children数组增删参数，在有效值传入促使组件更新后会自动重置为undefined
-    // 用于快捷向children数组末尾追加新元素
-    appendChild: PropTypes.node,
-
-    // 用于快捷在原children数组第index个位置插入新元素
-    insertChild: PropTypes.exact({
-        // 要插入的位序
-        index: PropTypes.number,
-        // 要插入的元素
-        element: PropTypes.node
-    }),
-
-    // 用于快捷对children数组第index个位置的元素进行替换
-    replaceChild: PropTypes.exact({
-        // 要替换元素的位序
-        index: PropTypes.number,
-        // 要替换的新元素
-        element: PropTypes.node
-    }),
-
-    // 用于快捷删除原children第index个位置的元素
-    deleteChildIndex: PropTypes.number,
-
     style: PropTypes.object,
 
     className: PropTypes.oneOfType([
@@ -316,10 +249,18 @@ FefferyDiv.propTypes = {
 
     // 监听右键事件
     contextMenuEvent: PropTypes.exact({
-        // 在页面中的x坐标
+        // 以页面整体左上角为原点，记录x坐标
         pageX: PropTypes.number,
-        // 在页面中的y坐标
+        // 以页面整体左上角为原点，记录y坐标
         pageY: PropTypes.number,
+        // 以浏览器窗口左上角为原点，记录x坐标
+        clientX: PropTypes.number,
+        // 以浏览器窗口左上角为原点，记录y坐标
+        clientY: PropTypes.number,
+        // 以屏幕左上角为原点，记录x坐标
+        screenX: PropTypes.number,
+        // 以屏幕左上角为原点，记录y坐标
+        screenY: PropTypes.number,
         // 点击事件对应的时间戳
         timestamp: PropTypes.number
     }),