From 90c5ec23aec523d434e2d53bb3866cd6c8bb4994 Mon Sep 17 00:00:00 2001
From: hanyuxinting <hanyuxinting@sina.cn>
Date: Fri, 11 Oct 2024 11:22:03 +0800
Subject: [PATCH] fix(radio): lint fixed

---
 src/packages/radio/radio.taro.tsx           | 68 ++++++++-------------
 src/packages/radio/radio.tsx                | 68 ++++++++-------------
 src/packages/radiogroup/radiogroup.taro.tsx | 21 +++----
 src/packages/radiogroup/radiogroup.tsx      | 21 +++----
 4 files changed, 68 insertions(+), 110 deletions(-)

diff --git a/src/packages/radio/radio.taro.tsx b/src/packages/radio/radio.taro.tsx
index 86656aea4d..663d5b10f7 100644
--- a/src/packages/radio/radio.taro.tsx
+++ b/src/packages/radio/radio.taro.tsx
@@ -37,7 +37,6 @@ export const Radio: FunctionComponent<
   Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
 > & { Group: typeof RadioGroup } = (props) => {
   const classPrefix = 'nut-radio'
-
   const {
     children,
     className,
@@ -80,30 +79,6 @@ export const Radio: FunctionComponent<
       }
     }
   }
-
-  const renderLabel = () => {
-    return (
-      <div
-        className={classNames(`${classPrefix}-label`, {
-          [`${classPrefix}-label-disabled`]: disabled,
-        })}
-      >
-        {children}
-      </div>
-    )
-  }
-  const renderButton = () => {
-    return (
-      <div
-        className={classNames(`${classPrefix}-button`, {
-          [`${classPrefix}-button-active`]: checkedStatement,
-          [`${classPrefix}-button-disabled`]: disabled,
-        })}
-      >
-        {children}
-      </div>
-    )
-  }
   const color = () => {
     return {
       [`${classPrefix}-icon-disabled`]: disabled,
@@ -116,7 +91,6 @@ export const Radio: FunctionComponent<
     if (disabled && !checkedStatement) {
       return <CheckDisabled className={classNames(color())} />
     }
-
     if (checkedStatement) {
       return React.isValidElement(activeIcon) ? (
         React.cloneElement<any>(activeIcon, {
@@ -136,16 +110,27 @@ export const Radio: FunctionComponent<
       <CheckNormal className={classNames(color())} />
     )
   }
-  const renderByShape = (shape: RadioShape) => {
-    return shape === 'button' ? (
-      renderButton()
-    ) : (
+  const renderLabel = () => {
+    const labelcls = classNames(`${classPrefix}-label`, {
+      [`${classPrefix}-label-disabled`]: disabled,
+    })
+    return (
       <>
         {renderIcon()}
-        {renderLabel()}
+        <div className={labelcls}>{children}</div>
       </>
     )
   }
+  const renderButton = () => {
+    const buttoncls = classNames(`${classPrefix}-button`, {
+      [`${classPrefix}-button-active`]: checkedStatement,
+      [`${classPrefix}-button-disabled`]: disabled,
+    })
+    return <div className={buttoncls}>{children}</div>
+  }
+  const renderByShape = (shape: RadioShape) => {
+    return shape === 'button' ? renderButton() : renderLabel()
+  }
   const renderRadioItem = () => {
     return renderByShape(context && context.shape ? context.shape : shape)
   }
@@ -153,20 +138,15 @@ export const Radio: FunctionComponent<
     if (disabled || checkedStatement) return
     setCheckedStatement(!checkedStatement)
   }
-
+  const cls = classNames(
+    classPrefix,
+    {
+      [`${classPrefix}-reverse`]: labelPosition === 'left',
+    },
+    className
+  )
   return (
-    <div
-      className={classNames(
-        classPrefix,
-        {
-          [`${classPrefix}-reverse`]: labelPosition === 'left',
-        },
-        className
-      )}
-      style={style}
-      onClick={handleClick}
-      {...rest}
-    >
+    <div className={cls} style={style} onClick={handleClick} {...rest}>
       {renderRadioItem()}
     </div>
   )
diff --git a/src/packages/radio/radio.tsx b/src/packages/radio/radio.tsx
index 42daba2b96..1ec85467c6 100644
--- a/src/packages/radio/radio.tsx
+++ b/src/packages/radio/radio.tsx
@@ -33,7 +33,6 @@ export const Radio: FunctionComponent<
   Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
 > & { Group: typeof RadioGroup } = (props) => {
   const classPrefix = 'nut-radio'
-
   const {
     children,
     className,
@@ -76,30 +75,6 @@ export const Radio: FunctionComponent<
       }
     }
   }
-
-  const renderLabel = () => {
-    return (
-      <div
-        className={classNames(`${classPrefix}-label`, {
-          [`${classPrefix}-label-disabled`]: disabled,
-        })}
-      >
-        {children}
-      </div>
-    )
-  }
-  const renderButton = () => {
-    return (
-      <div
-        className={classNames(`${classPrefix}-button`, {
-          [`${classPrefix}-button-active`]: checkedStatement,
-          [`${classPrefix}-button-disabled`]: disabled,
-        })}
-      >
-        {children}
-      </div>
-    )
-  }
   const color = () => {
     return {
       [`${classPrefix}-icon-disabled`]: disabled,
@@ -112,7 +87,6 @@ export const Radio: FunctionComponent<
     if (disabled && !checkedStatement) {
       return <CheckDisabled className={classNames(color())} />
     }
-
     if (checkedStatement) {
       return React.isValidElement(activeIcon) ? (
         React.cloneElement<any>(activeIcon, {
@@ -132,16 +106,27 @@ export const Radio: FunctionComponent<
       <CheckNormal className={classNames(color())} />
     )
   }
-  const renderByShape = (shape: RadioShape) => {
-    return shape === 'button' ? (
-      renderButton()
-    ) : (
+  const renderLabel = () => {
+    const labelcls = classNames(`${classPrefix}-label`, {
+      [`${classPrefix}-label-disabled`]: disabled,
+    })
+    return (
       <>
         {renderIcon()}
-        {renderLabel()}
+        <div className={labelcls}>{children}</div>
       </>
     )
   }
+  const renderButton = () => {
+    const buttoncls = classNames(`${classPrefix}-button`, {
+      [`${classPrefix}-button-active`]: checkedStatement,
+      [`${classPrefix}-button-disabled`]: disabled,
+    })
+    return <div className={buttoncls}>{children}</div>
+  }
+  const renderByShape = (shape: RadioShape) => {
+    return shape === 'button' ? renderButton() : renderLabel()
+  }
   const renderRadioItem = () => {
     return renderByShape(context && context.shape ? context.shape : shape)
   }
@@ -149,20 +134,15 @@ export const Radio: FunctionComponent<
     if (disabled || checkedStatement) return
     setCheckedStatement(!checkedStatement)
   }
-
+  const cls = classNames(
+    classPrefix,
+    {
+      [`${classPrefix}-reverse`]: labelPosition === 'left',
+    },
+    className
+  )
   return (
-    <div
-      className={classNames(
-        classPrefix,
-        {
-          [`${classPrefix}-reverse`]: labelPosition === 'left',
-        },
-        className
-      )}
-      style={style}
-      onClick={handleClick}
-      {...rest}
-    >
+    <div className={cls} style={style} onClick={handleClick} {...rest}>
       {renderRadioItem()}
     </div>
   )
diff --git a/src/packages/radiogroup/radiogroup.taro.tsx b/src/packages/radiogroup/radiogroup.taro.tsx
index 8548414972..bce96a7f12 100644
--- a/src/packages/radiogroup/radiogroup.taro.tsx
+++ b/src/packages/radiogroup/radiogroup.taro.tsx
@@ -50,6 +50,14 @@ export const RadioGroup = React.forwardRef(
       ...rest
     } = { ...defaultProps, ...props }
 
+    const cls = classNames(
+      classPrefix,
+      {
+        [`${classPrefix}-${props.direction}`]: props.direction,
+      },
+      className
+    )
+
     const [val2State, setVal2State] = usePropsValue<string | number>({
       defaultValue: props.defaultValue,
       value: props.value,
@@ -72,7 +80,7 @@ export const RadioGroup = React.forwardRef(
           />
         )
       })
-    }, [options])
+    }, [options, labelPosition, val2State])
 
     return (
       <RadioContext.Provider
@@ -89,16 +97,7 @@ export const RadioGroup = React.forwardRef(
           },
         }}
       >
-        <div
-          className={classNames(
-            classPrefix,
-            {
-              [`${classPrefix}-${props.direction}`]: props.direction,
-            },
-            className
-          )}
-          {...rest}
-        >
+        <div className={cls} {...rest}>
           {options?.length ? renderOptionsChildren() : children}
         </div>
       </RadioContext.Provider>
diff --git a/src/packages/radiogroup/radiogroup.tsx b/src/packages/radiogroup/radiogroup.tsx
index 0df2c66f60..1bc6fa82a6 100644
--- a/src/packages/radiogroup/radiogroup.tsx
+++ b/src/packages/radiogroup/radiogroup.tsx
@@ -50,6 +50,14 @@ export const RadioGroup = React.forwardRef(
       ...rest
     } = { ...defaultProps, ...props }
 
+    const cls = classNames(
+      classPrefix,
+      {
+        [`${classPrefix}-${props.direction}`]: props.direction,
+      },
+      className
+    )
+
     const [val2State, setVal2State] = usePropsValue<string | number>({
       defaultValue: props.defaultValue,
       value: props.value,
@@ -72,7 +80,7 @@ export const RadioGroup = React.forwardRef(
           />
         )
       })
-    }, [options])
+    }, [options, labelPosition, val2State])
 
     return (
       <RadioContext.Provider
@@ -89,16 +97,7 @@ export const RadioGroup = React.forwardRef(
           },
         }}
       >
-        <div
-          className={classNames(
-            classPrefix,
-            {
-              [`${classPrefix}-${props.direction}`]: props.direction,
-            },
-            className
-          )}
-          {...rest}
-        >
+        <div className={cls} {...rest}>
           {options?.length ? renderOptionsChildren() : children}
         </div>
       </RadioContext.Provider>