SSDM-7569 NEW openBIS UI - General Template/Infrastructure for Forms -...

SSDM-7569 NEW openBIS UI - General Template/Infrastructure for Forms - Visualisation/Creation/Edit - browser filter clear button

openbis_ng_ui/src/components/common/browser/Browser.jsx

@@ -27,7 +27,7 @@ function mapStateToProps(state, ownProps){
 function mapDispatchToProps(dispatch, ownProps){
   return {
     init: () => { dispatch(actions.browserInit(ownProps.page)) },
-    filterChange: (event) => { dispatch(actions.browserFilterChange(ownProps.page, event.currentTarget.value)) },
+    filterChange: (filter) => { dispatch(actions.browserFilterChange(ownProps.page, filter)) },
     nodeSelect: (id) => { dispatch(actions.browserNodeSelect(ownProps.page, id)) },
     nodeExpand: (id) => { dispatch(actions.browserNodeExpand(ownProps.page, id)) },
     nodeCollapse: (id) => { dispatch(actions.browserNodeCollapse(ownProps.page, id)) }

openbis_ng_ui/src/components/common/browser/BrowserFilter.jsx

@@ -2,7 +2,9 @@ import React from 'react'
 import {withStyles} from '@material-ui/core/styles'
 import InputAdornment from '@material-ui/core/InputAdornment'
 import TextField from '@material-ui/core/TextField'
+import IconButton from '@material-ui/core/IconButton'
 import FilterIcon from '@material-ui/icons/FilterList'
+import CloseIcon from '@material-ui/icons/Close'
 import logger from '../../../common/logger.js'
 
 const styles = () => ({
@@ -19,6 +21,20 @@ const styles = () => ({
 
 class BrowserFilter extends React.Component {
 
+  constructor(props){
+    super(props)
+    this.handleFilterChange = this.handleFilterChange.bind(this)
+    this.handleFilterClear = this.handleFilterClear.bind(this)
+  }
+
+  handleFilterChange(event){
+    this.props.filterChange(event.target.value)
+  }
+
+  handleFilterClear(){
+    this.props.filterChange('')
+  }
+
   render() {
     logger.log(logger.DEBUG, 'BrowserFilter.render')
 
@@ -29,7 +45,7 @@ class BrowserFilter extends React.Component {
         className={classes.field}
         placeholder="Filter"
         value={this.props.filter}
-        onChange={this.props.filterChange}
+        onChange={this.handleFilterChange}
         InputProps={{
           startAdornment: (
             <InputAdornment position="start" classes={{
@@ -38,6 +54,15 @@ class BrowserFilter extends React.Component {
               <FilterIcon />
             </InputAdornment>
           ),
+          endAdornment: (
+            <InputAdornment position="end" classes={{
+              root: classes.adornment
+            }}>
+              <IconButton onClick={this.handleFilterClear}>
+                <CloseIcon />
+              </IconButton>
+            </InputAdornment>
+          ),
           classes: {
             input: classes.input
           }