rc-slider-captcha - npm Package Compare versions

Comparing version 1.1.10 to 1.2.0

dist/index.cjs.js

@@ -37,3 +37,3 @@ 'use strict';
 
-var css_248z = "@-webkit-keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n@keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n.rc-slider-captcha-icon {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.rc-slider-captcha-icon > svg {\n  line-height: 1;\n}\n.rc-slider-captcha-icon-spin {\n  -webkit-animation: slider-icon-animate_spin 1s infinite linear;\n          animation: slider-icon-animate_spin 1s infinite linear;\n}\n.rc-slider-captcha-button {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 40px;\n  height: 100%;\n  padding: 5px 0;\n  color: #676d73;\n  font-size: 22px;\n  line-height: 1;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n  cursor: -webkit-grab;\n  cursor: grab;\n  transition-timing-function: linear;\n  transition-duration: 0.2s;\n  transition-property: background-color, color;\n  touch-action: none;\n}\n.rc-slider-captcha-button-active {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-verify {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-pc:hover {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button:active {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-active,\n.rc-slider-captcha-button:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-button-verify,\n.rc-slider-captcha-button-verify:active {\n  cursor: wait;\n}\n.rc-slider-captcha-button-error {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:hover {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:active {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-success {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:hover {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:active {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-disabled,\n.rc-slider-captcha-button-disabled:hover,\n.rc-slider-captcha-button-disabled:active {\n  color: #676d73;\n  background-color: #fff;\n  cursor: no-drop;\n}\n.rc-slider-captcha-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 15px;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  text-align: center;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n}\n.rc-slider-captcha-loading-icon {\n  font-size: 30px;\n}\n.rc-slider-captcha-loading-text {\n  margin-top: 5px;\n}\n.rc-slider-captcha {\n  position: relative;\n}\n.rc-slider-captcha > * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.rc-slider-captcha-control {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 42px;\n  padding-left: 40px;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n  border: 1px solid #e4e7eb;\n  border: 1px solid var(--rcsc-border-color, #e4e7eb);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.rc-slider-captcha-control-indicator {\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  display: none;\n  box-sizing: border-box;\n  width: 0;\n  background-color: #d1e9fe;\n  background-color: var(--rcsc-primary-light, #d1e9fe);\n  border: 1px solid #1991fa;\n  border: 1px solid var(--rcsc-primary, #1991fa);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-tips {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  line-height: 20px;\n  text-align: center;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-control-moving .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-verify .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  display: block;\n}\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator {\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  background-color: #d2f4ef;\n  background-color: var(--rcsc-success-light, #d2f4ef);\n  border-color: #52ccba;\n  border-color: var(--rcsc-success, #52ccba);\n}\n.rc-slider-captcha-control-errors {\n  padding-left: 0;\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-button,\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-indicator {\n  display: none;\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-tips {\n  color: #f57a7a;\n  color: var(--rcsc-error, #f57a7a);\n  cursor: pointer;\n}\n.rc-slider-captcha-jigsaw {\n  position: relative;\n  background-color: #f7f9fa;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-jigsaw img {\n  position: absolute;\n}\n.rc-slider-captcha-jigsaw-bg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-puzzle {\n  width: 60px;\n  height: 100%;\n  touch-action: none;\n}\n.rc-slider-captcha-jigsaw-puzzle:hover {\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n.rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-jigsaw-refresh {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  padding: 5px;\n  color: #fff;\n  font-size: 22px;\n  line-height: 0;\n  cursor: pointer;\n  opacity: 0.75;\n  transition: opacity 0.2s linear;\n}\n.rc-slider-captcha-jigsaw-refresh:hover {\n  opacity: 1;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled {\n  cursor: not-allowed;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled:hover {\n  opacity: 0.75;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle {\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:hover,\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: default;\n}\n.rc-slider-captcha-panel {\n  padding-bottom: 15px;\n}\n.rc-slider-captcha-panel-inner {\n  overflow: hidden;\n  border-radius: 2px;\n}\n.rc-slider-captcha-float .rc-slider-captcha-panel {\n  position: absolute;\n  left: 0;\n  display: none;\n  opacity: 0;\n  transition-timing-function: ease-out;\n  transition-duration: 0.3s;\n  transition-property: top, bottom, opacity;\n}\n.rc-slider-captcha-float-top .rc-slider-captcha-panel {\n  bottom: 22px;\n}\n.rc-slider-captcha-float-bottom .rc-slider-captcha-panel {\n  top: 22px;\n  padding: 15px 0 0;\n}\n";
+var css_248z = "@-webkit-keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n@keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n.rc-slider-captcha-icon {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.rc-slider-captcha-icon > svg {\n  line-height: 1;\n}\n.rc-slider-captcha-icon-spin {\n  -webkit-animation: slider-icon-animate_spin 1s infinite linear;\n          animation: slider-icon-animate_spin 1s infinite linear;\n}\n.rc-slider-captcha-button {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 40px;\n  height: 100%;\n  padding: 5px 0;\n  color: #676d73;\n  font-size: 22px;\n  line-height: 1;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n  cursor: -webkit-grab;\n  cursor: grab;\n  transition-timing-function: linear;\n  transition-duration: 0.2s;\n  transition-property: background-color, color;\n  touch-action: none;\n}\n.rc-slider-captcha-button-active {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-verify {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-pc:hover {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button:active {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-active,\n.rc-slider-captcha-button:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-button-verify,\n.rc-slider-captcha-button-verify:active {\n  cursor: wait;\n}\n.rc-slider-captcha-button-error {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:hover {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:active {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-success {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:hover {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:active {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-disabled,\n.rc-slider-captcha-button-disabled:hover,\n.rc-slider-captcha-button-disabled:active {\n  color: #676d73;\n  background-color: #fff;\n  cursor: no-drop;\n}\n.rc-slider-captcha-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 15px;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  text-align: center;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n}\n.rc-slider-captcha-loading-icon {\n  font-size: 30px;\n}\n.rc-slider-captcha-loading-text {\n  margin-top: 5px;\n}\n.rc-slider-captcha {\n  position: relative;\n}\n.rc-slider-captcha > * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.rc-slider-captcha-control {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 42px;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n  border: 1px solid #e4e7eb;\n  border: 1px solid var(--rcsc-border-color, #e4e7eb);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n.rc-slider-captcha-control-indicator {\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  display: none;\n  box-sizing: border-box;\n  width: 0;\n  background-color: #d1e9fe;\n  background-color: var(--rcsc-primary-light, #d1e9fe);\n  border: 1px solid #1991fa;\n  border: 1px solid var(--rcsc-primary, #1991fa);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-tips {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  line-height: 20px;\n  text-align: center;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-control-moving .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-verify .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  display: block;\n}\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator {\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  background-color: #d2f4ef;\n  background-color: var(--rcsc-success-light, #d2f4ef);\n  border-color: #52ccba;\n  border-color: var(--rcsc-success, #52ccba);\n}\n.rc-slider-captcha-control-errors {\n  padding-left: 0;\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-button,\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-indicator {\n  display: none;\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-tips {\n  color: #f57a7a;\n  color: var(--rcsc-error, #f57a7a);\n  cursor: pointer;\n}\n.rc-slider-captcha-jigsaw {\n  position: relative;\n  background-color: #f7f9fa;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-jigsaw img {\n  position: absolute;\n}\n.rc-slider-captcha-jigsaw-bg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-puzzle {\n  width: 60px;\n  height: 100%;\n  touch-action: none;\n}\n.rc-slider-captcha-jigsaw-puzzle:hover {\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n.rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-jigsaw-refresh {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  padding: 5px;\n  color: #fff;\n  font-size: 22px;\n  line-height: 0;\n  cursor: pointer;\n  opacity: 0.75;\n  transition: opacity 0.2s linear;\n}\n.rc-slider-captcha-jigsaw-refresh:hover {\n  opacity: 1;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled {\n  cursor: not-allowed;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled:hover {\n  opacity: 0.75;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle {\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:hover,\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: default;\n}\n.rc-slider-captcha-panel {\n  padding-bottom: 15px;\n}\n.rc-slider-captcha-panel-inner {\n  overflow: hidden;\n  border-radius: 2px;\n}\n.rc-slider-captcha-float .rc-slider-captcha-panel {\n  position: absolute;\n  left: 0;\n  display: none;\n  opacity: 0;\n  transition-timing-function: ease-out;\n  transition-duration: 0.3s;\n  transition-property: top, bottom, opacity;\n}\n.rc-slider-captcha-float-top .rc-slider-captcha-panel {\n  bottom: 22px;\n}\n.rc-slider-captcha-float-bottom .rc-slider-captcha-panel {\n  top: 22px;\n  padding: 15px 0 0;\n}\n";
 styleInject(css_248z);
