about summary refs log tree commit diff
path: root/app/javascript/flavours/glitch/features/drawer/search/popout/index.js
diff options
context:
space:
mode:
authorbeatrix <beatrix.bitrot@gmail.com>2018-01-05 18:29:08 -0500
committerGitHub <noreply@github.com>2018-01-05 18:29:08 -0500
commitfaf20eeaa4c6f48a97a41a948ed29e734c8c4f5e (patch)
treeda0b88781650d514c209641fc6af7cbb921afe0b /app/javascript/flavours/glitch/features/drawer/search/popout/index.js
parentf41b33eb0177b23bd72fede7df94af43da0c7c6b (diff)
parentd7ce339c2e33a5607c21d3eff316669cff9c6ea3 (diff)
Merge pull request #293 from glitch-soc/compose-refactor
Compose refactor
Diffstat (limited to 'app/javascript/flavours/glitch/features/drawer/search/popout/index.js')
-rw-r--r--app/javascript/flavours/glitch/features/drawer/search/popout/index.js99
1 files changed, 99 insertions, 0 deletions
diff --git a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js
new file mode 100644
index 000000000..b5ea86ff1
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js
@@ -0,0 +1,99 @@
+//  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';
+
+//  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',
+  },
+  user: {
+    defaultMessage: 'user',
+    id: 'search_popout.tips.user',
+  },
+});
+
+//  The spring used by our motion.
+const motionSpring = spring(1, { damping: 35, stiffness: 400 });
+
+//  The component.
+export default function DrawerSearchPopout ({ style }) {
+
+  //  The result.
+  return (
+    <Motion
+      defaultStyle={{
+        opacity: 0,
+        scaleX: 0.85,
+        scaleY: 0.75,
+      }}
+      style={{
+        opacity: motionSpring,
+        scaleX: motionSpring,
+        scaleY: motionSpring,
+      }}
+    >
+      {({ opacity, scaleX, scaleY }) => (
+        <div
+          className='drawer--search--popout'
+          style={{
+            ...style,
+            position: 'absolute',
+            width: 285,
+            opacity: opacity,
+            transform: `scale(${scaleX}, ${scaleY})`,
+          }}
+        >
+          <h4><FormattedMessage {...messages.format} /></h4>
+          <ul>
+            <li>
+              <em>#example</em>
+              {' '}
+              <FormattedMessage {...messages.hashtag} />
+            </li>
+            <li>
+              <em>@username@domain</em>
+              {' '}
+              <FormattedMessage {...messages.user} />
+            </li>
+            <li>
+              <em>URL</em>
+              {' '}
+              <FormattedMessage {...messages.user} />
+            </li>
+            <li>
+              <em>URL</em>
+              {' '}
+              <FormattedMessage {...messages.status} />
+            </li>
+          </ul>
+          <FormattedMessage {...messages.text} />
+        </div>
+      )}
+    </Motion>
+  );
+}
+
+//  Props.
+DrawerSearchPopout.propTypes = { style: PropTypes.object };