app/javascript/flavours/glitch/features/drawer/search/popout/index.js

   1 //  Package imports.
   2 import PropTypes from 'prop-types';
   3 import React from 'react';
   4 import {
   5   FormattedMessage,
   6   defineMessages,
   7 } from 'react-intl';
   8 import spring from 'react-motion/lib/spring';
   9
  10 //  Utils.
  11 import Motion from 'flavours/glitch/util/optional_motion';
  12 import { searchEnabled } from 'flavours/glitch/util/initial_state';
  13
  14 //  Messages.
  15 const messages = defineMessages({
  16   format: {
  17     defaultMessage: 'Advanced search format',
  18     id: 'search_popout.search_format',
  19   },
  20   hashtag: {
  21     defaultMessage: 'hashtag',
  22     id: 'search_popout.tips.hashtag',
  23   },
  24   status: {
  25     defaultMessage: 'status',
  26     id: 'search_popout.tips.status',
  27   },
  28   text: {
  29     defaultMessage: 'Simple text returns matching display names, usernames and hashtags',
  30     id: 'search_popout.tips.text',
  31   },
  32   full_text: {
  33     defaultMessage: 'Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.',
  34     id: 'search_popout.tips.full_text',
  35   },
  36   user: {
  37     defaultMessage: 'user',
  38     id: 'search_popout.tips.user',
  39   },
  40 });
  41
  42 //  The spring used by our motion.
  43 const motionSpring = spring(1, { damping: 35, stiffness: 400 });
  44
  45 //  The component.
  46 export default function DrawerSearchPopout ({ style }) {
  47
  48   //  The result.
  49   return (
  50     <div
  51       className='drawer--search--popout'
  52       style={{
  53         ...style,
  54         position: 'absolute',
  55         width: 285,
  56       }}
  57     >
  58       <Motion
  59         defaultStyle={{
  60           opacity: 0,
  61           scaleX: 0.85,
  62           scaleY: 0.75,
  63         }}
  64         style={{
  65           opacity: motionSpring,
  66           scaleX: motionSpring,
  67           scaleY: motionSpring,
  68         }}
  69       >
  70         {({ opacity, scaleX, scaleY }) => (
  71           <div
  72             style={{
  73               opacity: opacity,
  74               transform: `scale(${scaleX}, ${scaleY})`,
  75             }}
  76           >
  77             <h4><FormattedMessage {...messages.format} /></h4>
  78             <ul>
  79               <li>
  80                 <em>#example</em>
  81                 {' '}
  82                 <FormattedMessage {...messages.hashtag} />
  83               </li>
  84               <li>
  85                 <em>@username@domain</em>
  86                 {' '}
  87                 <FormattedMessage {...messages.user} />
  88               </li>
  89               <li>
  90                 <em>URL</em>
  91                 {' '}
  92                 <FormattedMessage {...messages.user} />
  93               </li>
  94               <li>
  95                 <em>URL</em>
  96                 {' '}
  97                 <FormattedMessage {...messages.status} />
  98               </li>
  99             </ul>
 100             { searchEnabled ? <FormattedMessage {...messages.full_text} /> : <FormattedMessage {...messages.text} /> }
 101           </div>
 102         )}
 103       </Motion>
 104     </div>
 105   );
 106 }
 107
 108 //  Props.
 109 DrawerSearchPopout.propTypes = { style: PropTypes.object };