import React , { useRef } from 'react' ; import { InputGroup , InputRightElement , Input , IconButton } from '@chakra-ui/react' ; import { SearchIcon } from '../icons' ; export interface SearchInputProps { field : string ; data : any [ ] ; placeholder : string ; onChange : ( data : any [ ] ) => void ; } const getProp = ( obj , prop ) => { return prop . split ( '.' ) . reduce ( ( r , e ) => { return r [ e ] ; } , obj ) ; } ; export const SearchInput = ( { data , field , placeholder , onChange } ) => { const inputRef = useRef < HTMLInputElement > ( null ) ; const normalize = ( str ) => str . normalize ( 'NFD' ) . replace ( /[\u0300-\u036f]/g , '' ) . toUpperCase ( ) ; const searching = ( c ) => { const search = ( inputRef as any ) . current . value ; if ( search ) { return normalize ( getProp ( c , field ) ) . indexOf ( normalize ( search ) ) !== - 1 ; } return true ; } ; return ( < form onSubmit = { e => { e . preventDefault ( ) ; onChange ( data . filter ( searching ) ) ; } } > < InputGroup > < Input colorScheme = "pink" ref = { inputRef } placeholder = { placeholder } / > < InputRightElement children = { ( < IconButton aria - label = "Search button icon" variant = "ghost" colorScheme = "gray" type = 'submit' icon = { < SearchIcon boxSize = { 4 } / > } />)}/ > < /InputGroup> < /form>); } ;