go-captcha-test
Version:
This is the react package for go-captcha
1,283 lines (1,253 loc) • 62.5 kB
JavaScript
import React__default, { createElement, useState, useCallback, forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import classnames from 'classnames';
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || 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 = "/**\n * @Author Awen\n * @Date 2024/06/01\n * @Email wengaolng@gmail.com\n **/\n.index-module_iconBlock__Y1IUb {\n flex: 1;\n}\n.index-module_dots__2OJFw {\n position: absolute;\n top: 0;\n right: 0;\n left: 0;\n bottom: 0;\n}\n.index-module_dots__2OJFw .dot {\n position: absolute;\n z-index: 2;\n width: 22px;\n height: 22px;\n color: #cedffe;\n background: #3e7cff;\n border: 3px solid #f7f9fb;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 22px;\n cursor: default;\n}\n";
var cstyles = {"iconBlock":"index-module_iconBlock__Y1IUb","dots":"index-module_dots__2OJFw"};
styleInject(css_248z);
var css_248z$1 = "/**\n * @Author Awen\n * @Date 2024/06/01\n * @Email wengaolng@gmail.com\n **/\n:root {\n --go-captcha-theme-text-color: #333333;\n --go-captcha-theme-bg-color: #ffffff;\n --go-captcha-theme-btn-color: #ffffff;\n --go-captcha-theme-btn-disabled-color: #749ff9;\n --go-captcha-theme-btn-bg-color: #4e87ff;\n --go-captcha-theme-btn-border-color: #4e87ff;\n --go-captcha-theme-active-color: #3e7cff;\n --go-captcha-theme-border-color: rgba(206, 223, 254, 0.5);\n --go-captcha-theme-icon-color: #3C3C3C;\n --go-captcha-theme-drag-bar-color: #e0e0e0;\n --go-captcha-theme-drag-bg-color: #3e7cff;\n --go-captcha-theme-drag-icon-color: #ffffff;\n --go-captcha-theme-round-color: #e0e0e0;\n --go-captcha-theme-loading-icon-color: #3e7cff;\n --go-captcha-theme-body-bg-color: #34383e;\n --go-captcha-theme-default-color: #3e7cff;\n --go-captcha-theme-default-bg-color: #ecf5ff;\n --go-captcha-theme-default-border-color: #3e7cff;\n --go-captcha-theme-default-hover-color: #e0efff;\n --go-captcha-theme-error-color: #ed4630;\n --go-captcha-theme-error-bg-color: #fef0f0;\n --go-captcha-theme-error-border-color: #ff5a34;\n --go-captcha-theme-warn-color: #ffa000;\n --go-captcha-theme-warn-bg-color: #fdf6ec;\n --go-captcha-theme-warn-border-color: #ffbe09;\n --go-captcha-theme-success-color: #5eaa2f;\n --go-captcha-theme-success-bg-color: #f0f9eb;\n --go-captcha-theme-success-border-color: #8bc640;\n}\n.gocaptcha-module_wrapper__Kpdey {\n padding: 12px 16px;\n background-color: var(--go-captcha-theme-bg-color);\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n box-sizing: border-box;\n}\n.gocaptcha-module_theme__h-Ytl {\n border: 1px solid rgba(206, 223, 254, 0.5);\n border-color: var(--go-captcha-theme-border-color);\n border-radius: 8px;\n box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);\n -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);\n -moz-box-shadow: 0 0 20px rgba(100, 100, 100, 0.1);\n}\n.gocaptcha-module_header__LjDUC {\n height: 36px;\n width: 100%;\n font-size: 15px;\n color: var(--go-captcha-theme-text-color);\n display: flex;\n align-items: center;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.gocaptcha-module_header__LjDUC span {\n flex: 1;\n padding-right: 5px;\n}\n.gocaptcha-module_header__LjDUC em {\n padding: 0 3px;\n font-weight: bold;\n color: var(--go-captcha-theme-active-color);\n font-style: normal;\n}\n.gocaptcha-module_body__KJKNu {\n position: relative;\n width: 100%;\n margin-top: 10px;\n display: flex;\n background: var(--go-captcha-theme-body-bg-color);\n border-radius: 5px;\n -webkit-border-radius: 5px;\n -moz-border-radius: 5px;\n overflow: hidden;\n}\n.gocaptcha-module_bodyInner__jahqH {\n background: var(--go-captcha-theme-body-bg-color);\n}\n.gocaptcha-module_picture__LRwbY {\n position: relative;\n z-index: 2;\n width: 100%;\n}\n.gocaptcha-module_hide__TUOZE {\n visibility: hidden;\n}\n.gocaptcha-module_loading__Y-PYK {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 50%;\n width: 68px;\n height: 68px;\n margin-left: -34px;\n margin-top: -34px;\n line-height: 68px;\n text-align: center;\n display: flex;\n align-content: center;\n justify-content: center;\n}\n.gocaptcha-module_loading__Y-PYK svg,\n.gocaptcha-module_loading__Y-PYK circle {\n color: var(--go-captcha-theme-loading-icon-color);\n fill: var(--go-captcha-theme-loading-icon-color);\n}\n.gocaptcha-module_footer__Ywdpy {\n width: 100%;\n height: 50px;\n color: #34383e;\n display: flex;\n align-items: center;\n padding-top: 10px;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.gocaptcha-module_iconBlock__mVB8B {\n display: flex;\n align-items: center;\n}\n.gocaptcha-module_iconBlock__mVB8B svg {\n color: var(--go-captcha-theme-icon-color);\n fill: var(--go-captcha-theme-icon-color);\n margin: 0 5px;\n cursor: pointer;\n}\n.gocaptcha-module_buttonBlock__EZ4vg {\n width: 120px;\n height: 40px;\n}\n.gocaptcha-module_buttonBlock__EZ4vg button {\n width: 100%;\n height: 40px;\n text-align: center;\n padding: 9px 15px;\n font-size: 15px;\n border-radius: 5px;\n display: inline-block;\n line-height: 1;\n white-space: nowrap;\n cursor: pointer;\n color: var(--go-captcha-theme-btn-color);\n background-color: var(--go-captcha-theme-btn-bg-color);\n border: 1px solid transparent;\n border-color: var(--go-captcha-theme-btn-bg-color);\n -webkit-appearance: none;\n box-sizing: border-box;\n outline: none;\n margin: 0;\n transition: 0.1s;\n font-weight: 500;\n -moz-user-select: none;\n -webkit-user-select: none;\n}\n.gocaptcha-module_buttonBlock__EZ4vg button.disabled {\n pointer-events: none;\n background-color: var(--go-captcha-theme-btn-disabled-color);\n border-color: var(--go-captcha-theme-btn-disabled-color);\n}\n.gocaptcha-module_dragSlideBar__noauW {\n width: 100%;\n height: 100%;\n position: relative;\n touch-action: none;\n}\n.gocaptcha-module_dragLine__3B9KR {\n position: absolute;\n height: 14px;\n background-color: var(--go-captcha-theme-drag-bar-color);\n left: 0;\n right: 0;\n top: 50%;\n margin-top: -7px;\n border-radius: 7px;\n}\n.gocaptcha-module_dragBlock__bFlwx {\n position: absolute;\n left: 0;\n top: 50%;\n margin-top: -20px;\n width: 82px;\n height: 40px;\n z-index: 2;\n background-color: var(--go-captcha-theme-drag-bg-color);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-radius: 24px;\n box-shadow: 0 0 20px rgba(100, 100, 100, 0.35);\n -webkit-box-shadow: 0 0 20px rgba(100, 100, 100, 0.35);\n -moz-box-shadow: 0 0 20px rgba(100, 100, 100, 0.35);\n}\n.gocaptcha-module_dragBlock__bFlwx svg {\n color: var(--go-captcha-theme-drag-icon-color);\n fill: var(--go-captcha-theme-drag-icon-color);\n}\n.gocaptcha-module_disabled__4kN6w {\n pointer-events: none;\n background-color: var(--go-captcha-theme-btn-disabled-color);\n border-color: var(--go-captcha-theme-btn-disabled-color);\n}\n.gocaptcha-module_dragBlockInline__PpF3f {\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n";
var styles = {"wrapper":"gocaptcha-module_wrapper__Kpdey","theme":"gocaptcha-module_theme__h-Ytl","header":"gocaptcha-module_header__LjDUC","body":"gocaptcha-module_body__KJKNu","bodyInner":"gocaptcha-module_bodyInner__jahqH","picture":"gocaptcha-module_picture__LRwbY","hide":"gocaptcha-module_hide__TUOZE","loading":"gocaptcha-module_loading__Y-PYK","footer":"gocaptcha-module_footer__Ywdpy","iconBlock":"gocaptcha-module_iconBlock__mVB8B","buttonBlock":"gocaptcha-module_buttonBlock__EZ4vg","dragSlideBar":"gocaptcha-module_dragSlideBar__noauW","dragLine":"gocaptcha-module_dragLine__3B9KR","dragBlock":"gocaptcha-module_dragBlock__bFlwx","disabled":"gocaptcha-module_disabled__4kN6w","dragBlockInline":"gocaptcha-module_dragBlockInline__PpF3f"};
styleInject(css_248z$1);
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const defaultConfig = () => ({
width: 300,
height: 220,
thumbWidth: 150,
thumbHeight: 40,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: true,
title: "请在下图依次点击",
buttonText: "确认",
iconSize: 22,
dotSize: 24
});
const Icon = props => createElement("svg", Object.assign({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 200 200",
width: 26,
height: 26
}, props), createElement("path", {
d: "M100.1,189.9C100.1,189.9,100,189.9,100.1,189.9c-49.7,0-90-40.4-90-89.9c0-49.6,40.4-89.9,89.9-89.9\n\t\tc49.6,0,89.9,40.4,89.9,89.9c0,18.2-5.4,35.7-15.6,50.7c-1.5,2.1-3.6,3.4-6.1,3.9c-2.5,0.4-5-0.1-7-1.6c-4.2-3-5.3-8.6-2.4-12.9\n\t\tc8.1-11.9,12.4-25.7,12.4-40.1c0-39.2-31.9-71.1-71.1-71.1c-39.2,0-71.1,31.9-71.1,71.1c0,39.2,31.9,71.1,71.1,71.1\n\t\tc7.7,0,15.3-1.2,22.6-3.6c2.4-0.8,4.9-0.6,7.2,0.5c2.2,1.1,3.9,3.1,4.7,5.5c1.6,4.9-1,10.2-5.9,11.9\n\t\tC119.3,188.4,109.8,189.9,100.1,189.9z M73,136.4C73,136.4,73,136.4,73,136.4c-2.5,0-4.9-1-6.7-2.8c-3.7-3.7-3.7-9.6,0-13.3\n\t\tL86.7,100L66.4,79.7c-3.7-3.7-3.7-9.6,0-13.3c3.7-3.7,9.6-3.7,13.3,0L100,86.7l20.3-20.3c1.8-1.8,4.1-2.8,6.7-2.8c0,0,0,0,0,0\n\t\tc2.5,0,4.9,1,6.7,2.8c1.8,1.8,2.8,4.1,2.8,6.7c0,2.5-1,4.9-2.8,6.7L113.3,100l20.3,20.3c3.7,3.7,3.7,9.6,0,13.3\n\t\tc-3.7,3.7-9.6,3.7-13.3,0L100,113.3l-20.3,20.3C77.9,135.4,75.5,136.4,73,136.4z"
}));
const Icon$1 = props => createElement("svg", Object.assign({
width: 26,
height: 26
}, props, {
viewBox: "0 0 200 200",
xmlns: "http://www.w3.org/2000/svg"
}), createElement("path", {
d: "M135,149.9c-10.7,7.6-23.2,11.4-36,11.2c-1.7,0-3.4-0.1-5-0.3c-0.7-0.1-1.4-0.2-2-0.3c-1.3-0.2-2.6-0.4-3.9-0.6\n\tc-0.8-0.2-1.6-0.4-2.3-0.5c-1.2-0.3-2.5-0.6-3.7-1c-0.6-0.2-1.2-0.4-1.7-0.6c-1.4-0.5-2.8-1-4.2-1.5c-0.3-0.1-0.6-0.3-0.9-0.4\n\tc-1.6-0.7-3.2-1.4-4.7-2.3c-0.1,0-0.1-0.1-0.2-0.1c-5.1-2.9-9.8-6.4-14-10.6c-0.1-0.1-0.1-0.1-0.2-0.2c-1.3-1.3-2.5-2.7-3.7-4.1\n\tc-0.2-0.3-0.5-0.6-0.7-0.9c-8.4-10.6-13.5-24.1-13.5-38.8h14.3c0.4,0,0.7-0.2,0.9-0.5c0.2-0.3,0.2-0.8,0-1.1L29.5,60.9\n\tc-0.2-0.3-0.5-0.5-0.9-0.5c-0.4,0-0.7,0.2-0.9,0.5L3.8,97.3c-0.2,0.3-0.2,0.7,0,1.1c0.2,0.3,0.5,0.5,0.9,0.5h14.3\n\tc0,17.2,5.3,33.2,14.3,46.4c0.1,0.2,0.2,0.4,0.3,0.6c0.9,1.4,2,2.6,3,3.9c0.4,0.5,0.7,1,1.1,1.5c1.5,1.8,3,3.5,4.6,5.2\n\tc0.2,0.2,0.3,0.3,0.5,0.5c5.4,5.5,11.5,10.1,18.2,13.8c0.2,0.1,0.3,0.2,0.5,0.3c1.9,1,3.9,2,5.9,2.9c0.5,0.2,1,0.5,1.5,0.7\n\tc1.7,0.7,3.5,1.3,5.2,1.9c0.8,0.3,1.7,0.6,2.5,0.8c1.5,0.5,3.1,0.8,4.7,1.2c1.1,0.2,2.1,0.5,3.2,0.7c0.4,0.1,0.9,0.2,1.3,0.3\n\tc1.5,0.3,3,0.4,4.5,0.6c0.5,0.1,1.1,0.2,1.6,0.2c2.7,0.3,5.4,0.4,8.1,0.4c16.4,0,32.5-5.1,46.2-14.8c4.4-3.1,5.5-9.2,2.4-13.7\n\tC145.5,147.8,139.4,146.7,135,149.9 M180.6,98.9c0-17.2-5.3-33.1-14.2-46.3c-0.1-0.2-0.2-0.5-0.4-0.7c-1.1-1.6-2.3-3.1-3.5-4.6\n\tc-0.1-0.2-0.3-0.4-0.4-0.6c-8.2-10.1-18.5-17.9-30.2-23c-0.3-0.1-0.6-0.3-1-0.4c-1.9-0.8-3.8-1.5-5.7-2.1c-0.7-0.2-1.4-0.5-2.1-0.7\n\tc-1.7-0.5-3.4-0.9-5.1-1.3c-0.9-0.2-1.9-0.5-2.8-0.7c-0.5-0.1-0.9-0.2-1.4-0.3c-1.3-0.2-2.6-0.3-3.8-0.5c-0.9-0.1-1.8-0.3-2.6-0.3\n\tc-2.1-0.2-4.3-0.3-6.4-0.3c-0.4,0-0.8-0.1-1.2-0.1c-0.1,0-0.1,0-0.2,0c-16.4,0-32.4,5-46.2,14.8C49,35,48,41.1,51,45.6\n\tc3.1,4.4,9.1,5.5,13.5,2.4c10.6-7.5,23-11.3,35.7-11.2c1.8,0,3.6,0.1,5.4,0.3c0.6,0.1,1.1,0.1,1.6,0.2c1.5,0.2,2.9,0.4,4.3,0.7\n\tc0.6,0.1,1.3,0.3,1.9,0.4c1.4,0.3,2.8,0.7,4.2,1.1c0.4,0.1,0.9,0.3,1.3,0.4c1.6,0.5,3.1,1.1,4.6,1.7c0.2,0.1,0.3,0.1,0.5,0.2\n\tc9,3.9,17,10,23.2,17.6c0,0,0.1,0.1,0.1,0.2c8.7,10.7,14,24.5,14,39.4H147c-0.4,0-0.7,0.2-0.9,0.5c-0.2,0.3-0.2,0.8,0,1.1l24,36.4\n\tc0.2,0.3,0.5,0.5,0.9,0.5c0.4,0,0.7-0.2,0.9-0.5l23.9-36.4c0.2-0.3,0.2-0.7,0-1.1c-0.2-0.3-0.5-0.5-0.9-0.5L180.6,98.9L180.6,98.9\n\tL180.6,98.9z"
}));
const Icon$2 = props => createElement("svg", Object.assign({
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 100 100",
preserveAspectRatio: "xMidYMid",
width: 84,
height: 84
}, props), createElement("circle", {
cx: "50",
cy: "36.8101",
r: "10",
fill: "#3e7cff"
}, createElement("animate", {
attributeName: "cy",
dur: "1s",
repeatCount: "indefinite",
calcMode: "spline",
keySplines: "0.45 0 0.9 0.55;0 0.45 0.55 0.9",
keyTimes: "0;0.5;1",
values: "23;77;23"
})));
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
function getDomXY(dom) {
let x = 0;
let y = 0;
if (dom.getBoundingClientRect) {
const box = dom.getBoundingClientRect();
const D = document.documentElement;
x = box.left + Math.max(D.scrollLeft, document.body.scrollLeft) - D.clientLeft;
y = box.top + Math.max(D.scrollTop, document.body.scrollTop) - D.clientTop;
} else {
while (dom !== document.body) {
x += dom.offsetLeft;
y += dom.offsetTop;
dom = dom.offsetParent;
}
}
return {
domX: x,
domY: y
};
}
function checkTargetFather(that, e) {
let parent = e.relatedTarget;
try {
while (parent && parent !== that) {
parent = parent.parentNode;
}
} catch (e) {
console.warn(e);
}
return parent !== that;
}
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const useHandler = (_, event, clearCbs) => {
const [dots, setDots] = useState([]);
const resetData = useCallback(() => {
setDots([]);
}, [setDots]);
const clickEvent = useCallback(e => {
const dom = e.currentTarget;
const xy = getDomXY(dom);
const mouseX = e.pageX || e.clientX;
const mouseY = e.pageY || e.clientY;
const domX = xy.domX;
const domY = xy.domY;
const xPos = mouseX - domX;
const yPos = mouseY - domY;
const xx = parseInt(xPos.toString());
const yy = parseInt(yPos.toString());
const date = new Date();
const index = dots.length;
setDots([...dots, {
key: date.getTime(),
index: index + 1,
x: xx,
y: yy
}]);
event.click && event.click(xx, yy);
e.cancelBubble = true;
e.preventDefault();
return false;
}, [dots, event]);
const confirmEvent = useCallback(e => {
event.confirm && event.confirm(dots, () => {
resetData();
});
e.cancelBubble = true;
e.preventDefault();
return false;
}, [dots, event, resetData]);
const getDots = useCallback(() => {
return dots;
}, [dots]);
const clearData = useCallback(() => {
resetData();
clearCbs && clearCbs();
}, [resetData, clearCbs]);
const close = useCallback(() => {
event.close && event.close();
resetData();
}, [event, resetData]);
const refresh = useCallback(() => {
event.refresh && event.refresh();
resetData();
}, [resetData]);
const closeEvent = useCallback(e => {
close();
e.cancelBubble = true;
e.preventDefault();
return false;
}, [close]);
const refreshEvent = useCallback(e => {
refresh();
e.cancelBubble = true;
e.preventDefault();
return false;
}, [event, refresh]);
return {
setDots,
getDots,
clickEvent,
confirmEvent,
closeEvent,
refreshEvent,
resetData,
clearData,
close,
refresh
};
};
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const Index = /*#__PURE__*/forwardRef((props, ref) => {
const [localConfig, setLocalConfig] = useState({
...defaultConfig(),
...(props.config || {})
});
const [localData, setLocalData] = useState({
...(props.data || {})
});
const [localEvents, setLocalEvents] = useState({
...(props.events || {})
});
useEffect(() => {
setLocalConfig({
...localConfig,
...(props.config || {})
});
}, [props.config, setLocalConfig]);
useEffect(() => {
setLocalData({
...localData,
...(props.data || {})
});
}, [props.data, setLocalData]);
useEffect(() => {
setLocalEvents({
...localEvents,
...(props.events || {})
});
}, [props.events, setLocalEvents]);
const handler = useHandler(localData, localEvents, () => {
setLocalData({
...localData,
thumb: '',
image: ''
});
});
const hPadding = localConfig.horizontalPadding || 0;
const vPadding = localConfig.verticalPadding || 0;
const width = (localConfig.width || 0) + hPadding * 2 + (localConfig.showTheme ? 2 : 0);
const hasDisplayWrapperState = (localConfig.width || 0) > 0 || (localConfig.height || 0) > 0;
const hasDisplayImageState = localData.image != '' || localData.thumb != '';
useImperativeHandle(ref, () => ({
reset: handler.resetData,
clear: handler.clearData,
refresh: handler.refresh,
close: handler.close
}));
return React__default.createElement("div", {
className: classnames(styles.wrapper, localConfig.showTheme ? styles.theme : ''),
style: {
width: width + "px",
paddingLeft: hPadding + "px",
paddingRight: hPadding + "px",
paddingTop: vPadding + "px",
paddingBottom: vPadding + "px",
display: hasDisplayWrapperState ? 'block' : 'none'
}
}, React__default.createElement("div", {
className: styles.header
}, React__default.createElement("span", null, localConfig.title), React__default.createElement("img", {
className: localData.thumb == '' ? styles.hide : '',
style: {
width: localConfig.thumbWidth + "px",
height: localConfig.thumbHeight + "px",
display: hasDisplayImageState ? 'block' : 'none'
},
src: localData.thumb,
alt: ""
})), React__default.createElement("div", {
className: styles.body,
style: {
width: localConfig.width + "px",
height: localConfig.height + "px"
}
}, React__default.createElement("div", {
className: styles.loading
}, React__default.createElement(Icon$2, null)), React__default.createElement("img", {
className: classnames(styles.picture, localData.image == '' ? styles.hide : ''),
style: {
width: localConfig.width + "px",
height: localConfig.height + "px",
display: hasDisplayImageState ? 'block' : 'none'
},
src: localData.image,
alt: "",
onClick: handler.clickEvent
}), React__default.createElement("div", {
className: cstyles.dots
}, handler.getDots().map(dot => {
return React__default.createElement("div", {
className: "dot",
style: {
width: localConfig.dotSize + 'px',
height: localConfig.dotSize + 'px',
borderRadius: localConfig.dotSize + 'px',
top: dot.y - (localConfig.dotSize || 1) / 2 - 1 + "px",
left: dot.x - (localConfig.dotSize || 1) / 2 - 1 + "px"
},
key: dot.key + "-" + dot.index
}, dot.index);
}))), React__default.createElement("div", {
className: styles.footer
}, React__default.createElement("div", {
className: classnames(styles.iconBlock, cstyles.iconBlock)
}, React__default.createElement(Icon, {
width: localConfig.iconSize,
height: localConfig.iconSize,
onClick: handler.closeEvent
}), React__default.createElement(Icon$1, {
width: localConfig.iconSize,
height: localConfig.iconSize,
onClick: handler.refreshEvent
})), React__default.createElement("div", {
className: styles.buttonBlock
}, React__default.createElement("button", {
className: classnames(!hasDisplayImageState && styles.disabled),
onClick: handler.confirmEvent
}, localConfig.buttonText))));
});
var Click = /*#__PURE__*/React__default.memo(Index);
var css_248z$2 = "/**\n * @Author Awen\n * @Date 2024/06/01\n * @Email wengaolng@gmail.com\n **/\n.index-module_tile__8pkQD {\n position: absolute;\n z-index: 2;\n cursor: pointer;\n}\n.index-module_tile__8pkQD img {\n display: block;\n cursor: pointer;\n width: 100%;\n height: 100%;\n}\n";
var cstyles$1 = {"tile":"index-module_tile__8pkQD"};
styleInject(css_248z$2);
const Icon$3 = props => createElement("svg", Object.assign({
viewBox: "0 0 200 200",
xmlns: "http://www.w3.org/2000/svg",
width: 20,
height: 20
}, props), createElement("path", {
d: "M131.6,116.3c0,0-75.6,0-109.7,0c-9.1,0-16.2-7.4-16.2-16.2c0-9.1,7.4-16.2,16.2-16.2c28.7,0,109.7,0,109.7,0\n\ts-5.4-5.4-30.4-30.7c-6.4-6.4-6.4-16.7,0-23.1s16.7-6.4,23.1,0l58.4,58.4c6.4,6.4,6.4,16.7,0,23.1c0,0-32.9,32.9-57.9,57.9\n\tc-6.4,6.4-16.7,6.4-23.1,0c-6.4-6.4-6.4-16.7,0-23.1C121.8,126.2,131.6,116.3,131.6,116.3z"
}));
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const defaultSlideData = () => ({
thumbX: 0,
thumbY: 0,
thumbWidth: 0,
thumbHeight: 0,
image: '',
thumb: ''
});
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const defaultConfig$1 = () => ({
width: 300,
height: 220,
thumbWidth: 150,
thumbHeight: 40,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: true,
title: "请拖动滑块完成拼图",
iconSize: 22,
scope: true
});
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const useHandler$1 = (data, event, config, rootRef, containerRef, tileRef, dragBlockRef, dragBarRef, clearCbs) => {
const [dragLeft, setDragLeft] = useState(0);
const [thumbLeft, setThumbLeft] = useState(data.thumbX || 0);
const [isFreeze, setIsFreeze] = useState(false);
useEffect(() => {
if (!isFreeze) {
setThumbLeft(data.thumbX || 0);
}
}, [data, setThumbLeft]);
const resetData = useCallback(() => {
setDragLeft(0);
setThumbLeft(data.thumbX || 0);
}, [setDragLeft, setThumbLeft, data.thumbX]);
const dragEvent = useCallback(e => {
const touch = e.touches && e.touches[0];
const offsetLeft = dragBlockRef.current.offsetLeft;
const width = containerRef.current.offsetWidth;
const blockWidth = dragBlockRef.current.offsetWidth;
const maxWidth = width - blockWidth;
const tileWith = tileRef.current.offsetWidth;
const tileOffsetLeft = tileRef.current.offsetLeft;
const containerMaxWidth = width - tileWith;
const tileMaxWith = width - (tileWith + tileOffsetLeft);
const ratio = tileMaxWith / maxWidth;
let isMoving = false;
let tmpLeaveDragEvent = null;
let startX = 0;
let currentThumbX = 0;
if (touch) {
startX = touch.pageX - offsetLeft;
} else {
startX = e.clientX - offsetLeft;
}
const moveEvent = e => {
isMoving = true;
const mTouche = e.touches && e.touches[0];
let left = 0;
if (mTouche) {
left = mTouche.pageX - startX;
} else {
left = e.clientX - startX;
}
const ctX = tileOffsetLeft + left * ratio;
if (left >= maxWidth) {
setDragLeft(maxWidth);
currentThumbX = containerMaxWidth;
setThumbLeft(currentThumbX);
return;
}
if (left <= 0) {
setDragLeft(0);
currentThumbX = tileOffsetLeft;
setThumbLeft(currentThumbX);
return;
}
setDragLeft(left);
currentThumbX = currentThumbX = ctX;
setThumbLeft(currentThumbX);
event.move && event.move(currentThumbX, data.thumbY || 0);
e.cancelBubble = true;
e.preventDefault();
};
const upEvent = e => {
if (!checkTargetFather(dragBarRef.current, e)) {
return;
}
if (!isMoving) {
return;
}
clearEvent();
if (currentThumbX < 0) {
return;
}
isMoving = false;
event.confirm && event.confirm({
x: parseInt(currentThumbX.toString()),
y: data.thumbY || 0
}, () => {
resetData();
});
e.cancelBubble = true;
e.preventDefault();
};
const leaveDragBlockEvent = e => {
tmpLeaveDragEvent = e;
};
const enterDragBlockEvent = () => {
tmpLeaveDragEvent = null;
};
const leaveUpEvent = _ => {
if (!tmpLeaveDragEvent) {
return;
}
upEvent(tmpLeaveDragEvent);
clearEvent();
};
const scope = config.scope;
const dragDom = scope ? rootRef.current : dragBarRef.current;
const scopeDom = scope ? rootRef.current : document.body;
const clearEvent = () => {
scopeDom.removeEventListener("mousemove", moveEvent, false);
scopeDom.removeEventListener("touchmove", moveEvent, {
passive: false
});
dragDom.removeEventListener("mouseup", upEvent, false);
dragDom.removeEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.removeEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.removeEventListener("touchend", upEvent, false);
scopeDom.removeEventListener("mouseleave", upEvent, false);
scopeDom.removeEventListener("mouseup", leaveUpEvent, false);
setIsFreeze(false);
};
setIsFreeze(true);
scopeDom.addEventListener("mousemove", moveEvent, false);
scopeDom.addEventListener("touchmove", moveEvent, {
passive: false
});
dragDom.addEventListener("mouseup", upEvent, false);
dragDom.addEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.addEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.addEventListener("touchend", upEvent, false);
scopeDom.addEventListener("mouseleave", upEvent, false);
scopeDom.addEventListener("mouseup", leaveUpEvent, false);
}, [rootRef, dragBlockRef, containerRef, config, data, tileRef, dragBarRef, event, resetData]);
const clearData = useCallback(() => {
resetData();
clearCbs && clearCbs();
}, [resetData, clearCbs]);
const close = useCallback(() => {
event.close && event.close();
resetData();
}, [event, resetData]);
const refresh = useCallback(() => {
event.refresh && event.refresh();
resetData();
}, [event, resetData]);
const closeEvent = useCallback(e => {
close();
e.cancelBubble = true;
e.preventDefault();
return false;
}, [close]);
const refreshEvent = useCallback(e => {
refresh();
e.cancelBubble = true;
e.preventDefault();
return false;
}, [refresh]);
const getPoint = useCallback(() => {
return {
x: thumbLeft,
y: data.thumbY || 0
};
}, [data, thumbLeft]);
const getState = useCallback(() => {
return {
dragLeft,
thumbLeft
};
}, [thumbLeft, dragLeft]);
return {
getState,
getPoint,
dragEvent,
closeEvent,
refreshEvent,
resetData,
clearData,
close,
refresh
};
};
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const Index$1 = /*#__PURE__*/forwardRef((props, ref) => {
const [localConfig, setLocalConfig] = useState({
...defaultConfig$1(),
...(props.config || {})
});
const [localData, setLocalData] = useState({
...defaultSlideData(),
...(props.data || {})
});
const [localEvents, setLocalEvents] = useState({
...(props.events || {})
});
useEffect(() => {
setLocalConfig({
...localConfig,
...(props.config || {})
});
}, [props.config, setLocalConfig]);
useEffect(() => {
setLocalData({
...localData,
...(props.data || {})
});
}, [props.data, setLocalData]);
useEffect(() => {
setLocalEvents({
...localEvents,
...(props.events || {})
});
}, [props.events, setLocalEvents]);
const rootRef = useRef(null);
const dragBarRef = useRef(null);
const containerRef = useRef(null);
const dragBlockRef = useRef(null);
const tileRef = useRef(null);
const handler = useHandler$1(localData, localEvents, localConfig, rootRef, containerRef, tileRef, dragBlockRef, dragBarRef, () => {
setLocalData({
...localData,
...defaultSlideData()
});
});
const hPadding = localConfig.horizontalPadding || 0;
const vPadding = localConfig.verticalPadding || 0;
const width = (localConfig.width || 0) + hPadding * 2 + (localConfig.showTheme ? 2 : 0);
const hasDisplayWrapperState = (localConfig.width || 0) > 0 || (localConfig.height || 0) > 0;
const hasDisplayImageState = localData.image != '' && localData.thumb != '';
useImperativeHandle(ref, () => ({
reset: handler.resetData,
clear: handler.clearData,
refresh: handler.refresh,
close: handler.close
}));
useEffect(() => {
const fn = event => event.preventDefault();
dragBlockRef.current && dragBlockRef.current.addEventListener('dragstart', fn);
return () => {
dragBlockRef.current && dragBlockRef.current.removeEventListener('dragstart', fn);
};
}, [dragBlockRef]);
return React__default.createElement("div", {
className: classnames(styles.wrapper, localConfig.showTheme ? styles.theme : ''),
style: {
width: width + "px",
paddingLeft: hPadding + "px",
paddingRight: hPadding + "px",
paddingTop: vPadding + "px",
paddingBottom: vPadding + "px",
display: hasDisplayWrapperState ? 'block' : 'none'
},
ref: rootRef
}, React__default.createElement("div", {
className: styles.header
}, React__default.createElement("span", null, localConfig.title), React__default.createElement("div", {
className: styles.iconBlock
}, React__default.createElement(Icon, {
width: localConfig.iconSize,
height: localConfig.iconSize,
onClick: handler.closeEvent
}), React__default.createElement(Icon$1, {
width: localConfig.iconSize,
height: localConfig.iconSize,
onClick: handler.refreshEvent
}))), React__default.createElement("div", {
className: styles.body,
ref: containerRef,
style: {
width: localConfig.width + "px",
height: localConfig.height + "px"
}
}, React__default.createElement("div", {
className: styles.loading
}, React__default.createElement(Icon$2, null)), React__default.createElement("img", {
className: classnames(styles.picture, localData.image == '' ? styles.hide : ''),
style: {
width: localConfig.width + "px",
height: localConfig.height + "px",
display: hasDisplayImageState ? 'block' : 'none'
},
src: localData.image,
alt: ""
}), React__default.createElement("div", {
className: cstyles$1.tile,
ref: tileRef,
style: {
width: (localData.thumbWidth || 0) + 'px',
height: (localData.thumbHeight || 0) + 'px',
top: (localData.thumbY || 0) + "px",
left: handler.getState().thumbLeft + "px"
}
}, React__default.createElement("img", {
className: localData.thumb == '' ? styles.hide : '',
style: {
display: hasDisplayImageState ? 'block' : 'none'
},
src: localData.thumb,
alt: ""
}))), React__default.createElement("div", {
className: styles.footer
}, React__default.createElement("div", {
className: styles.dragSlideBar,
ref: dragBarRef
}, React__default.createElement("div", {
className: styles.dragLine
}), React__default.createElement("div", {
className: classnames(styles.dragBlock, !hasDisplayImageState && styles.disabled),
ref: dragBlockRef,
onMouseDown: handler.dragEvent,
style: {
left: handler.getState().dragLeft + "px"
}
}, React__default.createElement("div", {
className: styles.dragBlockInline,
onTouchStart: handler.dragEvent
}, React__default.createElement(Icon$3, null))))));
});
var Slide = /*#__PURE__*/React__default.memo(Index$1);
var css_248z$3 = "/**\n * @Author Awen\n * @Date 2024/06/01\n * @Email wengaolng@gmail.com\n **/\n.index-module_header__jVeEs {\n text-align: center;\n}\n.index-module_tile__VR9Ut {\n position: absolute;\n z-index: 2;\n cursor: pointer;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n.index-module_tile__VR9Ut img {\n display: block;\n cursor: pointer;\n width: 100%;\n height: 100%;\n}\n";
var cstyles$2 = {"header":"index-module_header__jVeEs","tile":"index-module_tile__VR9Ut"};
styleInject(css_248z$3);
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const defaultConfig$2 = () => ({
width: 300,
height: 220,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: true,
title: "请拖动滑块完成拼图",
iconSize: 22,
scope: true
});
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const useHandler$2 = (data, event, config, rootRef, containerRef, tileRef, clearCbs) => {
const [thumbPoint, setThumbPoint] = useState({
x: data.thumbX || 0,
y: data.thumbY || 0
});
const [isFreeze, setIsFreeze] = useState(false);
useEffect(() => {
if (!isFreeze) {
setThumbPoint({
x: data.thumbX || 0,
y: data.thumbY || 0
});
}
}, [data, setThumbPoint]);
const resetData = useCallback(() => {
setThumbPoint({
x: data.thumbX || 0,
y: data.thumbY || 0
});
}, [data.thumbX, data.thumbY, setThumbPoint]);
const dragEvent = useCallback(e => {
const touch = e.touches && e.touches[0];
const offsetLeft = tileRef.current.offsetLeft;
const offsetTop = tileRef.current.offsetTop;
const width = containerRef.current.offsetWidth;
const height = containerRef.current.offsetHeight;
const tileWidth = tileRef.current.offsetWidth;
const tileHeight = tileRef.current.offsetHeight;
const maxWidth = width - tileWidth;
const maxHeight = height - tileHeight;
let isMoving = false;
let tmpLeaveDragEvent = null;
let startX = 0;
let startY = 0;
let tileLeft = 0;
let tileTop = 0;
if (touch) {
startX = touch.pageX - offsetLeft;
startY = touch.pageY - offsetTop;
} else {
startX = e.clientX - offsetLeft;
startY = e.clientY - offsetTop;
}
const moveEvent = e => {
isMoving = true;
const mTouche = e.touches && e.touches[0];
let left = 0;
let top = 0;
if (mTouche) {
left = mTouche.pageX - startX;
top = mTouche.pageY - startY;
} else {
left = e.clientX - startX;
top = e.clientY - startY;
}
if (left <= 0) {
left = 0;
}
if (top <= 0) {
top = 0;
}
if (left >= maxWidth) {
left = maxWidth;
}
if (top >= maxHeight) {
top = maxHeight;
}
setThumbPoint({
x: left,
y: top
});
tileLeft = left;
tileTop = top;
event.move && event.move(left, top);
e.cancelBubble = true;
e.preventDefault();
};
const upEvent = e => {
if (!checkTargetFather(containerRef.current, e)) {
return;
}
if (!isMoving) {
return;
}
isMoving = false;
clearEvent();
if (tileLeft < 0 || tileTop < 0) {
return;
}
event.confirm && event.confirm({
x: tileLeft,
y: tileTop
}, () => {
resetData();
});
e.cancelBubble = true;
e.preventDefault();
};
const leaveDragBlockEvent = e => {
tmpLeaveDragEvent = e;
};
const enterDragBlockEvent = () => {
tmpLeaveDragEvent = null;
};
const leaveUpEvent = _ => {
if (!tmpLeaveDragEvent) {
return;
}
upEvent(tmpLeaveDragEvent);
clearEvent();
};
const scope = config.scope;
const dragDom = scope ? rootRef.current : containerRef.current;
const scopeDom = scope ? rootRef.current : document.body;
const clearEvent = () => {
scopeDom.removeEventListener("mousemove", moveEvent, false);
scopeDom.removeEventListener("touchmove", moveEvent, {
passive: false
});
dragDom.removeEventListener("mouseup", upEvent, false);
dragDom.removeEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.removeEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.removeEventListener("touchend", upEvent, false);
scopeDom.removeEventListener("mouseleave", upEvent, false);
scopeDom.removeEventListener("mouseup", leaveUpEvent, false);
setIsFreeze(false);
};
setIsFreeze(true);
scopeDom.addEventListener("mousemove", moveEvent, false);
scopeDom.addEventListener("touchmove", moveEvent, {
passive: false
});
dragDom.addEventListener("mouseup", upEvent, false);
dragDom.addEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.addEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.addEventListener("touchend", upEvent, false);
scopeDom.addEventListener("mouseleave", upEvent, false);
scopeDom.addEventListener("mouseup", leaveUpEvent, false);
}, [rootRef, containerRef, tileRef, config, event, setIsFreeze, resetData]);
const clearData = useCallback(() => {
resetData();
clearCbs && clearCbs();
}, [resetData, clearCbs]);
const close = useCallback(() => {
event.close && event.close();
resetData();
}, [event, resetData]);
const refresh = useCallback(() => {
event.refresh && event.refresh();
resetData();
}, [event, resetData]);
const closeEvent = useCallback(e => {
close();
e.cancelBubble = true;
e.preventDefault();
return false;
}, [close]);
const refreshEvent = useCallback(e => {
refresh();
e.cancelBubble = true;
e.preventDefault();
return false;
}, [refresh]);
return {
thumbPoint,
dragEvent,
closeEvent,
refreshEvent,
resetData,
clearData,
close,
refresh
};
};
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const defaultSlideRegionData = () => ({
thumbX: 0,
thumbY: 0,
thumbWidth: 0,
thumbHeight: 0,
image: '',
thumb: ''
});
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const Index$2 = /*#__PURE__*/forwardRef((props, ref) => {
const [localConfig, setLocalConfig] = useState({
...defaultConfig$2(),
...(props.config || {})
});
const [localData, setLocalData] = useState({
...defaultSlideRegionData(),
...(props.data || {})
});
const [localEvents, setLocalEvents] = useState({
...(props.events || {})
});
useEffect(() => {
setLocalConfig({
...localConfig,
...(props.config || {})
});
}, [props.config, setLocalConfig]);
useEffect(() => {
setLocalData({
...localData,
...(props.data || {})
});
}, [props.data, setLocalData]);
useEffect(() => {
setLocalEvents({
...localEvents,
...(props.events || {})
});
}, [props.events, setLocalEvents]);
const rootRef = useRef(null);
const containerRef = useRef(null);
const tileRef = useRef(null);
const handler = useHandler$2(localData, localEvents, localConfig, rootRef, containerRef, tileRef, () => {
setLocalData({
...localData,
...defaultSlideRegionData()
});
});
const hPadding = localConfig.horizontalPadding || 0;
const vPadding = localConfig.verticalPadding || 0;
const width = (localConfig.width || 0) + hPadding * 2 + (localConfig.showTheme ? 2 : 0);
const hasDisplayWrapperState = (localConfig.width || 0) > 0 || (localConfig.height || 0) > 0;
const hasDisplayImageState = localData.image != '' && localData.thumb != '';
useImperativeHandle(ref, () => ({
reset: handler.resetData,
clear: handler.clearData,
refresh: handler.refresh,
close: handler.close
}));
useEffect(() => {
const fn = event => event.preventDefault();
tileRef.current && tileRef.current.addEventListener('dragstart', fn);
return () => {
tileRef.current && tileRef.current.removeEventListener('dragstart', fn);
};
}, [tileRef]);
return React__default.createElement("div", {
className: classnames(styles.wrapper, cstyles$2.wrapper, localConfig.showTheme ? styles.theme : ''),
style: {
width: width + "px",
paddingLeft: hPadding + "px",
paddingRight: hPadding + "px",
paddingTop: vPadding + "px",
paddingBottom: vPadding + "px",
display: hasDisplayWrapperState ? 'block' : 'none'
},
ref: rootRef
}, React__default.createElement("div", {
className: classnames(styles.header, cstyles$2.header)
}, React__default.createElement("span", null, localConfig.title)), React__default.createElement("div", {
className: styles.body,
ref: containerRef,
style: {
width: localConfig.width + "px",
height: localConfig.height + "px"
}
}, React__default.createElement("div", {
className: styles.loading
}, React__default.createElement(Icon$2, null)), React__default.createElement("img", {
className: classnames(styles.picture, localData.image == '' ? styles.hide : ''),
src: localData.image,
style: {
width: localConfig.width + "px",
height: localConfig.height + "px",
display: hasDisplayImageState ? 'block' : 'none'
},
alt: ""
}), React__default.createElement("div", {
className: cstyles$2.tile,
ref: tileRef,
style: {
width: (localData.thumbWidth || 0) + 'px',
height: (localData.thumbHeight || 0) + 'px',
top: handler.thumbPoint.y + "px",
left: handler.thumbPoint.x + "px"
},
onMouseDown: handler.dragEvent,
onTouchStart: handler.dragEvent
}, React__default.createElement("img", {
className: localData.thumb == '' ? styles.hide : '',
style: {
display: hasDisplayImageState ? 'block' : 'none'
},
src: localData.thumb,
alt: ""
}))), React__default.createElement("div", {
className: styles.footer
}, React__default.createElement("div", {
className: styles.iconBlock
}, React__default.createElement(Icon, {
width: localConfig.iconSize,
height: localConfig.iconSize,
onClick: handler.closeEvent
}), React__default.createElement(Icon$1, {
width: localConfig.iconSize,
height: localConfig.iconSize,
onClick: handler.refreshEvent
}))));
});
var SlideRegion = /*#__PURE__*/React__default.memo(Index$2);
var css_248z$4 = "/**\n * @Author Awen\n * @Date 2024/06/01\n * @Email wengaolng@gmail.com\n **/\n.index-module_body__5eTaZ {\n background: transparent !important;\n display: flex;\n display: -webkit-flex;\n justify-content: center;\n align-items: center;\n margin: 10px auto 0;\n}\n.index-module_bodyInner__Lb3mp {\n border-radius: 100%;\n}\n.index-module_picture__M-qbX {\n position: relative;\n max-width: 100%;\n max-height: 100%;\n z-index: 2;\n border-radius: 100%;\n overflow: hidden;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.index-module_picture__M-qbX img {\n max-width: 100%;\n max-height: 100%;\n}\n.index-module_round__zaOPS {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n border-radius: 100%;\n z-index: 2;\n border: 6px solid #e0e0e0;\n border-color: var(--go-captcha-theme-round-color);\n}\n.index-module_thumb__jChIh {\n position: absolute;\n z-index: 2;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n}\n.index-module_thumb__jChIh img {\n max-width: 100%;\n max-height: 100%;\n}\n.index-module_thumbBlock__u3U1X {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n";
var cstyles$3 = {"body":"index-module_body__5eTaZ","bodyInner":"index-module_bodyInner__Lb3mp","picture":"index-module_picture__M-qbX","round":"index-module_round__zaOPS","thumb":"index-module_thumb__jChIh","thumbBlock":"index-module_thumbBlock__u3U1X"};
styleInject(css_248z$4);
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const defaultConfig$3 = () => ({
width: 300,
height: 220,
size: 220,
verticalPadding: 16,
horizontalPadding: 12,
showTheme: true,
title: "请拖动滑块完成拼图",
iconSize: 22,
scope: true
});
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const useHandler$3 = (data, event, config, rootRef, dragBlockRef, dragBarRef, clearCbs) => {
const [dragLeft, setDragLeft] = useState(0);
const [thumbAngle, setThumbAngle] = useState(data.angle || 0);
const [isFreeze, setIsFreeze] = useState(false);
useEffect(() => {
if (!isFreeze) {
setThumbAngle(data.angle || 0);
}
}, [data, setThumbAngle]);
const resetData = useCallback(() => {
setDragLeft(0);
setThumbAngle(data.angle || 0);
}, [data.angle, setDragLeft, setThumbAngle]);
const dragEvent = useCallback(e => {
const touch = e.touches && e.touches[0];
const offsetLeft = dragBlockRef.current.offsetLeft;
const width = dragBarRef.current.offsetWidth;
const blockWidth = dragBlockRef.current.offsetWidth;
const maxWidth = width - blockWidth;
const maxAngle = 360;
const p = (maxAngle - data.angle) / maxWidth;
let angle = 0;
let isMoving = false;
let tmpLeaveDragEvent = null;
let startX = 0;
let currentAngle = 0;
if (touch) {
startX = touch.pageX - offsetLeft;
} else {
startX = e.clientX - offsetLeft;
}
const moveEvent = e => {
isMoving = true;
const mTouche = e.touches && e.touches[0];
let left = 0;
if (mTouche) {
left = mTouche.pageX - startX;
} else {
left = e.clientX - startX;
}
angle = data.angle + left * p;
if (left >= maxWidth) {
setDragLeft(maxWidth);
currentAngle = maxAngle;
setThumbAngle(currentAngle);
return;
}
if (left <= 0) {
setDragLeft(0);
currentAngle = data.angle;
setThumbAngle(currentAngle);
return;
}
setDragLeft(left);
currentAngle = angle;
setThumbAngle(angle);
event.rotate && event.rotate(angle);
e.cancelBubble = true;
e.preventDefault();
};
const upEvent = e => {
if (!checkTargetFather(dragBarRef.current, e)) {
return;
}
if (!isMoving) {
return;
}
isMoving = false;
clearEvent();
if (currentAngle < 0) {
return;
}
event.confirm && event.confirm(parseInt(currentAngle.toString()), () => {
resetData();
});
e.cancelBubble = true;
e.preventDefault();
};
const leaveDragBlockEvent = e => {
tmpLeaveDragEvent = e;
};
const enterDragBlockEvent = () => {
tmpLeaveDragEvent = null;
};
const leaveUpEvent = _ => {
if (!tmpLeaveDragEvent) {
return;
}
upEvent(tmpLeaveDragEvent);
clearEvent();
};
const scope = config.scope;
const dragDom = scope ? rootRef.current : dragBarRef.current;
const scopeDom = scope ? rootRef.current : document.body;
const clearEvent = () => {
scopeDom.removeEventListener("mousemove", moveEvent, false);
scopeDom.removeEventListener("touchmove", moveEvent, {
passive: false
});
dragDom.removeEventListener("mouseup", upEvent, false);
dragDom.removeEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.removeEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.removeEventListener("touchend", upEvent, false);
scopeDom.removeEventListener("mouseleave", upEvent, false);
scopeDom.removeEventListener("mouseup", leaveUpEvent, false);
setIsFreeze(false);
};
setIsFreeze(true);
scopeDom.addEventListener("mousemove", moveEvent, false);
scopeDom.addEventListener("touchmove", moveEvent, {
passive: false
});
dragDom.addEventListener("mouseup", upEvent, false);
dragDom.addEventListener("mouseenter", enterDragBlockEvent, false);
dragDom.addEventListener("mouseleave", leaveDragBlockEvent, false);
dragDom.addEventListener("touchend", upEvent, false);
scopeDom.addEventListener("mouseleave", upEvent, false);
scopeDom.addEventListener("mouseup", leaveUpEvent, false);
}, [rootRef, dragBlockRef, dragBarRef, config, data, event, resetData]);
const clearData = useCallback(() => {
resetData();
clearCbs && clearCbs();
}, [resetData, clearCbs]);
const close = useCallback(() => {
event.close && event.close();
resetData();
}, [event, resetData]);
const refresh = useCallback(() => {
event.refresh && event.refresh();
resetData();
}, [event, resetData]);
const closeEvent = useCallback(e => {
close();
e.cancelBubble = true;
e.preventDefault();
return false;
}, [close]);
const refreshEvent = useCallback(e => {
refresh();
e.cancelBubble = true;
e.preventDefault();
return false;
}, [refresh]);
const getState = useCallback(() => {
return {
dragLeft,
thumbAngle
};
}, [thumbAngle, dragLeft]);
return {
getState,
thumbAngle,
dragEvent,
closeEvent,
refreshEvent,
resetData,
clearData,
close,
refresh
};
};
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const defaultRotateData = () => ({
angle: 0,
image: '',
thumb: ''
});
/**
* @Author Awen
* @Date 2024/06/01
* @Email wengaolng@gmail.com
**/
const Index$3 = /*#__PURE__*/forwardRef((props, ref) => {
const [localConfig, setLocalConfig] = useState({
...defaultConfig$3(),
...(props.config || {})
});
const [localData, setLocalData] = useState({
...defaultRotateData(),
...(props.data || {})
});
const [localEvents, setLocalEvents] = useState({
...(props.events || {})
});
useEffect(() => {
setLocalConfig({
...localConfig,
...(props.config || {})
});
}, [props.config, setLocalConfig]);
useEffect(() => {
setLocalData({
...localData,
...(props.data || {})
});
}, [props.data, setLocalData]);
useEffect(() => {
setLocalEvents({
...localEvents,
...(props.events || {})
});
}, [props.ev