Skip to content

refactor(radio): use composition api #4720

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 1, 2021
Merged

refactor(radio): use composition api #4720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f3f2ee6
refactor(radio): use composition api
ajuner Sep 30, 2021
b01fec1
docs: update
ajuner Sep 30, 2021
8cd9c1c
chore: update
ajuner Sep 30, 2021
2315586
docs: update
ajuner Sep 30, 2021
d96b288
Update Group.tsx
tangjinzhou Oct 1, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
212 changes: 106 additions & 106 deletions components/radio/Group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,133 +1,133 @@
import { provide, inject, nextTick, defineComponent } from 'vue';
import { provide, nextTick, defineComponent, ref, watch, onBeforeMount } from 'vue';
import type { PropType, ExtractPropTypes } from 'vue';
import classNames from '../_util/classNames';
import PropTypes from '../_util/vue-types';
import Radio from './Radio';
import { getOptionProps, filterEmpty, hasProp, getSlot } from '../_util/props-util';
import { defaultConfigProvider } from '../config-provider';
import useConfigInject from '../_util/hooks/useConfigInject';
import { tuple } from '../_util/type';
import type { RadioChangeEvent } from './interface';
import { useInjectFormItemContext } from '../form/FormItemContext';

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

export type RadioGroupSize = typeof RadioGroupSizeTypes[number];

const RadioGroupOptionTypes = tuple('default', 'button');

export type RadioGroupOption = typeof RadioGroupOptionTypes[number];

export type RadioGroupChildOption = {
label: string;
value: string;
disabled?: boolean;
};

const radioGroupProps = {
prefixCls: PropTypes.string,
value: PropTypes.any,
size: PropTypes.oneOf(RadioGroupSizeTypes).def('default'),
options: {
type: Array as PropType<Array<String | RadioGroupChildOption>>,
},
disabled: PropTypes.looseBool,
name: PropTypes.string,
buttonStyle: PropTypes.string.def('outline'),
id: PropTypes.string,
optionType: PropTypes.oneOf(RadioGroupOptionTypes).def('default'),
};

export type RadioGroupProps = Partial<ExtractPropTypes<typeof radioGroupProps>>;

