app/javascript/mastodon/features/compose/components/search.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
   4
   5 const messages = defineMessages({
   6   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }
   7 });
   8
   9 class Search extends React.PureComponent {
  10
  11   static propTypes = {
  12     value: PropTypes.string.isRequired,
  13     submitted: PropTypes.bool,
  14     onChange: PropTypes.func.isRequired,
  15     onSubmit: PropTypes.func.isRequired,
  16     onClear: PropTypes.func.isRequired,
  17     onShow: PropTypes.func.isRequired,
  18     intl: PropTypes.object.isRequired
  19   };
  20
  21   handleChange = (e) => {
  22     this.props.onChange(e.target.value);
  23   }
  24
  25   handleClear = (e) => {
  26     e.preventDefault();
  27
  28     if (this.props.value.length > 0 || this.props.submitted) {
  29       this.props.onClear();
  30     }
  31   }
  32
  33   handleKeyDown = (e) => {
  34     if (e.key === 'Enter') {
  35       e.preventDefault();
  36       this.props.onSubmit();
  37     }
  38   }
  39
  40   noop () {
  41
  42   }
  43
  44   handleFocus = () => {
  45     this.props.onShow();
  46   }
  47
  48   render () {
  49     const { intl, value, submitted } = this.props;
  50     const hasValue = value.length > 0 || submitted;
  51
  52     return (
  53       <div className='search'>
  54         <input
  55           className='search__input'
  56           type='text'
  57           placeholder={intl.formatMessage(messages.placeholder)}
  58           value={value}
  59           onChange={this.handleChange}
  60           onKeyUp={this.handleKeyDown}
  61           onFocus={this.handleFocus}
  62         />
  63
  64         <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
  65           <i className={`fa fa-search ${hasValue ? '' : 'active'}`} />
  66           <i aria-label={intl.formatMessage(messages.placeholder)} className={`fa fa-times-circle ${hasValue ? 'active' : ''}`} />
  67         </div>
  68       </div>
  69     );
  70   }
  71
  72 }
  73
  74 export default injectIntl(Search);