@@ -199,2 +199,5 @@
         moving: null,
+        verifying: null,
+        success: null,
+        error: null,
         errors: (React.createElement(React.Fragment, null,
@@ -212,2 +215,13 @@ React.createElement(SliderIcon, { type: "x", style: { fontSize: 20 } }),
 };
+var events = isSupportTouch
+    ? {
+        start: 'touchstart',
+        move: 'touchmove',
+        end: 'touchend'
+    }
+    : {
+        start: 'mousedown',
+        move: 'mousemove',
+        end: 'mouseup'
+    };
 var SliderCaptcha = function (_a) {
@@ -227,4 +241,4 @@ var _b, _c, _d, _e;
     // config
-    var mode = React.useMemo(function () { return (outMode === 'float' ? outMode : 'embed'); }, [outMode]); // 模式
-    var latestMode = rcHooks.useLatest(mode); // 提供给事件方法使用
+    var mode = React.useMemo(function () { return (outMode === 'float' || outMode === 'slider' ? outMode : 'embed'); }, [outMode]); // 模式
+    var modeIsSlider = mode === 'slider';
     var tipText = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, defaultConfig.tipText), outTipText)); }, [outTipText]);
@@ -261,2 +275,5 @@ var tipIcon = React.useMemo(function () { return (tslib.__assign(tslib.__assign({}, defaultConfig.tipIcon), outTipIcon)); }, [outTipIcon]);
                 case 0:
