chroe: add methods of components and optimization of code

Author: wenlng

src/components/Rotate/Index.tsx

@@ -14,7 +14,7 @@ import LoadingIcon from './../../assets/icons/LoadingIcon'
 import ArrowsIcon from "../../assets/icons/ArrowsIcon";
 import {RotateConfig, defaultConfig} from "./meta/config";
 import {useHandler} from "./hooks/useHandler";
-import {RotateData} from "./meta/data";
+import {defaultRotateData, RotateData} from "./meta/data";
 import {RotateEvent} from "./meta/event";
 
 
@@ -34,7 +34,7 @@ export interface Props extends React.HTMLAttributes<HTMLElement> {
 
 const Index:FC<Props> = forwardRef<RotateRef, Props>((props: Props, ref) => {
   const [localConfig, setLocalConfig] = useState<RotateConfig>({...defaultConfig(), ...(props.config || {})})
-  const [localData, setLocalData] = useState<RotateData>({...(props.data || {})})
+  const [localData, setLocalData] = useState<RotateData>({...defaultRotateData(), ...(props.data || {})})
   const [localEvents, setLocalEvents] = useState<RotateEvent>({...(props.events || {})})
 
   useEffect(() => {
@@ -61,7 +61,7 @@ const Index:FC<Props> = forwardRef<RotateRef, Props>((props: Props, ref) => {
     dragBlockRef,
     dragBarRef,
     () => {
-      setLocalData({...localData, thumb: '', image: '', angle: 0})
+      setLocalData({...localData, ...defaultRotateData()})
     });
 
   const hPadding = localConfig.horizontalPadding || 0
@@ -116,7 +116,7 @@ const Index:FC<Props> = forwardRef<RotateRef, Props>((props: Props, ref) => {
         height: localConfig.height + 'px'
       }}
     >
-      <div style={{width: size  + "px", height: size + "px" }}>
+      <div className={classnames(cstyles.bodyInner, styles.bodyInner)} style={{width: size  + "px", height: size + "px" }}>
         <div className={styles.loading}>
           <LoadingIcon />
         </div>

src/components/Rotate/index.module.less

@@ -16,6 +16,10 @@
   margin: 10px auto 0;
 }
 
+.bodyInner{
+  border-radius: 100%;
+}
+
 .picture{
   position: relative;
   max-width: 100%;

src/components/Rotate/meta/data.ts

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

src/components/Slide/Index.tsx

@@ -12,7 +12,7 @@ import CloseIcon from './../../assets/icons/CloseIcon'
 import RefreshIcon from './../../assets/icons/RefreshIcon'
 import LoadingIcon from './../../assets/icons/LoadingIcon'
 import ArrowsIcon from './../../assets/icons/ArrowsIcon'
-import {SlideData} from "./meta/data";
+import {defaultSlideData, SlideData} from "./meta/data";
 import {SlideConfig, defaultConfig} from "./meta/config";
 import {SlideEvent} from "./meta/event";
 import {useHandler} from "./hooks/useHandler";
@@ -33,7 +33,7 @@ export interface Props extends React.HTMLAttributes<HTMLElement> {
 
 const Index:FC<Props> = forwardRef<SlideRef, Props>((props: Props, ref) => {
   const [localConfig, setLocalConfig] = useState<SlideConfig>({...defaultConfig(), ...(props.config || {})})
-  const [localData, setLocalData] = useState<SlideData>({...(props.data || {})})
+  const [localData, setLocalData] = useState<SlideData>({...defaultSlideData(), ...(props.data || {})})
   const [localEvents, setLocalEvents] = useState<SlideEvent>({...(props.events || {})})
 
   useEffect(() => {
@@ -64,7 +64,7 @@ const Index:FC<Props> = forwardRef<SlideRef, Props>((props: Props, ref) => {
     dragBlockRef,
     dragBarRef,
     () => {
-      setLocalData({...localData, image: '', thumb: '', thumbX: 0, thumbY: 0, thumbHeight: 0, thumbWidth: 0})
+      setLocalData({...localData, ...defaultSlideData()})
     }
     );
 

src/components/Slide/hooks/useHandler.ts

@@ -45,6 +45,7 @@ export const useHandler = (
 
     const tileWith  = tileRef.current.offsetWidth
     const tileOffsetLeft = tileRef.current.offsetLeft
+    const containerMaxWidth = width - tileWith
     const tileMaxWith = width - (tileWith + tileOffsetLeft)
     const ratio = tileMaxWith / maxWidth
 
@@ -72,7 +73,7 @@ export const useHandler = (
       const ctX = tileOffsetLeft + (left * ratio)
       if (left >= maxWidth) {
         setDragLeft(maxWidth)
-        currentThumbX = maxWidth
+        currentThumbX = containerMaxWidth
         setThumbLeft(currentThumbX)
         return
       }

src/components/Slide/meta/data.ts

@@ -13,6 +13,15 @@ export interface SlideData {
   thumb: string;
 }
 
+export const defaultSlideData = (): SlideData => ({
+  thumbX: 0,
+  thumbY: 0,
+  thumbWidth: 0,
+  thumbHeight: 0,
+  image: '',
+  thumb: ''
+})
+
 export interface SlidePoint {
   x: number,
   y: number,

src/components/SlideRegion/Index.tsx

@@ -13,7 +13,7 @@ import RefreshIcon from './../../assets/icons/RefreshIcon'
 import LoadingIcon from './../../assets/icons/LoadingIcon'
 import {SlideRegionConfig, defaultConfig} from "./meta/config";
 import {useHandler} from "./hooks/useHandler";
-import {SlideRegionData} from "./meta/data";
+import {defaultSlideRegionData, SlideRegionData} from "./meta/data";
 import {SlideRegionEvent} from "./meta/event";
 
 export interface SlideRegionRef {
@@ -32,7 +32,7 @@ export interface Props extends React.HTMLAttributes<HTMLElement> {
 
 const Index:FC<Props> = forwardRef<SlideRegionRef, Props>((props: Props, ref) => {
   const [localConfig, setLocalConfig] = useState<SlideRegionConfig>({...defaultConfig(), ...(props.config || {})})
-  const [localData, setLocalData] = useState<SlideRegionData>({...(props.data || {})})
+  const [localData, setLocalData] = useState<SlideRegionData>({...defaultSlideRegionData(), ...(props.data || {})})
   const [localEvents, setLocalEvents] = useState<SlideRegionEvent>({...(props.events || {})})
 
   useEffect(() => {
@@ -59,7 +59,7 @@ const Index:FC<Props> = forwardRef<SlideRegionRef, Props>((props: Props, ref) =>
     containerRef,
     tileRef,
     () => {
-      setLocalData({...localData, image: '', thumb: '', thumbX: 0, thumbY: 0, thumbHeight: 0, thumbWidth: 0})
+      setLocalData({...localData, ...defaultSlideRegionData()})
     }
   );
 

src/components/SlideRegion/meta/data.ts

@@ -13,6 +13,15 @@ export interface SlideRegionData {
   thumb: string;
 }
 
+export const defaultSlideRegionData = (): SlideRegionData => ({
+  thumbX: 0,
+  thumbY: 0,
+  thumbWidth: 0,
+  thumbHeight: 0,
+  image: '',
+  thumb: ''
+})
+
 export interface SlideRegionPoint {
   x: number,
   y: number,

src/gocaptcha.module.less

@@ -19,6 +19,7 @@
     --go-captcha-theme-drag-icon-color: #ffffff;
     --go-captcha-theme-round-color: #e0e0e0;
     --go-captcha-theme-loading-icon-color: #3e7cff;
+    --go-captcha-theme-body-bg-color: #34383e;
 
     --go-captcha-theme-default-color: #3e7cff;
     --go-captcha-theme-default-bg-color: #ecf5ff;
@@ -107,13 +108,17 @@
     display: -ms-flexbox;
     display: -webkit-flex;
     display: flex;
-    background: #34383e;
+    background: var(--go-captcha-theme-body-bg-color);
     border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     overflow: hidden;
 }
 
+.bodyInner {
+    background: var(--go-captcha-theme-body-bg-color);
+}
+
 .picture{
     position: relative;
     z-index: 2;