add defaultSelected(prop) update in DropdownRange and ToggleButton; m…

…inor fixes
appbaseio · Jan 3, 2017 · e2fcb50 · e2fcb50
1 parent a4fac03
commit e2fcb50
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 10 deletions.
diff --git a/app/sensors/MultiDropdownRange.js b/app/sensors/MultiDropdownRange.js
@@ -14,24 +14,39 @@ export class MultiDropdownRange extends Component {
 		this.state.data = this.props.data.map(item => {
 			item.value = item.label;
 			return item;
-		})
+		});
+		this.defaultSelected = this.props.defaultSelected;
 		this.handleChange = this.handleChange.bind(this);
 		this.defaultQuery = this.defaultQuery.bind(this);
 	}
 
 	// Set query information
 	componentDidMount() {
 		this.setQueryInfo();
-		if(this.props.defaultSelected) {
+		if(this.defaultSelected) {
 			let records = this.state.data.filter((record) => {
-				return this.props.defaultSelected.indexOf(record.label) > -1 ? true : false;
+				return this.defaultSelected.indexOf(record.label) > -1 ? true : false;
 			});
 			if(records && records.length) {
 				this.handleChange(records);
 			}
 		}
 	}
 
+	componentWillUpdate() {
+		setTimeout(() => {
+			if (this.defaultSelected != this.props.defaultSelected) {
+				this.defaultSelected = this.props.defaultSelected;
+				let records = this.state.data.filter((record) => {
+					return this.defaultSelected.indexOf(record.label) > -1 ? true : false;
+				});
+				if(records && records.length) {
+					this.handleChange(records);
+				}
+			}
+		}, 300);
+	}
+
 	// set the query type and input data
 	setQueryInfo() {
 		let obj = {

diff --git a/app/sensors/Pagination.js b/app/sensors/Pagination.js
@@ -1,4 +1,5 @@
 import {default as React, Component} from 'react';
+import classNames from 'classnames';
 import { manager } from '../middleware/ChannelManager.js';
 var helper = require('../middleware/helper.js');
 
@@ -113,7 +114,6 @@ export class Pagination extends Component {
 	render() {
 		let title = null;
 		if(this.props.title) {
-			titleExists = true;
 			title = (<h4 className="rbc-title col s12 col-xs-12">{this.props.title}</h4>);
 		}
 

diff --git a/app/sensors/SingleDropdownRange.js b/app/sensors/SingleDropdownRange.js
@@ -11,23 +11,38 @@ export class SingleDropdownRange extends Component {
 			selected: null
 		};
 		this.type = 'range';
+		this.defaultSelected = this.props.defaultSelected;
 		this.handleChange = this.handleChange.bind(this);
 		this.defaultQuery = this.defaultQuery.bind(this);
 	}
 
 	// Set query information
 	componentDidMount() {
 		this.setQueryInfo();
-		if(this.props.defaultSelected) {
+		if(this.defaultSelected) {
 			let records = this.props.data.filter((record) => {
-				return record.label === this.props.defaultSelected;
+				return record.label === this.defaultSelected;
 			});
 			if(records && records.length) {
 				this.handleChange(records[0]);
 			}
 		}
 	}
 
+	componentWillUpdate() {
+		setTimeout(() => {
+			if (this.defaultSelected != this.props.defaultSelected) {
+				this.defaultSelected = this.props.defaultSelected;
+				let records = this.props.data.filter((record) => {
+					return record.label === this.defaultSelected;
+				});
+				if(records && records.length) {
+					this.handleChange(records[0]);
+				}
+			}
+		}, 300);
+	}
+
 	// set the query type and input data
 	setQueryInfo() {
 		let obj = {

diff --git a/app/sensors/ToggleButton.js b/app/sensors/ToggleButton.js
@@ -10,16 +10,31 @@ export class ToggleButton extends Component {
 			selected: []
 		};
 		this.type = 'term';
+		this.defaultSelected = this.props.defaultSelected;
 		this.handleChange = this.handleChange.bind(this);
 		this.defaultQuery = this.defaultQuery.bind(this);
 	}
 
 	// Set query information
 	componentDidMount() {
 		this.setQueryInfo();
-		if(this.props.defaultSelected) {
+		if(this.defaultSelected) {
 			let records = this.props.data.filter((record) => {
-				return this.props.defaultSelected.indexOf(record.label) > -1 ? true : false;
+				return this.defaultSelected.indexOf(record.label) > -1 ? true : false;
+			});
+			if(records && records.length) {
+				records.forEach((singleRecord) => {
+					this.handleChange(singleRecord);
+				});
+			}
+		}
+	}
+
+	componentWillUpdate() {
+		if(this.defaultSelected != this.props.defaultSelected) {
+			this.defaultSelected = this.props.defaultSelected;
+			let records = this.props.data.filter((record) => {
+				return this.defaultSelected.indexOf(record.label) > -1 ? true : false;
 			});
 			if(records && records.length) {
 				records.forEach((singleRecord) => {

diff --git a/app/stories/index.js b/app/stories/index.js
@@ -125,8 +125,7 @@ storiesOf('ToggleButton', module)
 	)))
 	.add('Playground', withReadme(removeFirstLine(ToggleButtonReadme), () => (
 		<ToggleButtonDefault
-			title={text('Title', 'Meetup Categories')}
-			defaultSelected={text('Default Selected', ["Social"])} />
+			title={text('Title', 'Meetup Categories')} />
 	)));
 
 storiesOf('TextField', module)