ant-design/components/select/index.tsx

111 lines
2.9 KiB
TypeScript
Raw Normal View History

2016-07-07 20:25:03 +08:00
import * as React from 'react';
2016-08-10 09:46:56 +08:00
import { PropTypes } from 'react';
import RcSelect, { Option, OptGroup } from 'rc-select';
2015-12-06 17:13:06 +08:00
import classNames from 'classnames';
2015-06-09 21:16:59 +08:00
export type SelectValue = string | any[] | { key: string, label: React.ReactNode } |
Array<{ key: string, label: React.ReactNode }>;
2016-08-10 09:46:56 +08:00
export interface SelectProps {
prefixCls?: string;
className?: string;
value?: SelectValue;
defaultValue?: SelectValue;
size?: 'default' | 'large' | 'small';
combobox?: boolean;
notFoundContent?: React.ReactNode | string;
2016-08-10 09:46:56 +08:00
showSearch?: boolean;
transitionName?: string;
choiceTransitionName?: string;
multiple?: boolean;
allowClear?: boolean;
filterOption?: boolean | ((inputValue: string, option: Object) => any);
tags?: boolean;
onSelect?: (value: SelectValue, option: Object) => any;
onDeselect?: (value: SelectValue) => any;
onSearch?: (value: string) => any;
placeholder?: string;
dropdownMatchSelectWidth?: boolean;
optionFilterProp?: string;
optionLabelProp?: string;
disabled?: boolean;
defaultActiveFirstOption?: boolean;
labelInValue?: boolean;
getPopupContainer?: (triggerNode: React.ReactNode) => React.ReactNode | HTMLElement;
style?: React.CSSProperties;
dropdownMenuStyle?: React.CSSProperties;
onChange?: (value) => void;
2016-08-10 09:46:56 +08:00
}
export interface SelectContext {
antLocale?: {
Select?: any,
};
}
2016-08-22 17:26:14 +08:00
export { Option, OptGroup }
2016-08-10 09:46:56 +08:00
export default class Select extends React.Component<SelectProps, any> {
static Option = Option;
static OptGroup = OptGroup;
static defaultProps = {
prefixCls: 'ant-select',
2016-08-10 09:46:56 +08:00
showSearch: false,
transitionName: 'slide-up',
choiceTransitionName: 'zoom',
2016-07-13 11:14:24 +08:00
};
2016-08-10 09:46:56 +08:00
static propTypes = {
prefixCls: PropTypes.string,
className: PropTypes.string,
size: PropTypes.oneOf(['default', 'large', 'small']),
combobox: PropTypes.bool,
notFoundContent: PropTypes.any,
showSearch: PropTypes.bool,
optionLabelProp: PropTypes.string,
transitionName: PropTypes.string,
choiceTransitionName: PropTypes.string,
2016-07-13 11:14:24 +08:00
};
2016-08-10 09:46:56 +08:00
context: SelectContext;
2015-07-24 16:05:56 +08:00
render() {
2015-12-06 17:13:06 +08:00
let {
2016-08-10 09:46:56 +08:00
prefixCls,
className,
size,
combobox,
notFoundContent,
showSearch,
optionLabelProp,
2015-12-06 17:13:06 +08:00
} = this.props;
2015-11-12 21:28:02 +08:00
2015-12-06 17:13:06 +08:00
const cls = classNames({
2016-04-06 15:50:58 +08:00
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small',
2015-12-06 17:13:06 +08:00
[className]: !!className,
[`${prefixCls}-show-search`]: showSearch,
2015-12-06 17:13:06 +08:00
});
2015-11-12 21:28:02 +08:00
const { antLocale } = this.context;
if (antLocale && antLocale.Select) {
notFoundContent = notFoundContent || antLocale.Select.notFoundContent;
}
2015-12-06 17:13:06 +08:00
if (combobox) {
notFoundContent = null;
// children 带 dom 结构时,无法填入输入框
optionLabelProp = optionLabelProp || 'value';
2015-08-23 16:00:05 +08:00
}
2015-12-06 17:13:06 +08:00
2015-06-15 17:17:23 +08:00
return (
<RcSelect {...this.props}
2015-12-06 17:13:06 +08:00
className={cls}
optionLabelProp={optionLabelProp || 'children'}
notFoundContent={notFoundContent}
/>
2015-06-15 17:17:23 +08:00
);
}
}