2016-09-21 11:54:53 +08:00
|
|
|
import React from 'react';
|
2017-01-12 09:23:56 +08:00
|
|
|
import Select, { AbstractSelectProps, OptionProps, OptGroupProps } from '../select';
|
2016-10-18 11:55:00 +08:00
|
|
|
import { Option, OptGroup } from 'rc-select';
|
2016-07-25 17:46:45 +08:00
|
|
|
import classNames from 'classnames';
|
|
|
|
|
2016-09-19 10:22:52 +08:00
|
|
|
export interface SelectedValue {
|
2016-09-19 10:17:07 +08:00
|
|
|
key: string;
|
|
|
|
label: React.ReactNode;
|
|
|
|
}
|
|
|
|
|
2016-09-22 14:40:34 +08:00
|
|
|
export interface DataSourceItemObject { value: string; text: string; };
|
|
|
|
export type DataSourceItemType = string | DataSourceItemObject;
|
|
|
|
|
2017-01-12 09:23:56 +08:00
|
|
|
export interface AutoCompleteProps extends AbstractSelectProps {
|
2016-09-22 14:40:34 +08:00
|
|
|
dataSource: DataSourceItemType[];
|
2016-09-19 10:17:07 +08:00
|
|
|
defaultValue?: string | Array<any> | SelectedValue | Array<SelectedValue>;
|
|
|
|
value?: string | Array<any> | SelectedValue | Array<SelectedValue>;
|
2016-10-18 11:55:00 +08:00
|
|
|
onChange?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>) => void;
|
2017-01-12 09:23:56 +08:00
|
|
|
onSelect?: (value: string | Array<any> | SelectedValue | Array<SelectedValue>, option: Object) => any;
|
2016-07-25 17:46:45 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
|
2016-10-18 11:55:00 +08:00
|
|
|
static Option = Option as React.ClassicComponentClass<OptionProps>;
|
|
|
|
static OptGroup = OptGroup as React.ClassicComponentClass<OptGroupProps>;
|
2016-07-25 17:46:45 +08:00
|
|
|
|
|
|
|
static defaultProps = {
|
|
|
|
prefixCls: 'ant-select',
|
|
|
|
transitionName: 'slide-up',
|
|
|
|
optionLabelProp: 'children',
|
|
|
|
choiceTransitionName: 'zoom',
|
|
|
|
showSearch: false,
|
|
|
|
};
|
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
antLocale: React.PropTypes.object,
|
|
|
|
};
|
|
|
|
|
|
|
|
render() {
|
|
|
|
let {
|
2016-10-21 18:02:37 +08:00
|
|
|
size, className = '', notFoundContent, prefixCls, optionLabelProp, dataSource, children,
|
2016-07-25 17:46:45 +08:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
const cls = classNames({
|
|
|
|
[`${prefixCls}-lg`]: size === 'large',
|
|
|
|
[`${prefixCls}-sm`]: size === 'small',
|
|
|
|
[className]: !!className,
|
|
|
|
[`${prefixCls}-show-search`]: true,
|
|
|
|
});
|
|
|
|
|
2016-10-20 19:19:16 +08:00
|
|
|
const options = children || (dataSource ? dataSource.map((item) => {
|
2016-07-25 17:46:45 +08:00
|
|
|
switch (typeof item) {
|
|
|
|
case 'string':
|
|
|
|
return <Option key={item}>{item}</Option>;
|
|
|
|
case 'object':
|
2016-09-22 14:40:34 +08:00
|
|
|
return (
|
|
|
|
<Option key={(item as DataSourceItemObject).value}>
|
|
|
|
{(item as DataSourceItemObject).text}
|
|
|
|
</Option>
|
|
|
|
);
|
2016-07-25 17:46:45 +08:00
|
|
|
default:
|
2016-09-22 14:40:34 +08:00
|
|
|
throw new Error('AutoComplete[dataSource] only supports type `string[] | Object[]`.');
|
2016-07-25 17:46:45 +08:00
|
|
|
}
|
2016-09-22 14:40:34 +08:00
|
|
|
}) : []);
|
2016-07-25 17:46:45 +08:00
|
|
|
|
|
|
|
return (
|
2016-11-23 17:53:10 +08:00
|
|
|
<Select
|
|
|
|
{...this.props}
|
2016-07-25 17:46:45 +08:00
|
|
|
className={cls}
|
|
|
|
optionLabelProp={optionLabelProp}
|
|
|
|
combobox
|
2016-11-23 17:53:10 +08:00
|
|
|
notFoundContent={notFoundContent}
|
|
|
|
>
|
2016-07-25 17:46:45 +08:00
|
|
|
{options}
|
|
|
|
</Select>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|