Search state in field, not view

mopidy_iris/static/app.js

@@ -67047,11 +67047,6 @@ var Search = function (_React$Component) {
 				}
 			}
 		}
-	}, {
-		key: 'handleChange',
-		value: function handleChange(e) {
-			this.setState({ term: e.target.value });
-		}
 
 		// Digest the URI query property
 		// Triggered when the URL changes
@@ -67495,13 +67490,12 @@ var Search = function (_React$Component) {
 					_react2.default.createElement(_Icon2.default, { name: 'search', type: 'material' })
 				),
 				_react2.default.createElement(_SearchForm2.default, {
-					type: this.state.type,
 					term: this.state.term,
-					onChange: function onChange(e) {
-						return _this3.handleChange(e);
+					onBlur: function onBlur(term) {
+						return _this3.setState({ term: term });
 					},
-					onSubmit: function onSubmit(e) {
-						return _this3.search();
+					onSubmit: function onSubmit(term) {
+						return _this3.search(_this3.state.type, term);
 					}
 				}),
 				_react2.default.createElement(
@@ -67592,7 +67586,12 @@ var SearchForm = function (_React$Component) {
 	function SearchForm(props) {
 		_classCallCheck(this, SearchForm);
 
-		return _possibleConstructorReturn(this, (SearchForm.__proto__ || Object.getPrototypeOf(SearchForm)).call(this, props));
+		var _this = _possibleConstructorReturn(this, (SearchForm.__proto__ || Object.getPrototypeOf(SearchForm)).call(this, props));
+
+		_this.state = {
+			term: _this.props.term
+		};
+		return _this;
 	}
 
 	_createClass(SearchForm, [{
@@ -67620,7 +67619,7 @@ var SearchForm = function (_React$Component) {
 					break;
 
 				default:
-					this.props.onSubmit(e);
+					this.props.onSubmit(this.state.term);
 					break;
 			}
 
@@ -67643,9 +67642,12 @@ var SearchForm = function (_React$Component) {
 						type: 'text',
 						placeholder: 'Search...',
 						onChange: function onChange(e) {
-							return _this2.props.onChange(e);
+							return _this2.setState({ term: e.target.value });
 						},
-						value: this.props.term })
+						onBlur: function onBlur(e) {
+							return _this2.props.onBlur(_this2.state.term);
+						},
+						value: this.state.term })
 				)
 			);
 		}

mopidy_iris/static/app.min.css

@@ -3681,19 +3681,21 @@ input[type="submit"] {
     border-bottom-color: transparent;
     border-right-color: #32b5f2; }
 
-.body-loader {
+.body-loader.loading {
   padding: 35vh 0; }
   .body-loader.loading .loader {
     opacity: 1; }
-  .body-loader.lazy-loader {
-    padding: 20px;
-    height: 40px; }
-    .body-loader.lazy-loader .loader {
-      height: 40px;
-      width: 40px;
-      opacity: 0; }
-    .body-loader.lazy-loader.loading .loader {
-      opacity: 1; }
+
+.body-loader.lazy-loader .loader {
+  opacity: 0; }
+
+.body-loader.lazy-loader.loading {
+  padding: 20px;
+  height: 40px; }
+  .body-loader.lazy-loader.loading .loader {
+    height: 40px;
+    width: 40px;
+    opacity: 1; }
 
 .mini-loader .loader {
   width: 20px;
@@ -4829,7 +4831,7 @@ aside {
     color: #a3a19f;
     position: absolute;
     top: 16px;
-    right: 36px; }
+    right: 40px; }
   :root .notouch:not(.dragging) .list .list-item:not(.header):not(.no-click).hover {
     background: rgba(255, 255, 255, 0.03);
     cursor: pointer; }
@@ -4852,11 +4854,13 @@ aside {
 .list.track-list .list-item {
   cursor: pointer; }
   .list.track-list .list-item .col.name {
-    width: 40%; }
+    width: 38%; }
   .list.track-list .list-item .col.artists, .list.track-list .list-item .col.album {
     width: 25%; }
   .list.track-list .list-item .col.duration {
     width: 5%; }
+  .list.track-list .list-item .col.popularity {
+    width: 3%; }
   :root .dragging .list.track-list .list-item.hover, .list.track-list .list-item.touch-drag-hover {
     border-top: 3px solid #32b5f2;
     margin-top: -3px;
@@ -4930,10 +4934,10 @@ aside {
 
 .list.queue-history-track-list .list-item {
   cursor: pointer; }
-  .list.queue-history-track-list .list-item .col.name {
-    width: 60%; }
-  .list.queue-history-track-list .list-item .col.played_at, .list.queue-history-track-list .list-item .col.source {
-    width: 20%; }
+  .list.queue-history-track-list .list-item .col.name, .list.queue-history-track-list .list-item .col.artists, .list.queue-history-track-list .list-item .col.album {
+    width: 25%; }
+  .list.queue-history-track-list .list-item .col.played_at {
+    width: 15%; }
 
 .list.related-artist-list {
   padding-bottom: 20px;
@@ -5960,6 +5964,20 @@ main header {
   .services .service {
     margin-top: 5px; } }
 
+.popularity-diagram {
+  display: block;
+  margin: 0.15em -2px;
+  text-align: center; }
+  .popularity-diagram .bar {
+    display: inline-block;
+    width: 2px;
+    height: 0.5em;
+    margin: 0.25em 1px;
+    background: #cecac4;
+    opacity: 0.25; }
+    .popularity-diagram .bar.filled {
+      opacity: 1; }
+
 .artist-view .body-loader:not(.lazy-loader) {
   padding: 15vh 0; }
 
@@ -6304,7 +6322,7 @@ main .track-view {
   position: absolute;
   top: 30px;
   left: 90px;
-  right: 250px; }
+  right: 330px; }
   .search-view .search-form input {
     font-family: "Overpass";
     letter-spacing: -0.04em;

mopidy_iris/static/index.html

@@ -77,7 +77,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1529049541";
+	var build = "1529095476";
 	var version = "3.21.1";
 
 	// Construct the script tag

src/js/components/Fields/SearchForm.js

@@ -11,6 +11,10 @@ class SearchForm extends React.Component{
 
 	constructor(props){
 		super(props);
+
+		this.state = {
+			term: this.props.term
+		}
 	}
 
 	handleSubmit(e){
@@ -36,7 +40,7 @@ class SearchForm extends React.Component{
 				break
 
 			default:
-				this.props.onSubmit(e);
+				this.props.onSubmit(this.state.term);
 				break
 		}
 
@@ -50,8 +54,9 @@ class SearchForm extends React.Component{
 					<input					
 						type="text"
 						placeholder="Search..."
-						onChange={e => this.props.onChange(e)}
-						value={ this.props.term } />
+						onChange={e => this.setState({term: e.target.value})}
+						onBlur={e => this.props.onBlur(this.state.term)}
+						value={ this.state.term } />
 					</label>
 			</form>
 		)

src/js/views/Search.js

@@ -64,10 +64,6 @@ class Search extends React.Component{
 		}
 	}
 
-	handleChange(e){
-		this.setState({term: e.target.value});
-	}
-
 	// Digest the URI query property
 	// Triggered when the URL changes
 	digestUri(props = this.props){
@@ -420,10 +416,9 @@ class Search extends React.Component{
 				</Header>
 
 				<SearchForm 
-					type={this.state.type}
 					term={this.state.term}
-					onChange={e => this.handleChange(e)}
-					onSubmit={e => this.search()}
+					onBlur={term => this.setState({term: term})}
+					onSubmit={term => this.search(this.state.type, term)}
 				/>
 
 				<div className="content-wrapper">