// 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'; // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 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...' }, }); 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 @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, }; 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, resetFileKey, disabled, acceptContentTypes } = 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) => { const hdl = () => this.handleItemClick(item.name); return (
{intl.formatMessage(item.text)}
); }); return (
{optionElems}
); } }