import React , { ChangeEventHandler } from 'react' ; import Button from '../button' ; import TextInput from '../text-input' ; import { ComponentSize } from '../../config/sizes' ; import { SearchWrapper } from './styled' ; import SearchIcon from '../../icons/Search' ; export interface SearchProps { className ? : string ; size ? : ComponentSize ; width ? : string ; value ? : string ; onChange ? : ChangeEventHandler < HTMLInputElement > ; placeholder ? : string ; } const Search = ( props , ref ) => { const { size = 'default' , className , value , onChange , placeholder , width = '100%' , } = props ; const textInputStyles = { size , width : '100%' , placeholder } ; return ( < SearchWrapper ref = { ref } className = { className } width = { width } > < TextInput value = { value } onChange = { onChange } placeholder = { placeholder } clearable { ... textInputStyles } /> < Button type = 'secondary' icon = { SearchIcon } / > < /SearchWrapper>); } ; export default React . forwardRef < HTMLDivElement , SearchProps > ( Search ) ;