import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import Overlay from 'react-overlays/Overlay'; import { searchEnabled } from '../../../initial_state'; import Icon from 'mastodon/components/icon'; const messages = defineMessages({ placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }, placeholderSignedIn: { id: 'search.search_or_paste', defaultMessage: 'Search or paste URL' }, }); class SearchPopout extends React.PureComponent { render () { const extraInformation = searchEnabled ? : ; return (

  • #example
  • @username@domain
  • URL
  • URL
{extraInformation}
); } } export default @injectIntl class Search extends React.PureComponent { static contextTypes = { router: PropTypes.object.isRequired, identity: PropTypes.object.isRequired, }; static propTypes = { value: PropTypes.string.isRequired, submitted: PropTypes.bool, onChange: PropTypes.func.isRequired, onSubmit: PropTypes.func.isRequired, onClear: PropTypes.func.isRequired, onShow: PropTypes.func.isRequired, openInRoute: PropTypes.bool, intl: PropTypes.object.isRequired, singleColumn: PropTypes.bool, }; state = { expanded: false, }; setRef = c => { this.searchForm = c; }; handleChange = (e) => { this.props.onChange(e.target.value); }; handleClear = (e) => { e.preventDefault(); if (this.props.value.length > 0 || this.props.submitted) { this.props.onClear(); } }; handleKeyUp = (e) => { if (e.key === 'Enter') { e.preventDefault(); this.props.onSubmit(); if (this.props.openInRoute) { this.context.router.history.push('/search'); } } else if (e.key === 'Escape') { document.querySelector('.ui').parentElement.focus(); } }; handleFocus = () => { this.setState({ expanded: true }); this.props.onShow(); if (this.searchForm && !this.props.singleColumn) { const { left, right } = this.searchForm.getBoundingClientRect(); if (left < 0 || right > (window.innerWidth || document.documentElement.clientWidth)) { this.searchForm.scrollIntoView(); } } }; handleBlur = () => { this.setState({ expanded: false }); }; findTarget = () => { return this.searchForm; }; render () { const { intl, value, submitted } = this.props; const { expanded } = this.state; const { signedIn } = this.context.identity; const hasValue = value.length > 0 || submitted; return (
{({ props, placement }) => (
)}
); } }