refactor: radio to ts

Amour1688 · Amour1688 · commit d465356f6d00 · 2020-10-20T16:58:08.000+08:00
diff --git a/components/radio/Group.tsx b/components/radio/Group.tsx
@@ -4,62 +4,57 @@ 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 { tuple } from '../_util/type';
+import { RadioChangeEvent } from './interface';
 
 export default defineComponent({
   name: 'ARadioGroup',
   props: {
     prefixCls: PropTypes.string,
     defaultValue: PropTypes.any,
     value: PropTypes.any,
-    size: {
-      default: 'default',
-      validator(value) {
-        return ['large', 'default', 'small'].includes(value);
-      },
-    },
-    options: {
-      default: () => [],
-      type: Array,
-    },
+    size: PropTypes.oneOf(tuple('large', 'default', 'small')).def('default'),
+    options: PropTypes.array,
     disabled: PropTypes.looseBool,
-    name: String,
+    name: PropTypes.string,
     buttonStyle: PropTypes.string.def('outline'),
     onChange: PropTypes.func,
-    'onUpdate:value': PropTypes.func,
   },
+  emits: ['update:value', 'change'],
   data() {
     const { value, defaultValue } = this;
-    this.updatingValue = false;
     return {
       stateValue: value === undefined ? defaultValue : value,
     };
   },
   setup() {
     return {
+      updatingValue: false,
       configProvider: inject('configProvider', defaultConfigProvider),
+      radioGroupContext: null,
     };
   },
-  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 };
-      });
-    },
+  // 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);
   },
   watch: {
     value(val) {
       this.updatingValue = false;
       this.stateValue = val;
     },
   },
