Feature - autofill symbol search

src/components/Board/SymbolSearch/SymbolSearch.component.js

@@ -18,6 +18,8 @@ import Symbol from '../Symbol';
 import { LABEL_POSITION_BELOW } from '../../Settings/Display/Display.constants';
 import messages from './SymbolSearch.messages';
 import './SymbolSearch.css';
+import { IconButton, Tooltip } from '@material-ui/core';
+import BackspaceIcon from '@material-ui/icons/Backspace';
 
 const SymbolSets = {
   mulberry: '0',
@@ -47,6 +49,7 @@ export class SymbolSearch extends PureComponent {
   static propTypes = {
     intl: intlShape.isRequired,
     open: PropTypes.bool,
+    autoFill: PropTypes.string,
     maxSuggestions: PropTypes.number,
     onChange: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired
@@ -60,6 +63,7 @@ export class SymbolSearch extends PureComponent {
   constructor(props) {
     super(props);
     this.state = {
+      openMirror: false,
       value: '',
       suggestions: [],
       skin: 'white',
@@ -78,6 +82,16 @@ export class SymbolSearch extends PureComponent {
     );
   }
 
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const { open, autoFill } = nextProps;
+    const { openMirror: wasOpen } = prevState;
+
+    if (open === true && wasOpen === false)
+      return { value: autoFill, openMirror: true };
+    if (open === false) return { openMirror: false };
+    return null;
+  }
+
   translateSymbols(symbols = []) {
     return symbols.map(symbol => {
       const translatedId = this.props.intl
@@ -252,12 +266,14 @@ export class SymbolSearch extends PureComponent {
   handleSuggestionsClearRequested = () => {};
 
   handleSuggestionSelected = (event, { suggestion }) => {
-    const { onChange, onClose } = this.props;
+    const { onChange, onClose, autoFill } = this.props;
     this.setState({ value: '' });
 
+    const label = autoFill.length ? autoFill : suggestion.translatedId;
+
     onChange({
       image: suggestion.src,
-      label: suggestion.translatedId,
+      label: label,
       labelKey: undefined
     }).then(() => onClose());
   };
@@ -302,30 +318,54 @@ export class SymbolSearch extends PureComponent {
     this.getSuggestions(this.state.value);
   };
 
+  handleClearSuggest() {
+    this.setState({ value: '' });
+  }
+
   render() {
     const { intl, open, onClose } = this.props;
 
+    const clearButton =
+      this.state.value.length > 0 ? (
+        <div className="react-autosuggest__clear">
+          <Tooltip
+            title={intl.formatMessage(messages.clearText)}
+            aria-label={intl.formatMessage(messages.clearText)}
+          >
+            <IconButton
+              label={intl.formatMessage(messages.clearText)}
+              onClick={this.handleClearSuggest.bind(this)}
+            >
+              <BackspaceIcon style={{ color: 'white' }} />
+            </IconButton>
+          </Tooltip>
+        </div>
+      ) : null;
+
     const autoSuggest = (
-      <Autosuggest
-        aria-label="Search auto-suggest"
-        alwaysRenderSuggestions={true}
-        suggestions={this.state.suggestions}
-        focusInputOnSuggestionClick={!isMobile.any}
-        onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested}
-        onSuggestionsClearRequested={this.handleSuggestionsClearRequested}
-        onSuggestionSelected={this.handleSuggestionSelected}
-        renderSuggestionsContainer={this.renderSuggestionsContainer}
-        getSuggestionValue={this.getSuggestionValue}
-        renderSuggestion={this.renderSuggestion}
-        highlightFirstSuggestion={true}
-        inputProps={{
-          autoFocus: true,
-          placeholder: intl.formatMessage(messages.searchSymbolLibrary),
-          label: intl.formatMessage(messages.searchSymbolLibrary),
-          value: this.state.value,
-          onChange: this.handleChange
-        }}
-      />
+      <div className="react-autosuggest__container">
+        <Autosuggest
+          aria-label="Search auto-suggest"
+          alwaysRenderSuggestions={true}
+          suggestions={this.state.suggestions}
+          focusInputOnSuggestionClick={!isMobile.any}
+          onSuggestionsFetchRequested={this.handleSuggestionsFetchRequested}
+          onSuggestionsClearRequested={this.handleSuggestionsClearRequested}
+          onSuggestionSelected={this.handleSuggestionSelected}
+          renderSuggestionsContainer={this.renderSuggestionsContainer}
+          getSuggestionValue={this.getSuggestionValue}
+          renderSuggestion={this.renderSuggestion}
+          highlightFirstSuggestion={true}
+          inputProps={{
+            autoFocus: true,
+            placeholder: intl.formatMessage(messages.searchSymbolLibrary),
+            label: intl.formatMessage(messages.searchSymbolLibrary),
+            value: this.state.value,
+            onChange: this.handleChange
+          }}
+        />
+        {clearButton}
+      </div>
     );
 
     return (

src/components/Board/SymbolSearch/SymbolSearch.css

@@ -23,6 +23,10 @@
   color: rgba(255, 255, 255, 0.26);
 }
 
+.react-autosuggest__clear {
+  margin-right: 1em;
+}
+
 .react-autosuggest__suggestions-container {
   position: absolute;
   top: 120px;

src/components/Board/SymbolSearch/SymbolSearch.messages.js

@@ -5,6 +5,10 @@ export default defineMessages({
     id: 'cboard.components.SymbolSearch.searchSymbolLibrary',
     defaultMessage: 'Search symbol library'
   },
+  clearText: {
+    id: 'cboard.components.SymbolSearch.clearText',
+    defaultMessage: 'Clear text'
+  },
   uploadAnImage: {
     id: 'cboard.components.InputImage.uploadImage',
     defaultMessage: 'Upload an image'

src/components/Board/TileEditor/TileEditor.component.js

@@ -96,6 +96,7 @@ export class TileEditor extends Component {
       activeStep: 0,
       editingTiles: props.editingTiles,
       isSymbolSearchOpen: false,
+      autoFill: '',
       selectedBackgroundColor: '',
       tile: this.defaultTile,
       linkedBoard: '',
@@ -359,8 +360,8 @@ export class TileEditor extends Component {
     this.setState({ isEditImageBtnActive: false });
   };
 
-  handleSearchClick = event => {
-    this.setState({ isSymbolSearchOpen: true });
+  handleSearchClick = (event, currentLabel) => {
+    this.setState({ isSymbolSearchOpen: true, autoFill: currentLabel || '' });
     this.setState({ isEditImageBtnActive: false });
   };
 
@@ -422,7 +423,7 @@ export class TileEditor extends Component {
     const buttons = (
       <IconButton
         label={intl.formatMessage(messages.symbolSearch)}
-        onClick={this.handleSearchClick}
+        onClick={e => this.handleSearchClick(e, currentLabel)}
       >
         <SearchIcon />
       </IconButton>
@@ -520,7 +521,7 @@ export class TileEditor extends Component {
                       variant="contained"
                       color="primary"
                       startIcon={<SearchIcon />}
-                      onClick={this.handleSearchClick}
+                      onClick={e => this.handleSearchClick(e, currentLabel)}
                     >
                       {intl.formatMessage(messages.symbols)}
                     </Button>
@@ -651,6 +652,7 @@ export class TileEditor extends Component {
 
           <SymbolSearch
             open={this.state.isSymbolSearchOpen}
+            autoFill={this.state.autoFill}
             onChange={this.handleSymbolSearchChange}
             onClose={this.handleSymbolSearchClose}
           />

src/translations/src/cboard.json

@@ -132,6 +132,7 @@
   "cboard.components.FullScreenButton.fullscreen": "Full screen",
   "cboard.components.FullScreenButton.exitFullscreen": "Exit full screen",
   "cboard.components.SymbolSearch.searchSymbolLibrary": "Search symbol library",
+  "cboard.components.SymbolSearch.clearText": "Clear text",
   "cboard.components.InputImage.uploadImage": "Upload image",
   "cboard.components.Board.TileEditor.voiceRecorder": "Voice recorder",
   "cboard.components.Board.TileEditor.createTile": "Create tile",