From e2897ccf8e28d06ccc42b26d410071ff08d5783a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Thu, 12 Dec 2024 17:42:28 +0800 Subject: [PATCH 1/4] feat(RadioGroup): support readonly --- src/radio/RadioGroup.tsx | 11 ++++++----- src/radio/defaultProps.ts | 2 ++ src/radio/radio.en-US.md | 26 +++++++++++++++----------- src/radio/radio.md | 7 +++++-- src/radio/type.ts | 25 ++++++++++++++++--------- 5 files changed, 44 insertions(+), 27 deletions(-) diff --git a/src/radio/RadioGroup.tsx b/src/radio/RadioGroup.tsx index 453af60849..a089c18a34 100644 --- a/src/radio/RadioGroup.tsx +++ b/src/radio/RadioGroup.tsx @@ -27,7 +27,7 @@ const RadioGroup: React.FC = (originalProps) => { const props = useDefaultProps(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 = (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 = (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 = (originalProps) => { disabled = item.disabled; } return ( - + {label} ); diff --git a/src/radio/defaultProps.ts b/src/radio/defaultProps.ts index 899a8eb75a..ff466903e2 100644 --- a/src/radio/defaultProps.ts +++ b/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', }; diff --git a/src/radio/radio.en-US.md b/src/radio/radio.en-US.md index 49642379ac..4fbc440d45 100644 --- a/src/radio/radio.en-US.md +++ b/src/radio/radio.en-US.md @@ -1,12 +1,13 @@ :: 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 @@ -14,22 +15,25 @@ children | TNode | - | Typescript：`string \| TNode`。[see more ts definition] 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`
| N onClick | Function | | Typescript：`(context: { e: MouseEvent }) => void`
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` `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`
| N +options | Array | - | Typescript：`Array` `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`
| N diff --git a/src/radio/radio.md b/src/radio/radio.md index 3f7688bac3..7c99c89b63 100644 --- a/src/radio/radio.md +++ b/src/radio/radio.md @@ -1,9 +1,10 @@ :: BASE_DOC :: ## API + ### Radio Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N @@ -14,13 +15,15 @@ children | TNode | - | 单选内容，同 label。TS 类型：`string \| TNode` 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`
选中状态变化时触发 | N onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
点击时触发，一般用于外层阻止冒泡场景 | N + ### RadioGroup Props -名称 | 类型 | 默认值 | 说明 | 必传 +名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N diff --git a/src/radio/type.ts b/src/radio/type.ts index 4ab9f830a5..1af86f0976 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -28,7 +28,7 @@ export interface TdRadioProps { */ 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 { * @default '' */ name?: string; + /** + * 只读状态 + */ + readonly?: boolean; /** * 单选按钮的值 */ @@ -49,7 +53,7 @@ export interface TdRadioProps { */ onChange?: (checked: boolean, context: { e: ChangeEvent }) => void; /** - * 点击触发，一般用于外层阻止冒泡场景 + * 点击时触发，一般用于外层阻止冒泡场景 */ onClick?: (context: { e: MouseEvent }) => void; } @@ -61,8 +65,7 @@ export interface TdRadioGroupProps { */ allowUncheck?: boolean; /** - * 是否禁用全部子单选框。默认为 false。RadioGroup.disabled 优先级低于 Radio.disabled - * @default false + * 是否禁用全部子单选框。优先级：Radio.disabled > RadioGroup.disabled */ disabled?: boolean; /** @@ -74,6 +77,10 @@ export interface TdRadioGroupProps { * 单选组件按钮形式。RadioOption 数据类型为 string 或 number 时，表示 label 和 value 值相同 */ options?: Array; + /** + * 只读状态 + */ + readonly?: boolean; /** * 组件尺寸【讨论中】 * @default medium @@ -93,17 +100,17 @@ export interface TdRadioGroupProps { */ variant?: 'outline' | 'primary-filled' | 'default-filled'; /** - * 选中值发生变化时触发 + * 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 */ - onChange?: (value: T, context: { e: ChangeEvent }) => void; + onChange?: (value: T, context: { e: ChangeEvent; 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; From 2a04655f5257fb86310e9a2d943ed855289b39c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Thu, 12 Dec 2024 17:48:05 +0800 Subject: [PATCH 2/4] docs: sync api --- src/radio/radio.md | 13 +++++++------ src/radio/type.ts | 2 +- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/src/radio/radio.md b/src/radio/radio.md index 7c99c89b63..42809b5a20 100644 --- a/src/radio/radio.md +++ b/src/radio/radio.md @@ -12,7 +12,7 @@ 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 @@ -28,11 +28,12 @@ onClick | Function | | TS 类型：`(context: { e: MouseEvent }) => void`
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` `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` `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`
选中值发生变化时触发 | N +onChange | Function | | TS 类型：`(value: T, context: { e: ChangeEvent; name?: string }) => void`
选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 | N diff --git a/src/radio/type.ts b/src/radio/type.ts index 1af86f0976..ac20ac8538 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -102,7 +102,7 @@ export interface TdRadioGroupProps { /** * 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 */ - onChange?: (value: T, context: { e: ChangeEvent; name?: string }) => void; + onChange?: (value: T, context: { e: ChangeEvent; name?: string }) => void; } export type RadioOption = string | number | RadioOptionObj; From 583c959d5e73a7d6137dc3771bc01ad99c8a3dbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Thu, 12 Dec 2024 18:00:56 +0800 Subject: [PATCH 3/4] docs: update live demo --- src/radio/_usage/props.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/radio/_usage/props.json b/src/radio/_usage/props.json index d5488e6f36..04ddfe7113 100644 --- a/src/radio/_usage/props.json +++ b/src/radio/_usage/props.json @@ -18,7 +18,7 @@ "options": [] }, { - "name": "value", + "name": "readonly", "type": "Boolean", "defaultValue": false, "options": [] From 85127dd7333c49603405af7bfe9a29fbe4e77bba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com> Date: Fri, 13 Dec 2024 15:22:47 +0800 Subject: [PATCH 4/4] fix: fix type --- src/radio/type.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/radio/type.ts b/src/radio/type.ts index ac20ac8538..1af86f0976 100644 --- a/src/radio/type.ts +++ b/src/radio/type.ts @@ -102,7 +102,7 @@ export interface TdRadioGroupProps { /** * 选中值发生变化时触发, `context.name` 指 RadioGroup 的 name 属性 */ - onChange?: (value: T, context: { e: ChangeEvent; name?: string }) => void; + onChange?: (value: T, context: { e: ChangeEvent; name?: string }) => void; } export type RadioOption = string | number | RadioOptionObj;