new tootbox look and removed old doodle button files

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

@@ -1,10 +1,15 @@
 //  Package imports  //
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { injectIntl, defineMessages } from 'react-intl';
 
 //  Our imports  //
 import ComposeDropdown from '../dropdown/index';
+import { uploadCompose } from '../../../../mastodon/actions/compose';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { openModal } from '../../../../mastodon/actions/modal';
 
 //  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
@@ -17,21 +22,63 @@ const messages = defineMessages({
     { id: 'compose.attach', defaultMessage: 'Attach...' },
 });
 
+const mapStateToProps = state => ({
+  // This horrible expression is copied from vanilla upload_button_container
+  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size > 3 || state.getIn(['compose', 'media_attachments']).some(m => m.get('type') === 'video')),
+  resetFileKey: state.getIn(['compose', 'resetFileKey']),
+  acceptContentTypes: state.getIn(['media_attachments', 'accept_content_types']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  onSelectFile (files) {
+    dispatch(uploadCompose(files));
+  },
+  onOpenDoodle () {
+    dispatch(openModal('DOODLE', { noEsc: true }));
+  },
+});
 
 @injectIntl
-export default class ComposeAttachOptions extends React.PureComponent {
+@connect(mapStateToProps, mapDispatchToProps)
+export default class ComposeAttachOptions extends ImmutablePureComponent {
 
   static propTypes = {
     intl     : PropTypes.object.isRequired,
+    resetFileKey: PropTypes.number,
+    acceptContentTypes: ImmutablePropTypes.listOf(PropTypes.string).isRequired,
+    disabled: PropTypes.bool,
+    onSelectFile: PropTypes.func.isRequired,
+    onOpenDoodle: PropTypes.func.isRequired,
   };
 
-  handleClick = e => {
-    const bt = e.target.datset.index;
-    //TODO
+  handleItemClick = bt => {
+    if (bt === 'upload') {
+      this.fileElement.click();
+    }
+
+    if (bt === 'doodle') {
+      this.props.onOpenDoodle();
+    }
+
+    this.dropdown.setState({ open: false });
   };
 
+  handleFileChange = (e) => {
+    if (e.target.files.length > 0) {
+      this.props.onSelectFile(e.target.files);
+    }
+  }
+
+  setFileRef = (c) => {
+    this.fileElement = c;
+  }
+
+  setDropdownRef = (c) => {
+    this.dropdown = c;
+  }
+
   render () {
-    const { intl } = this.props;
+    const { intl, resetFileKey, disabled, acceptContentTypes } = this.props;
 
     const options = [
       { icon: 'cloud-upload', text: messages.upload, name: 'upload' },
@@ -39,13 +86,13 @@ export default class ComposeAttachOptions extends React.PureComponent {
     ];
 
     const optionElems = options.map((item) => {
+      const hdl = () => this.handleItemClick(item.name);
       return (
         <div
           role='button'
           tabIndex='0'
           key={item.name}
-          data-index={item.name}
-          onClick={this.handleClick}
+          onClick={hdl}
           className='privacy-dropdown__option'
         >
           <div className='privacy-dropdown__option__icon'>
@@ -53,19 +100,33 @@ export default class ComposeAttachOptions extends React.PureComponent {
           </div>
 
           <div className='privacy-dropdown__option__content'>
-            <strong>{item.text}</strong>
+            <strong>{intl.formatMessage(item.text)}</strong>
           </div>
         </div>
       );
     });
 
     return (
-      <ComposeDropdown
-        title={intl.formatMessage(messages.attach)}
-        icon='paperclip'
-      >
-        {optionElems}
-      </ComposeDropdown>
+      <div>
+        <ComposeDropdown
+          title={intl.formatMessage(messages.attach)}
+          icon='paperclip'
+          disabled={disabled}
+          ref={this.setDropdownRef}
+        >
+          {optionElems}
+        </ComposeDropdown>
+        <input
+          key={resetFileKey}
+          ref={this.setFileRef}
+          type='file'
+          multiple={false}
+          accept={acceptContentTypes.toArray().join(',')}
+          onChange={this.handleFileChange}
+          disabled={disabled}
+          style={{ display: 'none' }}
+        />
+      </div>
     );
   }