Made search bars clear on right click

client/src/components/assets/Assets.jsx

@@ -9,6 +9,7 @@ import AssetContextMenu from './AssetContextMenu'
 import FolderContextMenu from './FolderContextMenu'
 import FolderList from './FolderList'
 import CustomScrollbarsVirtualList from '../ui/CustomScrollbarsVirtualList'
+import Search from '../ui/Search'
 import { getNewAssetID } from '../../redux/project/assets/reducers'
 import { TYPE_MAP } from './AssetImporter'
 import { inProgress } from '../../redux/status'
@@ -93,10 +94,8 @@ class Assets extends Component {
         )
     }
 
-    onChange(e) {
-        this.setState({
-            filter: e.target.value
-        })
+    onChange(filter) {
+        this.setState({ filter })
     }
 
     changeZoom(e) {
@@ -178,13 +177,7 @@ class Assets extends Component {
                     step="20"
                     onChange={this.changeZoom} />
                 <div className="flex-grow" />
-                <div className="search">
-                    <input
-                        type="search"
-                        placeholder="All"
-                        value={this.state.filter}
-                        onChange={this.onChange} />
-                </div>
+                <Search value={this.state.filter} onChange={this.onChange} />
             </div>
             <div className="full-panel" >
                 <FolderList contextmenu={this.props.id}

client/src/components/console/Console.jsx

@@ -2,6 +2,7 @@ import React, {Component} from 'react'
 import Scrollbar from 'react-custom-scroll'
 import { connect } from 'react-redux'
 import * as JsSearch from 'js-search'
+import Search from '../ui/Search'
 import './console.css'
 
 const remote = window.require('electron').remote
@@ -25,10 +26,8 @@ class Console extends Component {
         this.createFilterToggle = this.createFilterToggle.bind(this)
     }
 
-    onChange(e) {
-        this.setState({
-            filter: e.target.value
-        })
+    onChange(filter) {
+        this.setState({ filter })
     }
 
     toggleFilter(filter) {
@@ -89,13 +88,7 @@ class Console extends Component {
                     {this.createFilterToggle('warn')}
                     {this.createFilterToggle('error')}
                     <div className="flex-spacer"></div>
-                    <div className="search">
-                        <input
-                            type="search"
-                            placeholder="All"
-                            value={this.state.filter}
-                            onChange={this.onChange} />
-                    </div>
+                    <Search value={this.state.filter} onChange={this.onChange} />
                     <div className="flex-spacer"></div>
                     <button onClick={this.toggleDevTools}>Toggle Dev Tools</button>
                 </div>

client/src/components/environments/Environments.jsx

@@ -6,6 +6,7 @@ import Environment from './Environment'
 import EnvironmentImporter from './EnvironmentImporter'
 import EnvironmentContextMenu from './EnvironmentContextMenu'
 import CustomScrollbarsVirtualList from '../ui/CustomScrollbarsVirtualList'
+import Search from '../ui/Search'
 import { newEnvironment } from '../../redux/project/environments/actions'
 
 import './environments.css'
@@ -31,10 +32,8 @@ class Environments extends Component {
         this.props.dispatch(newEnvironment())
     }
 
-    onChange(e) {
-        this.setState({
-            filter: e.target.value
-        })
+    onChange(filter) {
+        this.setState({ filter })
     }
 
     changeZoom(e) {
@@ -91,13 +90,7 @@ class Environments extends Component {
                         step="20"
                         onChange={this.changeZoom} />
                     <div className="flex-grow" />
-                    <div className="search">
-                        <input
-                            type="search"
-                            placeholder="All"
-                            value={this.state.filter}
-                            onChange={this.onChange} />
-                    </div>
+                    <Search value={this.state.filter} onChange={this.onChange} />
                 </div>
                 <List
                     height={Math.max(this.props.rect.height, 0)}

client/src/components/panels/panels.css

@@ -90,21 +90,6 @@
     margin: 6px 4px;
 }
 
-.bar .search {
-    min-width: 100px;
-    flex-grow: 5;
-    position: relative;
-}
-
-.bar .search > input {
-    padding-left: 20px;
-    font-size: 12px;
-}
-
-.bar .search > input[type="search"]:focus {
-    border-bottom: none;
-}
-
 .bar .dropdown-wrapper .dropdown {
     padding-right: 12px;
     transition: background-color .1s ease-in;    
@@ -121,36 +106,6 @@
     top: 2px;
 }
 
-.bar .search:hover {
-    background-color: rgba(255,255,255,.05);
-}
-
-.bar .search:before {
-    content: '🔍';
-    position: absolute;
-    left: 4px;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.search {
-    position: relative;
-}
-
-.search > input[type="search"] {
-    padding-left: 20px;
-    font-size: 12px;
-    border-bottom: none;
-}
-
-.search:before {
-    content: '🔍';
-    position: absolute;
-    left: 4px;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
 .flex-column.full-panel {
     margin-top: -10px;
     margin-bottom: 0;

client/src/components/puppets/Puppets.jsx

@@ -6,6 +6,7 @@ import DraggablePuppet from './DraggablePuppet'
 import PuppetImporter from './PuppetImporter'
 import PuppetContextMenu from './PuppetContextMenu'
 import CustomScrollbarsVirtualList from '../ui/CustomScrollbarsVirtualList'
+import Search from '../ui/Search'
 import { newCharacter } from '../../redux/project/characters/actions'
 
 import './puppets.css'
@@ -31,10 +32,8 @@ class Puppets extends Component {
         this.props.dispatch(newCharacter())
     }
 
-    onChange(e) {
-        this.setState({
-            filter: e.target.value
-        })
+    onChange(filter) {
+        this.setState({ filter })
     }
 
     changeZoom(e) {
@@ -95,13 +94,7 @@ class Puppets extends Component {
                         step="20"
                         onChange={this.changeZoom} />
                     <div className="flex-grow" />
-                    <div className="search">
-                        <input
-                            type="search"
-                            placeholder="All"
-                            value={this.state.filter}
-                            onChange={this.onChange} />
-                    </div>
+                    <Search value={this.state.filter} onChange={this.onChange} />
                 </div>
                 <List
                     height={Math.max(this.props.rect.height, 0)}

client/src/components/ui/Search.jsx

@@ -0,0 +1,19 @@
+import React, { Component } from 'react'
+import './search.css'
+
+class Search extends Component {
+    render() {
+    	const { value, onChange, ...props } = this.props
+        return <div className="search">
+            <input
+                type="search"
+                placeholder="All"
+                value={value}
+                onChange={e => onChange(e.target.value)}
+                onContextMenu={() => onChange('')}
+                {...props} />
+        </div>
+    }
+}
+
+export default Search

client/src/components/ui/search.css

@@ -0,0 +1,44 @@
+.bar .search {
+    min-width: 100px;
+    flex-grow: 5;
+    position: relative;
+}
+
+.bar .search > input {
+    padding-left: 20px;
+    font-size: 12px;
+}
+
+.bar .search > input[type="search"]:focus {
+    border-bottom: none;
+}
+
+.bar .search:hover {
+    background-color: rgba(255,255,255,.05);
+}
+
+.bar .search:before {
+    content: '🔍';
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.search {
+    position: relative;
+}
+
+.search > input[type="search"] {
+    padding-left: 20px;
+    font-size: 12px;
+    border-bottom: none;
+}
+
+.search:before {
+    content: '🔍';
+    position: absolute;
+    left: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+}