Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
SRCT
whats-open-web
Commits
53f99deb
Commit
53f99deb
authored
Dec 23, 2017
by
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
Changes
3
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/containers/SearchBar.js
View file @
53f99deb
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
src/styles/containers/searchBar.scss
0 → 100644
View file @
53f99deb
.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
src/styles/whatsOpen.scss
View file @
53f99deb
...
...
@@ -15,3 +15,4 @@
@import
'./containers/facilityCard'
;
@import
'./containers/layout'
;
@import
'./containers/searchBar'
;
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment