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
883586a6
Commit
883586a6
authored
Dec 23, 2017
by
Andrew Hrdy
Browse files
Add clear btn to search.
parent
f3afc915
Pipeline
#1882
passed with stage
in 1 minute and 42 seconds
Changes
2
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
src/containers/SearchBar.js
View file @
883586a6
import
React
from
'
react
'
;
import
React
from
'
react
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
connect
}
from
'
react-redux
'
;
import
{
setSearchTerm
}
from
'
../actions/ui
'
;
import
{
setSearchTerm
}
from
'
../actions/ui
'
;
import
SearchIcon
from
'
material-ui-icons/Search
'
import
SearchIcon
from
'
material-ui-icons/Search
'
;
import
CloseIcon
from
'
material-ui-icons/Close
'
;
import
IconButton
from
'
material-ui/IconButton
'
;
import
Input
from
'
material-ui/Input
'
;
import
Input
from
'
material-ui/Input
'
;
import
Paper
from
'
material-ui/Paper
'
;
import
Paper
from
'
material-ui/Paper
'
;
import
classNames
from
'
classnames
'
;
import
classNames
from
'
classnames
'
;
...
@@ -36,9 +38,18 @@ class SearchBar extends React.Component {
...
@@ -36,9 +38,18 @@ class SearchBar extends React.Component {
});
});
};
};
clear
=
()
=>
{
this
.
setState
({
value
:
''
});
this
.
props
.
setSearchTerm
(
''
);
};
render
()
{
render
()
{
return
(
return
(
<
Paper
className
=
{
classNames
(
'
search-bar-paper-background
'
,
this
.
state
.
isFocused
&&
'
search-bar-focus
'
)}
>
<
Paper
className
=
{
classNames
(
'
search-bar-paper-background
'
,
this
.
state
.
isFocused
&&
'
search-bar-focus
'
,
this
.
state
.
value
&&
'
search-bar-has-value
'
)}
>
<
div
className
=
{
'
search-bar-left-search-container
'
}
>
<
div
className
=
{
'
search-bar-left-search-container
'
}
>
<
SearchIcon
className
=
{
'
search-bar-search-icon
'
}
/
>
<
SearchIcon
className
=
{
'
search-bar-search-icon
'
}
/
>
<
/div
>
<
/div
>
...
@@ -53,7 +64,11 @@ class SearchBar extends React.Component {
...
@@ -53,7 +64,11 @@ class SearchBar extends React.Component {
inputProps
=
{{
inputProps
=
{{
'
aria-label
'
:
'
Search Bar
'
,
'
aria-label
'
:
'
Search Bar
'
,
}}
}}
value
=
{
this
.
state
.
value
}
/
>
/
>
<
IconButton
onClick
=
{
this
.
clear
}
className
=
{
'
search-bar-close-btn
'
}
>
<
CloseIcon
/>
<
/IconButton
>
<
/Paper
>
<
/Paper
>
);
);
}
}
...
...
src/styles/containers/searchBar.scss
View file @
883586a6
...
@@ -29,4 +29,16 @@
...
@@ -29,4 +29,16 @@
align-items
:
center
!
important
;
align-items
:
center
!
important
;
transition
:
ease-in-out
width
250ms
;
transition
:
ease-in-out
width
250ms
;
width
:
100%
width
:
100%
}
.search-bar-close-btn
{
width
:
44px
!
important
;
height
:
44px
!
important
;
display
:
none
!
important
;
}
.search-bar-has-value
{
.search-bar-close-btn
{
display
:
inline-flex
!
important
;
}
}
}
\ No newline at end of file
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