2017-05-03 10:04:16 +10:00
import React from 'react' ;
2017-04-22 04:05:35 +10:00
import PropTypes from 'prop-types' ;
2017-10-03 03:24:05 +11:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2023-01-12 07:58:46 +11:00
import Overlay from 'react-overlays/Overlay' ;
2018-03-02 16:02:42 +11:00
import { searchEnabled } from '../../../initial_state' ;
2019-02-01 10:14:05 +11:00
import Icon from 'mastodon/components/icon' ;
2016-11-19 01:36:16 +11:00
const messages = defineMessages ( {
2017-05-21 01:31:47 +10:00
placeholder : { id : 'search.placeholder' , defaultMessage : 'Search' } ,
2022-10-29 22:32:49 +11:00
placeholderSignedIn : { id : 'search.search_or_paste' , defaultMessage : 'Search or paste URL' } ,
2016-11-19 01:36:16 +11:00
} ) ;
2016-11-13 23:04:18 +11:00
2017-10-03 03:24:05 +11:00
class SearchPopout extends React . PureComponent {
render ( ) {
2018-03-02 16:02:42 +11:00
const extraInformation = searchEnabled ? < FormattedMessage id = 'search_popout.tips.full_text' defaultMessage = 'Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' / > : < FormattedMessage id = 'search_popout.tips.text' defaultMessage = 'Simple text returns matching display names, usernames and hashtags' / > ;
2017-10-03 03:24:05 +11:00
return (
2023-01-12 07:58:46 +11:00
< div className = 'search-popout' >
< h4 > < FormattedMessage id = 'search_popout.search_format' defaultMessage = 'Advanced search format' / > < / h 4 >
< ul >
< li > < em > # example < /em> <FormattedMessage id='search_popout.tips.hashtag' defaultMessage='hashtag' / > < / l i >
< li > < em > @ username @ domain < /em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' / > < / l i >
< li > < em > URL < /em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' / > < / l i >
< li > < em > URL < /em> <FormattedMessage id='search_popout.tips.status' defaultMessage='status' / > < / l i >
< / u l >
{ extraInformation }
2017-10-03 03:24:05 +11:00
< / d i v >
) ;
}
}
2018-09-15 01:59:48 +10:00
export default @ injectIntl
class Search extends React . PureComponent {
2016-11-13 23:04:18 +11:00
2019-05-26 05:27:00 +10:00
static contextTypes = {
router : PropTypes . object . isRequired ,
2022-10-29 22:32:49 +11:00
identity : PropTypes . object . isRequired ,
2019-05-26 05:27:00 +10:00
} ;
2017-05-12 22:44:10 +10:00
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 ,
2019-05-26 05:27:00 +10:00
openInRoute : PropTypes . bool ,
2017-05-21 01:31:47 +10:00
intl : PropTypes . object . isRequired ,
2019-10-02 03:19:10 +10:00
singleColumn : PropTypes . bool ,
2017-05-12 22:44:10 +10:00
} ;
2017-10-03 03:24:05 +11:00
state = {
expanded : false ,
} ;
2019-10-02 03:19:10 +10:00
setRef = c => {
this . searchForm = c ;
}
2017-05-12 22:44:10 +10:00
handleChange = ( e ) => {
2017-04-01 04:59:54 +11:00
this . props . onChange ( e . target . value ) ;
2017-04-22 04:05:35 +10:00
}
2016-11-13 23:04:18 +11:00
2017-05-12 22:44:10 +10:00
handleClear = ( e ) => {
2017-04-01 04:59:54 +11:00
e . preventDefault ( ) ;
2017-04-23 12:39:50 +10:00
if ( this . props . value . length > 0 || this . props . submitted ) {
this . props . onClear ( ) ;
}
2017-04-22 04:05:35 +10:00
}
2016-11-13 23:04:18 +11:00
2019-04-22 22:55:24 +10:00
handleKeyUp = ( e ) => {
2017-04-01 04:59:54 +11:00
if ( e . key === 'Enter' ) {
e . preventDefault ( ) ;
2019-05-26 05:27:00 +10:00
2017-04-01 04:59:54 +11:00
this . props . onSubmit ( ) ;
2019-05-26 05:27:00 +10:00
if ( this . props . openInRoute ) {
this . context . router . history . push ( '/search' ) ;
}
2017-10-06 10:07:59 +11:00
} else if ( e . key === 'Escape' ) {
document . querySelector ( '.ui' ) . parentElement . focus ( ) ;
2017-04-01 04:59:54 +11:00
}
2017-04-22 04:05:35 +10:00
}
2016-11-13 23:04:18 +11:00
2017-05-12 22:44:10 +10:00
handleFocus = ( ) => {
2017-10-03 03:24:05 +11:00
this . setState ( { expanded : true } ) ;
2017-04-01 04:59:54 +11:00
this . props . onShow ( ) ;
2019-10-02 03:19:10 +10:00
if ( this . searchForm && ! this . props . singleColumn ) {
const { left , right } = this . searchForm . getBoundingClientRect ( ) ;
if ( left < 0 || right > ( window . innerWidth || document . documentElement . clientWidth ) ) {
this . searchForm . scrollIntoView ( ) ;
}
}
2017-04-22 04:05:35 +10:00
}
2016-11-13 23:04:18 +11:00
2017-10-03 03:24:05 +11:00
handleBlur = ( ) => {
this . setState ( { expanded : false } ) ;
}
2023-01-12 07:58:46 +11:00
findTarget = ( ) => {
return this . searchForm ;
}
2016-11-13 23:04:18 +11:00
render ( ) {
2017-04-01 07:44:12 +11:00
const { intl , value , submitted } = this . props ;
2017-10-03 03:24:05 +11:00
const { expanded } = this . state ;
2022-10-29 22:32:49 +11:00
const { signedIn } = this . context . identity ;
2017-04-01 07:44:12 +11:00
const hasValue = value . length > 0 || submitted ;
2016-11-13 23:04:18 +11:00
return (
2017-04-01 04:59:54 +11:00
< div className = 'search' >
2022-12-16 02:20:21 +11:00
< input
ref = { this . setRef }
className = 'search__input'
type = 'text'
placeholder = { intl . formatMessage ( signedIn ? messages . placeholderSignedIn : messages . placeholder ) }
aria - label = { intl . formatMessage ( signedIn ? messages . placeholderSignedIn : messages . placeholder ) }
value = { value }
onChange = { this . handleChange }
onKeyUp = { this . handleKeyUp }
onFocus = { this . handleFocus }
onBlur = { this . handleBlur }
/ >
2016-11-13 23:04:18 +11:00
2017-04-23 12:39:50 +10:00
< div role = 'button' tabIndex = '0' className = 'search__icon' onClick = { this . handleClear } >
2019-02-01 10:14:05 +11:00
< Icon id = 'search' className = { hasValue ? '' : 'active' } / >
< Icon id = 'times-circle' className = { hasValue ? 'active' : '' } aria - label = { intl . formatMessage ( messages . placeholder ) } / >
2017-04-01 04:59:54 +11:00
< / d i v >
2023-01-12 07:58:46 +11:00
< Overlay show = { expanded && ! hasValue } placement = 'bottom' target = { this . findTarget } popperConfig = { { strategy : 'fixed' } } >
{ ( { props , placement } ) => (
< div { ... props } style = { { ... props . style , width : 285 , zIndex : 2 } } >
< div className = { ` dropdown-animation ${ placement } ` } >
< SearchPopout / >
< / d i v >
< / d i v >
) }
2017-10-03 03:24:05 +11:00
< / O v e r l a y >
2016-11-13 23:04:18 +11:00
< / d i v >
) ;
2017-04-01 04:59:54 +11:00
}
2016-11-13 23:04:18 +11:00
2017-04-22 04:05:35 +10:00
}