ant-design/components/input/Search.tsx

43 lines
1.0 KiB
TypeScript
Raw Normal View History

import React from 'react';
import classNames from 'classnames';
2017-07-14 17:47:11 +08:00
import Input, { InputProps } from './Input';
import Icon from '../icon';
2017-07-14 17:47:11 +08:00
export interface SearchProps extends InputProps {
2016-11-24 14:56:08 +08:00
onSearch?: (value: string) => any;
}
2017-05-16 12:02:52 +08:00
export default class Search extends React.Component<SearchProps, any> {
static defaultProps = {
prefixCls: 'ant-input-search',
};
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);
}
2017-05-22 14:44:58 +08:00
this.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
onPressEnter={this.onSearch}
{...others}
className={classNames(prefixCls, className)}
2017-05-22 14:44:58 +08:00
suffix={searchSuffix}
ref={node => this.input = node}
2017-01-05 15:53:04 +08:00
/>
);
}
}