2016-09-21 11:54:53 +08:00
|
|
|
import React from 'react';
|
2016-08-10 09:46:56 +08:00
|
|
|
import { PropTypes } from 'react';
|
2016-03-21 09:22:14 +08:00
|
|
|
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
|
|
|
|
2016-09-19 10:17:07 +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
|
|
|
|
2017-01-12 09:23:56 +08:00
|
|
|
export interface AbstractSelectProps {
|
2016-08-10 09:46:56 +08:00
|
|
|
size?: 'default' | 'large' | 'small';
|
2017-01-12 09:23:56 +08:00
|
|
|
className?: string;
|
2016-10-24 16:30:38 +08:00
|
|
|
notFoundContent?: React.ReactNode | null;
|
2017-01-12 09:23:56 +08:00
|
|
|
prefixCls?: string;
|
2016-08-10 09:46:56 +08:00
|
|
|
transitionName?: string;
|
2017-01-12 09:23:56 +08:00
|
|
|
optionLabelProp?: string;
|
2016-08-10 09:46:56 +08:00
|
|
|
choiceTransitionName?: string;
|
2017-01-12 09:23:56 +08:00
|
|
|
showSearch?: boolean;
|
2016-08-10 09:46:56 +08:00
|
|
|
allowClear?: boolean;
|
2017-01-12 09:23:56 +08:00
|
|
|
disabled?: boolean;
|
|
|
|
style?: React.CSSProperties;
|
|
|
|
placeholder?: string;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface SelectProps extends AbstractSelectProps {
|
|
|
|
value?: SelectValue;
|
|
|
|
defaultValue?: SelectValue;
|
|
|
|
combobox?: boolean;
|
|
|
|
multiple?: boolean;
|
2016-08-10 09:46:56 +08:00
|
|
|
filterOption?: boolean | ((inputValue: string, option: Object) => any);
|
|
|
|
tags?: boolean;
|
|
|
|
onSelect?: (value: SelectValue, option: Object) => any;
|
|
|
|
onDeselect?: (value: SelectValue) => any;
|
|
|
|
onSearch?: (value: string) => any;
|
|
|
|
dropdownMatchSelectWidth?: boolean;
|
|
|
|
optionFilterProp?: string;
|
|
|
|
defaultActiveFirstOption?: boolean;
|
|
|
|
labelInValue?: boolean;
|
2016-09-19 10:17:07 +08:00
|
|
|
getPopupContainer?: (triggerNode: React.ReactNode) => React.ReactNode | HTMLElement;
|
2016-10-09 22:55:50 +08:00
|
|
|
dropdownStyle?: React.CSSProperties;
|
2016-08-19 17:11:06 +08:00
|
|
|
dropdownMenuStyle?: React.CSSProperties;
|
2016-10-18 11:55:00 +08:00
|
|
|
onChange?: (value: SelectValue) => void;
|
2017-01-02 19:11:13 +08:00
|
|
|
tokenSeparators?: string[];
|
2017-01-13 21:19:23 +08:00
|
|
|
getInputElement?: () => React.ReactElement<any>;
|
2016-08-10 09:46:56 +08:00
|
|
|
}
|
|
|
|
|
2016-09-28 16:58:14 +08:00
|
|
|
export interface OptionProps {
|
|
|
|
disabled?: boolean;
|
|
|
|
value?: any;
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface OptGroupProps {
|
|
|
|
label?: string | React.ReactElement<any>;
|
|
|
|
}
|
|
|
|
|
2016-08-10 09:46:56 +08:00
|
|
|
export interface SelectContext {
|
|
|
|
antLocale?: {
|
|
|
|
Select?: any,
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2016-10-18 11:55:00 +08:00
|
|
|
// => It is needless to export the declaration of below two inner components.
|
|
|
|
// export { Option, OptGroup };
|
2016-08-22 17:26:14 +08:00
|
|
|
|
2016-08-10 09:46:56 +08:00
|
|
|
export default class Select extends React.Component<SelectProps, any> {
|
2016-09-28 16:58:14 +08:00
|
|
|
static Option = Option as React.ClassicComponentClass<OptionProps>;
|
|
|
|
static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
|
2016-03-29 14:01:10 +08:00
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
prefixCls: 'ant-select',
|
2016-08-10 09:46:56 +08:00
|
|
|
showSearch: false,
|
2016-03-29 14:01:10 +08:00
|
|
|
transitionName: 'slide-up',
|
|
|
|
choiceTransitionName: 'zoom',
|
2016-07-13 11:14:24 +08:00
|
|
|
};
|
2016-03-29 14:01:10 +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-05-08 16:05:36 +08:00
|
|
|
|
2016-08-10 09:46:56 +08:00
|
|
|
context: SelectContext;
|
|
|
|
|
2015-07-24 16:05:56 +08:00
|
|
|
render() {
|
2016-10-09 22:55:50 +08:00
|
|
|
const {
|
2016-08-10 09:46:56 +08:00
|
|
|
prefixCls,
|
2016-10-24 16:30:38 +08:00
|
|
|
className = '',
|
2016-08-10 09:46:56 +08:00
|
|
|
size,
|
|
|
|
combobox,
|
|
|
|
showSearch,
|
2015-12-06 17:13:06 +08:00
|
|
|
} = this.props;
|
2015-11-12 21:28:02 +08:00
|
|
|
|
2016-10-09 22:55:50 +08:00
|
|
|
let { notFoundContent = 'Not Found', optionLabelProp } = this.props;
|
|
|
|
|
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',
|
2016-04-27 20:44:36 +08:00
|
|
|
[`${prefixCls}-show-search`]: showSearch,
|
2016-11-30 10:20:23 +08:00
|
|
|
}, className);
|
2015-11-12 21:28:02 +08:00
|
|
|
|
2016-05-08 16:05:36 +08:00
|
|
|
const { antLocale } = this.context;
|
|
|
|
if (antLocale && antLocale.Select) {
|
2016-10-09 22:55:50 +08:00
|
|
|
notFoundContent = ('notFoundContent' in this.props)
|
|
|
|
? notFoundContent : antLocale.Select.notFoundContent;
|
2016-05-08 16:05:36 +08:00
|
|
|
}
|
|
|
|
|
2015-12-06 17:13:06 +08:00
|
|
|
if (combobox) {
|
|
|
|
notFoundContent = null;
|
2016-05-04 20:31:12 +08:00
|
|
|
// children 带 dom 结构时,无法填入输入框
|
2016-05-19 15:36:35 +08:00
|
|
|
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 (
|
2016-10-09 22:55:50 +08:00
|
|
|
<RcSelect
|
|
|
|
{...this.props}
|
2015-12-06 17:13:06 +08:00
|
|
|
className={cls}
|
2016-05-19 15:36:35 +08:00
|
|
|
optionLabelProp={optionLabelProp || 'children'}
|
2016-06-06 13:54:10 +08:00
|
|
|
notFoundContent={notFoundContent}
|
|
|
|
/>
|
2015-06-15 17:17:23 +08:00
|
|
|
);
|
|
|
|
}
|
2016-03-21 09:22:14 +08:00
|
|
|
}
|