feat(radio): fix type and add readonly (#3280)

* feat(RadioGroup): support readonly

* docs: sync api

* docs: update live demo

* fix: fix type

src/radio/RadioGroup.tsx

@@ -27,7 +27,7 @@ const RadioGroup: React.FC<RadioGroupProps> = (originalProps) => {
 
   const props = useDefaultProps<RadioGroupProps>(originalProps, radioGroupDefaultProps);
 
-  const { disabled, children, onChange, size, variant, options = [], className, style } = props;
+  const { disabled, readonly, children, onChange, size, variant, options = [], className, style } = props;
 
   const [internalValue, setInternalValue] = useControlled(props, 'value', onChange);
   const [barStyle, setBarStyle] = useState({});
@@ -54,11 +54,12 @@ const RadioGroup: React.FC<RadioGroupProps> = (originalProps) => {
         allowUncheck: checkProps.allowUncheck || props.allowUncheck,
         checked: internalValue === checkProps.value,
         disabled: checkProps.disabled || disabled,
+        readonly: checkProps.readonly || readonly,
         onChange(checked, { e }) {
           if (typeof checkProps.onChange === 'function') {
             checkProps.onChange(checked, { e });
           }
-          setInternalValue(checked ? checkValue : undefined, { e });
+          setInternalValue(checked ? checkValue : undefined, { e, name: props.name });
         },
       };
     },
@@ -97,9 +98,9 @@ const RadioGroup: React.FC<RadioGroupProps> = (originalProps) => {
 
   const renderOptions = () => {
     const Comp = variant.includes('filled') ? Radio.Button : Radio;
-    return options.map((item) => {
+    return options.map((item, index) => {
       let label: ReactNode;
-      let value: string | number;
+      let value: string | number | boolean;
       let disabled: boolean | undefined;
       if (typeof item === 'string' || typeof item === 'number') {
         label = item;
@@ -110,7 +111,7 @@ const RadioGroup: React.FC<RadioGroupProps> = (originalProps) => {
         disabled = item.disabled;
       }
       return (
-        <Comp value={value} key={value} disabled={disabled}>
+        <Comp value={value} key={index} disabled={disabled}>
           {label}
         </Comp>
       );

src/radio/_usage/props.json

@@ -18,7 +18,7 @@
     "options": []
   },
   {
-    "name": "value",
+    "name": "readonly",
     "type": "Boolean",
     "defaultValue": false,
     "options": []

src/radio/defaultProps.ts

@@ -8,12 +8,14 @@ export const radioDefaultProps: TdRadioProps = {
   allowUncheck: false,
   defaultChecked: false,
   disabled: undefined,
+  readonly: undefined,
   value: undefined,
 };
 
 export const radioGroupDefaultProps: TdRadioGroupProps = {
   allowUncheck: false,
   disabled: undefined,
+  readonly: undefined,
   size: 'medium',
   variant: 'outline',
 };

src/radio/radio.en-US.md

@@ -1,35 +1,39 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Radio Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 allowUncheck | Boolean | false | \- | N
 checked | Boolean | false | \- | N
 defaultChecked | Boolean | false | uncontrolled property | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | undefined | \- | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 name | String | - | \- | N
+readonly | Boolean | undefined | \- | N
 value | String / Number / Boolean | undefined | Typescript：`T` | N
 onChange | Function |  | Typescript：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>trigger on click | N
 
+
 ### RadioGroup Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 allowUncheck | Boolean | false | \- | N
-disabled | Boolean | false | \- | N
+disabled | Boolean | undefined | \- | N
 name | String | - | \- | N
-options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-value | String / Number / Boolean | - | Typescript：`T` | N
-defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` | N
-variant | String | outline | options：outline/primary-filled/default-filled | N
-onChange | Function |  | Typescript：`(value: T, context: { e: ChangeEvent }) => void`<br/> | N
+options | Array | - | Typescript：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
+readonly | Boolean | undefined | \- | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+value | String / Number / Boolean | - | Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
+defaultValue | String / Number / Boolean | - | uncontrolled property。Typescript：`T` `type RadioValue = string \| number \| boolean`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
+variant | String | outline | options: outline/primary-filled/default-filled | N
+onChange | Function |  | Typescript：`(value: T, context: { e: ChangeEvent; name?: string }) => void`<br/> | N

src/radio/radio.md

@@ -1,35 +1,39 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Radio Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 allowUncheck | Boolean | false | 是否允许取消选中 | N
 checked | Boolean | false | 是否选中 | N
 defaultChecked | Boolean | false | 是否选中。非受控属性 | N
 children | TNode | - | 单选内容，同 label。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-disabled | Boolean | undefined | 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。Radio.disabled 优先级高于 RadioGroup.disabled | N
+disabled | Boolean | undefined | 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。优先级：Radio.disabled > RadioGroup.disabled | N
 label | TNode | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 name | String | - | HTML 元素原生属性 | N
+readonly | Boolean | undefined | 只读状态 | N
 value | String / Number / Boolean | undefined | 单选按钮的值。TS 类型：`T` | N
 onChange | Function |  | TS 类型：`(checked: boolean, context: { e: ChangeEvent }) => void`<br/>选中状态变化时触发 | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发，一般用于外层阻止冒泡场景 | N
 
+
 ### RadioGroup Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 allowUncheck | Boolean | false | 是否允许取消选中 | N
-disabled | Boolean | false | 是否禁用全部子单选框。默认为 false。RadioGroup.disabled 优先级低于 Radio.disabled | N
+disabled | Boolean | undefined | 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled | N
 name | String | - | HTML 元素原生属性 | N
-options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number; disabled?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
+options | Array | - | 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同。TS 类型：`Array<RadioOption>` `type RadioOption = string \| number \| RadioOptionObj` `interface RadioOptionObj { label?: string \| TNode; value?: string \| number \| boolean; disabled?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
+readonly | Boolean | undefined | 只读状态 | N
 size | String | medium | 组件尺寸【讨论中】。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-value | String / Number / Boolean | - | 选中的值。TS 类型：`T` | N
-defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` | N
+value | String / Number / Boolean | - | 选中的值。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
+defaultValue | String / Number / Boolean | - | 选中的值。非受控属性。TS 类型：`T` `type RadioValue = string \| number \| boolean`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/radio/type.ts) | N
 variant | String | outline | 单选组件按钮形式。可选项：outline/primary-filled/default-filled | N
-onChange | Function |  | TS 类型：`(value: T, context: { e: ChangeEvent }) => void`<br/>选中值发生变化时触发 | N
+onChange | Function |  | TS 类型：`(value: T, context: { e: ChangeEvent; name?: string }) => void`<br/>选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 | N

src/radio/type.ts

@@ -28,7 +28,7 @@ export interface TdRadioProps<T = RadioValue> {
    */
   children?: TNode;
   /**
-   * 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。Radio.disabled 优先级高于 RadioGroup.disabled
+   * 是否为禁用态。如果存在父组件 RadioGroup，默认值由 RadioGroup.disabled 控制。优先级：Radio.disabled > RadioGroup.disabled
    */
   disabled?: boolean;
   /**
@@ -40,6 +40,10 @@ export interface TdRadioProps<T = RadioValue> {
    * @default ''
    */
   name?: string;
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
   /**
    * 单选按钮的值
    */
@@ -49,7 +53,7 @@ export interface TdRadioProps<T = RadioValue> {
    */
   onChange?: (checked: boolean, context: { e: ChangeEvent<HTMLDivElement> }) => void;
   /**
-   * 点击触发，一般用于外层阻止冒泡场景
+   * 点击时触发，一般用于外层阻止冒泡场景
    */
   onClick?: (context: { e: MouseEvent<HTMLLabelElement> }) => void;
 }
@@ -61,8 +65,7 @@ export interface TdRadioGroupProps<T = RadioValue> {
    */
   allowUncheck?: boolean;
   /**
-   * 是否禁用全部子单选框。默认为 false。RadioGroup.disabled 优先级低于 Radio.disabled
-   * @default false
+   * 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled
    */
   disabled?: boolean;
   /**
@@ -74,6 +77,10 @@ export interface TdRadioGroupProps<T = RadioValue> {
    * 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同
    */
   options?: Array<RadioOption>;
+  /**
+   * 只读状态
+   */
+  readonly?: boolean;
   /**
    * 组件尺寸【讨论中】
    * @default medium
@@ -93,17 +100,17 @@ export interface TdRadioGroupProps<T = RadioValue> {
    */
   variant?: 'outline' | 'primary-filled' | 'default-filled';
   /**
-   * 选中值发生变化时触发
+   * 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性
    */
-  onChange?: (value: T, context: { e: ChangeEvent<HTMLInputElement> }) => void;
+  onChange?: (value: T, context: { e: ChangeEvent<HTMLDivElement>; name?: string }) => void;
 }
 
-export type RadioValue = string | number | boolean;
-
 export type RadioOption = string | number | RadioOptionObj;
 
 export interface RadioOptionObj {
   label?: string | TNode;
-  value?: string | number;
+  value?: string | number | boolean;
   disabled?: boolean;
 }
+
+export type RadioValue = string | number | boolean;