rc-slider-captcha - npm Package Compare versions

Comparing version 1.1.4 to 1.1.5

dist/index.cjs.js

@@ -42,3 +42,3 @@ 'use strict';
 
-var css_248z$3 = ".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}\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  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     -moz-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$3 = ".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}\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     -moz-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$3);
@@ -180,7 +180,7 @@
 
-var CurrentTargetType;
+exports.CurrentTargetType = void 0;
 (function (CurrentTargetType) {
     CurrentTargetType["Puzzle"] = "puzzle";
     CurrentTargetType["Button"] = "button";
-})(CurrentTargetType || (CurrentTargetType = {}));
+})(exports.CurrentTargetType || (exports.CurrentTargetType = {}));
 // 内部状态
@@ -191,5 +191,6 @@ exports.Status = void 0;
     Status[Status["Loading"] = 2] = "Loading";
-    Status[Status["Verify"] = 3] = "Verify";
-    Status[Status["Success"] = 4] = "Success";
-    Status[Status["Error"] = 5] = "Error";
+    Status[Status["Moving"] = 3] = "Moving";
+    Status[Status["Verify"] = 4] = "Verify";
+    Status[Status["Success"] = 5] = "Success";
+    Status[Status["Error"] = 6] = "Error";
 })(exports.Status || (exports.Status = {}));
@@ -231,3 +232,2 @@ var controlPrefixCls = "".concat(prefixCls, "-control");
     var latestStatus = rcHooks.useLatest(status); // 同步status值，提供给事件方法使用
-    var update = rcHooks.useUpdate(); // 触发组件渲染
     // dom ref
@@ -246,3 +246,3 @@ var sliderButtonRef = React.useRef(null);
     var placementPos = React.useMemo(function () { return (placement === 'bottom' ? 'top' : 'bottom'); }, [placement]);
-    var currentTargetTypeRef = React.useRef(CurrentTargetType.Button); // 当前触发事件的节点，拼图或按钮
+    var currentTargetTypeRef = React.useRef(exports.CurrentTargetType.Button); // 当前触发事件的节点，拼图或按钮
     var errorCountRef = React.useRef(0); // 连续错误次数
@@ -252,3 +252,2 @@ var startInfoRef = React.useRef({ x: 0, y: 0, timestamp: 0 }); // 鼠标按下或触摸开始信息
     var isPressedRef = React.useRef(false); // 标识是否按下
-    var isMovedRef = React.useRef(false); // 标识是否移动过
     var sliderButtonWidthRef = React.useRef(SliderButtonWidth); // 滑块按钮宽度
@@ -293,2 +292,3 @@ var floatTransitionTimerRef = React.useRef(null); // 触发式渐变过渡效果定时器
         clearTimeout(floatDelayHideTimerRef.current);
