From 4d573a3a6cf525737e7d9a3d23b256c3bfeec2d2 Mon Sep 17 00:00:00 2001
From: DD Liu <liudi@media.mit.edu>
Date: Thu, 25 May 2017 14:17:48 -0400
Subject: [PATCH] Merge filter container with library component and get rid of
'active' state of filter component
---
src/components/filter/filter.jsx | 5 +---
src/components/library/library.jsx | 17 +++++++++++--
src/components/modal/modal.jsx | 9 +++++--
src/containers/filter.jsx | 39 ------------------------------
4 files changed, 23 insertions(+), 47 deletions(-)
delete mode 100644 src/containers/filter.jsx
diff --git a/src/components/filter/filter.jsx b/src/components/filter/filter.jsx
index af501c68b..57186904a 100644
--- a/src/components/filter/filter.jsx
+++ b/src/components/filter/filter.jsx
@@ -8,7 +8,6 @@ const styles = require('./filter.css');
const FilterComponent = props => {
const {
- active,
onChange,
placeholderText,
filterQuery
@@ -17,7 +16,7 @@ const FilterComponent = props => {
<div
className={classNames({
[styles.filter]: true,
- [styles.isActive]: active
+ [styles.isActive]: filterQuery.length > 0
})}
>
<img
@@ -43,13 +42,11 @@ const FilterComponent = props => {
};
FilterComponent.propTypes = {
- active: PropTypes.bool,
filterQuery: PropTypes.string,
onChange: PropTypes.func,
placeholderText: PropTypes.string
};
FilterComponent.defaultProps = {
- active: false,
placeholderText: 'what are you looking for?'
};
module.exports = FilterComponent;
diff --git a/src/components/library/library.jsx b/src/components/library/library.jsx
index 540eef09b..331d94f2c 100644
--- a/src/components/library/library.jsx
+++ b/src/components/library/library.jsx
@@ -10,8 +10,14 @@ const styles = require('./library.css');
class LibraryComponent extends React.Component {
constructor (props) {
super(props);
- bindAll(this, ['handleSelect']);
- this.state = {selectedItem: null};
+ bindAll(this, [
+ 'handleSelect',
+ 'handleFilterChange'
+ ]);
+ this.state = {
+ selectedItem: null,
+ filterQuery: ''
+ };
}
handleSelect (id) {
if (this.state.selectedItem === id) {
@@ -25,12 +31,19 @@ class LibraryComponent extends React.Component {
}
this.setState({selectedItem: id});
}
+ handleFilterChange (event) {
+ this.setState({
+ filterQuery: event.target.value
+ });
+ }
render () {
if (!this.props.visible) return null;
return (
<ModalComponent
contentLabel={this.props.title}
+ filterQuery={this.state.filterQuery}
visible={this.props.visible}
+ onFilterChange={this.handleFilterChange}
onRequestClose={this.props.onRequestClose}
>
<div className={styles.libraryScrollGrid}>
diff --git a/src/components/modal/modal.jsx b/src/components/modal/modal.jsx
index b29af276b..ba3070bbf 100644
--- a/src/components/modal/modal.jsx
+++ b/src/components/modal/modal.jsx
@@ -5,7 +5,7 @@ const ReactModal = require('react-modal');
const Box = require('../box/box.jsx');
const CloseButton = require('../close-button/close-button.jsx');
-const Filter = require('../../containers/filter.jsx');
+const Filter = require('../filter/filter.jsx');
const styles = require('./modal.css');
@@ -24,7 +24,10 @@ class ModalComponent extends React.Component {
>
<div className={styles.header}>
<div className={classNames(styles.headerItem, styles.headerItemFilter)}>
- <Filter />
+ <Filter
+ filterQuery={this.props.filterQuery}
+ onChange={this.props.onFilterChange}
+ />
</div>
<div
className={classNames(
@@ -56,6 +59,8 @@ class ModalComponent extends React.Component {
ModalComponent.propTypes = {
children: PropTypes.node,
contentLabel: PropTypes.string.isRequired,
+ filterQuery: PropTypes.string,
+ onFilterChange: PropTypes.func,
onRequestClose: PropTypes.func,
visible: PropTypes.bool.isRequired
};
diff --git a/src/containers/filter.jsx b/src/containers/filter.jsx
deleted file mode 100644
index b1481113f..000000000
--- a/src/containers/filter.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-const bindAll = require('lodash.bindall');
-const React = require('react');
-
-const FilterComponent = require('../components/filter/filter.jsx');
-
-class Filter extends React.Component {
- constructor (props) {
- super(props);
- bindAll(this, [
- 'handleOnChange'
- ]);
- this.state = {
- active: false,
- filterQuery: ''
- };
- }
- handleOnChange (event) {
- this.setState({
- filterQuery: event.target.value
- });
-
- if (event.target.value){
- this.setState({active: true});
- } else {
- this.setState({active: false});
- }
- }
- render () {
- return (
- <FilterComponent
- active={this.state.active}
- filterQuery={this.state.filterQuery}
- onChange={this.handleOnChange}
- />
- );
- }
-}
-
-module.exports = Filter;
--
GitLab