feffery_utils_components 0.0.20 → 0.0.22

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useSize, useRequest, useHover } from 'ahooks';
+import { useSize, useRequest, useHover, useClickAway } from 'ahooks';
 
 // 定义进阶div容器组件FefferyDiv
 const FefferyDiv = (props) => {
@@ -10,12 +10,13 @@ const FefferyDiv = (props) => {
         children,
         style,
         className,
-        mouseEnterCounts,
-        mouseLeaveCounts,
+        mouseEnterCount,
+        mouseLeaveCount,
         nClicks,
         nDoubleClicks,
         enableListenContextMenu,
         debounceWait,
+        clickAwayCount,
         setProps,
         loading_state
     } = props;
@@ -37,7 +38,6 @@ const FefferyDiv = (props) => {
         },
         {
             debounceWait: debounceWait,
-            debounceLeading: true,
             manual: true
         }
     )
@@ -54,6 +54,11 @@ const FefferyDiv = (props) => {
         })
     }, [_isHovering])
 
+    // 监听元素外点击事件
+    useClickAway(() => {
+        setProps({ clickAwayCount: clickAwayCount + 1 })
+    }, ref);
+
     return <div
         id={id}
         style={style}
@@ -73,8 +78,8 @@ const FefferyDiv = (props) => {
                 })
             }
         }}
-        onMouseEnter={() => setProps({ mouseEnterCounts: mouseEnterCounts + 1 })}
-        onMouseLeave={() => setProps({ mouseLeaveCounts: mouseLeaveCounts + 1 })}
+        onMouseEnter={() => setProps({ mouseEnterCount: mouseEnterCount + 1 })}
+        onMouseLeave={() => setProps({ mouseLeaveCount: mouseLeaveCount + 1 })}
         data-dash-is-loading={
             (loading_state && loading_state.is_loading) || undefined
         } >