+        clearTimeout(floatDelayShowTimerRef.current);
         floatDelayShowTimerRef.current = setTimeout(function () {
@@ -307,2 +307,4 @@ var _a;
         }
+        clearTimeout(floatTransitionTimerRef.current);
+        clearTimeout(floatDelayHideTimerRef.current);
         clearTimeout(floatDelayShowTimerRef.current);
@@ -320,3 +322,3 @@ floatDelayHideTimerRef.current = setTimeout(function () {
         isPressedRef.current = false;
-        isMovedRef.current = false;
+        // isMovedRef.current = false;
         setStatus(exports.Status.Default);
@@ -390,3 +392,3 @@ setStyle(sliderButtonRef.current, { left: '0' });
             ratioRef.current = maxDistanceRef.current.puzzle / maxDistanceRef.current.button;
-            if (currentTargetTypeRef.current === CurrentTargetType.Puzzle) {
+            if (currentTargetTypeRef.current === exports.CurrentTargetType.Puzzle) {
                 ratioRef.current = 1 / ratioRef.current;
@@ -410,9 +412,8 @@ }
         trailRef.current.push([clientX, clientY]); // 记录移动轨迹
-        if (!isMovedRef.current && diffX > 0) {
-            isMovedRef.current = true;
-            update();
+        if (latestStatus.current !== exports.Status.Moving && diffX > 0) {
+            setStatus(exports.Status.Moving);
         }
         var puzzleLeft = diffX; // 拼图左偏移值
         var sliderButtonLeft = diffX; // 滑块按钮左偏移值
-        if (currentTargetTypeRef.current === CurrentTargetType.Puzzle) {
+        if (currentTargetTypeRef.current === exports.CurrentTargetType.Puzzle) {
             diffX = Math.max(0, Math.min(diffX, maxDistanceRef.current.puzzle));
@@ -435,9 +436,13 @@ puzzleLeft = diffX + puzzleSize.left;
     var touchend = function (e) {
-        var isTouchEvent = e.type === 'touchend'; // 是否为移动端事件
-        if (!isPressedRef.current || !isMovedRef.current) {
-            if (isTouchEvent && isPressedRef.current) {
+        if (!isPressedRef.current) {
+            return;
+        }
+        // 是否为移动端事件
+        var isTouchEvent = e.type === 'touchend';
+        if (latestStatus.current !== exports.Status.Moving) {
+            isPressedRef.current = false;
+            // 如果是移动端事件，并且是触发式，隐藏浮层
+            if (isTouchEvent) {
                 hidePanel();
             }
-            isPressedRef.current = false;
-            isMovedRef.current = false;
             return;
@@ -447,3 +452,2 @@ }
             isPressedRef.current = false;
-            isMovedRef.current = false;
             setStatus(exports.Status.Verify);
@@ -455,3 +459,3 @@ var endTimestamp = new Date().getTime();
             var sliderOffsetX = diffX; // 滑块偏移值
-            if (currentTargetTypeRef.current === CurrentTargetType.Puzzle) {
+            if (currentTargetTypeRef.current === exports.CurrentTargetType.Puzzle) {
                 diffX = Math.max(0, Math.min(diffX, maxDistanceRef.current.puzzle));
@@ -536,3 +540,3 @@ sliderOffsetX = diffX * ratioRef.current;
     var currentTipText = React.useMemo(function () {
-        if (status === exports.Status.Default && !isMovedRef.current) {
+        if (status === exports.Status.Default) {
             return tipText.default;
@@ -547,4 +551,3 @@ }
         return null;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [status, tipText, isMovedRef.current, isLimitErrors]);
+    }, [status, tipText, isLimitErrors]);
     // 当前提示图标
@@ -577,3 +580,3 @@ var currentTipIcon = React.useMemo(function () {
                     React__default["default"].createElement("img", { className: "".concat(jigsawPrefixCls, "-bg"), style: bgSize, src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl, alt: "" }),
-                    React__default["default"].createElement("img", { className: "".concat(jigsawPrefixCls, "-puzzle"), style: puzzleSize, src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.puzzleUrl, alt: "", "data-id": CurrentTargetType.Puzzle, ref: puzzleRef }),
+                    React__default["default"].createElement("img", { className: "".concat(jigsawPrefixCls, "-puzzle"), style: puzzleSize, src: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.puzzleUrl, alt: "", "data-id": exports.CurrentTargetType.Puzzle, ref: puzzleRef }),
                     showRefreshIcon && status !== exports.Status.Success && tipIcon.refresh && (React__default["default"].createElement("div", { className: classnames__default["default"]("".concat(jigsawPrefixCls, "-refresh"), (_d = {},
@@ -586,10 +589,10 @@ _d["".concat(jigsawPrefixCls, "-refresh-disabled")] = status === exports.Status.Verify || isLimitErrors,
                 _e["".concat(controlPrefixCls, "-loading")] = loading,
-                _e["".concat(controlPrefixCls, "-moving")] = isMovedRef.current && !isLimitErrors,
+                _e["".concat(controlPrefixCls, "-moving")] = status === exports.Status.Moving,
                 _e["".concat(controlPrefixCls, "-verify")] = status === exports.Status.Verify,
                 _e["".concat(controlPrefixCls, "-success")] = status === exports.Status.Success,
-                _e["".concat(controlPrefixCls, "-error")] = status === exports.Status.Error && !isLimitErrors,
+                _e["".concat(controlPrefixCls, "-error")] = status === exports.Status.Error,
                 _e["".concat(controlPrefixCls, "-errors")] = isLimitErrors,
                 _e)), onClick: handleClickControl },
             React__default["default"].createElement("div", { className: classnames__default["default"]("".concat(controlPrefixCls, "-indicator")), ref: indicatorRef }),
-            React__default["default"].createElement(SliderButton, tslib.__assign({}, sliderButtonProps, { className: classnames__default["default"]("".concat(controlPrefixCls, "-button"), sliderButtonProps === null || sliderButtonProps === void 0 ? void 0 : sliderButtonProps.className), disabled: loading, active: isMovedRef.current, verify: status === exports.Status.Verify, success: status === exports.Status.Success, error: status === exports.Status.Error, "data-id": CurrentTargetType.Button, mobile: isSupportTouch, ref: sliderButtonRef }), currentTipIcon),
+            React__default["default"].createElement(SliderButton, tslib.__assign({}, sliderButtonProps, { className: classnames__default["default"]("".concat(controlPrefixCls, "-button"), sliderButtonProps === null || sliderButtonProps === void 0 ? void 0 : sliderButtonProps.className), disabled: loading, active: status === exports.Status.Moving, verify: status === exports.Status.Verify, success: status === exports.Status.Success, error: status === exports.Status.Error, "data-id": exports.CurrentTargetType.Button, mobile: isSupportTouch, ref: sliderButtonRef }), currentTipIcon),
             currentTipText && (React__default["default"].createElement("div", { className: classnames__default["default"]("".concat(controlPrefixCls, "-tips")) }, currentTipText)))));
@@ -596,0 +599,0 @@ };

dist/index.esm.js

 import { __assign, __rest, __awaiter, __generator } from 'tslib';
 import classnames from 'classnames';
 import React, { useRef, useMemo, useEffect } from 'react';
-import { useSafeState, useLatest, useUpdate } from 'rc-hooks';
+import { useSafeState, useLatest } from 'rc-hooks';
 
@@ -33,3 +33,3 @@ function styleInject(css, ref) {
 
-var css_248z$3 = ".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}\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  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     -moz-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$3 = ".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}\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     -moz-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$3);
@@ -181,5 +181,6 @@
     Status[Status["Loading"] = 2] = "Loading";
-    Status[Status["Verify"] = 3] = "Verify";
-    Status[Status["Success"] = 4] = "Success";
-    Status[Status["Error"] = 5] = "Error";
+    Status[Status["Moving"] = 3] = "Moving";
+    Status[Status["Verify"] = 4] = "Verify";
+    Status[Status["Success"] = 5] = "Success";
+    Status[Status["Error"] = 6] = "Error";
 })(Status || (Status = {}));
@@ -221,3 +222,2 @@ var controlPrefixCls = "".concat(prefixCls, "-control");
     var latestStatus = useLatest(status); // 同步status值，提供给事件方法使用
-    var update = useUpdate(); // 触发组件渲染
     // dom ref
@@ -241,3 +241,2 @@ var sliderButtonRef = useRef(null);
     var isPressedRef = useRef(false); // 标识是否按下
-    var isMovedRef = useRef(false); // 标识是否移动过
     var sliderButtonWidthRef = useRef(SliderButtonWidth); // 滑块按钮宽度
@@ -282,2 +281,3 @@ var floatTransitionTimerRef = useRef(null); // 触发式渐变过渡效果定时器
         clearTimeout(floatDelayHideTimerRef.current);
+        clearTimeout(floatDelayShowTimerRef.current);
         floatDelayShowTimerRef.current = setTimeout(function () {
@@ -296,2 +296,4 @@ var _a;
         }
+        clearTimeout(floatTransitionTimerRef.current);
+        clearTimeout(floatDelayHideTimerRef.current);
         clearTimeout(floatDelayShowTimerRef.current);
@@ -309,3 +311,3 @@ floatDelayHideTimerRef.current = setTimeout(function () {
         isPressedRef.current = false;
-        isMovedRef.current = false;
+        // isMovedRef.current = false;
         setStatus(Status.Default);
@@ -398,5 +400,4 @@ setStyle(sliderButtonRef.current, { left: '0' });
         trailRef.current.push([clientX, clientY]); // 记录移动轨迹
-        if (!isMovedRef.current && diffX > 0) {
-            isMovedRef.current = true;
-            update();
+        if (latestStatus.current !== Status.Moving && diffX > 0) {
+            setStatus(Status.Moving);
         }
@@ -423,9 +424,13 @@ var puzzleLeft = diffX; // 拼图左偏移值
     var touchend = function (e) {
-        var isTouchEvent = e.type === 'touchend'; // 是否为移动端事件
-        if (!isPressedRef.current || !isMovedRef.current) {
-            if (isTouchEvent && isPressedRef.current) {
+        if (!isPressedRef.current) {
+            return;
+        }
+        // 是否为移动端事件
+        var isTouchEvent = e.type === 'touchend';
+        if (latestStatus.current !== Status.Moving) {
+            isPressedRef.current = false;
+            // 如果是移动端事件，并且是触发式，隐藏浮层
+            if (isTouchEvent) {
                 hidePanel();
             }
-            isPressedRef.current = false;
-            isMovedRef.current = false;
             return;
@@ -435,3 +440,2 @@ }
             isPressedRef.current = false;
-            isMovedRef.current = false;
             setStatus(Status.Verify);
@@ -523,3 +527,3 @@ var endTimestamp = new Date().getTime();
     var currentTipText = useMemo(function () {
-        if (status === Status.Default && !isMovedRef.current) {
+        if (status === Status.Default) {
             return tipText.default;
@@ -534,4 +538,3 @@ }
         return null;
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [status, tipText, isMovedRef.current, isLimitErrors]);
+    }, [status, tipText, isLimitErrors]);
     // 当前提示图标
@@ -572,13 +575,13 @@ var currentTipIcon = useMemo(function () {
                 _e["".concat(controlPrefixCls, "-loading")] = loading,
-                _e["".concat(controlPrefixCls, "-moving")] = isMovedRef.current && !isLimitErrors,
+                _e["".concat(controlPrefixCls, "-moving")] = status === Status.Moving,
                 _e["".concat(controlPrefixCls, "-verify")] = status === Status.Verify,
                 _e["".concat(controlPrefixCls, "-success")] = status === Status.Success,
-                _e["".concat(controlPrefixCls, "-error")] = status === Status.Error && !isLimitErrors,
+                _e["".concat(controlPrefixCls, "-error")] = status === Status.Error,
                 _e["".concat(controlPrefixCls, "-errors")] = isLimitErrors,
                 _e)), onClick: handleClickControl },
             React.createElement("div", { className: classnames("".concat(controlPrefixCls, "-indicator")), ref: indicatorRef }),
-            React.createElement(SliderButton, __assign({}, sliderButtonProps, { className: classnames("".concat(controlPrefixCls, "-button"), sliderButtonProps === null || sliderButtonProps === void 0 ? void 0 : sliderButtonProps.className), disabled: loading, active: isMovedRef.current, verify: status === Status.Verify, success: status === Status.Success, error: status === Status.Error, "data-id": CurrentTargetType.Button, mobile: isSupportTouch, ref: sliderButtonRef }), currentTipIcon),
+            React.createElement(SliderButton, __assign({}, sliderButtonProps, { className: classnames("".concat(controlPrefixCls, "-button"), sliderButtonProps === null || sliderButtonProps === void 0 ? void 0 : sliderButtonProps.className), disabled: loading, active: status === Status.Moving, verify: status === Status.Verify, success: status === Status.Success, error: status === Status.Error, "data-id": CurrentTargetType.Button, mobile: isSupportTouch, ref: sliderButtonRef }), currentTipIcon),
             currentTipText && (React.createElement("div", { className: classnames("".concat(controlPrefixCls, "-tips")) }, currentTipText)))));
 };
 
-export { Status, SliderCaptcha as default };
+export { CurrentTargetType, Status, SliderCaptcha as default };

package.json

 {
   "name": "rc-slider-captcha",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "React slider captcha component.",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -82,3 +82,3 @@ # rc-slider-captcha
 ```typescript
-type VerifyParam = {
+export type VerifyParam = {
   x: number; // 拼图 x 轴移动值（拼图和滑块按钮可移动距离不一样，这里的移动距离是计算后的拼图移动距离。）
@@ -85,0 +85,0 @@ y: number; // y 轴移动值（按下鼠标到释放鼠标 y 轴的差值）

types/index.d.ts

@@ -27,7 +27,7 @@ import React, { ReactNode } from 'react';
 };
-declare enum CurrentTargetType {
+export declare enum CurrentTargetType {
     Puzzle = "puzzle",
     Button = "button"
 }
-declare type VerifyParam = {
+export declare type VerifyParam = {
     x: number;
@@ -44,5 +44,6 @@ y: number;
     Loading = 2,
-    Verify = 3,
-    Success = 4,
-    Error = 5
+    Moving = 3,
+    Verify = 4,
+    Success = 5,
+    Error = 6
 }
@@ -49,0 +50,0 @@ export declare type ActionType = {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

93816

increased by0.32%

Lines of code

1327

increased by0.61%

No dependency changes