2016-11-24 14:03:57 +08:00
|
|
|
import React from 'react';
|
|
|
|
import classNames from 'classnames';
|
2017-07-14 17:47:11 +08:00
|
|
|
import Input, { InputProps } from './Input';
|
2016-11-24 14:03:57 +08:00
|
|
|
import Icon from '../icon';
|
2017-09-15 17:03:43 +08:00
|
|
|
import Button from '../button';
|
2016-11-24 14:03:57 +08:00
|
|
|
|
2017-07-14 17:47:11 +08:00
|
|
|
export interface SearchProps extends InputProps {
|
2017-09-30 00:04:19 +08:00
|
|
|
inputPrefixCls?: string;
|
2016-11-24 14:56:08 +08:00
|
|
|
onSearch?: (value: string) => any;
|
2017-09-15 17:03:43 +08:00
|
|
|
enterButton?: boolean | React.ReactNode;
|
2016-11-24 14:03:57 +08:00
|
|
|
}
|
|
|
|
|
2017-05-16 12:02:52 +08:00
|
|
|
export default class Search extends React.Component<SearchProps, any> {
|
2016-11-24 14:03:57 +08:00
|
|
|
static defaultProps = {
|
2017-09-30 00:04:19 +08:00
|
|
|
inputPrefixCls: 'ant-input',
|
2016-11-24 14:03:57 +08:00
|
|
|
prefixCls: 'ant-input-search',
|
2017-09-15 17:03:43 +08:00
|
|
|
enterButton: false,
|
2016-11-24 14:03:57 +08:00
|
|
|
};
|
2017-09-08 09:43:21 +08:00
|
|
|
|
2017-09-17 15:48:44 +08:00
|
|
|
private input: Input;
|
2017-09-08 09:43:21 +08:00
|
|
|
|
2016-11-24 14:03:57 +08:00
|
|
|
onSearch = () => {
|
2016-11-24 14:56:08 +08:00
|
|
|
const { onSearch } = this.props;
|
|
|
|
if (onSearch) {
|
2017-09-08 09:43:21 +08:00
|
|
|
onSearch(this.input.input.value);
|
2016-11-24 14:03:57 +08:00
|
|
|
}
|
2017-05-22 14:44:58 +08:00
|
|
|
this.input.focus();
|
2016-11-24 14:03:57 +08:00
|
|
|
}
|
2017-09-08 09:43:21 +08:00
|
|
|
|
|
|
|
saveInput = (node) => {
|
|
|
|
this.input = node;
|
|
|
|
}
|
|
|
|
|
2016-11-24 14:03:57 +08:00
|
|
|
render() {
|
2017-11-06 10:35:41 +08:00
|
|
|
const { className, prefixCls, inputPrefixCls, size, enterButton, suffix, ...others } = this.props;
|
2017-03-06 15:48:03 +08:00
|
|
|
delete (others as any).onSearch;
|
2017-11-06 10:35:41 +08:00
|
|
|
const buttonOrIcon = enterButton
|
2017-09-15 17:03:43 +08:00
|
|
|
? (
|
|
|
|
<Button
|
|
|
|
className={`${prefixCls}-button`}
|
|
|
|
type="primary"
|
|
|
|
size={size}
|
|
|
|
onClick={this.onSearch}
|
|
|
|
>
|
|
|
|
{enterButton === true ? <Icon type="search" /> : enterButton}
|
|
|
|
</Button>
|
|
|
|
) : <Icon className={`${prefixCls}-icon`} type="search" />;
|
2017-11-06 10:35:41 +08:00
|
|
|
const searchSuffix = suffix ? [suffix, buttonOrIcon] : buttonOrIcon;
|
2017-09-15 17:03:43 +08:00
|
|
|
const inputClassName = classNames(prefixCls, className, {
|
|
|
|
[`${prefixCls}-enter-button`]: !!enterButton,
|
2017-09-27 22:32:49 +08:00
|
|
|
[`${prefixCls}-${size}`]: !!size,
|
2017-09-15 17:03:43 +08:00
|
|
|
});
|
2016-11-24 14:03:57 +08:00
|
|
|
return (
|
2017-01-05 15:53:04 +08:00
|
|
|
<Input
|
|
|
|
onPressEnter={this.onSearch}
|
|
|
|
{...others}
|
2017-09-15 17:03:43 +08:00
|
|
|
size={size}
|
|
|
|
className={inputClassName}
|
2017-09-30 00:04:19 +08:00
|
|
|
prefixCls={inputPrefixCls}
|
2017-05-22 14:44:58 +08:00
|
|
|
suffix={searchSuffix}
|
2017-09-08 09:43:21 +08:00
|
|
|
ref={this.saveInput}
|
2017-01-05 15:53:04 +08:00
|
|
|
/>
|
2016-11-24 14:03:57 +08:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|