-  created() {
-    this.radioGroupContext = provide('radioGroupContext', this);
-  },
   methods: {
-    onRadioChange(ev) {
+    onRadioChange(ev: RadioChangeEvent) {
       const lastValue = this.stateValue;
       const { value } = ev.target;
       if (!hasProp(this, 'value')) {
@@ -79,7 +74,7 @@ export default defineComponent({
   render() {
     const props = getOptionProps(this);
     const { prefixCls: customizePrefixCls, options, buttonStyle } = props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls } = this.configProvider;
     const prefixCls = getPrefixCls('radio', customizePrefixCls);
 
     const groupPrefixCls = `${prefixCls}-group`;
diff --git a/components/radio/Radio.tsx b/components/radio/Radio.tsx
@@ -1,32 +1,36 @@
-import { inject } from 'vue';
+import { defineComponent, ExtractPropTypes, inject } 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 { RadioChangeEvent } from './interface';
 
-export default {
+export const radioProps = {
+  prefixCls: PropTypes.string,
+  defaultChecked: PropTypes.looseBool,
+  checked: PropTypes.looseBool,
+  disabled: PropTypes.looseBool,
+  isGroup: PropTypes.looseBool,
+  value: PropTypes.any,
+  name: PropTypes.string,
+  id: PropTypes.string,
+  autofocus: PropTypes.looseBool,
+  type: PropTypes.string.def('radio'),
+  onChange: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+};
+
+export type RadioProps = Partial<ExtractPropTypes<typeof radioProps>>;
+
+export default defineComponent({
   name: 'ARadio',
   model: {
     prop: 'checked',
   },
-  props: {
-    prefixCls: PropTypes.string,
-    defaultChecked: PropTypes.looseBool,
-    checked: PropTypes.looseBool,
-    disabled: PropTypes.looseBool,
-    isGroup: PropTypes.looseBool,
-    value: PropTypes.any,
-    name: String,
-    id: String,
-    autofocus: PropTypes.looseBool,
-    type: PropTypes.string.def('radio'),
-    onChange: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    'onUpdate:checked': PropTypes.func,
-    'onUpdate:value': PropTypes.func,
-  },
+  props: radioProps,
+  emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'],
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
@@ -35,18 +39,18 @@ export default {
   },
   methods: {
     focus() {
-      this.$refs.vcCheckbox.focus();
+      (this.$refs.vcCheckbox as any).focus();
     },
     blur() {
-      this.$refs.vcCheckbox.blur();
+      (this.$refs.vcCheckbox as any).blur();
     },
-    handleChange(event) {
+    handleChange(event: RadioChangeEvent) {
       const targetChecked = event.target.checked;
       this.$emit('update:checked', targetChecked);
       this.$emit('update:value', targetChecked);
       this.$emit('change', event);
     },
-    onChange2(e) {
+    onChange2(e: RadioChangeEvent) {
       this.$emit('change', e);
       if (this.radioGroupContext && this.radioGroupContext.onRadioChange) {
         this.radioGroupContext.onRadioChange(e);
@@ -58,33 +62,33 @@ export default {
     const { $slots, radioGroupContext: radioGroup } = this;
     const props = getOptionProps(this);
     const { prefixCls: customizePrefixCls, ...restProps } = props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls } = this.configProvider;
     const prefixCls = getPrefixCls('radio', customizePrefixCls);
 
-    const radioProps = {
+    const rProps: RadioProps = {
       prefixCls,
       ...restProps,
     };
 
     if (radioGroup) {
-      radioProps.name = radioGroup.name;
-      radioProps.onChange = this.onChange2;
-      radioProps.checked = props.value === radioGroup.stateValue;
-      radioProps.disabled = props.disabled || radioGroup.disabled;
+      rProps.name = radioGroup.name;
+      rProps.onChange = this.onChange2;
+      rProps.checked = props.value === radioGroup.stateValue;
+      rProps.disabled = props.disabled || radioGroup.disabled;
     } else {
-      radioProps.onChange = this.handleChange;
+      rProps.onChange = this.handleChange;
     }
     const wrapperClassString = classNames({
       [`${prefixCls}-wrapper`]: true,
-      [`${prefixCls}-wrapper-checked`]: radioProps.checked,
-      [`${prefixCls}-wrapper-disabled`]: radioProps.disabled,
+      [`${prefixCls}-wrapper-checked`]: rProps.checked,
+      [`${prefixCls}-wrapper-disabled`]: rProps.disabled,
     });
 
     return (
       <label class={wrapperClassString}>
-        <VcCheckbox {...radioProps} ref="vcCheckbox" />
+        <VcCheckbox {...rProps} ref="vcCheckbox" />
         {$slots.default && <span>{$slots.default()}</span>}
       </label>
     );
   },
-};
+});
diff --git a/components/radio/RadioButton.tsx b/components/radio/RadioButton.tsx
@@ -1,34 +1,34 @@
 import { defineComponent, inject } from 'vue';
-import Radio from './Radio';
+import Radio, { radioProps, RadioProps } from './Radio';
 import { getOptionProps, getSlot } from '../_util/props-util';
 import { defaultConfigProvider } from '../config-provider';
 
 export default defineComponent({
   name: 'ARadioButton',
   props: {
-    ...Radio.props,
+    ...radioProps,
   },
   setup() {
     return {
       configProvider: inject('configProvider', defaultConfigProvider),
-      radioGroupContext: inject('radioGroupContext', {}),
+      radioGroupContext: inject<any>('radioGroupContext', {}),
     };
   },
   render() {
-    const props = getOptionProps(this);
+    const props = getOptionProps(this) as RadioProps;
     const { prefixCls: customizePrefixCls, ...otherProps } = props;
-    const getPrefixCls = this.configProvider.getPrefixCls;
+    const { getPrefixCls } = this.configProvider;
     const prefixCls = getPrefixCls('radio-button', customizePrefixCls);
 
-    const radioProps = {
+    const rProps: RadioProps = {
       prefixCls,
       ...otherProps,
     };
     if (this.radioGroupContext) {
-      radioProps.onChange = this.radioGroupContext.onRadioChange;
-      radioProps.checked = props.value === this.radioGroupContext.stateValue;
-      radioProps.disabled = props.disabled || this.radioGroupContext.disabled;
+      rProps.onChange = this.radioGroupContext.onRadioChange;
+      rProps.checked = props.value === this.radioGroupContext.stateValue;
+      rProps.disabled = props.disabled || this.radioGroupContext.disabled;
     }
-    return <Radio {...radioProps}>{getSlot(this)}</Radio>;
+    return <Radio {...rProps}>{getSlot(this)}</Radio>;
   },
 });
diff --git a/components/radio/index.ts b/components/radio/index.ts
@@ -1,3 +1,4 @@
+import { App } from 'vue';
 import Radio from './Radio';
 import Group from './Group';
 import Button from './RadioButton';
@@ -6,7 +7,7 @@ Radio.Group = Group;
 Radio.Button = Button;
 
 /* istanbul ignore next */
-Radio.install = function(app) {
+Radio.install = function(app: App) {
   app.component(Radio.name, Radio);
   app.component(Radio.Group.name, Radio.Group);
   app.component(Radio.Button.name, Radio.Button);
diff --git a/components/radio/interface.ts b/components/radio/interface.ts
@@ -0,0 +1,12 @@
+import { RadioProps } from './Radio';
+
+export interface RadioChangeEventTarget extends RadioProps {
+  checked: boolean;
+}
+
+export interface RadioChangeEvent {
+  target: RadioChangeEventTarget;
+  stopPropagation: () => void;
+  preventDefault: () => void;
+  nativeEvent: MouseEvent;
+}
