feffery_utils_components 0.1.21 → 0.1.23

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
     }),

package/src/lib/components/animations/FefferyMotion.react.js

@@ -20,6 +20,7 @@ const FefferyMotion = (props) => {
         children,
         style,
         className,
+        key,
         initial,
         animate,
         exit,
@@ -47,6 +48,7 @@ const FefferyMotion = (props) => {
                     (className ? useCss(className) : undefined)
             }
             style={style}
+            key={key}
             initial={initial}
             animate={animate}
             exit={exit}
@@ -78,6 +80,8 @@ FefferyMotion.propTypes = {
     // css类名
     className: PropTypes.string,
 
+    key: PropTypes.string,
+
     // 设置当前组件初始化时的样式
     initial: PropTypes.oneOfType([
         PropTypes.object,

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

@@ -0,0 +1,68 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+// 定义页面关闭监听组件FefferyListenUnload
+const FefferyListenUnload = (props) => {
+
+    let {
+        id,
+        setProps,
+        loading_state
+    } = props;
+
+    useEffect(() => {
+        const handleTabClose = (e) => {
+            setProps({
+                unloaded: true
+            })
+        };
+
+        window.addEventListener('beforeunload', handleTabClose);
+
+        return () => {
+            window.removeEventListener('beforeunload', handleTabClose);
+        };
+    }, []);
+
+    return (<div
+        id={id}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />);
+}
+
+// 定义参数或属性
+FefferyListenUnload.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 每次页面关闭时会触发更新为true
+    unloaded: 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
+    })
+};
+
+// 设置默认参数
+FefferyListenUnload.defaultProps = {
+}
+
+export default FefferyListenUnload;

package/src/lib/index.js

@@ -55,6 +55,8 @@ import FefferyFullscreen from "./components/FefferyFullscreen.react";
 import FefferyDeviceDetect from "./components/listeners/FefferyDeviceDetect.react";
 import FefferyMotion from "./components/animations/FefferyMotion.react";
 import FefferyAutoAnimate from "./components/animations/FefferyAutoAnimate.react";
+import FefferyCountUp from "./components/FefferyCountUp.react";
+import FefferyListenUnload from "./components/listeners/FefferyListenUnload.react";
 
 /* 
 忽略部分设计React中规范的console警告信息
@@ -144,5 +146,7 @@ export {
     FefferyFullscreen,
     FefferyDeviceDetect,
     FefferyMotion,
-    FefferyAutoAnimate
+    FefferyAutoAnimate,
+    FefferyCountUp,
+    FefferyListenUnload
 };

package/usage.py

@@ -1,119 +1,37 @@
 import dash
-import time
-from datetime import datetime
-from dash import html, dcc
+from dash import html
 import feffery_utils_components as fuc
 from dash.dependencies import Input, Output, State
 
-app = dash.Dash(__name__)
+app = dash.Dash(
+    __name__,
+    suppress_callback_exceptions=True
+)
 
 app.layout = html.Div(
     [
-        fuc.FefferyShortcutPanel(
-            id='shortcut-panel-demo',
-            openHotkey='cmd+h,ctrl+h',
-            data=[
-                {
-                    'id': '指令1',
-                    'title': '指令1',
-                    'handler': '() => alert("指令1触发")',
-                    'section': '模拟js指令'
-                },
-                {
-                    'id': '指令2',
-                    'title': '指令2',
-                    'handler': '() => alert("指令2触发")',
-                    'section': '模拟js指令'
-                },
-                {
-                    'id': '跳转到首页',
-                    'title': '跳转到首页',
-                    'handler': '''() => {
-                window.location = "/"
-            }''',
-                    'section': '模拟js指令'
-                },
-                {
-                    'id': '指令3',
-                    'title': '指令3',
-                    'children': ['指令3-1', '指令3-2'],
-                    'section': '多层指令菜单项'
-                },
-                {
-                    'id': '指令3-1',
-                    'title': '指令3-1',
-                    'parent': '指令3'
-                },
-                {
-                    'id': '指令3-2',
-                    'title': '指令3-2',
-                    'parent': '指令3'
-                }
-            ]
+        fuc.FefferyListenUnload(
+            id='listen-unload'
+        ),
+        html.Div(
+            id='output-demo'
         )
     ],
     style={
-        'padding': '50px'
+        'padding': '50px 100px'
     }
 )
 
 
 @app.callback(
-    Output('shortcut-panel-demo', 'data'),
-    Input('shortcut-panel-demo', 'searchValue'),
-    prevent_initial_call=True
+    Output('output-demo', 'children'),
+    Input('listen-unload', 'unloaded')
 )
-def demo(searchValue):
+def demo(unloaded):
 
-    if searchValue:
-        return [
-            {
-                'id': f'指令{searchValue}{i}',
-                'title': f'指令{searchValue}{i}',
-                'handler': f'() => alert("指令{searchValue}{i}触发")',
-                'section': '搜索结果'
-            }
-            for i in range(100)
-        ]
+    if unloaded:
 
-    return [
-        {
-            'id': '指令1',
-            'title': '指令1',
-            'handler': '() => alert("指令1触发")',
-            'section': '模拟js指令'
-        },
-        {
-            'id': '指令2',
-            'title': '指令2',
-            'handler': '() => alert("指令2触发")',
-            'section': '模拟js指令'
-        },
-        {
-            'id': '跳转到首页',
-            'title': '跳转到首页',
-            'handler': '''() => {
-                window.location = "/"
-            }''',
-            'section': '模拟js指令'
-        },
-        {
-            'id': '指令3',
-            'title': '指令3',
-            'children': ['指令3-1', '指令3-2'],
-            'section': '多层指令菜单项'
-        },
-        {
-            'id': '指令3-1',
-            'title': '指令3-1',
-            'parent': '指令3'
-        },
-        {
-            'id': '指令3-2',
-            'title': '指令3-2',
-            'parent': '指令3'
-        }
-    ]
+        print('页面被关闭')
 
 
 if __name__ == '__main__':