feffery_utils_components 0.2.0-rc12 → 0.2.0-rc13

package/feffery_utils_components/metadata.json

@@ -13763,6 +13763,244 @@
       }
     }
   },
+  "src/lib/components/FefferySliderCaptcha.react.js": {
+    "description": "",
+    "displayName": "FefferySliderCaptcha",
+    "methods": [],
+    "props": {
+      "id": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7ec4\u4ef6id"
+      },
+      "className": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "css\u7c7b\u540d"
+      },
+      "style": {
+        "type": {
+          "name": "object"
+        },
+        "required": false,
+        "description": "css\u6837\u5f0f"
+      },
+      "imgSrc": {
+        "type": {
+          "name": "string"
+        },
+        "required": false,
+        "description": "\u7528\u4e8e\u751f\u6210\u62fc\u56fe\u7684\u5b8c\u6574\u56fe\u7247\u5730\u5740"
+      },
+      "imgWidth": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u58f0\u660e\u7528\u4e8e\u751f\u6210\u62fc\u56fe\u7684\u5b8c\u6574\u56fe\u7247\u50cf\u7d20\u5bbd\u5ea6\u503c"
+      },
+      "xOffset": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u62fc\u56fe\u5408\u6cd5\u9a8c\u8bc1\u50cf\u7d20\u504f\u79fb\u91cf\r\n\u9ed8\u8ba4\u503c\uff1a`5`",
+        "defaultValue": {
+          "value": "5",
+          "computed": false
+        }
+      },
+      "mode": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'embed'",
+              "computed": false
+            },
+            {
+              "value": "'float'",
+              "computed": false
+            },
+            {
+              "value": "'slider'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "\u663e\u793a\u6a21\u5f0f\uff0c\u53ef\u9009\u9879\u6709`'embed'`\u3001`'float'`\u3001`'slider'`\r\n\u9ed8\u8ba4\u503c\uff1a`'embed'`",
+        "defaultValue": {
+          "value": "'embed'",
+          "computed": false
+        }
+      },
+      "tipText": {
+        "type": {
+          "name": "exact",
+          "value": {
+            "default": {
+              "name": "node",
+              "description": "\u9ed8\u8ba4\u63d0\u793a\u5185\u5bb9",
+              "required": false
+            },
+            "loading": {
+              "name": "node",
+              "description": "\u52a0\u8f7d\u4e2d\u63d0\u793a\u5185\u5bb9",
+              "required": false
+            },
+            "moving": {
+              "name": "node",
+              "description": "\u79fb\u52a8\u4e2d\u63d0\u793a\u5185\u5bb9",
+              "required": false
+            },
+            "verifying": {
+              "name": "node",
+              "description": "\u9a8c\u8bc1\u4e2d\u63d0\u793a\u5185\u5bb9",
+              "required": false
+            },
+            "success": {
+              "name": "node",
+              "description": "\u9a8c\u8bc1\u6210\u529f\u63d0\u793a\u5185\u5bb9",
+              "required": false
+            },
+            "error": {
+              "name": "node",
+              "description": "\u9a8c\u8bc1\u5931\u8d25\u63d0\u793a\u5185\u5bb9",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "\u914d\u7f6e\u76f8\u5173\u6587\u6848\u63d0\u793a\u5185\u5bb9"
+      },
+      "showRefreshIcon": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u663e\u793a\u53f3\u4e0a\u89d2\u5237\u65b0\u6309\u94ae\r\n\u9ed8\u8ba4\u503c\uff1a`true`",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
+      "autoRefreshOnError": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u9a8c\u8bc1\u5931\u8d25\u540e\u662f\u5426\u81ea\u52a8\u5237\u65b0\r\n\u9ed8\u8ba4\u503c\uff1a`true`",
+        "defaultValue": {
+          "value": "true",
+          "computed": false
+        }
+      },
+      "errorHoldDuration": {
+        "type": {
+          "name": "number"
+        },
+        "required": false,
+        "description": "\u5f53`autoRefreshOnError=True`\u65f6\uff0c\u6bcf\u6b21\u9a8c\u8bc1\u5931\u8d25\u540e\u505c\u987f\u591a\u5c11\u6beb\u79d2\u81ea\u52a8\u5237\u65b0\r\n\u9ed8\u8ba4\u503c\uff1a`500`",
+        "defaultValue": {
+          "value": "500",
+          "computed": false
+        }
+      },
+      "placement": {
+        "type": {
+          "name": "enum",
+          "value": [
+            {
+              "value": "'top'",
+              "computed": false
+            },
+            {
+              "value": "'bottom'",
+              "computed": false
+            }
+          ]
+        },
+        "required": false,
+        "description": "\u62fc\u56fe\u56fe\u7247\u663e\u793a\u65b9\u4f4d\uff0c\u53ef\u9009\u9879\u6709`'top'`\u3001`'bottom'`\r\n\u9ed8\u8ba4\u503c\uff1a`'top'`",
+        "defaultValue": {
+          "value": "'top'",
+          "computed": false
+        }
+      },
+      "refresh": {
+        "type": {
+          "name": "bool"
+        },
+        "required": false,
+        "description": "\u624b\u52a8\u5237\u65b0\u7528\uff0c\u6bcf\u6b21\u66f4\u65b0\u4e3a`True`\u65f6\u4f1a\u4e3b\u52a8\u89e6\u53d1\u5237\u65b0\uff0c\u6bcf\u6b21\u6210\u529f\u5237\u65b0\u540e\u4f1a\u91cd\u7f6e\u4e3a`False`"
+      },
+      "verifyResult": {
+        "type": {
+          "name": "exact",
+          "value": {
+            "status": {
+              "name": "enum",
+              "value": [
+                {
+                  "value": "'success'",
+                  "computed": false
+                },
+                {
+                  "value": "'error'",
+                  "computed": false
+                }
+              ],
+              "description": "\u9a8c\u8bc1\u72b6\u6001\uff0c`'success'`\u8868\u793a\u9a8c\u8bc1\u6210\u529f\uff0c`'error'`\u8868\u793a\u9a8c\u8bc1\u5931\u8d25",
+              "required": false
+            },
+            "timestamp": {
+              "name": "number",
+              "description": "\u4e8b\u4ef6\u53d1\u751f\u65f6\u95f4\u6233",
+              "required": false
+            }
+          }
+        },
+        "required": false,
+        "description": "\u76d1\u542c\u6700\u8fd1\u4e00\u6b21\u9a8c\u8bc1\u7ed3\u679c"
+      },
+      "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": ""
+      },
+      "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."
+      }
+    }
+  },
   "src/lib/components/FefferySticky.react.js": {
     "description": "",
     "displayName": "FefferySticky",

package/feffery_utils_components/package-info.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc12",
+  "version": "0.2.0-rc13",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -43,6 +43,7 @@
     "byte-guide": "^1.0.7",
     "cherry-markdown": "^0.8.31",
     "comutils": "^1.1.19",
+    "create-puzzle": "^2.0.2",
     "dashjs": "4.7.2",
     "devtools-detector": "^2.0.15",
     "emoji-mart": "^5.5.2",
@@ -62,6 +63,7 @@
     "pinyin_js": "^1.0.4",
     "qrcode.react": "^3.1.0",
     "ramda": "^0.26.1",
+    "rc-slider-captcha": "^1.3.0",
     "rc-virtual-list": "^3.4.8",
     "re-resizable": "^6.9.9",
     "react-aplayer": "1.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "feffery_utils_components",
-  "version": "0.2.0-rc12",
+  "version": "0.2.0-rc13",
   "description": "Build more utility components for Plotly Dash.",
   "repository": {
     "type": "git",
@@ -43,6 +43,7 @@
     "byte-guide": "^1.0.7",
     "cherry-markdown": "^0.8.31",
     "comutils": "^1.1.19",
+    "create-puzzle": "^2.0.2",
     "dashjs": "4.7.2",
     "devtools-detector": "^2.0.15",
     "emoji-mart": "^5.5.2",
@@ -62,6 +63,7 @@
     "pinyin_js": "^1.0.4",
     "qrcode.react": "^3.1.0",
     "ramda": "^0.26.1",
+    "rc-slider-captcha": "^1.3.0",
     "rc-virtual-list": "^3.4.8",
     "re-resizable": "^6.9.9",
     "react-aplayer": "1.0.0",

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

@@ -0,0 +1,160 @@
+import React, { Suspense } from 'react';
+import PropTypes from 'prop-types';
+
+const LazyFefferySliderCaptcha = React.lazy(() => import(/* webpackChunkName: "feffery_slider_captcha" */ '../fragments/FefferySliderCaptcha.react'));
+
+const FefferySliderCaptcha = (props) => {
+    return (
+        <Suspense fallback={null}>
+            <LazyFefferySliderCaptcha {...props} />
+        </Suspense>
+    );
+}
+
+FefferySliderCaptcha.propTypes = {
+    /**
+     * 组件id
+     */
+    id: PropTypes.string,
+
+    /**
+     * css类名
+     */
+    className: PropTypes.string,
+
+    /**
+     * css样式
+     */
+    style: PropTypes.object,
+
+    /**
+     * 用于生成拼图的完整图片地址
+     */
+    imgSrc: PropTypes.string,
+
+    /**
+     * 声明用于生成拼图的完整图片像素宽度值
+     */
+    imgWidth: PropTypes.number,
+
+    /**
+     * 拼图合法验证像素偏移量
+     * 默认值：`5`
+     */
+    xOffset: PropTypes.number,
+
+    /**
+     * 显示模式，可选项有`'embed'`、`'float'`、`'slider'`
+     * 默认值：`'embed'`
+     */
+    mode: PropTypes.oneOf(['embed', 'float', 'slider']),
+
+    /**
+     * 配置相关文案提示内容
+     */
+    tipText: PropTypes.exact({
+        /**
+         * 默认提示内容
+         */
+        default: PropTypes.node,
+        /**
+         * 加载中提示内容
+         */
+        loading: PropTypes.node,
+        /**
+         * 移动中提示内容
+         */
+        moving: PropTypes.node,
+        /**
+         * 验证中提示内容
+         */
+        verifying: PropTypes.node,
+        /**
+         * 验证成功提示内容
+         */
+        success: PropTypes.node,
+        /**
+         * 验证失败提示内容
+         */
+        error: PropTypes.node
+    }),
+
+    /**
+     * 显示右上角刷新按钮
+     * 默认值：`true`
+     */
+    showRefreshIcon: PropTypes.bool,
+
+    /**
+     * 验证失败后是否自动刷新
+     * 默认值：`true`
+     */
+    autoRefreshOnError: PropTypes.bool,
+
+    /**
+     * 当`autoRefreshOnError=True`时，每次验证失败后停顿多少毫秒自动刷新
+     * 默认值：`500`
+     */
+    errorHoldDuration: PropTypes.number,
+
+    /**
+     * 拼图图片显示方位，可选项有`'top'`、`'bottom'`
+     * 默认值：`'top'`
+     */
+    placement: PropTypes.oneOf(['top', 'bottom']),
+
+    /**
+     * 手动刷新用，每次更新为`True`时会主动触发刷新，每次成功刷新后会重置为`False`
+     */
+    refresh: PropTypes.bool,
+
+    /**
+     * 监听最近一次验证结果
+     */
+    verifyResult: PropTypes.exact({
+        /**
+         * 验证状态，`'success'`表示验证成功，`'error'`表示验证失败
+         */
+        status: PropTypes.oneOf(['success', 'error']),
+        /**
+         * 事件发生时间戳
+         */
+        timestamp: PropTypes.number
+    }),
+
+    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
+};
+
+// 设置默认参数
+FefferySliderCaptcha.defaultProps = {
+    xOffset: 5,
+    mode: 'embed',
+    showRefreshIcon: true,
+    autoRefreshOnError: true,
+    errorHoldDuration: 500,
+    placement: 'top'
+}
+
+export default FefferySliderCaptcha;
+
+export const propTypes = FefferySliderCaptcha.propTypes;
+export const defaultProps = FefferySliderCaptcha.defaultProps;

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

@@ -104,6 +104,7 @@ 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事件监听
@@ -232,5 +233,6 @@ export {
     FefferyAnimatedImage,
     FefferyDebugGuardian,
     FefferyDom2Image,
-    FefferySetFavicon
+    FefferySetFavicon,
+    FefferySliderCaptcha
 };

package/usage.py

@@ -1,4 +1,5 @@
 import dash
+import json
 from dash import html
 import feffery_utils_components as fuc
 from dash.dependencies import Input, Output
@@ -8,31 +9,40 @@ app = dash.Dash(__name__)
 app.layout = html.Div(
     [
         html.Button(
-            '还原favicon',
-            id='clear-demo-output'
+            '手动刷新',
+            id='manual-refresh'
         ),
-        html.Div(
-            fuc.FefferySetFavicon(
-                favicon='https://www.google.com/favicon.ico'
-            ),
-            id='demo-output'
-        )
+        fuc.FefferySliderCaptcha(
+            id='demo-slider-captcha',
+            imgSrc='/assets/demo.jpg',
+            imgWidth=360
+        ),
+        html.Pre(id='demo-output')
     ],
     style={
-        'padding': '50px 50px 0 50px'
+        'padding': '300px 100px'
     }
 )
 
 
 @app.callback(
-    Output('demo-output', 'children'),
-    Input('clear-demo-output', 'n_clicks'),
+    Output('demo-slider-captcha', 'refresh'),
+    Input('manual-refresh', 'n_clicks'),
     prevent_initial_call=True
 )
-def demo(n_clicks):
+def manual_refresh(n_clicks):
+    return True
+
 
-    return fuc.FefferySetFavicon(
-        favicon='/_favicon.ico'
+@app.callback(
+    Output('demo-output', 'children'),
+    Input('demo-slider-captcha', 'verifyResult')
+)
+def update_output(verifyResult):
+    return json.dumps(
+        verifyResult,
+        indent=4,
+        ensure_ascii=False
     )