feat: radio adaptation (#2721)

* feat: radio adaptation

* feat: update the usage of the 'color' property in the Icon component

src/config.json

@@ -588,7 +588,7 @@
           "author": "dsj"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Radio",
           "type": "component",
           "cName": "单选按钮",
@@ -599,7 +599,7 @@
           "author": "oasis"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "RadioGroup",
           "type": "component",
           "cName": "单选按钮组",

src/packages/radio/demos/taro/demo8.tsx

@@ -4,10 +4,7 @@ import { Checklist } from '@nutui/icons-react-taro'
 
 const Demo8 = () => {
   return (
-    <Radio
-      icon={<Checklist />}
-      activeIcon={<Checklist style={{ color: 'red' }} />}
-    >
+    <Radio icon={<Checklist />} activeIcon={<Checklist color="red" />}>
       自定义图标
     </Radio>
   )

src/packages/radio/demos/taro/demo9.tsx

@@ -11,14 +11,14 @@ const Demo9 = () => {
     >
       <Radio
         icon={<Checklist />}
-        activeIcon={<Checklist style={{ color: 'red' }} />}
+        activeIcon={<Checklist color="red" />}
         value="1"
       >
         自定义图标
       </Radio>
       <Radio
         icon={<Checklist />}
-        activeIcon={<Checklist style={{ color: 'red' }} />}
+        activeIcon={<Checklist color="red" />}
         value="2"
       >
         自定义图标

src/packages/radio/index.taro.ts

@@ -1,6 +1,16 @@
-import { Radio } from './radio.taro'
+import React from 'react'
+import { Radio, RadioProps } from './radio.taro'
+import { RadioGroup } from '../radiogroup/radiogroup.taro'
 
 export type { RadioProps } from './radio.taro'
 export type { RadioShape, RadioPosition } from './types'
 
-export default Radio
+type CompoundedComponent = React.FC<
+  Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
+> & {
+  Group: typeof RadioGroup
+}
+const InnerRadio = Radio as CompoundedComponent
+InnerRadio.Group = RadioGroup
+
+export default InnerRadio

src/packages/radio/index.ts

@@ -1,5 +1,15 @@
-import { Radio } from './radio'
+import React from 'react'
+import { Radio, RadioProps } from './radio'
+import { RadioGroup } from '../radiogroup/radiogroup'
 
 export type { RadioProps } from './radio'
 export type { RadioShape, RadioPosition } from './types'
-export default Radio
+type CompoundedComponent = React.FC<
+  Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
+> & {
+  Group: typeof RadioGroup
+}
+const InnerRadio = Radio as CompoundedComponent
+InnerRadio.Group = RadioGroup
+
+export default InnerRadio

src/packages/radio/radio.scss

@@ -79,6 +79,7 @@
     border: 1px solid $color-text-disabled;
   }
 }
+
 [dir='rtl'] .nut-radio,
 .nut-rtl .nut-radio {
   &:last-child {

src/packages/radio/radio.taro.tsx

@@ -1,11 +1,11 @@
-import React, { FunctionComponent, useContext } from 'react'
+import React, { FC, useContext } from 'react'
 import {
   CheckChecked,
-  CheckNormal,
   CheckDisabled,
+  CheckNormal,
 } from '@nutui/icons-react-taro'
-import classNames from 'classnames'
-import { View, ITouchEvent } from '@tarojs/components'
+import classNames, { Mapping } from 'classnames'
+import { ITouchEvent, View } from '@tarojs/components'
 import RadioContext from '../radiogroup/context'
 import RadioGroup from '@/packages/radiogroup/index.taro'
 import { BasicComponent, ComponentDefaults } from '@/utils/typings'
@@ -34,9 +34,9 @@ const defaultProps = {
   activeIcon: null,
   onChange: (checked: boolean) => {},
 } as RadioProps
-export const Radio: FunctionComponent<
+export const Radio: FC<
   Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
-> & { Group: typeof RadioGroup } = (props) => {
+> = (props) => {
   const classPrefix = 'nut-radio'
   const {
     children,
@@ -80,7 +80,7 @@ export const Radio: FunctionComponent<
       }
     }
   }
-  const color = () => {
+  const color = (): Mapping => {
     return {
       [`${classPrefix}-icon-disabled`]: disabled,
       [`${classPrefix}-icon`]: !checkedStatement,
@@ -118,7 +118,7 @@ export const Radio: FunctionComponent<
     return (
       <>
         {renderIcon()}
-        <div className={labelcls}>{children}</div>
+        <View className={labelcls}>{children}</View>
       </>
     )
   }
@@ -127,7 +127,7 @@ export const Radio: FunctionComponent<
       [`${classPrefix}-button-active`]: checkedStatement,
       [`${classPrefix}-button-disabled`]: disabled,
     })
-    return <div className={buttoncls}>{children}</div>
+    return <View className={buttoncls}>{children}</View>
   }
   const renderByShape = (shape: RadioShape) => {
     return shape === 'button' ? renderButton() : renderLabel()
@@ -149,12 +149,7 @@ export const Radio: FunctionComponent<
     className
   )
   return (
-    <View
-      className={cls}
-      style={style}
-      onClick={handleClick}
-      // {...rest}
-    >
+    <View className={cls} style={style} onClick={handleClick}>
       {renderRadioItem()}
     </View>
   )

src/packages/radio/radio.tsx

@@ -31,7 +31,7 @@ const defaultProps = {
 } as RadioProps
 export const Radio: FunctionComponent<
   Partial<RadioProps> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>
-> & { Group: typeof RadioGroup } = (props) => {
+> = (props) => {
   const classPrefix = 'nut-radio'
   const {
     children,

src/packages/radiogroup/radiogroup.taro.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback } from 'react'
 import classNames from 'classnames'
+import { View } from '@tarojs/components'
 import {
   RadioGroupDirection,
   RadioGroupOption,
@@ -53,7 +54,7 @@ export const RadioGroup = React.forwardRef(
     const cls = classNames(
       classPrefix,
       {
-        [`${classPrefix}-${props.direction}`]: props.direction,
+        [`${classPrefix}-${direction}`]: direction,
       },
       className
     )
@@ -97,9 +98,9 @@ export const RadioGroup = React.forwardRef(
           },
         }}
       >
-        <div className={cls} {...rest}>
+        <View className={cls} {...rest}>
           {options?.length ? renderOptionsChildren() : children}
-        </div>
+        </View>
       </RadioContext.Provider>
     )
   }

src/packages/radiogroup/radiogroup.tsx

@@ -53,7 +53,7 @@ export const RadioGroup = React.forwardRef(
     const cls = classNames(
       classPrefix,
       {
-        [`${classPrefix}-${props.direction}`]: props.direction,
+        [`${classPrefix}-${direction}`]: direction,
       },
       className
     )