Commit 53f99deb authored by Andrew Hrdy's avatar Andrew Hrdy
Browse files

Convert current search bar to SASS and cleanup.

parent 4524f619
Pipeline #1880 passed with stage
in 1 minute and 42 seconds
import React from 'react';
import PropTypes from 'prop-types';
import Autosuggest from 'react-autosuggest';
import TextField from 'material-ui/TextField';
import Paper from 'material-ui/Paper';
import { MenuItem } from 'material-ui/Menu';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import { withStyles } from 'material-ui/styles';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { setSearchTerm} from '../actions/ui';
import {withStyles} from 'material-ui/styles';
import {compose} from 'redux';
import {connect} from 'react-redux';
import {setSearchTerm} from '../actions/ui';
import Search from 'material-ui-icons/Search'
import Input from 'material-ui/Input';
// import Select from 'material-ui/Select';
const createSuggestions = () => {
}
function renderInput(inputProps) {
const { classes, home, value, ref, ...other } = inputProps;
return (
<TextField
autoFocus={home}
className={classes.textField}
value={value}
inputRef={ref}
InputProps={{
classes: {
input: classes.input,
},
disableUnderline:true,
...other,
}}
/>
);
}
function renderSuggestion(suggestion, { query, isHighlighted }) {
const matches = match(suggestion.label, query);
const parts = parse(suggestion.label, matches);
return (
<MenuItem selected={isHighlighted} component="div">
<div>
{parts.map((part, index) => {
return part.highlight ? (
<span key={index} style={{ fontWeight: 300 }}>
{part.text}
</span>
) : (
<strong key={index} style={{ fontWeight: 500 }}>
{part.text}
</strong>
);
})}
</div>
</MenuItem>
);
}
function renderSuggestionsContainer(options) {
const { containerProps, children } = options;
return (
<Paper {...containerProps} square>
{children}
</Paper>
);
}
function getSuggestionValue(suggestion) {
return suggestion.label;
}
function getSuggestions(value,suggestions) {
const inputValue = value.trim().toLowerCase();
const inputLength = inputValue.length;
let count = 0;
return inputLength === 0
? []
: suggestions.filter(suggestion => {
const keep =
count < 5 && suggestion.label.toLowerCase().slice(0, inputLength) === inputValue;
if (keep) {
count += 1;
}
return keep;
});
class SearchBar extends React.Component {
handleChange = (e) => {
this.setState({
value: e.target.value,
});
this.props.setSearchTerm(e.target.value)
};
render() {
return (
<Paper className={'search-bar-paper-background'} elevation={3}>
<Input
placeholder="names, locations, etc"
disableUnderline
fullWidth
autoFocus
className={'search-bar-no-suggest-input'}
onChange={this.handleChange}
inputProps={{
'aria-label': 'Description',
}}
/>
<div className={'search-bar-right-search-container'}>
<Search className={'search-bar-search-icon'}/>
</div>
</Paper>
);
}
}
const styles = theme => ({
container: {
flexGrow: 1,
position: 'relative',
// height: 40,
},
suggestionsContainerOpen: {
position: 'absolute',
zIndex:1000,
marginTop: theme.spacing.unit,
marginBottom: theme.spacing.unit * 3,
left: 0,
right: 0,
},
suggestion: {
display: 'block',
},
suggestionsList: {
margin: 0,
padding: 0,
listStyleType: 'none',
},
textField: {
width: '100%',
height:48,
},
input:{
height:40,
marginLeft:8,
},
paperBackground:{
height:54,
maxWidth:600,
width:'90%',
display:'flex',
margin:'0px auto 16px auto',
},
rightSearchContainer:{
height:'100%',
display:'flex',
alignItems:'center',
marginLeft:8,
marginRight:8,
},
searchIcon:{
display:'block',
// opacity:.54,
color:'rgba(0,0,0,0.54)'
},
noSuggestInput:{
display:'flex',
alignItems:'center',
marginLeft:8,
}
});
class IntegrationAutosuggest extends React.Component {
state = {
value: '',
// suggestions: [],
};
handleSuggestionsFetchRequested = ({ value }) => {
// this.setState({
// suggestions: getSuggestions(value,this.props.suggestions),
// });
};
handleSuggestionsClearRequested = () => {
// this.setState({
// suggestions: [],
// });
};
handleChange = (e) => {
this.setState({
value: e.target.value,
});
this.props.setSearchTerm(e.target.value)
};
render() {
const { classes,setSearchTerm,suggestions } = this.props;
return (
<Paper className={classes.paperBackground} elevation={3}>
{/* <Autosuggest
theme={{
container: classes.container,
suggestionsContainerOpen: classes.suggestionsContainerOpen,
suggestionsList: classes.suggestionsList,
suggestion: classes.suggestion,
}}
renderInputComponent={renderInput}
suggestions={getSuggestions(this.state.value,suggestions)}
onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested}
onSuggestionsClearRequested={this.handleSuggestionsClearRequested}
renderSuggestionsContainer={renderSuggestionsContainer}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={{
autoFocus: true,
classes,
placeholder: 'names, locations, etc',
value: this.state.value,
onChange: this.handleChange,
}}
/> */}
<Input
placeholder="names, locations, etc"
disableUnderline
fullWidth
autoFocus
className={classes.noSuggestInput}
onChange={this.handleChange}
inputProps={{
'aria-label': 'Description',
}}
/>
<div className={classes.rightSearchContainer}>
{/* <Select
native
value={this.state.age}
onChange={this.handleChange('age')}
input={<Input id="age-native-simple" />}
>
<option value="" />
<option value={10}>Ten</option>
<option value={20}>Twenty</option>
<option value={30}>Thirty</option>
</Select> */}
<Search className={classes.searchIcon}/>
</div>
</Paper>
);
}
}
IntegrationAutosuggest.propTypes = {
classes: PropTypes.object.isRequired,
};
export default compose(connect(null,{setSearchTerm}),withStyles(styles))(IntegrationAutosuggest);
\ No newline at end of file
export default connect(null, {setSearchTerm})(SearchBar);
\ No newline at end of file
.search-bar-paper-background {
height: 54px;
max-width: 600px;
width: 90%;
display: flex;
margin: 0 auto 16px auto;
}
.search-bar-right-search-container {
height: 100%;
display: flex;
align-items: center;
margin: 0 8px;
}
.search-bar-search-icon {
display: block;
color: rgba(0,0,0,0.54);
}
.search-bar-no-suggest-input {
display: flex !important;
align-items: center !important;
margin-left: 8px !important;
}
\ No newline at end of file
......@@ -15,3 +15,4 @@
@import './containers/facilityCard';
@import './containers/layout';
@import './containers/searchBar';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment