ant-design/components/input/Search.tsx

54 lines
1.3 KiB
TypeScript
Raw Normal View History

import React from 'react';
import classNames from 'classnames';
import Input from './Input';
import Icon from '../icon';
export interface SearchProps {
className?: string;
placeholder?: string;
prefixCls?: string;
style?: React.CSSProperties;
defaultValue?: any;
value?: any;
onChange?: React.FormEventHandler<any>;
2016-11-24 14:56:08 +08:00
onSearch?: (value: string) => any;
size?: 'large' | 'default' | 'small';
disabled?: boolean;
readOnly?: boolean;
}
export default class Search extends React.Component<SearchProps, any> {
static defaultProps = {
prefixCls: 'ant-input-search',
2016-11-24 14:56:08 +08:00
onSearch() {},
};
2016-11-24 14:56:08 +08:00
input: any;
onSearch = () => {
2016-11-24 14:56:08 +08:00
const { onSearch } = this.props;
if (onSearch) {
onSearch(this.input.refs.input.value);
}
2016-11-24 14:56:08 +08:00
this.input.refs.input.focus();
}
render() {
2017-01-05 15:53:04 +08:00
const { className, prefixCls, ...others } = this.props;
delete (others as any).onSearch;
const searchSuffix = (
<Icon
className={`${prefixCls}-icon`}
onClick={this.onSearch}
type="search"
/>
);
return (
2017-01-05 15:53:04 +08:00
<Input
className={classNames(prefixCls, className)}
onPressEnter={this.onSearch}
ref={node => this.input = node}
suffix={searchSuffix}
{...others}
/>
);
}
}