wip stuffs

app/javascript/glitch/components/compose/attach_options/index.js

@@ -0,0 +1,72 @@
+//  Package imports  //
+import React from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, defineMessages } from 'react-intl';
+
+//  Our imports  //
+import ComposeDropdown from '../dropdown/index';
+
+//  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
+
+const messages = defineMessages({
+  upload :
+    { id: 'compose.attach.upload', defaultMessage: 'Upload a file' },
+  doodle :
+    { id: 'compose.attach.doodle', defaultMessage: 'Draw something' },
+  attach :
+    { id: 'compose.attach', defaultMessage: 'Attach...' },
+});
+
+
+@injectIntl
+export default class ComposeAttachOptions extends React.PureComponent {
+
+  static propTypes = {
+    intl     : PropTypes.object.isRequired,
+  };
+
+  handleClick = e => {
+    const bt = e.target.datset.index;
+    //TODO
+  };
+
+  render () {
+    const { intl } = this.props;
+
+    const options = [
+      { icon: 'cloud-upload', text: messages.upload, name: 'upload' },
+      { icon: 'paint-brush', text: messages.doodle, name: 'doodle' },
+    ];
+
+    const optionElems = options.map((item) => {
+      return (
+        <div
+          role='button'
+          tabIndex='0'
+          key={item.name}
+          data-index={item.name}
+          onClick={this.handleClick}
+          className='privacy-dropdown__option'
+        >
+          <div className='privacy-dropdown__option__icon'>
+            <i className={`fa fa-fw fa-${item.icon}`} />
+          </div>
+
+          <div className='privacy-dropdown__option__content'>
+            <strong>{item.text}</strong>
+          </div>
+        </div>
+      );
+    });
+
+    return (
+      <ComposeDropdown
+        title={intl.formatMessage(messages.attach)}
+        icon='paperclip'
+      >
+        {optionElems}
+      </ComposeDropdown>
+    );
+  }
+
+}