ant-design/components/auto-complete/index.tsx
2016-09-19 10:22:52 +08:00

82 lines
2.1 KiB
TypeScript

import * as React from 'react';
import Select, { Option, OptGroup } from '../select';
import classNames from 'classnames';
export interface SelectedValue {
key: string;
label: React.ReactNode;
}
export interface AutoCompleteProps {
size?: 'large' | 'small' | 'default';
className?: string;
notFoundContent?: Element;
dataSource: Array<any>;
prefixCls?: string;
transitionName?: string;
optionLabelProp?: string;
choiceTransitionName?: string;
showSearch?: boolean;
defaultValue?: string | Array<any> | SelectedValue | Array<SelectedValue>;
value?: string | Array<any> | SelectedValue | Array<SelectedValue>;
allowClear?: boolean;
onChange?: (value) => void;
disabled?: boolean;
}
export default class AutoComplete extends React.Component<AutoCompleteProps, any> {
static Option = Option;
static OptGroup = OptGroup;
static defaultProps = {
prefixCls: 'ant-select',
transitionName: 'slide-up',
optionLabelProp: 'children',
choiceTransitionName: 'zoom',
showSearch: false,
};
static contextTypes = {
antLocale: React.PropTypes.object,
};
render() {
let {
size, className, notFoundContent, prefixCls, optionLabelProp, dataSource,
} = this.props;
const cls = classNames({
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small',
[className]: !!className,
[`${prefixCls}-show-search`]: true,
});
const options = dataSource ? dataSource.map((item, index) => {
switch (typeof item) {
case 'string':
return <Option key={item}>{item}</Option>;
case 'object':
if (React.isValidElement(item)) {
return React.cloneElement(item, {
key: item.key || index,
});
}
return <Option key={item.value}>{item.text}</Option>;
default:
return [];
}
}) : [];
return (
<Select {...this.props}
className={cls}
optionLabelProp={optionLabelProp}
combobox
notFoundContent={notFoundContent} >
{options}
</Select>
);
}
}