@mikezimm/fps-library-v2/lib/components/molecules/SearchPage/component/SearchBoxRow.js

Library of reusable typescript/javascript functions, interfaces and constants

import * as React from 'react';
// import styles from './SourceSearch.module.scss';
import { SearchBox } from '@fluentui/react/lib/SearchBox';
import PageArrows from '../../Arrows/PageArrows';
require('@mikezimm/fps-styles/dist/searchBoxRow.css');
const SourceSearchHook = (props) => {
    const { searchText, searchTime, _onSearchChange, _updateFirstLastVisible, debugMode, resetArrows, itemsPerPage, itemCount, } = props;
    // I don't think checking counts will work here as
    // NOTE this itemCount <= itemsPerPage should be verified with -1, -= +1 actual items.
    // const pageArrows = itemCount <= itemsPerPage ? undefined : <PageArrows
    const pageArrows = React.createElement(PageArrows, { itemCount: itemCount, itemsPerPage: itemsPerPage, setParentStateFirstLast: _updateFirstLastVisible.bind(this), debugMode: debugMode, fontSize: 20, resetArrows: resetArrows, pageArrowStyles: props.layout === 'block' ? { paddingLeft: '0px' } : {} });
    const containerClass = props.layout === 'block' ? 'searchContainerBlock' : 'searchContainerFlex';
    /*https://developer.microsoft.com/en-us/fabric#/controls/web/searchbox*/
    const searchBox = React.createElement("div", { className: [containerClass].join(' ') },
        React.createElement(SearchBox, { className: 'searchBox', styles: { root: { maxWidth: 220 } }, placeholder: "Search", value: searchText, onSearch: _onSearchChange, onFocus: () => console.log('onFocus called'), onBlur: () => console.log('onBlur called'), onChange: _onSearchChange, onClear: _onSearchChange }),
        React.createElement("div", { className: 'searchStatus forceColorWhiteOnDefWhite' },
            'Searching ' + itemCount + ' items',
            searchTime === null ? '' : ' ~ Time ' + searchTime + ' ms'),
        props.preArrowsEle ? props.preArrowsEle : undefined,
        pageArrows,
        props.postArrowsEle ? props.postArrowsEle : undefined);
    return (searchBox);
};
export default SourceSearchHook;
//# sourceMappingURL=SearchBoxRow.js.map