2017-12-26 16:54:28 -08:00
// Package imports.
import PropTypes from 'prop-types' ;
import React from 'react' ;
import {
FormattedMessage ,
defineMessages ,
} from 'react-intl' ;
import spring from 'react-motion/lib/spring' ;
// Utils.
import Motion from 'flavours/glitch/util/optional_motion' ;
2018-08-31 04:31:45 -07:00
import { searchEnabled } from 'flavours/glitch/util/initial_state' ;
2017-12-26 16:54:28 -08:00
// Messages.
const messages = defineMessages ( {
format : {
defaultMessage : 'Advanced search format' ,
id : 'search_popout.search_format' ,
} ,
hashtag : {
defaultMessage : 'hashtag' ,
id : 'search_popout.tips.hashtag' ,
} ,
status : {
defaultMessage : 'status' ,
id : 'search_popout.tips.status' ,
} ,
text : {
defaultMessage : 'Simple text returns matching display names, usernames and hashtags' ,
id : 'search_popout.tips.text' ,
} ,
2018-08-31 04:31:45 -07:00
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.' ,
id : 'search_popout.tips.full_text' ,
} ,
2017-12-26 16:54:28 -08:00
user : {
defaultMessage : 'user' ,
id : 'search_popout.tips.user' ,
} ,
} ) ;
2018-01-03 12:36:21 -08:00
// The spring used by our motion.
2017-12-26 16:54:28 -08:00
const motionSpring = spring ( 1 , { damping : 35 , stiffness : 400 } ) ;
2018-01-03 12:36:21 -08:00
// The component.
2017-12-26 16:54:28 -08:00
export default function DrawerSearchPopout ( { style } ) {
2018-01-03 12:36:21 -08:00
// The result.
2017-12-26 16:54:28 -08:00
return (
2018-01-06 15:34:01 -08:00
< div
className = 'drawer--search--popout'
2017-12-26 16:54:28 -08:00
style = { {
2018-01-06 15:34:01 -08:00
... style ,
position : 'absolute' ,
width : 285 ,
2017-12-26 16:54:28 -08:00
} }
>
2018-01-06 15:34:01 -08:00
< Motion
defaultStyle = { {
opacity : 0 ,
scaleX : 0.85 ,
scaleY : 0.75 ,
} }
style = { {
opacity : motionSpring ,
scaleX : motionSpring ,
scaleY : motionSpring ,
} }
>
{ ( { opacity , scaleX , scaleY } ) => (
< div
style = { {
opacity : opacity ,
transform : ` scale( ${ scaleX } , ${ scaleY } ) ` ,
} }
>
< h4 > < FormattedMessage { ... messages . format } / > < / h 4 >
< ul >
< li >
< em > # example < / e m >
{ ' ' }
< FormattedMessage { ... messages . hashtag } / >
< / l i >
< li >
< em > @ username @ domain < / e m >
{ ' ' }
< FormattedMessage { ... messages . user } / >
< / l i >
< li >
< em > URL < / e m >
{ ' ' }
< FormattedMessage { ... messages . user } / >
< / l i >
< li >
< em > URL < / e m >
{ ' ' }
< FormattedMessage { ... messages . status } / >
< / l i >
< / u l >
2018-08-31 04:31:45 -07:00
{ searchEnabled ? < FormattedMessage { ... messages . full _text } / > : < FormattedMessage { ... messages . text } / > }
2018-01-06 15:34:01 -08:00
< / d i v >
) }
< / M o t i o n >
< / d i v >
2017-12-26 16:54:28 -08:00
) ;
}
// Props.
DrawerSearchPopout . propTypes = { style : PropTypes . object } ;