Revision 7e82200e
Added by Ron Lavi over 2 years ago
| webpack/assets/javascripts/react_app/components/SearchBar/SearchBar.js | ||
|---|---|---|
|
import React from 'react';
|
||
|
import { isEmpty } from 'lodash';
|
||
|
import PropTypes from 'prop-types';
|
||
|
import { Button } from '@patternfly/react-core';
|
||
|
import { SearchIcon } from '@patternfly/react-icons';
|
||
|
import AutoComplete from '../AutoComplete';
|
||
|
import Bookmarks from '../Bookmarks';
|
||
|
import Bookmarks from '../PF4/Bookmarks';
|
||
|
import { changeQuery } from '../../common/urlHelpers';
|
||
|
import './search-bar.scss';
|
||
|
|
||
| ... | ... | |
|
} = props;
|
||
|
|
||
|
return (
|
||
|
<div className="search-bar input-group" id="search-bar">
|
||
|
<AutoComplete
|
||
|
id={autocomplete.id}
|
||
|
handleSearch={() => onSearch(searchQuery)}
|
||
|
searchQuery={initialQuery || autocomplete.searchQuery || ''}
|
||
|
useKeyShortcuts={autocomplete.useKeyShortcuts}
|
||
|
url={autocomplete.url}
|
||
|
controller={controller}
|
||
|
/>
|
||
|
<div className="input-group-btn">
|
||
|
<AutoComplete.SearchButton onClick={() => onSearch(searchQuery)} />
|
||
|
<div className="pf-c-search-input">
|
||
|
<div className="search-bar pf-c-input-group" id="search-bar">
|
||
|
<AutoComplete
|
||
|
id={autocomplete.id}
|
||
|
handleSearch={() => onSearch(searchQuery)}
|
||
|
searchQuery={initialQuery || autocomplete.searchQuery || ''}
|
||
|
useKeyShortcuts={autocomplete.useKeyShortcuts}
|
||
|
url={autocomplete.url}
|
||
|
controller={controller}
|
||
|
/>
|
||
|
<Button
|
||
|
id="btn-search"
|
||
|
variant="control"
|
||
|
aria-label="search button for search input"
|
||
|
className="autocomplete-search-btn"
|
||
|
onClick={() => onSearch(searchQuery)}
|
||
|
>
|
||
|
<SearchIcon />
|
||
|
</Button>
|
||
|
{!isEmpty(bookmarks) && (
|
||
|
<Bookmarks
|
||
|
onBookmarkClick={onBookmarkClick}
|
||
| ... | ... | |
|
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
|
||
|
}),
|
||
|
controller: PropTypes.string,
|
||
|
bookmarks: PropTypes.shape({ ...Bookmarks.propTypes }),
|
||
|
bookmarks: PropTypes.object,
|
||
|
}),
|
||
|
};
|
||
|
|
||
Also available in: Unified diff
Fixes #32750 - make searchbar css looks like PF4