logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

search.js (2216B)


  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. import { connect } from 'react-redux';
  4. import { defineMessages, injectIntl } from 'react-intl';
  5. import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists';
  6. import classNames from 'classnames';
  7. const messages = defineMessages({
  8. search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
  9. });
  10. const mapStateToProps = state => ({
  11. value: state.getIn(['listEditor', 'suggestions', 'value']),
  12. });
  13. const mapDispatchToProps = dispatch => ({
  14. onSubmit: value => dispatch(fetchListSuggestions(value)),
  15. onClear: () => dispatch(clearListSuggestions()),
  16. onChange: value => dispatch(changeListSuggestions(value)),
  17. });
  18. @connect(mapStateToProps, mapDispatchToProps)
  19. @injectIntl
  20. export default class Search extends React.PureComponent {
  21. static propTypes = {
  22. intl: PropTypes.object.isRequired,
  23. value: PropTypes.string.isRequired,
  24. onChange: PropTypes.func.isRequired,
  25. onSubmit: PropTypes.func.isRequired,
  26. onClear: PropTypes.func.isRequired,
  27. };
  28. handleChange = e => {
  29. this.props.onChange(e.target.value);
  30. }
  31. handleKeyUp = e => {
  32. if (e.keyCode === 13) {
  33. this.props.onSubmit(this.props.value);
  34. }
  35. }
  36. handleClear = () => {
  37. this.props.onClear();
  38. }
  39. render () {
  40. const { value, intl } = this.props;
  41. const hasValue = value.length > 0;
  42. return (
  43. <div className='list-editor__search search'>
  44. <label>
  45. <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
  46. <input
  47. className='search__input'
  48. type='text'
  49. value={value}
  50. onChange={this.handleChange}
  51. onKeyUp={this.handleKeyUp}
  52. placeholder={intl.formatMessage(messages.search)}
  53. />
  54. </label>
  55. <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
  56. <i className={classNames('fa fa-search', { active: !hasValue })} />
  57. <i aria-label={intl.formatMessage(messages.search)} className={classNames('fa fa-times-circle', { active: hasValue })} />
  58. </div>
  59. </div>
  60. );
  61. }
  62. }