feffery_utils_components 0.2.0-rc11 → 0.2.0-rc13

package/src/lib/fragments/FefferySliderCaptcha.react.js

@@ -0,0 +1,102 @@
+import React, { useRef, useEffect } from 'react';
+import SliderCaptcha from 'rc-slider-captcha';
+import createPuzzle from 'create-puzzle';
+import { propTypes, defaultProps } from '../components/FefferySliderCaptcha.react';
+
+/**
+ * 滑块验证码组件FefferySliderCaptcha
+ */
+const FefferySliderCaptcha = (props) => {
+    let {
+        id,
+        style,
+        className,
+        imgSrc,
+        xOffset,
+        imgWidth,
+        mode,
+        tipText,
+        showRefreshIcon,
+        autoRefreshOnError,
+        errorHoldDuration,
+        placement,
+        refresh,
+        setProps,
+        loading_state
+    } = props;
+
+    // 记录x轴动态偏移量
+    const offsetXRef = useRef(0);
+    // 手动刷新用
+    const actionRef = useRef();
+
+    // 手动刷新
+    useEffect(() => {
+        if (refresh) {
+            actionRef.current?.refresh()
+            setProps({ refresh: false })
+        }
+    }, [refresh])
+
+    return (
+        <SliderCaptcha
+            id={id}
+            style={style}
+            className={className}
+            actionRef={actionRef}
+            request={
+                () => createPuzzle(
+                    imgSrc,
+                    {
+                        format: 'blob'
+                    }
+                ).then((res) => {
+                    // 更新x轴动态偏移量
+                    offsetXRef.current = res.x;
+                    return {
+                        bgUrl: res.bgUrl,
+                        puzzleUrl: res.puzzleUrl
+                    };
+                })
+            }
+            onVerify={
+                async (data) => {
+                    if (data.x >= offsetXRef.current - xOffset && data.x < offsetXRef.current + xOffset) {
+                        // 验证成功
+                        setProps({
+                            verifyResult: {
+                                status: 'success',
+                                timestamp: Date.now()
+                            }
+                        })
+                        return Promise.resolve();
+                    }
+                    // 验证失败
+                    setProps({
+                        verifyResult: {
+                            status: 'error',
+                            timestamp: Date.now()
+                        }
+                    })
+                    return Promise.reject();
+                }
+            }
+            bgSize={{
+                width: imgWidth
+            }}
+            mode={mode}
+            tipText={tipText}
+            showRefreshIcon={showRefreshIcon}
+            autoRefreshOnError={autoRefreshOnError}
+            errorHoldDuration={errorHoldDuration}
+            placement={placement}
+            data-dash-is-loading={
+                (loading_state && loading_state.is_loading) || undefined
+            } />
+    );
+}
+
+export default FefferySliderCaptcha;
+
+FefferySliderCaptcha.defaultProps = defaultProps;
+FefferySliderCaptcha.propTypes = propTypes;

package/src/lib/index.js

@@ -103,6 +103,8 @@ import FefferySortable from "./components/sortable/FefferySortable.react";
 import FefferyAnimatedImage from "./components/FefferyAnimatedImage.react";
 import FefferyDebugGuardian from "./components/security/FefferyDebugGuardian.react";
 import FefferyDom2Image from "./components/FefferyDom2Image.react";
+import FefferySetFavicon from "./components/FefferySetFavicon.react";
+import FefferySliderCaptcha from "./components/FefferySliderCaptcha.react";
 import './components/styles.css';
 
 // 自定义sessionStorage事件监听
@@ -230,5 +232,7 @@ export {
     FefferySortable,
     FefferyAnimatedImage,
     FefferyDebugGuardian,
-    FefferyDom2Image
+    FefferyDom2Image,
+    FefferySetFavicon,
+    FefferySliderCaptcha
 };

package/usage.py

@@ -8,70 +8,42 @@ app = dash.Dash(__name__)
 
 app.layout = html.Div(
     [
-        # 测试元素
-        fuc.FefferyDiv(
-            '测试内容',
-            id='demo-target',
-            shadow='always-shadow-light',
-            style={
-                'width': 300,
-                'height': 200,
-                'display': 'flex',
-                'justifyContent': 'center',
-                'alignItems': 'center',
-                'fontSize': 18,
-                'fontWeight': 'bold',
-                'color': 'white',
-                'background': 'linear-gradient(135deg,#17ead9,#6078ea)'
-            }
-        ),
-        # 测试激活元素转图片
         html.Button(
-            '打印',
-            id='execute-screenshot'
+            '手动刷新',
+            id='manual-refresh'
         ),
-        # 测试元素转图片组件
-        fuc.FefferyDom2Image(
-            id='demo-dom2image',
-            scale=2
+        fuc.FefferySliderCaptcha(
+            id='demo-slider-captcha',
+            imgSrc='/assets/demo.jpg',
+            imgWidth=360
         ),
-        html.Div(id='demo-dom2image-output')
+        html.Pre(id='demo-output')
     ],
     style={
-        'padding': '50px 50px 0 50px'
+        'padding': '300px 100px'
     }
 )
 
 
 @app.callback(
-    Output('demo-dom2image', 'targetSelector'),
-    Input('execute-screenshot', 'n_clicks'),
+    Output('demo-slider-captcha', 'refresh'),
+    Input('manual-refresh', 'n_clicks'),
     prevent_initial_call=True
 )
-def demo(n_clicks):
-
-    return '#demo-target'
+def manual_refresh(n_clicks):
+    return True
 
 
 @app.callback(
-    Output('demo-dom2image-output', 'children'),
-    Input('demo-dom2image', 'screenshotResult'),
-    prevent_initial_call=True
+    Output('demo-output', 'children'),
+    Input('demo-slider-captcha', 'verifyResult')
 )
-def update_result(screenshotResult):
-
-    return [
-        html.Pre(
-            json.dumps(
-                screenshotResult,
-                ensure_ascii=False,
-                indent=4
-            )
-        ),
-        html.Img(
-            src=screenshotResult['dataUrl']
-        )
-    ]
+def update_output(verifyResult):
+    return json.dumps(
+        verifyResult,
+        indent=4,
+        ensure_ascii=False
+    )
 
 
 if __name__ == '__main__':