Skip to content

Commit e04f73d

Browse files
shifeng1993shifeng1993
authored
refactor:radio (#6299)
* refactor:radio * fix attrs
1 parent 8fcb3fd commit e04f73d

File tree

10 files changed

+620
-478
lines changed

10 files changed

+620
-478
lines changed

‎components/radio/Group.tsx

+30-17
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { nextTick, defineComponent, ref, watch, computed } from 'vue';
2-
import type { PropType, ExtractPropTypes } from 'vue';
2+
import type { ExtractPropTypes } from 'vue';
33
import classNames from '../_util/classNames';
44
import PropTypes from '../_util/vue-types';
55
import Radio from './Radio';
@@ -8,6 +8,10 @@ import { tuple } from '../_util/type';
88
import type { RadioChangeEvent, RadioGroupButtonStyle, RadioGroupOptionType } from './interface';
99
import { useInjectFormItemContext } from '../form/FormItemContext';
1010
import { useProvideRadioGroupContext } from './context';
11+
import { booleanType, stringType, arrayType, functionType } from '../_util/type';
12+
13+
// CSSINJS
14+
import useStyle from './style';
1115

1216
const RadioGroupSizeTypes = tuple('large', 'default', 'small');
1317

@@ -25,28 +29,31 @@ export const radioGroupProps = () => ({
2529
prefixCls: String,
2630
value: PropTypes.any,
2731
size: PropTypes.oneOf(RadioGroupSizeTypes),
28-
options: {
29-
type: Array as PropType<Array<string | RadioGroupChildOption | number>>,
30-
},
31-
disabled: { type: Boolean, default: undefined },
32+
options: arrayType<Array<string | RadioGroupChildOption | number>>(),
33+
disabled: booleanType(),
3234
name: String,
33-
buttonStyle: { type: String as PropType<RadioGroupButtonStyle>, default: 'outline' },
35+
buttonStyle: stringType<RadioGroupButtonStyle>('outline'),
3436
id: String,
35-
optionType: { type: String as PropType<RadioGroupOptionType>, default: 'default' },
36-
onChange: Function as PropType<(e: RadioChangeEvent) => void>,
37-
'onUpdate:value': Function as PropType<(val: any) => void>,
37+
optionType: stringType<RadioGroupOptionType>('default'),
38+
onChange: functionType<(e: RadioChangeEvent) => void>(),
39+
'onUpdate:value': functionType<(val: any) => void>(),
3840
});
3941

4042
export type RadioGroupProps = Partial<ExtractPropTypes<ReturnType<typeof radioGroupProps>>>;
4143

4244
export default defineComponent({
4345
compatConfig: { MODE: 3 },
4446
name: 'ARadioGroup',
47+
inheritAttrs: false,
4548
props: radioGroupProps(),
4649
// emits: ['update:value', 'change'],
47-
setup(props, { slots, emit }) {
50+
setup(props, { slots, emit, attrs }) {
4851
const formItemContext = useInjectFormItemContext();
4952
const { prefixCls, direction, size } = useConfigInject('radio', props);
53+
54+
// Style
55+
const [wrapSSR, hashId] = useStyle(prefixCls);
56+
5057
const stateValue = ref(props.value);
5158
const updatingValue = ref<boolean>(false);
5259
watch(
@@ -89,10 +96,16 @@ export default defineComponent({
8996

9097
const groupPrefixCls = `${prefixCls.value}-group`;
9198

92-
const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
93-
[`${groupPrefixCls}-${size.value}`]: size.value,
94-
[`${groupPrefixCls}-rtl`]: direction.value === 'rtl',
95-
});
99+
const classString = classNames(
100+
groupPrefixCls,
101+
`${groupPrefixCls}-${buttonStyle}`,
102+
{
103+
[`${groupPrefixCls}-${size.value}`]: size.value,
104+
[`${groupPrefixCls}-rtl`]: direction.value === 'rtl',
105+
},
106+
attrs.class,
107+
hashId.value,
108+
);
96109

97110
let children = null;
98111
if (options && options.length > 0) {
@@ -126,10 +139,10 @@ export default defineComponent({
126139
} else {
127140
children = slots.default?.();
128141
}
129-
return (
130-
<div class={classString} id={id}>
142+
return wrapSSR(
143+
<div {...attrs} class={classString} id={id}>
131144
{children}
132-
</div>
145+
</div>,
133146
);
134147
};
135148
},

‎components/radio/Radio.tsx

+36-23
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ExtractPropTypes, PropType } from 'vue';
1+
import type { ExtractPropTypes } from 'vue';
22
import { computed, defineComponent, ref } from 'vue';
33
import PropTypes from '../_util/vue-types';
44
import VcCheckbox from '../vc-checkbox/Checkbox';
@@ -9,31 +9,36 @@ import { FormItemInputContext, useInjectFormItemContext } from '../form/FormItem
99
import omit from '../_util/omit';
1010
import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterface';
1111
import { useInjectRadioGroupContext, useInjectRadioOptionTypeContext } from './context';
12+
import { booleanType, functionType } from '../_util/type';
13+
14+
// CSSINJS
15+
import useStyle from './style';
1216

1317
export const radioProps = () => ({
1418
prefixCls: String,
15-
checked: { type: Boolean, default: undefined },
16-
disabled: { type: Boolean, default: undefined },
17-
isGroup: { type: Boolean, default: undefined },
19+
checked: booleanType(),
20+
disabled: booleanType(),
21+
isGroup: booleanType(),
1822
value: PropTypes.any,
1923
name: String,
2024
id: String,
21-
autofocus: { type: Boolean, default: undefined },
22-
onChange: Function as PropType<(event: RadioChangeEvent) => void>,
23-
onFocus: Function as PropType<FocusEventHandler>,
24-
onBlur: Function as PropType<FocusEventHandler>,
25-
onClick: Function as PropType<MouseEventHandler>,
26-
'onUpdate:checked': Function as PropType<(checked: boolean) => void>,
27-
'onUpdate:value': Function as PropType<(checked: boolean) => void>,
25+
autofocus: booleanType(),
26+
onChange: functionType<(event: RadioChangeEvent) => void>(),
27+
onFocus: functionType<FocusEventHandler>(),
28+
onBlur: functionType<FocusEventHandler>(),
29+
onClick: functionType<MouseEventHandler>(),
30+
'onUpdate:checked': functionType<(checked: boolean) => void>(),
31+
'onUpdate:value': functionType<(checked: boolean) => void>(),
2832
});
2933

3034
export type RadioProps = Partial<ExtractPropTypes<ReturnType<typeof radioProps>>>;
3135

3236
export default defineComponent({
3337
compatConfig: { MODE: 3 },
3438
name: 'ARadio',
39+
inheritAttrs: false,
3540
props: radioProps(),
36-
setup(props, { emit, expose, slots }) {
41+
setup(props, { emit, expose, slots, attrs }) {
3742
const formItemContext = useInjectFormItemContext();
3843
const formItemInputContext = FormItemInputContext.useInject();
3944
const radioOptionTypeContext = useInjectRadioOptionTypeContext();
@@ -42,10 +47,14 @@ export default defineComponent({
4247

4348
const { prefixCls: radioPrefixCls, direction } = useConfigInject('radio', props);
4449
const prefixCls = computed(() =>
45-
(radioGroupContext?.optionType.value || radioOptionTypeContext) === 'button'
50+
radioGroupContext?.optionType.value === 'button' || radioOptionTypeContext === 'button'
4651
? `${radioPrefixCls.value}-button`
4752
: radioPrefixCls.value,
4853
);
54+
55+
// Style
56+
const [wrapSSR, hashId] = useStyle(radioPrefixCls);
57+
4958
const focus = () => {
5059
vcCheckbox.value.focus();
5160
};
@@ -89,19 +98,23 @@ export default defineComponent({
8998
} else {
9099
rProps.onChange = handleChange;
91100
}
92-
const wrapperClassString = classNames({
93-
[`${prefixCls.value}-wrapper`]: true,
94-
[`${prefixCls.value}-wrapper-checked`]: rProps.checked,
95-
[`${prefixCls.value}-wrapper-disabled`]: rProps.disabled,
96-
[`${prefixCls.value}-wrapper-rtl`]: direction.value === 'rtl',
97-
[`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput,
98-
});
101+
const wrapperClassString = classNames(
102+
{
103+
[`${prefixCls.value}-wrapper`]: true,
104+
[`${prefixCls.value}-wrapper-checked`]: rProps.checked,
105+
[`${prefixCls.value}-wrapper-disabled`]: rProps.disabled,
106+
[`${prefixCls.value}-wrapper-rtl`]: direction.value === 'rtl',
107+
[`${prefixCls.value}-wrapper-in-form-item`]: formItemInputContext.isFormItemInput,
108+
},
109+
attrs.class,
110+
hashId.value,
111+
);
99112

100-
return (
101-
<label class={wrapperClassString}>
113+
return wrapSSR(
114+
<label {...attrs} class={wrapperClassString}>
102115
<VcCheckbox {...rProps} type="radio" ref={vcCheckbox} />
103116
{slots.default && <span>{slots.default()}</span>}
104-
</label>
117+
</label>,
105118
);
106119
};
107120
},

‎components/radio/RadioButton.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,14 @@ import { useProvideRadioOptionTypeContext } from './context';
66
export default defineComponent({
77
compatConfig: { MODE: 3 },
88
name: 'ARadioButton',
9+
inheritAttrs: false,
910
props: radioProps(),
10-
setup(props, { slots }) {
11-
const { prefixCls } = useConfigInject('radio-button', props);
11+
setup(props, { slots, attrs }) {
12+
const { prefixCls } = useConfigInject('radio', props);
1213
useProvideRadioOptionTypeContext('button');
1314
return () => {
1415
return (
15-
<Radio {...props} prefixCls={prefixCls.value}>
16+
<Radio {...attrs} {...props} prefixCls={prefixCls.value}>
1617
{slots.default?.()}
1718
</Radio>
1819
);

‎components/radio/index.en-US.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
category: Components
33
type: Data Entry
44
title: Radio
5-
cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
5+
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M-YKTJnWM2kAAAAAAAAAAAAADrJ8AQ/original
66
---
77

88
Radio.

‎components/radio/index.zh-CN.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ category: Components
33
type: 数据录入
44
title: Radio
55
subtitle: 单选框
6-
cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
6+
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M-YKTJnWM2kAAAAAAAAAAAAADrJ8AQ/original
77
---
88

99
单选框。

0 commit comments

Comments
 (0)