fix rotate captcha

Author: wenlng

README.md

@@ -1,7 +1,7 @@
 <div align="center">
 <img width="120" style="padding-top: 50px; margin: 0;" src="http://47.104.180.148/go-captcha/gocaptcha_logo.svg?v=1"/>
 <h1 style="margin: 0; padding: 0">Go Captcha</h1>
-<p>Behavior Captcha For React</p>
+<p>The Behavior Captcha For The React</p>
 
 </div>
 
@@ -249,6 +249,7 @@ interface Data {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 // events = {}

README_zh.md

@@ -251,6 +251,7 @@ interface Data {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 // events = {}

example/index.tsx

@@ -5,9 +5,13 @@ import * as ReactDOM from 'react-dom';
 import GoCaptcha from '../.';
 // import GoCaptcha from '../src';
 import {useEffect, useRef, useState} from "react";
+// @ts-ignore
 import {ClickRef} from "../dist/components/Click";
+// @ts-ignore
 import {SlideRef} from "../dist/components/Slide";
+// @ts-ignore
 import {SlideRegionRef} from "../src/components/SlideRegion";
+// @ts-ignore
 import {RotateRef} from "../src/components/Rotate";
 
 const App = () => {
@@ -114,9 +118,9 @@ const App = () => {
   ///////////////////////////////////
 
   const [rotateData, setRotateData] = useState({
-    angle: 20,
     image: rotateImage,
     thumb: rotateThumb,
+    thumbSize: 195
   })
 
   const [rotateConfig, setRotateConfig] = useState({

package.json

@@ -1,6 +1,6 @@
 {
   "name": "go-captcha-react",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "license": "MIT",
   "private": false,
   "email": "[email protected]",

src/components/Click/Index.tsx

@@ -55,7 +55,7 @@ const Index:FC<Props> = forwardRef<ClickRef, Props>((props: Props, ref) => {
   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 != ''
+  const hasDisplayImageState = (localData.image && localData.image.length > 0) && (localData.thumb && localData.thumb.length > 0)
 
   useImperativeHandle(ref, () => ({
     reset: handler.resetData,

src/components/Click/index.module.less

@@ -20,9 +20,10 @@
       z-index: 2;
       width: 22px;
       height: 22px;
-      color: #cedffe;
-      background: #3e7cff;
+      color: var(--go-captcha-theme-dot-color);
+      background:  var(--go-captcha-theme-dot-bg-color);
       border: 3px solid #f7f9fb;
+      border-color: var(--go-captcha-theme-dot-border-color);
       display:-webkit-box;
       display:-webkit-flex;
       display:-ms-flexbox;

src/components/Rotate/Index.tsx

@@ -69,7 +69,7 @@ const Index:FC<Props> = forwardRef<RotateRef, Props>((props: Props, ref) => {
   const width = (localConfig.width || 0) + ( hPadding * 2) + (localConfig.showTheme ? 2 : 0)
   const size = (localConfig.size || 0) > 0 ? localConfig.size : defaultConfig().size
   const hasDisplayWrapperState = (localConfig.width || 0) > 0 || (localConfig.height || 0) > 0
-  const hasDisplayImageState = localData.image != '' && localData.thumb != ''
+  const hasDisplayImageState = (localData.image && localData.image.length > 0) && (localData.thumb && localData.thumb.length > 0)
 
   useImperativeHandle(ref, () => ({
     reset: handler.resetData,
@@ -145,7 +145,13 @@ const Index:FC<Props> = forwardRef<RotateRef, Props>((props: Props, ref) => {
         <div className={cstyles.thumb}>
           <div
             className={cstyles.thumbBlock}
-            style={{ transform: `rotate(${handler.getState().thumbAngle}deg)`}}
+            style={{
+              transform: `rotate(${handler.getState().thumbAngle}deg)`,
+              ...(localData.thumbSize > 0 ? {
+                width: localData.thumbSize + "px",
+                height: localData.thumbSize + "px"
+              } : {})
+            }}
           >
             <img
               className={localData.thumb == '' ? styles.hide : ''}

src/components/Rotate/index.module.less

@@ -62,6 +62,14 @@
   left: 0;
   right: 0;
   bottom: 0;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   :global{
     img{
       max-width: 100%;

src/components/Rotate/meta/data.ts

@@ -8,10 +8,12 @@ export interface RotateData {
   angle: number;
   image: string;
   thumb: string;
+  thumbSize: number;
 }
 
 export const defaultRotateData = () :RotateData => ({
   angle: 0,
   image: '',
-  thumb: ''
+  thumb: '',
+  thumbSize: 0
 })

src/components/Slide/Index.tsx

@@ -72,7 +72,7 @@ const Index:FC<Props> = forwardRef<SlideRef, Props>((props: Props, ref) => {
   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 != ''
+  const hasDisplayImageState = (localData.image && localData.image.length > 0) && (localData.thumb && localData.thumb.length > 0)
 
   useImperativeHandle(ref, () => ({
     reset: handler.resetData,