import { stringIsNullOrEmpty } from '@pnp/common' ; import { format } from 'office-ui-fabric-react/lib/Utilities' ; import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox' ; import strings from 'PortfolioWebPartsStrings' ; import React , { useContext } from 'react' ; import { PortfolioAggregationContext } from '../context' ; import { SEARCH } from '../reducer' ; import styles from './SearchBox.module.scss' ; export default ( ) => { const { props , state , dispatch } = useContext ( PortfolioAggregationContext ) ; /**
     * Get placeholder text
     */ function getPlaceholderText ( ) { if ( ! stringIsNullOrEmpty ( props . searchBoxPlaceholderText ) ) { return props . searchBoxPlaceholderText ; } if ( state . dataSource ) { return format ( strings . SearchBoxPlaceholderText , state . dataSource . toLowerCase ( ) ) ; } return '' ; } return ( < div className = { styles . root } hidden = { ! props . showSearchBox } > < SearchBox placeholder = { getPlaceholderText ( ) } onChange = { ( searchTerm ) => dispatch ( SEARCH ( { searchTerm } ) ) } /> < /div>); } ;