From c7f05a807ce557b0339990052f8ffd3a65591bfb Mon Sep 17 00:00:00 2001
From: DD Liu <liudi@media.mit.edu>
Date: Thu, 25 May 2017 15:42:20 -0400
Subject: [PATCH] implement the close button on filter
---
src/components/filter/filter.jsx | 7 ++++++-
src/components/library/library.jsx | 9 ++++++---
src/components/modal/modal.jsx | 2 ++
3 files changed, 14 insertions(+), 4 deletions(-)
diff --git a/src/components/filter/filter.jsx b/src/components/filter/filter.jsx
index 57186904a..6e140eb80 100644
--- a/src/components/filter/filter.jsx
+++ b/src/components/filter/filter.jsx
@@ -9,6 +9,7 @@ const styles = require('./filter.css');
const FilterComponent = props => {
const {
onChange,
+ onClear,
placeholderText,
filterQuery
} = props;
@@ -31,7 +32,10 @@ const FilterComponent = props => {
value={filterQuery}
onChange={onChange}
/>
- <div className={styles.xIconWrapper}>
+ <div
+ className={styles.xIconWrapper}
+ onClick={onClear}
+ >
<img
className={styles.xIcon}
src={xIcon}
@@ -44,6 +48,7 @@ const FilterComponent = props => {
FilterComponent.propTypes = {
filterQuery: PropTypes.string,
onChange: PropTypes.func,
+ onClear: PropTypes.func,
placeholderText: PropTypes.string
};
FilterComponent.defaultProps = {
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 9b03b0b8d..ad33743be 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -12,6 +12,7 @@ class LibraryComponent extends React.Component {
super(props);
bindAll(this, [
'handleFilterChange',
+ 'handleFilterClear',
'handleMouseEnter',
'handleMouseLeave',
'handleSelect'
@@ -32,9 +33,10 @@ class LibraryComponent extends React.Component {
if (this.props.onItemMouseLeave) this.props.onItemMouseLeave(this.getFilteredData()[id]);
}
handleFilterChange (event) {
- this.setState({
- filterQuery: event.target.value
- });
+ this.setState({filterQuery: event.target.value});
+ }
+ handleFilterClear () {
+ this.setState({filterQuery: ''});
}
getFilteredData () {
return this.props.data.filter(dataItem =>
@@ -48,6 +50,7 @@ class LibraryComponent extends React.Component {
filterQuery={this.state.filterQuery}
visible={this.props.visible}
onFilterChange={this.handleFilterChange}
+ onFilterClear={this.handleFilterClear}
onRequestClose={this.props.onRequestClose}
>
<div className={styles.libraryScrollGrid}>
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index a6af18b81..2a743bd74 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -28,6 +28,7 @@ class ModalComponent extends React.Component {
<Filter
filterQuery={this.props.filterQuery}
onChange={this.props.onFilterChange}
+ onClear={this.props.onFilterClear}
/>
</div>
<div
@@ -62,6 +63,7 @@ ModalComponent.propTypes = {
contentLabel: PropTypes.string.isRequired,
filterQuery: PropTypes.string,
onFilterChange: PropTypes.func,
+ onFilterClear: PropTypes.func,
onRequestClose: PropTypes.func,
visible: PropTypes.bool.isRequired
};
--
GitLab