import PureRenderMixin from 'react-addons-pure-render-mixin'; import ImmutablePropTypes from 'react-immutable-proptypes'; import Autosuggest from 'react-autosuggest'; import AutosuggestAccountContainer from '../containers/autosuggest_account_container'; import { debounce } from 'react-decoration'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; const messages = defineMessages({ placeholder: { id: 'search.placeholder', defaultMessage: 'Search' } }); const getSuggestionValue = suggestion => suggestion.value; const renderSuggestion = suggestion => { if (suggestion.type === 'account') { return ; } else { return #{suggestion.id} } }; const renderSectionTitle = section => ( ); const getSectionSuggestions = section => section.items; const outerStyle = { padding: '10px', lineHeight: '20px', position: 'relative' }; const inputStyle = { boxSizing: 'border-box', display: 'block', width: '100%', border: 'none', padding: '10px', paddingRight: '30px', fontFamily: 'Roboto', background: '#282c37', color: '#9baec8', fontSize: '14px', margin: '0' }; const iconStyle = { position: 'absolute', top: '18px', right: '20px', color: '#9baec8', fontSize: '18px', pointerEvents: 'none' }; const Search = React.createClass({ contextTypes: { router: React.PropTypes.object }, propTypes: { suggestions: React.PropTypes.array.isRequired, value: React.PropTypes.string.isRequired, onChange: React.PropTypes.func.isRequired, onClear: React.PropTypes.func.isRequired, onFetch: React.PropTypes.func.isRequired, onReset: React.PropTypes.func.isRequired }, mixins: [PureRenderMixin], onChange (_, { newValue }) { if (typeof newValue !== 'string') { return; } this.props.onChange(newValue); }, onSuggestionsClearRequested () { this.props.onClear(); }, @debounce(500) onSuggestionsFetchRequested ({ value }) { value = value.replace('#', ''); this.props.onFetch(value.trim()); }, onSuggestionSelected (_, { suggestion }) { if (suggestion.type === 'account') { this.context.router.push(`/accounts/${suggestion.id}`); } else { this.context.router.push(`/timelines/tag/${suggestion.id}`); } }, render () { const inputProps = { placeholder: this.props.intl.formatMessage(messages.placeholder), value: this.props.value, onChange: this.onChange, style: inputStyle }; return (
); }, }); export default injectIntl(Search);