rc-slider-captcha
Version:
React slider captcha component.
707 lines (682 loc) • 50.2 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib = require('tslib');
var classnames = require('classnames');
var React = require('react');
var rcHooks = require('rc-hooks');
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
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 color: var(--rcsc-button-color, #676d73);\n font-size: 22px;\n line-height: 1;\n background-color: #fff;\n background-color: var(--rcsc-button-bg-color, #fff);\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 color: var(--rcsc-button-hover-color, #fff);\n background-color: #1991fa;\n background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button-verify {\n color: #fff;\n color: var(--rcsc-button-hover-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 color: var(--rcsc-button-hover-color, #fff);\n background-color: #1991fa;\n background-color: var(--rcsc-primary, #1991fa);\n}\n.rc-slider-captcha-button:active {\n color: #fff;\n color: var(--rcsc-button-hover-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 color: var(--rcsc-button-hover-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 color: var(--rcsc-button-hover-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 color: var(--rcsc-button-hover-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 color: var(--rcsc-button-hover-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 color: var(--rcsc-button-hover-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 color: var(--rcsc-button-hover-color, #fff);\n background-color: #52ccba;\n background-color: var(--rcsc-success, #52ccba);\n cursor: default;\n}\n.rc-slider-captcha-button-disabled {\n color: #676d73;\n color: var(--rcsc-button-color, #676d73);\n background-color: #fff;\n background-color: var(--rcsc-button-bg-color, #fff);\n cursor: no-drop;\n opacity: 0.7;\n}\n.rc-slider-captcha-button-disabled:hover {\n color: #676d73;\n color: var(--rcsc-button-color, #676d73);\n background-color: #fff;\n background-color: var(--rcsc-button-bg-color, #fff);\n cursor: no-drop;\n opacity: 0.7;\n}\n.rc-slider-captcha-button-disabled:active {\n color: #676d73;\n color: var(--rcsc-button-color, #676d73);\n background-color: #fff;\n background-color: var(--rcsc-button-bg-color, #fff);\n cursor: no-drop;\n opacity: 0.7;\n}\n.rc-slider-captcha-control {\n position: relative;\n box-sizing: border-box;\n width: 100%;\n height: 42px;\n height: var(--rcsc-control-height, 42px);\n background-color: #f7f9fa;\n background-color: var(--rcsc-bg-color, #f7f9fa);\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n border: 1px solid #e4e7eb;\n border: 1px solid var(--rcsc-border-color, #e4e7eb);\n border-radius: 2px;\n border-radius: var(--rcsc-control-border-radius, 2px);\n}\n.rc-slider-captcha-control-button {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 2;\n border-radius: 2px;\n border-radius: var(--rcsc-control-border-radius, 2px);\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 /* stylelint-disable-next-line declaration-property-value-no-unknown */\n border: 1px solid #1991fa;\n border: 1px solid var(--rcsc-primary, #1991fa);\n border-radius: 2px;\n border-radius: var(--rcsc-control-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 width: 100%;\n height: 100%;\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-load-failed {\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.rc-slider-captcha-control-load-failed .rc-slider-captcha-control-button,\n.rc-slider-captcha-control-load-failed .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-control-load-failed .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-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-load-failed {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n color: #ccc;\n font-size: 85px;\n background-color: #f7f9fa;\n background-color: var(--rcsc-bg-color, #f7f9fa);\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-panel {\n padding-bottom: 15px;\n}\n.rc-slider-captcha-panel-inner {\n overflow: hidden;\n border-radius: 2px;\n border-radius: var(--rcsc-panel-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);
// className 前缀
var prefixCls = 'rc-slider-captcha';
// 获取事件触发客户端坐标
function getClient(e) {
var x = 0, y = 0;
if (typeof e.clientX === 'number' && typeof e.clientY === 'number') {
x = e.clientX;
y = e.clientY;
}
else if (e.touches && e.touches[0]) {
x = e.touches[0].clientX;
y = e.touches[0].clientY;
}
else if (e.changedTouches && e.changedTouches[0]) {
x = e.changedTouches[0].clientX;
y = e.changedTouches[0].clientY;
}
return {
clientX: x,
clientY: y
};
}
// 设置样式
function setStyle(el, styleObj) {
if (styleObj === void 0) { styleObj = {}; }
if (el) {
for (var prop in styleObj) {
el.style[prop] = styleObj[prop];
}
}
}
// 当前运行环境是否可以使用 dom
var isBrowser = typeof window === 'object' &&
window &&
typeof document === 'object' &&
document &&
window.document === document &&
!!document.addEventListener;
// 是否支持指针事件
var isSupportPointer = isBrowser && 'onpointerdown' in window;
// 是否支持Touch事件
// 区分移动端和PC端的事件绑定，移动端也会触发 mouseup mousedown 事件
var isSupportTouch = isBrowser && 'ontouchstart' in window;
// 触发重绘
var reflow = function (node) { return node === null || node === void 0 ? void 0 : node.scrollTop; };
// 规整化数字精度
function normalizeNumber(num, precision) {
if (typeof num === 'number' &&
!Number.isNaN(num) &&
typeof precision === 'number' &&
precision > 0) {
return Number(num.toFixed(precision));
}
return num;
}
var currentPrefixCls$2 = "".concat(prefixCls, "-button");
var SliderButton = function (_a) {
var _b;
var className = _a.className, disabled = _a.disabled, active = _a.active, success = _a.success, error = _a.error, verify = _a.verify, buttonRef = _a.buttonRef, restProps = tslib.__rest(_a, ["className", "disabled", "active", "success", "error", "verify", "buttonRef"]);
return (React.createElement("span", tslib.__assign({ className: classnames(currentPrefixCls$2, className, (_b = {},
_b["".concat(currentPrefixCls$2, "-disabled")] = disabled,
_b["".concat(currentPrefixCls$2, "-active")] = active,
_b["".concat(currentPrefixCls$2, "-verify")] = verify,
_b["".concat(currentPrefixCls$2, "-success")] = success,
_b["".concat(currentPrefixCls$2, "-error")] = error,
_b["".concat(currentPrefixCls$2, "-pc")] = !isSupportTouch // 如果是移动端，去掉 hover 样式
,
_b)), ref: buttonRef }, restProps)));
};
SliderButton.displayName = 'SliderButton';
var IconArrowRight = function (props) {
return (React.createElement("svg", tslib.__assign({ viewBox: "0 0 1024 1024", version: "1.1", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor" }, props),
React.createElement("path", { d: "M116.9408 561.4592m0-40.96l0 0q0-40.96 40.96-40.96l573.44 0q40.96 0 40.96 40.96l0 0q0 40.96-40.96 40.96l-573.44 0q-40.96 0-40.96-40.96Z" }),
React.createElement("path", { d: "M769.82272 519.43424l-203.22304-203.22304a40.96 40.96 0 1 1 57.91744-57.91744l231.71072 231.71072a40.96 40.96 0 0 1 0.45056 58.44992L624.9472 780.12416a40.96 40.96 0 0 1-57.93792-57.91744l202.79296-202.79296z" })));
};
var IconCheck = function (props) {
return (React.createElement("svg", tslib.__assign({ viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor" }, props),
React.createElement("path", { d: "M864.554667 268.501333a42.666667 42.666667 0 0 1 0 60.330667L412.032 781.397333a42.453333 42.453333 0 0 1-22.613333 11.818667l-5.034667 0.597333H379.306667a42.496 42.496 0 0 1-27.648-12.416l-211.2-211.2a42.666667 42.666667 0 1 1 60.330666-60.330666l180.992 180.992 422.4-422.4a42.666667 42.666667 0 0 1 60.330667 0z" })));
};
var IconLoading = function (props) {
return (React.createElement("svg", tslib.__assign({ viewBox: "0 0 120 120", width: "1em", height: "1em" }, props),
React.createElement("defs", null,
React.createElement("line", { id: "l", x1: "60", x2: "60", y1: "7", y2: "27", stroke: "currentColor", strokeWidth: "11", strokeLinecap: "round" })),
React.createElement("g", null,
React.createElement("use", { xlinkHref: "#l", opacity: ".27" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".27", transform: "rotate(30 60,60)" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".27", transform: "rotate(60 60,60)" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".27", transform: "rotate(90 60,60)" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".27", transform: "rotate(120 60,60)" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".27", transform: "rotate(150 60,60)" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".37", transform: "rotate(180 60,60)" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".46", transform: "rotate(210 60,60)" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".56", transform: "rotate(240 60,60)" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".66", transform: "rotate(270 60,60)" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".75", transform: "rotate(300 60,60)" }),
React.createElement("use", { xlinkHref: "#l", opacity: ".85", transform: "rotate(330 60,60)" }))));
};
var IconRefresh = function (props) {
return (React.createElement("svg", tslib.__assign({ viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor" }, props),
React.createElement("path", { d: "M866.133333 573.013333a42.666667 42.666667 0 0 0-53.333333 27.733334A304.64 304.64 0 0 1 519.68 810.666667 302.933333 302.933333 0 0 1 213.333333 512a302.933333 302.933333 0 0 1 306.346667-298.666667 309.76 309.76 0 0 1 198.4 71.253334l-92.586667-15.36a42.666667 42.666667 0 0 0-49.066666 35.413333 42.666667 42.666667 0 0 0 35.413333 49.066667l180.906667 29.866666h7.253333a42.666667 42.666667 0 0 0 14.506667-2.56 14.08 14.08 0 0 0 4.266666-2.56 33.28 33.28 0 0 0 8.533334-4.693333l3.84-4.693333c0-2.133333 3.84-3.84 5.546666-6.4s0-4.266667 2.133334-5.973334a57.173333 57.173333 0 0 0 2.986666-7.68l32-170.666666a42.666667 42.666667 0 0 0-85.333333-16.213334l-11.52 61.866667A392.96 392.96 0 0 0 519.68 128 388.266667 388.266667 0 0 0 128 512a388.266667 388.266667 0 0 0 391.68 384A389.12 389.12 0 0 0 896 626.346667a42.666667 42.666667 0 0 0-29.866667-53.333334z" })));
};
var IconX = function (props) {
return (React.createElement("svg", tslib.__assign({ viewBox: "0 0 1024 1024", xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor" }, props),
React.createElement("path", { d: "M572.96896 524.6976l217.23136 217.25184a40.96 40.96 0 1 1-57.93792 57.91744L515.072 582.63552l-212.3776 212.3776a40.96 40.96 0 1 1-57.9584-57.91744l212.39808-212.3776-217.21088-217.23136a40.96 40.96 0 1 1 57.91744-57.91744l217.23136 217.21088L737.0752 244.736a40.96 40.96 0 1 1 57.93792 57.91744L572.96896 524.71808z" })));
};
var IconImageFill = function (props) {
return (React.createElement("svg", tslib.__assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "currentColor", viewBox: "0 0 16 16" }, props),
React.createElement("path", { d: "M.002 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-12a2 2 0 0 1-2-2zm1 9v1a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062zm5-6.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0" })));
};
var currentPrefixCls$1 = "".concat(prefixCls, "-icon");
var SliderIconBase = function (_a) {
var _b;
var className = _a.className, spin = _a.spin, restProps = tslib.__rest(_a, ["className", "spin"]);
return (React.createElement("span", tslib.__assign({ className: classnames(currentPrefixCls$1, (_b = {}, _b["".concat(currentPrefixCls$1, "-spin")] = spin, _b), className) }, restProps)));
};
var iconMap = {
arrowRight: React.createElement(IconArrowRight, null),
check: React.createElement(IconCheck, null),
loading: React.createElement(IconLoading, null),
refresh: React.createElement(IconRefresh, null),
x: React.createElement(IconX, null),
imageFill: React.createElement(IconImageFill, null)
};
var SliderIcon = function (_a) {
var type = _a.type, restProps = tslib.__rest(_a, ["type"]);
return React.createElement(SliderIconBase, tslib.__assign({}, restProps), iconMap[type]);
};
// 内部状态
exports.Status = void 0;
(function (Status) {
Status[Status["Default"] = 1] = "Default";
Status[Status["Loading"] = 2] = "Loading";
Status[Status["Moving"] = 3] = "Moving";
Status[Status["Verify"] = 4] = "Verify";
Status[Status["Success"] = 5] = "Success";
Status[Status["Error"] = 6] = "Error";
Status[Status["LoadFailed"] = 7] = "LoadFailed";
})(exports.Status || (exports.Status = {}));
var controlPrefixCls = "".concat(prefixCls, "-control");
var SliderButtonDefaultWidth = 40;
var IndicatorBorderWidth = 2;
var ControlBar = function (_a) {
var _b, _c;
var _d = _a.status, status = _d === void 0 ? exports.Status.Default : _d, isLimitErrors = _a.isLimitErrors, customTipText = _a.tipText, customTipIcon = _a.tipIcon, sliderButtonProps = _a.sliderButtonProps, indicatorProps = _a.indicatorProps, controlRef = _a.controlRef, restProps = tslib.__rest(_a, ["status", "isLimitErrors", "tipText", "tipIcon", "sliderButtonProps", "indicatorProps", "controlRef"]);
var wrapperRef = React.useRef(null);
var sliderButtonRef = React.useRef(null);
var indicatorRef = React.useRef(null);
var rectRef = React.useRef({});
var tipText = tslib.__assign({ default: '向右拖动滑块填充拼图', loading: '加载中...', moving: null, verifying: null, success: null, error: null, errors: (React.createElement(React.Fragment, null,
React.createElement(SliderIcon, { type: "x", style: { fontSize: 20 } }),
" \u5931\u8D25\u8FC7\u591A\uFF0C\u70B9\u51FB\u91CD\u8BD5")), loadFailed: '加载失败，点击重试' }, customTipText);
var tipIcon = tslib.__assign({ default: React.createElement(SliderIcon, { type: "arrowRight" }), loading: React.createElement(SliderIcon, { type: "loading", spin: true }), error: React.createElement(SliderIcon, { type: "x" }), success: React.createElement(SliderIcon, { type: "check" }) }, customTipIcon);
var statusViewMap = (_b = {},
_b[exports.Status.Default] = [tipText.default, tipIcon.default],
_b[exports.Status.Loading] = [tipText.loading, tipIcon.default],
_b[exports.Status.Moving] = [tipText.moving, tipIcon.default],
_b[exports.Status.Verify] = [tipText.verifying, tipIcon.loading],
_b[exports.Status.Error] = [tipText.error, tipIcon.error],
_b[exports.Status.Success] = [tipText.success, tipIcon.success],
_b[exports.Status.LoadFailed] = [tipText.loadFailed, tipIcon.default],
_b);
var getSliderButtonWidth = function (force) {
var _a;
if (force || typeof rectRef.current.sliderButtonWidth !== 'number') {
rectRef.current.sliderButtonWidth =
((_a = sliderButtonRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) || SliderButtonDefaultWidth;
}
return rectRef.current.sliderButtonWidth;
};
var getIndicatorBorderWidth = function (force) {
if (force || typeof rectRef.current.indicatorBorderWidth !== 'number') {
if (indicatorRef.current) {
var indicatorStyles = window.getComputedStyle(indicatorRef.current);
rectRef.current.indicatorBorderWidth =
parseInt(indicatorStyles.borderLeftWidth) + parseInt(indicatorStyles.borderRightWidth);
}
else {
rectRef.current.indicatorBorderWidth = IndicatorBorderWidth;
}
}
return rectRef.current.indicatorBorderWidth;
};
var getRect = function (force) {
var _a;
if (force || !rectRef.current.rect) {
if (wrapperRef.current) {
rectRef.current.rect = (_a = wrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
}
}
return rectRef.current.rect;
};
React.useImperativeHandle(controlRef, function () { return ({
getSliderButtonWidth: getSliderButtonWidth,
getIndicatorBorderWidth: getIndicatorBorderWidth,
getRect: getRect,
updateLeft: function (left) {
var sliderButtonWidth = getSliderButtonWidth();
var indicatorBorderWidth = getIndicatorBorderWidth();
setStyle(sliderButtonRef.current, { left: left + 'px' });
setStyle(indicatorRef.current, {
width: left + sliderButtonWidth + indicatorBorderWidth + 'px'
});
}
}); }, []);
var isLoading = status === exports.Status.Loading;
var isMoving = status === exports.Status.Moving;
var isVerify = status === exports.Status.Verify;
var isSuccess = status === exports.Status.Success;
var isError = status === exports.Status.Error;
var isLoadFailed = status === exports.Status.LoadFailed;
var currentTipText = isLimitErrors ? tipText.errors : statusViewMap[status][0];
return (React.createElement("div", tslib.__assign({}, restProps, { className: classnames(controlPrefixCls, (_c = {},
_c["".concat(controlPrefixCls, "-loading")] = isLoading,
_c["".concat(controlPrefixCls, "-moving")] = isMoving,
_c["".concat(controlPrefixCls, "-verify")] = isVerify,
_c["".concat(controlPrefixCls, "-success")] = isSuccess,
_c["".concat(controlPrefixCls, "-error")] = isError,
_c["".concat(controlPrefixCls, "-errors")] = isLimitErrors,
_c["".concat(controlPrefixCls, "-load-failed")] = isLoadFailed,
_c), restProps.className), ref: wrapperRef }),
React.createElement("div", tslib.__assign({}, indicatorProps, { className: classnames("".concat(controlPrefixCls, "-indicator"), indicatorProps === null || indicatorProps === void 0 ? void 0 : indicatorProps.className), ref: indicatorRef })),
React.createElement(SliderButton, tslib.__assign({}, sliderButtonProps, { className: classnames("".concat(controlPrefixCls, "-button"), sliderButtonProps === null || sliderButtonProps === void 0 ? void 0 : sliderButtonProps.className), disabled: isLoading, active: isMoving, verify: isVerify, success: isSuccess, error: isError, buttonRef: sliderButtonRef }), statusViewMap[status][1]),
React.createElement("div", { className: classnames("".concat(controlPrefixCls, "-tips")), style: currentTipText ? {} : { display: 'none' } }, currentTipText)));
};
var currentPrefixCls = "".concat(prefixCls, "-loading");
var LoadingBox = function (_a) {
var _b = _a.icon, icon = _b === void 0 ? React.createElement(SliderIcon, { type: "loading", spin: true }) : _b, _c = _a.text, text = _c === void 0 ? '加载中...' : _c, className = _a.className, restProps = tslib.__rest(_a, ["icon", "text", "className"]);
return (React.createElement("div", tslib.__assign({ className: classnames(currentPrefixCls, className) }, restProps),
React.createElement("div", { className: "".concat(currentPrefixCls, "-icon") }, icon),
React.createElement("div", { className: "".concat(currentPrefixCls, "-text") }, text)));
};
var jigsawPrefixCls = "".concat(prefixCls, "-jigsaw");
// 默认配置
var defaultConfig = {
bgSize: {
width: 320,
height: 160
},
puzzleSize: {
width: 60,
left: 0
},
loadFailedIcon: React.createElement(SliderIcon, { type: "imageFill" }),
refreshIcon: React.createElement(SliderIcon, { type: "refresh" })
};
var Jigsaw = function (_a) {
var _b, _c;
var status = _a.status, _d = _a.bgSize, bgSize = _d === void 0 ? defaultConfig.bgSize : _d, _e = _a.puzzleSize, puzzleSize = _e === void 0 ? defaultConfig.puzzleSize : _e, bgUrl = _a.bgUrl, puzzleUrl = _a.puzzleUrl, bgImgProps = _a.bgImgProps, puzzleImgProps = _a.puzzleImgProps, jigsawRef = _a.jigsawRef, loadingBoxProps = _a.loadingBoxProps, _f = _a.loadFailedIcon, loadFailedIcon = _f === void 0 ? defaultConfig.loadFailedIcon : _f, _g = _a.showRefreshIcon, showRefreshIcon = _g === void 0 ? true : _g, _h = _a.refreshIcon, refreshIcon = _h === void 0 ? defaultConfig.refreshIcon : _h, disabledRefresh = _a.disabledRefresh, onRefresh = _a.onRefresh, style = _a.style, className = _a.className, children = _a.children, restProps = tslib.__rest(_a, ["status", "bgSize", "puzzleSize", "bgUrl", "puzzleUrl", "bgImgProps", "puzzleImgProps", "jigsawRef", "loadingBoxProps", "loadFailedIcon", "showRefreshIcon", "refreshIcon", "disabledRefresh", "onRefresh", "style", "className", "children"]);
var puzzleRef = React.useRef(null);
React.useImperativeHandle(jigsawRef, function () { return ({
updateLeft: function (left) {
setStyle(puzzleRef.current, { left: left + 'px' });
}
}); });
if (status === exports.Status.Loading) {
return (React.createElement(LoadingBox, tslib.__assign({}, loadingBoxProps, { style: tslib.__assign(tslib.__assign({}, loadingBoxProps === null || loadingBoxProps === void 0 ? void 0 : loadingBoxProps.style), bgSize) })));
}
if (status === exports.Status.LoadFailed) {
return (React.createElement("div", { className: "".concat(prefixCls, "-load-failed"), style: bgSize }, loadFailedIcon));
}
var isStop = status === exports.Status.Verify || status === exports.Status.Error || status === exports.Status.Success; // 是否停止移动
return (React.createElement("div", tslib.__assign({ className: classnames(jigsawPrefixCls, (_b = {}, _b["".concat(jigsawPrefixCls, "-stop")] = isStop, _b), className), style: tslib.__assign(tslib.__assign({}, style), bgSize) }, restProps),
React.createElement("img", tslib.__assign({ src: bgUrl, alt: "" }, bgImgProps, { className: classnames("".concat(jigsawPrefixCls, "-bg"), bgImgProps === null || bgImgProps === void 0 ? void 0 : bgImgProps.className), style: tslib.__assign(tslib.__assign({}, bgImgProps === null || bgImgProps === void 0 ? void 0 : bgImgProps.style), bgSize) })),
React.createElement("img", tslib.__assign({ src: puzzleUrl, alt: "" }, puzzleImgProps, { className: classnames("".concat(jigsawPrefixCls, "-puzzle"), puzzleImgProps === null || puzzleImgProps === void 0 ? void 0 : puzzleImgProps.className), style: tslib.__assign(tslib.__assign({}, puzzleImgProps === null || puzzleImgProps === void 0 ? void 0 : puzzleImgProps.style), puzzleSize), ref: puzzleRef })),
showRefreshIcon && status !== exports.Status.Success && refreshIcon && (React.createElement("div", { className: classnames("".concat(jigsawPrefixCls, "-refresh"), (_c = {},
_c["".concat(jigsawPrefixCls, "-refresh-disabled")] = status === exports.Status.Verify || disabledRefresh,
_c)), onClick: function () {
if (status !== exports.Status.Verify && !disabledRefresh) {
onRefresh === null || onRefresh === void 0 ? void 0 : onRefresh();
}
} }, refreshIcon)),
children));
};
var events = isSupportPointer
? {
move: 'pointermove',
end: 'pointerup',
cancel: 'pointercancel'
}
: isSupportTouch
? {
move: 'touchmove',
end: 'touchend',
cancel: 'touchcancel'
}
: {
move: 'mousemove',
end: 'mouseup',
cancel: 'touchcancel'
};
var startEventName = isSupportPointer
? 'onPointerDown'
: isSupportTouch
? 'onTouchStart'
: 'onMouseDown';
exports.CurrentTargetType = void 0;
(function (CurrentTargetType) {
CurrentTargetType["Puzzle"] = "puzzle";
CurrentTargetType["Button"] = "button";
})(exports.CurrentTargetType || (exports.CurrentTargetType = {}));
var SliderCaptcha = function (_a) {
var _b, _c, _d;
var _e = _a.mode, mode = _e === void 0 ? 'embed' : _e, _f = _a.limitErrorCount, limitErrorCount = _f === void 0 ? 0 : _f, tipText = _a.tipText, tipIcon = _a.tipIcon, customRefreshIcon = _a.refreshIcon, outBgSize = _a.bgSize, outPuzzleSize = _a.puzzleSize, request = _a.request, _g = _a.autoRequest, autoRequest = _g === void 0 ? true : _g, onVerify = _a.onVerify, _h = _a.autoRefreshOnError, autoRefreshOnError = _h === void 0 ? true : _h, actionRef = _a.actionRef, _j = _a.showRefreshIcon, showRefreshIcon = _j === void 0 ? true : _j, jigsawContent = _a.jigsawContent, _k = _a.errorHoldDuration, errorHoldDuration = _k === void 0 ? 500 : _k, _l = _a.showJigsawOnActive, showJigsawOnActive = _l === void 0 ? false : _l, _m = _a.loadingDelay, loadingDelay = _m === void 0 ? 0 : _m, _o = _a.placement, placement = _o === void 0 ? 'top' : _o, loadingBoxProps = _a.loadingBoxProps, sliderButtonProps = _a.sliderButtonProps, _p = _a.precision, precision = _p === void 0 ? 7 : _p, className = _a.className, style = _a.style, styles = _a.styles;
var _q = rcHooks.useSafeState(), jigsawImgs = _q[0], setJigsawImgs = _q[1];
var _r = rcHooks.useSafeState(function () {
if (!modeIsSlider && !!request && autoRequest) {
return exports.Status.Loading;
}
return exports.Status.Default;
}), status = _r[0], setStatus = _r[1];
var latestStatus = rcHooks.useLatest(status); // 同步status值，提供给事件方法使用
var controlRef = React.useRef(null);
var jigsawRef = React.useRef(null);
// dom ref
var panelRef = React.useRef(null);
// config
var refreshIcon = customRefreshIcon !== undefined ? customRefreshIcon : tipIcon === null || tipIcon === void 0 ? void 0 : tipIcon.refresh;
var bgSize = tslib.__assign(tslib.__assign({}, defaultConfig.bgSize), outBgSize);
var puzzleSize = tslib.__assign(tslib.__assign({}, defaultConfig.puzzleSize), outPuzzleSize);
var placementPos = placement === 'bottom' ? 'top' : 'bottom';
var internalRef = React.useRef({
isPressed: false, // 标识是否按下
trail: [], // 移动轨迹
errorCount: 0, // 连续错误次数
startInfo: { x: 0, y: 0, timestamp: 0 }, // 鼠标按下或触摸开始信息
currentTargetType: exports.CurrentTargetType.Button, // 当前触发事件的节点，拼图或按钮
isMouseEntered: false, // 鼠标是否移入
floatTransitionTimer: null, // 触发式渐变过渡效果定时器
floatDelayShowTimer: null, // 触发式鼠标移入定时器
floatDelayHideTimer: null, // 触发式鼠标移出定时器
refreshTimer: null, // 自动刷新的定时器
loadingTimer: null, // 延迟加载状态定时器
sliderButtonWidth: 40, // 滑块按钮宽度
indicatorBorderWidth: 2, // 滑轨边框宽度
ratio: 1, // 当滑块或拼图为触发事件的焦点时，两者的变换比例
buttonMaxDistance: 0, // 按钮最大可移动距离
puzzleMaxDistance: 0 // 拼图最大可移动距离
});
var modeIsSlider = mode === 'slider'; // 单滑轨，无图片
var hasLoadingDelay = typeof loadingDelay === 'number' && loadingDelay > 0; // 延迟加载状态
var isLimitErrors = status === exports.Status.Error &&
limitErrorCount > 0 &&
internalRef.current.errorCount >= limitErrorCount; // 是否超过限制错误次数
// 更新最大可移动距离
var updateMaxDistance = function () {
internalRef.current.buttonMaxDistance =
bgSize.width -
internalRef.current.sliderButtonWidth -
internalRef.current.indicatorBorderWidth;
internalRef.current.puzzleMaxDistance = bgSize.width - puzzleSize.width - puzzleSize.left;
};
var getControlHeight = function () {
var _a;
return ((_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.getRect(true).height) || 42;
};
// 获取背景图和拼图
var getJigsawImages = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
var result;
return tslib.__generator(this, function (_a) {
switch (_a.label) {
case 0:
if (modeIsSlider)
return [2 /*return*/];
if (!request) return [3 /*break*/, 4];
if (hasLoadingDelay) {
internalRef.current.loadingTimer = setTimeout(function () {
setStatus(exports.Status.Loading);
}, loadingDelay);
}
else {
setStatus(exports.Status.Loading);
}
_a.label = 1;
case 1:
_a.trys.push([1, 3, , 4]);
return [4 /*yield*/, request()];
case 2:
result = _a.sent();
if (hasLoadingDelay) {
clearTimeout(internalRef.current.loadingTimer);
}
setJigsawImgs(result);
setStatus(exports.Status.Default);
return [3 /*break*/, 4];
case 3:
_a.sent();
// console.error(err);
if (hasLoadingDelay) {
clearTimeout(internalRef.current.loadingTimer);
}
setJigsawImgs(undefined);
setStatus(exports.Status.LoadFailed);
return [3 /*break*/, 4];
case 4: return [2 /*return*/];
}
});
}); };
// 触发式下，显示面板
var showPanel = function (delay) {
if (delay === void 0) { delay = 300; }
if (mode !== 'float' || latestStatus.current === exports.Status.Success) {
return;
}
clearTimeout(internalRef.current.floatTransitionTimer);
clearTimeout(internalRef.current.floatDelayHideTimer);
clearTimeout(internalRef.current.floatDelayShowTimer);
internalRef.current.floatDelayShowTimer = setTimeout(function () {
var _a;
setStyle(panelRef.current, { display: 'block' });
reflow(panelRef.current);
var controlBarHeight = getControlHeight() + 'px';
setStyle(panelRef.current, (_a = {}, _a[placementPos] = controlBarHeight, _a.opacity = '1', _a));
}, delay);
};
// 触发式下，隐藏面板
var hidePanel = function (delay) {
if (delay === void 0) { delay = 300; }
if (mode !== 'float') {
return;
}
clearTimeout(internalRef.current.floatTransitionTimer);
clearTimeout(internalRef.current.floatDelayHideTimer);
clearTimeout(internalRef.current.floatDelayShowTimer);
internalRef.current.floatDelayHideTimer = setTimeout(function () {
var _a;
var controlBarHalfHeight = getControlHeight() / 2 + 'px';
setStyle(panelRef.current, (_a = {}, _a[placementPos] = controlBarHalfHeight, _a.opacity = '0', _a));
internalRef.current.floatTransitionTimer = setTimeout(function () {
setStyle(panelRef.current, { display: 'none' });
}, 300);
}, delay);
};
// 更新拼图位置
var updatePuzzleLeft = function (left) {
var _a;
if (!modeIsSlider) {
(_a = jigsawRef.current) === null || _a === void 0 ? void 0 : _a.updateLeft(left);
}
};
// 重置状态和元素位置
var reset = function () {
var _a;
internalRef.current.isPressed = false;
setStatus(exports.Status.Default);
(_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.updateLeft(0);
updatePuzzleLeft(puzzleSize.left);
};
// 刷新
var refresh = function (resetErrorCount) {
if (resetErrorCount === void 0) { resetErrorCount = false; }
// 重置连续错误次数记录
if (resetErrorCount) {
internalRef.current.errorCount = 0;
}
// 清除延迟调用刷新方法的定时器
clearTimeout(internalRef.current.refreshTimer);
// 防止连续调用刷新方法，会触发多次请求的问题
if (latestStatus.current === exports.Status.Loading) {
return;
}
reset();
getJigsawImages();
};
// 点击滑块操作条，如果连续超过错误次数或请求失败则刷新
var handleClickControl = function () {
if (isLimitErrors || status === exports.Status.LoadFailed) {
refresh(isLimitErrors);
}
};
// 鼠标移入显示面板，如果支持touch事件不处理
var handleMouseEnter = function () {
if (isSupportTouch) {
return;
}
internalRef.current.isMouseEntered = true;
showPanel();
};
// 鼠标移出隐藏面板，如果支持touch事件不处理
var handleMouseLeave = function () {
internalRef.current.isMouseEntered = false;
if (isSupportTouch || (showJigsawOnActive && internalRef.current.isPressed)) {
return;
}
hidePanel();
};
var touchstartPuzzle = function (e) {
internalRef.current.currentTargetType = exports.CurrentTargetType.Puzzle;
touchstart(e);
};
var touchstartSliderButton = function (e) {
internalRef.current.currentTargetType = exports.CurrentTargetType.Button;
touchstart(e);
};
// 鼠标按下或触摸开始
var touchstart = function (e) {
if (latestStatus.current !== exports.Status.Default) {
return;
}
e.preventDefault(); // 防止移动端按下后会选择文本或图片
var _a = getClient(e), clientX = _a.clientX, clientY = _a.clientY;
internalRef.current.startInfo = {
x: clientX,
y: clientY,
timestamp: new Date().getTime()
};
internalRef.current.trail = [[clientX, clientY]];
if (controlRef.current) {
internalRef.current.sliderButtonWidth = controlRef.current.getSliderButtonWidth(true);
internalRef.current.indicatorBorderWidth = controlRef.current.getIndicatorBorderWidth(true);
}
updateMaxDistance();
// TODO 改动比例，等大版本更新在调整。
// if (modeIsSlider) {
// internalRef.current.ratio = 1;
// } else {
// 最大可移动区间值比例
internalRef.current.ratio =
internalRef.current.puzzleMaxDistance / internalRef.current.buttonMaxDistance;
if (internalRef.current.currentTargetType === exports.CurrentTargetType.Puzzle) {
internalRef.current.ratio = 1 / internalRef.current.ratio;
}
// }
// 处理移动端-触发式兼容
// 可触屏电脑不支持触摸事件，但是 pointerType 可能为 'touch' 或 'pen'
if (isSupportTouch || e.pointerType === 'pen' || e.pointerType === 'touch') {
showPanel(0);
}
internalRef.current.isPressed = true;
document.addEventListener(events.move, touchmove);
document.addEventListener(events.end, touchend);
document.addEventListener(events.cancel, touchend);
};
// 鼠标移动 或 触摸移动
var touchmove = function (e) {
var _a;
if (!internalRef.current.isPressed) {
return;
}
e.preventDefault();
var _b = getClient(e), clientX = _b.clientX, clientY = _b.clientY;
var diffX = clientX - internalRef.current.startInfo.x; // 移动距离
internalRef.current.trail.push([clientX, clientY]); // 记录移动轨迹
if (latestStatus.current !== exports.Status.Moving && diffX > 0) {
setStatus(exports.Status.Moving);
}
var puzzleLeft = diffX; // 拼图左偏移值
var sliderButtonLeft = diffX; // 滑块按钮左偏移值
if (internalRef.current.currentTargetType === exports.CurrentTargetType.Puzzle) {
diffX = Math.max(0, Math.min(diffX, internalRef.current.puzzleMaxDistance));
puzzleLeft = diffX + puzzleSize.left;
sliderButtonLeft = diffX * internalRef.current.ratio;
}
else {
diffX = Math.max(0, Math.min(diffX, internalRef.current.buttonMaxDistance));
sliderButtonLeft = diffX;
puzzleLeft = diffX * internalRef.current.ratio + puzzleSize.left;
}
(_a = controlRef.current) === null || _a === void 0 ? void 0 : _a.updateLeft(sliderButtonLeft);
updatePuzzleLeft(puzzleLeft);
};
// 鼠标弹起 或 停止触摸
var touchend = function (e) {
document.removeEventListener(events.move, touchmove);
document.removeEventListener(events.end, touchend);
document.removeEventListener(events.cancel, touchend);
if (!internalRef.current.isPressed) {
return;
}
if (latestStatus.current !== exports.Status.Moving || typeof onVerify !== 'function') {
internalRef.current.isPressed = false;
// 如果是移动端事件，并且是触发式，隐藏浮层
if (isSupportTouch ||
e.pointerType === 'pen' ||
e.pointerType === 'touch' ||
(showJigsawOnActive && !internalRef.current.isMouseEntered)) {
hidePanel();
}
reset();
return;
}
internalRef.current.isPressed = false;
setStatus(exports.Status.Verify);
var endTimestamp = new Date().getTime();
var _a = getClient(e), clientX = _a.clientX, clientY = _a.clientY;
var diffY = clientY - internalRef.current.startInfo.y;
var diffX = clientX - internalRef.current.startInfo.x; // 拼图移动距离
var sliderOffsetX = diffX; // 滑块偏移值
if (internalRef.current.currentTargetType === exports.CurrentTargetType.Puzzle) {
diffX = Math.max(0, Math.min(diffX, internalRef.current.puzzleMaxDistance));
sliderOffsetX = diffX * internalRef.current.ratio;
}
else {
diffX = Math.max(0, Math.min(diffX, internalRef.current.buttonMaxDistance));
sliderOffsetX = diffX;
diffX *= internalRef.current.ratio;
}
onVerify({
x: normalizeNumber(diffX, precision),
y: normalizeNumber(diffY, precision),
sliderOffsetX: normalizeNumber(sliderOffsetX, precision),
duration: endTimestamp - internalRef.current.startInfo.timestamp,
trail: internalRef.current.trail,
targetType: internalRef.current.currentTargetType,
errorCount: internalRef.current.errorCount
})
.then(function () {
internalRef.current.errorCount = 0;
setStatus(exports.Status.Success);
hidePanel();
})
.catch(function () {
internalRef.current.errorCount += 1;
setStatus(exports.Status.Error);
if (isSupportTouch ||
e.pointerType === 'pen' ||
e.pointerType === 'touch' ||
(showJigsawOnActive && !internalRef.current.isMouseEntered)) {
hidePanel();
}
if ((limitErrorCount <= 0 || internalRef.current.errorCount < limitErrorCount) &&
autoRefreshOnError) {
internalRef.current.refreshTimer = setTimeout(function () {
refresh();
}, errorHoldDuration);
}
});
};
rcHooks.useMount(function () {
if (autoRequest) {
getJigsawImages();
}
});
// 提供给外部
React.useImperativeHandle(actionRef, function () { return ({
refresh: refresh,
get status() {
return latestStatus.current;
}
}); });
return (React.createElement("div", { className: classnames(prefixCls, className, "".concat(prefixCls, "-").concat(mode), (_b = {},
_b["".concat(prefixCls, "-").concat(mode, "-").concat(placement)] = mode === 'float',
_b)), style: tslib.__assign({ width: bgSize.width }, style), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
!modeIsSlider && (React.createElement("div", { className: "".concat(prefixCls, "-panel"), ref: panelRef },
React.createElement("div", { className: "".concat(prefixCls, "-panel-inner"), style: tslib.__assign(tslib.__assign({}, styles === null || styles === void 0 ? void 0 : styles.panel), { height: bgSize.height }) },
React.createElement(Jigsaw, { status: status, bgSize: bgSize, puzzleSize: puzzleSize, bgUrl: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.bgUrl, puzzleUrl: jigsawImgs === null || jigsawImgs === void 0 ? void 0 : jigsawImgs.puzzleUrl, jigsawRef: jigsawRef, loadingBoxProps: loadingBoxProps, loadFailedIcon: tipIcon === null || tipIcon === void 0 ? void 0 : tipIcon.loadFailed, showRefreshIcon: showRefreshIcon, refreshIcon: refreshIcon, disabledRefresh: isLimitErrors, onRefresh: refresh, style: styles === null || styles === void 0 ? void 0 : styles.jigsaw, bgImgProps: { style: styles === null || styles === void 0 ? void 0 : styles.bgImg }, puzzleImgProps: (_c = {
style: styles === null || styles === void 0 ? void 0 : styles.puzzleImg
},
_c[startEventName] = touchstartPuzzle,
_c) }, jigsawContent)))),
React.createElement(ControlBar, { status: status, isLimitErrors: isLimitErrors, tipText: tipText, tipIcon: tipIcon, style: styles === null || styles === void 0 ? void 0 : styles.control, onClick: handleClickControl, indicatorProps: { style: styles === null || styles === void 0 ? void 0 : styles.indicator }, sliderButtonProps: tslib.__assign(tslib.__assign({}, sliderButtonProps), (_d = {}, _d[startEventName] = touchstartSliderButton, _d)), controlRef: controlRef })));
};
exports.default = SliderCaptcha;