import React from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Icon from 'flavours/glitch/components/icon'; import Textarea from 'react-textarea-autosize'; const messages = defineMessages({ placeholder: { id: 'account_note.placeholder', defaultMessage: 'No comment provided' }, }); export default @injectIntl class Header extends ImmutablePureComponent { static propTypes = { account: ImmutablePropTypes.map.isRequired, isEditing: PropTypes.bool, isSubmitting: PropTypes.bool, accountNote: PropTypes.string, onEditAccountNote: PropTypes.func.isRequired, onCancelAccountNote: PropTypes.func.isRequired, onSaveAccountNote: PropTypes.func.isRequired, onChangeAccountNote: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, }; handleChangeAccountNote = (e) => { this.props.onChangeAccountNote(e.target.value); }; componentWillUnmount () { if (this.props.isEditing) { this.props.onCancelAccountNote(); } } handleKeyDown = e => { if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) { this.props.onSaveAccountNote(); } else if (e.keyCode === 27) { this.props.onCancelAccountNote(); } } render () { const { account, accountNote, isEditing, isSubmitting, intl } = this.props; if (!account || (!accountNote && !isEditing)) { return null; } let action_buttons = null; if (isEditing) { action_buttons = (
); } let note_container = null; if (isEditing) { note_container = (