export default defineComponent({
name: 'ARadioGroup',
props: {
prefixCls: PropTypes.string,
defaultValue: PropTypes.any,
value: PropTypes.any,
size: PropTypes.oneOf(tuple('large', 'default', 'small')).def('default'),
options: PropTypes.array,
disabled: PropTypes.looseBool,
name: PropTypes.string,
buttonStyle: PropTypes.string.def('outline'),
onChange: PropTypes.func,
id: PropTypes.string,
},
props: radioGroupProps,
emits: ['update:value', 'change'],
setup() {
setup(props, { slots, emit }) {
const formItemContext = useInjectFormItemContext();
return {
formItemContext,
updatingValue: false,
configProvider: inject('configProvider', defaultConfigProvider),
radioGroupContext: null,
};
},
data() {
const { value, defaultValue } = this;
return {
stateValue: value === undefined ? defaultValue : value,
};
},
watch: {
value(val) {
this.updatingValue = false;
this.stateValue = val;
},
},
// computed: {
// radioOptions() {
// const { disabled } = this;
// return this.options.map(option => {
// return typeof option === 'string'
// ? { label: option, value: option }
// : { ...option, disabled: option.disabled === undefined ? disabled : option.disabled };
// });
// },
// },
created() {
this.radioGroupContext = provide('radioGroupContext', this);
},
methods: {
onRadioChange(ev: RadioChangeEvent) {
const lastValue = this.stateValue;
const { prefixCls } = useConfigInject('radio', props);
const stateValue = ref(props.value === undefined ? props.defaultValue : props.value);
const updatingValue = ref<boolean>(false);
watch(
() => props.value,
val => {
stateValue.value = val;
updatingValue.value = false;
},
);

const onRadioChange = (ev: RadioChangeEvent) => {
const lastValue = stateValue.value;
const { value } = ev.target;
if (!hasProp(this, 'value')) {
this.stateValue = value;

if (!('value' in props)) {
stateValue.value = value;
}
// nextTick for https://github.com/vueComponent/ant-design-vue/issues/1280
if (!this.updatingValue && value !== lastValue) {
this.updatingValue = true;
this.$emit('update:value', value);
this.$emit('change', ev);
this.formItemContext.onFieldChange();
if (!updatingValue.value && value !== lastValue) {
updatingValue.value = true;
emit('update:value', value);
emit('change', ev);
formItemContext.onFieldChange();
}
nextTick(() => {
this.updatingValue = false;
updatingValue.value = false;
});
},
},
render() {
const props = getOptionProps(this);
const {
prefixCls: customizePrefixCls,
options,
buttonStyle,
id = this.formItemContext.id.value,
} = props;
const { getPrefixCls } = this.configProvider;
const prefixCls = getPrefixCls('radio', customizePrefixCls);

const groupPrefixCls = `${prefixCls}-group`;
const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
[`${groupPrefixCls}-${props.size}`]: props.size,
};

provide('radioGroupContext', {
onRadioChange,
stateValue,
props,
});

let children = filterEmpty(getSlot(this));
return () => {
const { options, optionType, buttonStyle, id = formItemContext.id.value } = props;

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

// 如果存在 options, 优先使用
if (options && options.length > 0) {
children = options.map(option => {
if (typeof option === 'string') {
const classString = classNames(groupPrefixCls, `${groupPrefixCls}-${buttonStyle}`, {
[`${groupPrefixCls}-${props.size}`]: props.size,
});

let children = null;
if (options && options.length > 0) {
const optionsPrefixCls =
optionType === 'button' ? `${prefixCls.value}-button` : prefixCls.value;
children = options.map(option => {
if (typeof option === 'string') {
return (
<Radio
key={option}
prefixCls={optionsPrefixCls}
disabled={props.disabled}
value={option}
checked={stateValue.value === option}
>
{option}
</Radio>
);
}
const { value, disabled, label } = option as RadioGroupChildOption;
return (
<Radio
key={option}
prefixCls={prefixCls}
disabled={props.disabled}
value={option}
checked={this.stateValue === option}
key={`radio-group-value-options-${value}`}
prefixCls={optionsPrefixCls}
disabled={disabled || props.disabled}
value={value}
checked={stateValue.value === value}
>
{option}
{label}
</Radio>
);
}
return (
<Radio
key={`radio-group-value-options-${option.value}`}
prefixCls={prefixCls}
disabled={option.disabled || props.disabled}
value={option.value}
checked={this.stateValue === option.value}
>
{option.label}
</Radio>
);
});
}

return (
<div class={classString} id={id}>
{children}
</div>
);
});
} else {
children = slots.default?.();
}
return (
<div class={classString} id={id}>
{children}
</div>
);
};
},
});
121 changes: 57 additions & 64 deletions components/radio/Radio.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,14 @@
import type { ExtractPropTypes } from 'vue';
import { defineComponent, inject } from 'vue';
import { defineComponent, inject, ref } from 'vue';
import PropTypes from '../_util/vue-types';
import VcCheckbox from '../vc-checkbox';
import classNames from '../_util/classNames';
import { getOptionProps } from '../_util/props-util';
import { defaultConfigProvider } from '../config-provider';
import type { RadioChangeEvent } from './interface';
import useConfigInject from '../_util/hooks/useConfigInject';
import type { RadioChangeEvent, RadioGroupContext } from './interface';
import { useInjectFormItemContext } from '../form/FormItemContext';

export const radioProps = {
prefixCls: PropTypes.string,
defaultChecked: PropTypes.looseBool,
checked: PropTypes.looseBool,
disabled: PropTypes.looseBool,
isGroup: PropTypes.looseBool,
Expand All @@ -30,72 +28,67 @@ export default defineComponent({
name: 'ARadio',
props: radioProps,
emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'],
setup() {
setup(props, { emit, expose, slots }) {
const formItemContext = useInjectFormItemContext();
return {
configProvider: inject('configProvider', defaultConfigProvider),
radioGroupContext: inject('radioGroupContext', null),
formItemContext,
const vcCheckbox = ref<HTMLElement>();
const radioGroupContext = inject<RadioGroupContext>('radioGroupContext');
const { prefixCls } = useConfigInject('radio', props);

const focus = () => {
vcCheckbox.value.focus();
};
},
methods: {
focus() {
(this.$refs.vcCheckbox as HTMLInputElement).focus();
},
blur() {
(this.$refs.vcCheckbox as HTMLInputElement).blur();
},
handleChange(event: RadioChangeEvent) {

const blur = () => {
vcCheckbox.value.blur();
};

expose({ focus, blur });

const handleChange = (event: RadioChangeEvent) => {
const targetChecked = event.target.checked;
this.$emit('update:checked', targetChecked);
this.$emit('update:value', targetChecked);
this.$emit('change', event);
this.formItemContext.onFieldChange();
},
onChange2(e: RadioChangeEvent) {
this.$emit('change', e);
if (this.radioGroupContext && this.radioGroupContext.onRadioChange) {
this.radioGroupContext.onRadioChange(e);
emit('update:checked', targetChecked);
emit('update:value', targetChecked);
emit('change', event);
formItemContext.onFieldChange();
};

const onChange = (e: RadioChangeEvent) => {
emit('change', e);
if (radioGroupContext && radioGroupContext.onRadioChange) {
radioGroupContext.onRadioChange(e);
}
},
},
};

render() {
const { $slots, radioGroupContext: radioGroup } = this;
const props = getOptionProps(this);
const {
prefixCls: customizePrefixCls,
id = this.formItemContext.id.value,
...restProps
} = props;
const { getPrefixCls } = this.configProvider;
const prefixCls = getPrefixCls('radio', customizePrefixCls);
return () => {
const radioGroup = radioGroupContext;
const { prefixCls: customizePrefixCls, id = formItemContext.id.value, ...restProps } = props;

const rProps: RadioProps = {
prefixCls,
id,
...restProps,
};
const rProps: RadioProps = {
prefixCls: prefixCls.value,
id,
...restProps,
};

if (radioGroup) {
rProps.name = radioGroup.name;
rProps.onChange = this.onChange2;
rProps.checked = props.value === radioGroup.stateValue;
rProps.disabled = props.disabled || radioGroup.disabled;
} else {
rProps.onChange = this.handleChange;
}
const wrapperClassString = classNames({
[`${prefixCls}-wrapper`]: true,
[`${prefixCls}-wrapper-checked`]: rProps.checked,
[`${prefixCls}-wrapper-disabled`]: rProps.disabled,
});
if (radioGroup) {
rProps.name = radioGroup.props.name;
rProps.onChange = onChange;
rProps.checked = props.value === radioGroup.stateValue.value;
rProps.disabled = props.disabled || radioGroup.props.disabled;
} else {
rProps.onChange = handleChange;
}
const wrapperClassString = classNames({
[`${prefixCls.value}-wrapper`]: true,
[`${prefixCls.value}-wrapper-checked`]: rProps.checked,
[`${prefixCls.value}-wrapper-disabled`]: rProps.disabled,
});

return (
<label class={wrapperClassString}>
<VcCheckbox {...rProps} ref="vcCheckbox" />
{$slots.default && <span>{$slots.default()}</span>}
</label>
);
return (
<label class={wrapperClassString}>
<VcCheckbox {...rProps} ref={vcCheckbox} />
{slots.default && <span>{slots.default()}</span>}
</label>
);
};
},
});
Loading