Improve Radio/Checkbox type definition

Close #9574

components/calendar/Header.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as moment from 'moment';
 import { PREFIX_CLS } from './Constants';
 import Select from '../select';
-import { Group, Button } from '../radio';
+import { Group, Button, RadioChangeEvent } from '../radio';
 const Option = Select.Option;
 
 export interface HeaderProps {
@@ -103,7 +103,7 @@ export default class Header extends React.Component<HeaderProps, any> {
     }
   }
 
-  onTypeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  onTypeChange = (e: RadioChangeEvent) => {
     const onTypeChange = this.props.onTypeChange;
     if (onTypeChange) {
       onTypeChange(e.target.value);

components/checkbox/Checkbox.tsx

@@ -5,14 +5,14 @@ import RcCheckbox from 'rc-checkbox';
 import shallowEqual from 'shallowequal';
 import CheckboxGroup, { CheckboxGroupContext } from './Group';
 
-export interface AbstractCheckboxProps {
+export interface AbstractCheckboxProps<T> {
   prefixCls?: string;
   className?: string;
   defaultChecked?: boolean;
   checked?: boolean;
   style?: React.CSSProperties;
   disabled?: boolean;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onChange?: (e: T) => void;
   onMouseEnter?: React.MouseEventHandler<any>;
   onMouseLeave?: React.MouseEventHandler<any>;
   onKeyPress?: React.KeyboardEventHandler<any>;
@@ -23,10 +23,23 @@ export interface AbstractCheckboxProps {
   children?: React.ReactNode;
 }
 
-export interface CheckboxProps extends AbstractCheckboxProps {
+export interface CheckboxProps extends AbstractCheckboxProps<CheckboxChangeEvent> {
   indeterminate?: boolean;
 }
 
+export interface AbstractCheckboxChangeEvent<T> {
+  target: T;
+  stopPropagation: () => void;
+  preventDefault: () => void;
+  nativeEvent: MouseEvent;
+}
+
+export interface CheckboxChangeEventTarget extends CheckboxProps {
+  checked: boolean;
+}
+
+export type CheckboxChangeEvent = AbstractCheckboxChangeEvent<CheckboxChangeEventTarget>;
+
 export default class Checkbox extends React.Component<CheckboxProps, {}> {
   static Group: typeof CheckboxGroup;
   static defaultProps = {

components/checkbox/index.tsx

@@ -1,7 +1,7 @@
 import Checkbox from './Checkbox';
 import Group from './Group';
 
-export { CheckboxProps } from './Checkbox';
+export { CheckboxProps, CheckboxChangeEvent } from './Checkbox';
 export { CheckboxGroupProps, CheckboxOptionType } from './Group';
 
 Checkbox.Group = Group;

components/radio/group.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import shallowEqual from 'shallowequal';
 import Radio from './radio';
-import { RadioGroupProps, RadioGroupState } from './interface';
+import { RadioGroupProps, RadioGroupState, RadioChangeEvent } from './interface';
 
 function getCheckedValue(children: React.ReactNode) {
   let value = null;
@@ -73,7 +73,7 @@ export default class RadioGroup extends React.Component<RadioGroupProps, RadioGr
       !shallowEqual(this.state, nextState);
   }
 
-  onRadioChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
+  onRadioChange = (ev: RadioChangeEvent) => {
     const lastValue = this.state.value;
     const { value } = ev.target;
     if (!('value' in this.props)) {

components/radio/interface.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { AbstractCheckboxGroupProps } from '../checkbox/Group';
-import { AbstractCheckboxProps } from '../checkbox/Checkbox';
+import { AbstractCheckboxProps, AbstractCheckboxChangeEvent } from '../checkbox/Checkbox';
 
 export interface RadioGroupProps extends AbstractCheckboxGroupProps {
   defaultValue?: any;
   value?: any;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  onChange?: (e: RadioChangeEvent) => void;
   size?: 'large' | 'default' | 'small';
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
@@ -27,4 +27,10 @@ export interface RadioGroupContext {
   };
 }
 
-export type RadioProps = AbstractCheckboxProps;
+export type RadioProps = AbstractCheckboxProps<RadioChangeEvent>;
+
+export interface RadioChangeEventTarget extends RadioProps {
+  checked: boolean;
+}
+
+export type RadioChangeEvent = AbstractCheckboxChangeEvent<RadioChangeEventTarget>;

components/radio/radioButton.tsx

@@ -2,8 +2,9 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { AbstractCheckboxProps } from '../checkbox/Checkbox';
 import Radio from './radio';
+import { RadioChangeEvent } from './interface';
 
-export type RadioButtonProps = AbstractCheckboxProps;
+export type RadioButtonProps = AbstractCheckboxProps<RadioChangeEvent>;
 
 export default class RadioButton extends React.Component<RadioButtonProps, any> {
   static defaultProps = {

components/table/SelectionCheckboxAll.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Checkbox from '../checkbox';
+import Checkbox, { CheckboxChangeEvent } from '../checkbox';
 import Dropdown from '../dropdown';
 import Menu from '../menu';
 import Icon from '../icon';
@@ -113,7 +113,7 @@ export default class SelectionCheckboxAll<T> extends
     return indeterminate;
   }
 
-  handleSelectAllChagne = (e: React.ChangeEvent<HTMLInputElement>) => {
+  handleSelectAllChagne = (e: CheckboxChangeEvent) => {
     let checked = e.target.checked;
     this.props.onSelect(checked ? 'all' : 'removeAll', 0, null);
   }

components/table/Table.tsx

@@ -29,6 +29,8 @@ import {
   TableStateFilters,
   SelectionItemSelectFn,
 } from './interface';
+import { RadioChangeEvent } from '../radio';
+import { CheckboxChangeEvent } from '../checkbox';
 
 function noop() {
 }
@@ -442,7 +444,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     });
   }
 
-  handleSelect = (record: T, rowIndex: number, e: React.ChangeEvent<HTMLInputElement>) => {
+  handleSelect = (record: T, rowIndex: number, e: CheckboxChangeEvent) => {
     const checked = e.target.checked;
     const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection();
     let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
@@ -462,7 +464,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     });
   }
 
-  handleRadioSelect = (record: T, rowIndex: number, e: React.ChangeEvent<HTMLInputElement>) => {
+  handleRadioSelect = (record: T, rowIndex: number, e: RadioChangeEvent) => {
     const checked = e.target.checked;
     const defaultSelection = this.store.getState().selectionDirty ? [] : this.getDefaultSelection();
     let selectedRowKeys = this.store.getState().selectedRowKeys.concat(defaultSelection);
@@ -587,7 +589,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     return (_: any, record: T, index: number) => {
       let rowIndex = this.getRecordKey(record, index); // 从 1 开始
       const props = this.getCheckboxPropsByItem(record, index);
-      const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const handleChange = (e: RadioChangeEvent | CheckboxChangeEvent) => {
         type === 'radio' ? this.handleRadioSelect(record, rowIndex, e) :
                            this.handleSelect(record, rowIndex, e);
       };

components/table/interface.tsx

@@ -2,6 +2,8 @@ import * as React from 'react';
 import { PaginationProps } from '../pagination';
 import { SpinProps } from '../spin';
 import { Store } from './createStore';
+import { RadioChangeEvent } from '../radio';
+import { CheckboxChangeEvent } from '../checkbox';
 
 export type CompareFn<T> = ((a: T, b: T) => number);
 export type ColumnFilterItem = { text: string; value: string, children?: ColumnFilterItem[] };
@@ -155,7 +157,7 @@ export interface SelectionBoxProps {
   rowIndex: string;
   name?: string;
   disabled?: boolean;
-  onChange: React.ChangeEventHandler<HTMLInputElement>;
+  onChange: (e: RadioChangeEvent | CheckboxChangeEvent) => void;
 }
 
 export interface SelectionBoxState {