mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 09:26:06 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

Improve Radio/Checkbox type definition

Browse Source 
Close #9574
This commit is contained in:
Wei Zhu 2018-03-08 20:34:40 +08:00
parent 43e4622ef8
commit f78e0098fa
9 changed files with 42 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/calendar/Header.tsx
View File

@ -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);

19
components/checkbox/Checkbox.tsx
View File

@ -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 = {

2
components/checkbox/index.tsx
View File

@ -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;

4
components/radio/group.tsx
View File

@ -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)) {

12
components/radio/interface.tsx
View File

@ -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>;

3
components/radio/radioButton.tsx
View File

@ -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 = {

4
components/table/SelectionCheckboxAll.tsx
View File

@ -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);
}

8
components/table/Table.tsx
View File

@ -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);
};

4
components/table/interface.tsx
View File

@ -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 {