@@ -104,10 +109,10 @@ FefferyDiv.propTypes = {
     debounceWait: PropTypes.number,
 
     // 监听鼠标移入事件次数，初始化为0
-    mouseEnterCounts: PropTypes.number,
+    mouseEnterCount: PropTypes.number,
 
     // 监听鼠标移出事件次数，初始化为0
-    mouseLeaveCounts: PropTypes.number,
+    mouseLeaveCount: PropTypes.number,
 
     // 监听单击事件次数，初始化为0
     nClicks: PropTypes.number,
@@ -132,6 +137,9 @@ FefferyDiv.propTypes = {
     // 监听当前元素是否被鼠标悬浮
     isHovering: PropTypes.bool,
 
+    // 监听元素外点击事件发生次数，默认为0
+    clickAwayCount: PropTypes.number,
+
     /**
      * Dash-assigned callback that should be called to report property changes
      * to Dash, to make them available for callbacks.
@@ -156,12 +164,13 @@ FefferyDiv.propTypes = {
 
 // 设置默认参数
 FefferyDiv.defaultProps = {
-    mouseEnterCounts: 0,
-    mouseLeaveCounts: 0,
+    mouseEnterCount: 0,
+    mouseLeaveCount: 0,
     nClicks: 0,
     nDoubleClicks: 0,
     enableListenContextMenu: false,
-    debounceWait: 150
+    debounceWait: 150,
+    clickAwayCount: 0
 }
 
 export default FefferyDiv;

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

@@ -0,0 +1,69 @@
+import { useKeyPress } from 'ahooks';
+import PropTypes from 'prop-types';
+
+// 定义按键事件监听组件FefferyKeyPress
+const FefferyKeyPress = (props) => {
+
+    const {
+        id,
+        keys,
+        pressedTimes,
+        setProps,
+        loading_state
+    } = props;
+
+    useKeyPress(
+        keys,
+        () => {
+            setProps({
+                pressedTimes: pressedTimes + 1
+            })
+        }
+    );
+
+    return (<div
+        id={id}
+        data-dash-is-loading={
+            (loading_state && loading_state.is_loading) || undefined
+        } />);
+}
+
+// 定义参数或属性
+FefferyKeyPress.propTypes = {
+    // 部件id
+    id: PropTypes.string,
+
+    // 用于设置要监听的按键组合，必填
+    keys: PropTypes.string.isRequired,
+
+    // 记录设置的按键或按键组合事件已被触发的次数，默认为0
+    pressedTimes: 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
+    })
+};
+
+// 设置默认参数
+FefferyKeyPress.defaultProps = {
+    pressedTimes: 0
+}
+
+export default React.memo(FefferyKeyPress);

package/src/lib/index.js

@@ -30,6 +30,9 @@ import FefferyResponsive from "./components/listeners/FefferyResponsive.react";
 import FefferyGeolocation from "./components/listeners/FefferyGeolocation.react";
 import FefferyIdle from "./components/listeners/FefferyIdle.react";
 import FefferyWindowSize from "./components/listeners/FefferyWindowSize.react";
+import FefferyKeyPress from "./components/listeners/FefferyKeyPress.react";
+import FefferyTimeout from "./components/FefferyTimeout.react";
+import FefferyCountDown from "./components/FefferyCountDown.react";
 
 /* 
 忽略部分设计React中规范的console警告信息
@@ -84,5 +87,8 @@ export {
     FefferyResponsive,
     FefferyGeolocation,
     FefferyIdle,
-    FefferyWindowSize
+    FefferyWindowSize,
+    FefferyKeyPress,
+    FefferyTimeout,
+    FefferyCountDown
 };

package/tests/FefferyCaptchaRefreshRef/app.py

@@ -0,0 +1,49 @@
+if True:
+    import sys
+    import time
+    sys.path.append('../..')
+    import dash
+    from dash import html, dcc
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output, State
+
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        html.Button(
+            '刷新',
+            id='refresh-demo'
+        ),
+        fuc.FefferyCaptcha(
+            id='captcha-demo'
+        ),
+        html.Div(id='current-captcha')
+    ],
+    style={
+        'height': '2000px'
+    }
+)
+
+
+@app.callback(
+    Output('captcha-demo', 'refresh'),
+    Input('refresh-demo', 'n_clicks')
+)
+def demo1(n_clicks):
+
+    return bool(n_clicks)
+
+
+@app.callback(
+    Output('current-captcha', 'children'),
+    Input('captcha-demo', 'captcha')
+)
+def demo2(captcha):
+
+    return captcha
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/FefferyClickAwayTest/app.py

@@ -0,0 +1,41 @@
+if True:
+    import sys
+    import time
+    sys.path.append('../..')
+    import dash
+    from dash import html, dcc
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output, State
+
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fuc.FefferyDiv(
+            id='div-demo',
+            style={
+                'width': '200px',
+                'height': '100px',
+                'background': 'lightgrey',
+                'border': '1ox dashed black'
+            }
+        )
+    ],
+    style={
+        'height': '2000px'
+    }
+)
+
+
+@app.callback(
+    Output('div-demo', 'children'),
+    Input('div-demo', 'clickAwayCount')
+)
+def demo(clickAwayCount):
+
+    return clickAwayCount
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/FefferyCountDownTest/app.py

@@ -0,0 +1,53 @@
+if True:
+    import sys
+    import time
+    sys.path.append('../..')
+    import dash
+    from dash import html, dcc
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output, State
+
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        fuc.FefferyCountDown(
+            id='count-down-demo',
+            interval=2
+        ),
+        html.Button(
+            '设置10秒倒计时',
+            id='set-10s-count-down'
+        ),
+        html.Div(id='count-down-output')
+    ],
+    style={
+        'height': '2000px'
+    }
+)
+
+
+@app.callback(
+    Output('count-down-demo', 'delay'),
+    Input('set-10s-count-down', 'n_clicks')
+)
+def demo1(n_clicks):
+
+    if n_clicks:
+        return 10
+
+
+@app.callback(
+    Output('count-down-output', 'children'),
+    Input('count-down-demo', 'countdown')
+)
+def demo2(countdown):
+
+    print(countdown)
+
+    return countdown
+
+
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/FefferyKeyPressTest/app.py

@@ -0,0 +1,43 @@
+if True:
+    import sys
+    import time
+    sys.path.append('../..')
+    import dash
+    from dash import html, dcc
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output, State
+
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        '请按i键',
+
+        fuc.FefferyKeyPress(
+            id='key-press-demo',
+            keys='i'
+        ),
+
+        html.Div(
+            '',
+            id='output'
+        )
+    ],
+    style={
+        'height': '2000px'
+    }
+)
+
+
+app.clientside_callback(
+    '''(pressedTimes, children) => {
+        return `${children}❤️`
+    }''',
+    Output('output', 'children'),
+    Input('key-press-demo', 'pressedTimes'),
+    State('output', 'children'),
+    prevent_initial_call=True
+)
+if __name__ == '__main__':
+    app.run(debug=True)

package/tests/FefferyTimeoutTest/app.py

@@ -0,0 +1,63 @@
+if True:
+    import sys
+    import time
+    sys.path.append('../..')
+    import dash
+    from dash import html, dcc
+    import feffery_utils_components as fuc
+    from dash.dependencies import Input, Output, State
+
+
+app = dash.Dash(__name__)
+
+app.layout = html.Div(
+    [
+        html.Div(
+            [
+                dcc.Input(
+                    id='delay',
+                    value=3000,
+                    style={
+                        'width': '200px'
+                    }
+                ),
+                html.Button(
+                    '执行',
+                    id='button'
+                )
+            ]
+        ),
+        fuc.FefferyTimeout(id='timeout', delay=5000),
+        html.Div(id='timeout-result')
+    ],
+    style={
+        'height': '2000px'
+    }
+)
+
+
+@app.callback(
+    Output('timeout', 'delay'),
+    Input('button', 'n_clicks'),
+    State('delay', 'value')
+)
+def demo1(n_clicks, delay):
+
+    if delay:
+        print(int(delay))
+        return int(delay)
+
+
+@app.callback(
+    Output('timeout-result', 'children'),
+    Input('timeout', 'timeoutCount')
+)
+def demo2(timeoutCount):
+
+    print(timeoutCount)
+
+    return timeoutCount
+
+
+if __name__ == '__main__':
+    app.run(debug=True)