+                    if (modeIsSlider)
+                        return [2 /*return*/];
+                    if (!request) return [3 /*break*/, 2];
                     if (hasLoadingDelay) {
@@ -278,3 +295,4 @@ loadingTimerRef.current = setTimeout(function () {
                     setStatus(exports.Status.Default);
-                    return [2 /*return*/];
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
             }
@@ -286,3 +304,3 @@ });
         if (delay === void 0) { delay = 300; }
-        if (latestMode.current !== 'float' || latestStatus.current === exports.Status.Success) {
+        if (mode !== 'float' || latestStatus.current === exports.Status.Success) {
             return;
@@ -303,3 +321,3 @@ }
         if (delay === void 0) { delay = 300; }
-        if (latestMode.current !== 'float') {
+        if (mode !== 'float') {
             return;
@@ -376,3 +394,3 @@ }
         var target = e.currentTarget; // 用于判断当前触发事件的节点
-        if (target && sliderButtonRef.current && puzzleRef.current) {
+        if (target && sliderButtonRef.current && (modeIsSlider || puzzleRef.current)) {
             var _a = getClient(e), clientX = _a.clientX, clientY = _a.clientY;
@@ -398,2 +416,5 @@ startInfoRef.current = {
             isPressedRef.current = true;
+            document.addEventListener(events.move, touchmove);
+            document.addEventListener(events.end, touchend);
+            document.addEventListener('touchcancel', touchend);
         }
@@ -433,2 +454,5 @@ };
     var touchend = function (e) {
+        document.removeEventListener(events.move, touchmove);
+        document.removeEventListener(events.end, touchend);
+        document.removeEventListener('touchcancel', touchend);
         if (!isPressedRef.current) {
@@ -498,24 +522,10 @@ return;
         }
-        var events = isSupportTouch
-            ? {
-                start: 'touchstart',
-                move: 'touchmove',
-                end: 'touchend'
-            }
-            : {
-                start: 'mousedown',
-                move: 'mousemove',
-                end: 'mouseup'
-            };
         var sliderButtonTarget = sliderButtonRef.current;
         var puzzleTarget = puzzleRef.current;
-        if (isBrowser && sliderButtonTarget && puzzleTarget) {
+        if (isBrowser && sliderButtonTarget) {
             sliderButtonTarget.addEventListener(events.start, touchstart);
-            puzzleTarget.addEventListener(events.start, touchstart);
-            document.addEventListener(events.move, touchmove);
-            document.addEventListener(events.end, touchend);
-            document.addEventListener('touchcancel', touchend);
+            puzzleTarget && puzzleTarget.addEventListener(events.start, touchstart);
             return function () {
                 sliderButtonTarget.removeEventListener(events.start, touchstart);
-                puzzleTarget.removeEventListener(events.start, touchstart);
+                puzzleTarget && puzzleTarget.removeEventListener(events.start, touchstart);
                 document.removeEventListener(events.move, touchmove);
@@ -541,5 +551,14 @@ document.removeEventListener(events.end, touchend);
         }
+        if (status === exports.Status.Verify) {
+            return tipText.verifying;
+        }
         if (isLimitErrors) {
             return tipText.errors;
         }
+        if (status === exports.Status.Error) {
+            return tipText.error;
+        }
+        if (status === exports.Status.Success) {
+            return tipText.success;
+        }
         return null;
@@ -570,3 +589,3 @@ }, [status, tipText, isLimitErrors]);
             _b)), style: tslib.__assign({ width: bgSize.width }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        React.createElement("div", { className: "".concat(prefixCls, "-panel"), ref: panelRef },
+        !modeIsSlider && (React.createElement("div", { className: "".concat(prefixCls, "-panel"), ref: panelRef },
             React.createElement("div", { className: "".concat(prefixCls, "-panel-inner"), style: { height: bgSize.height } },
@@ -580,3 +599,3 @@ React.createElement("div", { className: classnames(jigsawPrefixCls, (_c = {}, _c["".concat(jigsawPrefixCls, "-stop")] = isStop, _c)), style: tslib.__assign(tslib.__assign({}, bgSize), (loading || !(jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl) ? { display: 'none' } : {})) },
                     jigsawContent),
-                React.createElement(LoadingBox, tslib.__assign({}, loadingBoxProps, { style: tslib.__assign(tslib.__assign(tslib.__assign({}, loadingBoxProps === null || loadingBoxProps === void 0 ? void 0 : loadingBoxProps.style), bgSize), (loading ? {} : { display: 'none' })) })))),
+                React.createElement(LoadingBox, tslib.__assign({}, loadingBoxProps, { style: tslib.__assign(tslib.__assign(tslib.__assign({}, loadingBoxProps === null || loadingBoxProps === void 0 ? void 0 : loadingBoxProps.style), bgSize), (loading ? {} : { display: 'none' })) }))))),
         React.createElement("div", { className: classnames(controlPrefixCls, (_e = {},
@@ -583,0 +602,0 @@ _e["".concat(controlPrefixCls, "-loading")] = loading,

dist/index.esm.js

@@ -33,3 +33,3 @@ import { __assign, __rest, __awaiter, __generator } from 'tslib';
 
-var css_248z = "@-webkit-keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n@keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n.rc-slider-captcha-icon {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.rc-slider-captcha-icon > svg {\n  line-height: 1;\n}\n.rc-slider-captcha-icon-spin {\n  -webkit-animation: slider-icon-animate_spin 1s infinite linear;\n          animation: slider-icon-animate_spin 1s infinite linear;\n}\n.rc-slider-captcha-button {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 40px;\n  height: 100%;\n  padding: 5px 0;\n  color: #676d73;\n  font-size: 22px;\n  line-height: 1;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n  cursor: -webkit-grab;\n  cursor: grab;\n  transition-timing-function: linear;\n  transition-duration: 0.2s;\n  transition-property: background-color, color;\n  touch-action: none;\n}\n.rc-slider-captcha-button-active {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-verify {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-pc:hover {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button:active {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-active,\n.rc-slider-captcha-button:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-button-verify,\n.rc-slider-captcha-button-verify:active {\n  cursor: wait;\n}\n.rc-slider-captcha-button-error {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:hover {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:active {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-success {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:hover {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:active {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-disabled,\n.rc-slider-captcha-button-disabled:hover,\n.rc-slider-captcha-button-disabled:active {\n  color: #676d73;\n  background-color: #fff;\n  cursor: no-drop;\n}\n.rc-slider-captcha-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 15px;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  text-align: center;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n}\n.rc-slider-captcha-loading-icon {\n  font-size: 30px;\n}\n.rc-slider-captcha-loading-text {\n  margin-top: 5px;\n}\n.rc-slider-captcha {\n  position: relative;\n}\n.rc-slider-captcha > * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.rc-slider-captcha-control {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 42px;\n  padding-left: 40px;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n  border: 1px solid #e4e7eb;\n  border: 1px solid var(--rcsc-border-color, #e4e7eb);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.rc-slider-captcha-control-indicator {\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  display: none;\n  box-sizing: border-box;\n  width: 0;\n  background-color: #d1e9fe;\n  background-color: var(--rcsc-primary-light, #d1e9fe);\n  border: 1px solid #1991fa;\n  border: 1px solid var(--rcsc-primary, #1991fa);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-tips {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  line-height: 20px;\n  text-align: center;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-control-moving .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-verify .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  display: block;\n}\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator {\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  background-color: #d2f4ef;\n  background-color: var(--rcsc-success-light, #d2f4ef);\n  border-color: #52ccba;\n  border-color: var(--rcsc-success, #52ccba);\n}\n.rc-slider-captcha-control-errors {\n  padding-left: 0;\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-button,\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-indicator {\n  display: none;\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-tips {\n  color: #f57a7a;\n  color: var(--rcsc-error, #f57a7a);\n  cursor: pointer;\n}\n.rc-slider-captcha-jigsaw {\n  position: relative;\n  background-color: #f7f9fa;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-jigsaw img {\n  position: absolute;\n}\n.rc-slider-captcha-jigsaw-bg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-puzzle {\n  width: 60px;\n  height: 100%;\n  touch-action: none;\n}\n.rc-slider-captcha-jigsaw-puzzle:hover {\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n.rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-jigsaw-refresh {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  padding: 5px;\n  color: #fff;\n  font-size: 22px;\n  line-height: 0;\n  cursor: pointer;\n  opacity: 0.75;\n  transition: opacity 0.2s linear;\n}\n.rc-slider-captcha-jigsaw-refresh:hover {\n  opacity: 1;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled {\n  cursor: not-allowed;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled:hover {\n  opacity: 0.75;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle {\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:hover,\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: default;\n}\n.rc-slider-captcha-panel {\n  padding-bottom: 15px;\n}\n.rc-slider-captcha-panel-inner {\n  overflow: hidden;\n  border-radius: 2px;\n}\n.rc-slider-captcha-float .rc-slider-captcha-panel {\n  position: absolute;\n  left: 0;\n  display: none;\n  opacity: 0;\n  transition-timing-function: ease-out;\n  transition-duration: 0.3s;\n  transition-property: top, bottom, opacity;\n}\n.rc-slider-captcha-float-top .rc-slider-captcha-panel {\n  bottom: 22px;\n}\n.rc-slider-captcha-float-bottom .rc-slider-captcha-panel {\n  top: 22px;\n  padding: 15px 0 0;\n}\n";
+var css_248z = "@-webkit-keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n@keyframes slider-icon-animate_spin {\n  100% {\n    -webkit-transform: rotate(360deg);\n            transform: rotate(360deg);\n  }\n}\n.rc-slider-captcha-icon {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-style: normal;\n  line-height: 0;\n  text-align: center;\n  text-transform: none;\n  vertical-align: -0.125em;\n  text-rendering: optimizeLegibility;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.rc-slider-captcha-icon > svg {\n  line-height: 1;\n}\n.rc-slider-captcha-icon-spin {\n  -webkit-animation: slider-icon-animate_spin 1s infinite linear;\n          animation: slider-icon-animate_spin 1s infinite linear;\n}\n.rc-slider-captcha-button {\n  display: inline-block;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 40px;\n  height: 100%;\n  padding: 5px 0;\n  color: #676d73;\n  font-size: 22px;\n  line-height: 1;\n  background-color: #fff;\n  border-radius: 2px;\n  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);\n  cursor: -webkit-grab;\n  cursor: grab;\n  transition-timing-function: linear;\n  transition-duration: 0.2s;\n  transition-property: background-color, color;\n  touch-action: none;\n}\n.rc-slider-captcha-button-active {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-verify {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-pc:hover {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button:active {\n  color: #fff;\n  background-color: #1991fa;\n  background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-active,\n.rc-slider-captcha-button:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-button-verify,\n.rc-slider-captcha-button-verify:active {\n  cursor: wait;\n}\n.rc-slider-captcha-button-error {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:hover {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-error:active {\n  color: #fff;\n  background-color: #f57a7a;\n  background-color: var(--rcsc-error, #f57a7a);\n  cursor: default;\n}\n.rc-slider-captcha-button-success {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:hover {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-success:active {\n  color: #fff;\n  background-color: #52ccba;\n  background-color: var(--rcsc-success, #52ccba);\n  cursor: default;\n}\n.rc-slider-captcha-button-disabled,\n.rc-slider-captcha-button-disabled:hover,\n.rc-slider-captcha-button-disabled:active {\n  color: #676d73;\n  background-color: #fff;\n  cursor: no-drop;\n}\n.rc-slider-captcha-loading {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  padding: 15px;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  text-align: center;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n}\n.rc-slider-captcha-loading-icon {\n  font-size: 30px;\n}\n.rc-slider-captcha-loading-text {\n  margin-top: 5px;\n}\n.rc-slider-captcha {\n  position: relative;\n}\n.rc-slider-captcha > * {\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.rc-slider-captcha-control {\n  position: relative;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 42px;\n  background-color: #f7f9fa;\n  background-color: var(--rcsc-bg-color, #f7f9fa);\n  border: 1px solid #e4e7eb;\n  border: 1px solid var(--rcsc-border-color, #e4e7eb);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n  z-index: 2;\n}\n.rc-slider-captcha-control-indicator {\n  position: absolute;\n  top: -1px;\n  bottom: -1px;\n  left: -1px;\n  display: none;\n  box-sizing: border-box;\n  width: 0;\n  background-color: #d1e9fe;\n  background-color: var(--rcsc-primary-light, #d1e9fe);\n  border: 1px solid #1991fa;\n  border: 1px solid var(--rcsc-primary, #1991fa);\n  border-radius: 2px;\n}\n.rc-slider-captcha-control-tips {\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px 0;\n  color: #45494c;\n  color: var(--rcsc-text-color, #45494c);\n  font-size: 14px;\n  line-height: 20px;\n  text-align: center;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-control-moving .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-verify .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator,\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  display: block;\n}\n.rc-slider-captcha-control-error .rc-slider-captcha-control-indicator {\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-success .rc-slider-captcha-control-indicator {\n  background-color: #d2f4ef;\n  background-color: var(--rcsc-success-light, #d2f4ef);\n  border-color: #52ccba;\n  border-color: var(--rcsc-success, #52ccba);\n}\n.rc-slider-captcha-control-errors {\n  padding-left: 0;\n  background-color: #fce1e1;\n  background-color: var(--rcsc-error-light, #fce1e1);\n  border-color: #f57a7a;\n  border-color: var(--rcsc-error, #f57a7a);\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-button,\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-indicator {\n  display: none;\n}\n.rc-slider-captcha-control-errors .rc-slider-captcha-control-tips {\n  color: #f57a7a;\n  color: var(--rcsc-error, #f57a7a);\n  cursor: pointer;\n}\n.rc-slider-captcha-jigsaw {\n  position: relative;\n  background-color: #f7f9fa;\n  -webkit-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n}\n.rc-slider-captcha-jigsaw img {\n  position: absolute;\n}\n.rc-slider-captcha-jigsaw-bg {\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-puzzle {\n  width: 60px;\n  height: 100%;\n  touch-action: none;\n}\n.rc-slider-captcha-jigsaw-puzzle:hover {\n  cursor: -webkit-grab;\n  cursor: grab;\n}\n.rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: -webkit-grabbing;\n  cursor: grabbing;\n}\n.rc-slider-captcha-jigsaw-refresh {\n  position: absolute;\n  top: 0;\n  right: 0;\n  z-index: 2;\n  padding: 5px;\n  color: #fff;\n  font-size: 22px;\n  line-height: 0;\n  cursor: pointer;\n  opacity: 0.75;\n  transition: opacity 0.2s linear;\n}\n.rc-slider-captcha-jigsaw-refresh:hover {\n  opacity: 1;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled {\n  cursor: not-allowed;\n}\n.rc-slider-captcha-jigsaw-refresh-disabled:hover {\n  opacity: 0.75;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle {\n  pointer-events: none;\n}\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:hover,\n.rc-slider-captcha-jigsaw-stop .rc-slider-captcha-jigsaw-puzzle:active {\n  cursor: default;\n}\n.rc-slider-captcha-panel {\n  padding-bottom: 15px;\n}\n.rc-slider-captcha-panel-inner {\n  overflow: hidden;\n  border-radius: 2px;\n}\n.rc-slider-captcha-float .rc-slider-captcha-panel {\n  position: absolute;\n  left: 0;\n  display: none;\n  opacity: 0;\n  transition-timing-function: ease-out;\n  transition-duration: 0.3s;\n  transition-property: top, bottom, opacity;\n}\n.rc-slider-captcha-float-top .rc-slider-captcha-panel {\n  bottom: 22px;\n}\n.rc-slider-captcha-float-bottom .rc-slider-captcha-panel {\n  top: 22px;\n  padding: 15px 0 0;\n}\n";
 styleInject(css_248z);
@@ -195,2 +195,5 @@
         moving: null,
+        verifying: null,
+        success: null,
+        error: null,
         errors: (React.createElement(React.Fragment, null,
@@ -208,2 +211,13 @@ React.createElement(SliderIcon, { type: "x", style: { fontSize: 20 } }),
 };
+var events = isSupportTouch
+    ? {
+        start: 'touchstart',
+        move: 'touchmove',
+        end: 'touchend'
+    }
+    : {
+        start: 'mousedown',
+        move: 'mousemove',
+        end: 'mouseup'
+    };
 var SliderCaptcha = function (_a) {
@@ -223,4 +237,4 @@ var _b, _c, _d, _e;
     // config
-    var mode = useMemo(function () { return (outMode === 'float' ? outMode : 'embed'); }, [outMode]); // 模式
-    var latestMode = useLatest(mode); // 提供给事件方法使用
+    var mode = useMemo(function () { return (outMode === 'float' || outMode === 'slider' ? outMode : 'embed'); }, [outMode]); // 模式
+    var modeIsSlider = mode === 'slider';
     var tipText = useMemo(function () { return (__assign(__assign({}, defaultConfig.tipText), outTipText)); }, [outTipText]);
@@ -257,2 +271,5 @@ var tipIcon = useMemo(function () { return (__assign(__assign({}, defaultConfig.tipIcon), outTipIcon)); }, [outTipIcon]);
                 case 0:
+                    if (modeIsSlider)
+                        return [2 /*return*/];
+                    if (!request) return [3 /*break*/, 2];
                     if (hasLoadingDelay) {
@@ -274,3 +291,4 @@ loadingTimerRef.current = setTimeout(function () {
                     setStatus(Status.Default);
-                    return [2 /*return*/];
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
             }
@@ -282,3 +300,3 @@ });
         if (delay === void 0) { delay = 300; }
-        if (latestMode.current !== 'float' || latestStatus.current === Status.Success) {
+        if (mode !== 'float' || latestStatus.current === Status.Success) {
             return;
@@ -299,3 +317,3 @@ }
         if (delay === void 0) { delay = 300; }
-        if (latestMode.current !== 'float') {
+        if (mode !== 'float') {
             return;
@@ -372,3 +390,3 @@ }
         var target = e.currentTarget; // 用于判断当前触发事件的节点
-        if (target && sliderButtonRef.current && puzzleRef.current) {
+        if (target && sliderButtonRef.current && (modeIsSlider || puzzleRef.current)) {
             var _a = getClient(e), clientX = _a.clientX, clientY = _a.clientY;
@@ -394,2 +412,5 @@ startInfoRef.current = {
             isPressedRef.current = true;
+            document.addEventListener(events.move, touchmove);
+            document.addEventListener(events.end, touchend);
+            document.addEventListener('touchcancel', touchend);
         }
@@ -429,2 +450,5 @@ };
     var touchend = function (e) {
+        document.removeEventListener(events.move, touchmove);
+        document.removeEventListener(events.end, touchend);
+        document.removeEventListener('touchcancel', touchend);
         if (!isPressedRef.current) {
@@ -494,24 +518,10 @@ return;
         }
-        var events = isSupportTouch
-            ? {
-                start: 'touchstart',
-                move: 'touchmove',
-                end: 'touchend'
-            }
-            : {
-                start: 'mousedown',
-                move: 'mousemove',
-                end: 'mouseup'
-            };
         var sliderButtonTarget = sliderButtonRef.current;
         var puzzleTarget = puzzleRef.current;
-        if (isBrowser && sliderButtonTarget && puzzleTarget) {
+        if (isBrowser && sliderButtonTarget) {
             sliderButtonTarget.addEventListener(events.start, touchstart);
-            puzzleTarget.addEventListener(events.start, touchstart);
-            document.addEventListener(events.move, touchmove);
-            document.addEventListener(events.end, touchend);
-            document.addEventListener('touchcancel', touchend);
+            puzzleTarget && puzzleTarget.addEventListener(events.start, touchstart);
             return function () {
                 sliderButtonTarget.removeEventListener(events.start, touchstart);
-                puzzleTarget.removeEventListener(events.start, touchstart);
+                puzzleTarget && puzzleTarget.removeEventListener(events.start, touchstart);
                 document.removeEventListener(events.move, touchmove);
@@ -537,5 +547,14 @@ document.removeEventListener(events.end, touchend);
         }
+        if (status === Status.Verify) {
+            return tipText.verifying;
+        }
         if (isLimitErrors) {
             return tipText.errors;
         }
+        if (status === Status.Error) {
+            return tipText.error;
+        }
+        if (status === Status.Success) {
+            return tipText.success;
+        }
         return null;
@@ -566,3 +585,3 @@ }, [status, tipText, isLimitErrors]);
             _b)), style: __assign({ width: bgSize.width }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
-        React.createElement("div", { className: "".concat(prefixCls, "-panel"), ref: panelRef },
+        !modeIsSlider && (React.createElement("div", { className: "".concat(prefixCls, "-panel"), ref: panelRef },
             React.createElement("div", { className: "".concat(prefixCls, "-panel-inner"), style: { height: bgSize.height } },
@@ -576,3 +595,3 @@ React.createElement("div", { className: classnames(jigsawPrefixCls, (_c = {}, _c["".concat(jigsawPrefixCls, "-stop")] = isStop, _c)), style: __assign(__assign({}, bgSize), (loading || !(jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl) ? { display: 'none' } : {})) },
                     jigsawContent),
-                React.createElement(LoadingBox, __assign({}, loadingBoxProps, { style: __assign(__assign(__assign({}, loadingBoxProps === null || loadingBoxProps === void 0 ? void 0 : loadingBoxProps.style), bgSize), (loading ? {} : { display: 'none' })) })))),
+                React.createElement(LoadingBox, __assign({}, loadingBoxProps, { style: __assign(__assign(__assign({}, loadingBoxProps === null || loadingBoxProps === void 0 ? void 0 : loadingBoxProps.style), bgSize), (loading ? {} : { display: 'none' })) }))))),
         React.createElement("div", { className: classnames(controlPrefixCls, (_e = {},
@@ -579,0 +598,0 @@ _e["".concat(controlPrefixCls, "-loading")] = loading,

package.json

 {
   "name": "rc-slider-captcha",
-  "version": "1.1.10",
+  "version": "1.2.0",
   "description": "React slider captcha component.",
@@ -59,40 +59,40 @@ "keywords": [
     "classnames": "^2.3.2",
-    "rc-hooks": "^3.0.1",
+    "rc-hooks": "^3.0.2",
     "tslib": "^2.6.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/preset-typescript": "^7.22.5",
-    "@commitlint/cli": "^17.6.6",
-    "@commitlint/config-conventional": "^17.6.6",
-    "@rollup/plugin-commonjs": "^25.0.2",
-    "@rollup/plugin-node-resolve": "^15.1.0",
-    "@rollup/plugin-typescript": "^11.1.1",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@babel/core": "~7.22.10",
+    "@babel/preset-env": "~7.22.10",
+    "@babel/preset-react": "~7.22.5",
+    "@babel/preset-typescript": "~7.22.5",
+    "@commitlint/cli": "^17.7.1",
+    "@commitlint/config-conventional": "^17.7.0",
+    "@rollup/plugin-commonjs": "^25.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.1",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.2",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/jest": "^29.5.4",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "@types/react-test-renderer": "^18.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "antd": "^4.24.10",
-    "autoprefixer": "^10.4.14",
-    "babel-jest": "^29.5.0",
-    "babel-plugin-import": "^1.13.6",
-    "create-puzzle": "^1.0.3",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "antd": "^4.24.13",
+    "autoprefixer": "^10.4.15",
+    "babel-jest": "^29.6.3",
+    "babel-plugin-import": "^1.13.8",
+    "create-puzzle": "^1.2.1",
     "cz-conventional-changelog": "^3.3.0",
-    "doly-icons": "^1.4.1",
-    "dumi": "^1.1.50",
+    "doly-icons": "^1.5.0",
+    "dumi": "^1.1.53",
     "element-remove": "^1.0.4",
-    "eslint": "^8.43.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.47.0",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "less": "^4.1.3",
-    "lint-staged": "^13.2.2",
-    "postcss": "^8.4.24",
+    "jest": "^29.6.3",
+    "jest-environment-jsdom": "^29.6.3",
+    "less": "^4.2.0",
+    "lint-staged": "^13.3.0",
+    "postcss": "^8.4.28",
     "postcss-css-variables": "^0.19.0",
@@ -104,6 +104,6 @@ "prettier": "^2.8.8",
     "react-test-renderer": "^18.2.0",
-    "rollup": "^3.25.3",
+    "rollup": "^3.28.1",
     "rollup-plugin-postcss": "^4.0.2",
-    "stylelint": "^14.11.0",
-    "stylelint-config-css-modules": "^4.1.0",
+    "stylelint": "^14.16.1",
+    "stylelint-config-css-modules": "^4.3.0",
     "stylelint-config-prettier": "^9.0.5",
@@ -114,4 +114,4 @@ "stylelint-config-rational-order": "^0.1.2",
     "stylelint-no-unsupported-browser-features": "^5.0.4",
-    "typescript": "^5.1.3",
-    "util-helpers": "^4.19.1",
+    "typescript": "^5.1.6",
+    "ut2": "^1.4.4",
     "yorkie": "^2.0.0"
@@ -129,3 +129,4 @@ },
     "@babel/types": "~7.19.0",
-    "@babel/traverse": "~7.19.0"
+    "@babel/traverse": "~7.19.0",
+    "@babel/helper-compilation-targets": "~7.21.5"
   },
@@ -132,0 +133,0 @@ "browserslist": {

README.md

@@ -9,3 +9,3 @@ # rc-slider-captcha
 
-[![example](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d2d8d7dc28d4ad2aa114449ddced512~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp)](site)
+[![example](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2d2d8d7dc28d4ad2aa114449ddced512~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp)][site]
 
@@ -133,13 +133,13 @@ [掘金文章介绍地址](https://juejin.cn/post/7160519128950767652)
 
-| 变量名 | 说明 | 默认值 |
-| --- | --- | --- |
-| --rcsc-primary | 主色 | `#1991fa` <span style="display: inline-block; width: 16px; height: 16px; background: #1991fa; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-primary-light | 主色-浅 | `#d1e9fe` <span style="display: inline-block; width: 16px; height: 16px; background: #d1e9fe; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-error | 错误色 | `#f57a7a` <span style="display: inline-block; width: 16px; height: 16px; background: #f57a7a; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-error-light | 错误色-浅 | `#fce1e1` <span style="display: inline-block; width: 16px; height: 16px; background: #fce1e1; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-success | 成功色 | `#52ccba` <span style="display: inline-block; width: 16px; height: 16px; background: #52ccba; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-success-light | 成功色-浅 | `#d2f4ef` <span style="display: inline-block; width: 16px; height: 16px; background: #d2f4ef; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-border-color | 边框色 | `#e4e7eb` <span style="display: inline-block; width: 16px; height: 16px; background: #e4e7eb; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-bg-color | 背景色 | `#f7f9fa` <span style="display: inline-block; width: 16px; height: 16px; background: #f7f9fa; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
-| --rcsc-text-color | 文本色 | `#45494c` <span style="display: inline-block; width: 16px; height: 16px; background: #45494c; border-radius: 2px; vertical-align: middle; margin: 0 4px;"></span> |
+| 变量名               | 说明      | 默认值                                                    |
+| -------------------- | --------- | --------------------------------------------------------- |
+| --rcsc-primary       | 主色      | `#1991fa` <input type='color' value='#1991fa' disabled /> |
+| --rcsc-primary-light | 主色-浅   | `#d1e9fe` <input type='color' value='#d1e9fe' disabled /> |
+| --rcsc-error         | 错误色    | `#f57a7a` <input type='color' value='#f57a7a' disabled /> |
+| --rcsc-error-light   | 错误色-浅 | `#fce1e1` <input type='color' value='#fce1e1' disabled /> |
+| --rcsc-success       | 成功色    | `#52ccba` <input type='color' value='#52ccba' disabled /> |
+| --rcsc-success-light | 成功色-浅 | `#d2f4ef` <input type='color' value='#d2f4ef' disabled /> |
+| --rcsc-border-color  | 边框色    | `#e4e7eb` <input type='color' value='#e4e7eb' disabled /> |
+| --rcsc-bg-color      | 背景色    | `#f7f9fa` <input type='color' value='#f7f9fa' disabled /> |
+| --rcsc-text-color    | 文本色    | `#45494c` <input type='color' value='#45494c' disabled /> |
 
@@ -146,0 +146,0 @@ [site]: https://caijf.github.io/rc-slider-captcha/index.html

types/index.d.ts

@@ -9,2 +9,5 @@ import React, { ReactNode } from 'react';
     moving: ReactNode;
+    verifying: ReactNode;
+    success: ReactNode;
+    error: ReactNode;
     errors: ReactNode;
@@ -54,4 +57,3 @@ };
 };
-export interface SliderCaptchaProps {
-    mode?: 'embed' | 'float';
+export type SliderCaptchaProps = {
     limitErrorCount?: number;
@@ -63,3 +65,2 @@ onVerify: (data: VerifyParam) => Promise<any>;
     puzzleSize?: Partial<SizeType>;
-    request: () => Promise<JigsawImages>;
     autoRequest?: boolean;
@@ -77,4 +78,10 @@ autoRefreshOnError?: boolean;
     style?: React.CSSProperties;
-}
+} & ({
+    mode?: 'embed' | 'float';
+    request: () => Promise<JigsawImages>;
+} | {
+    mode: 'slider';
+    request?: () => Promise<JigsawImages>;
+});
 declare const SliderCaptcha: React.FC<SliderCaptchaProps>;
 export default SliderCaptcha;

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

95455

increased by0.83%

Lines of code

1383

increased by3.36%

Dependency changes

• Updatedrc-hooks@^3.0.2