import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
import SearchContainer from 'mastodon/features/compose/containers/search_container';
import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
import NavigationContainer from 'mastodon/features/compose/containers/navigation_container';
import LinkFooter from './link_footer';
+import { changeComposing } from 'mastodon/actions/compose';
-const ComposePanel = () => (
- <div className='compose-panel'>
- <SearchContainer openInRoute />
- <NavigationContainer />
- <ComposeFormContainer singleColumn />
- <LinkFooter withHotkeys />
- </div>
-);
+export default @connect()
+class ComposePanel extends React.PureComponent {
-export default ComposePanel;
+ static propTypes = {
+ dispatch: PropTypes.func.isRequired,
+ };
+
+ onFocus = () => {
+ this.props.dispatch(changeComposing(true));
+ }
+
+ onBlur = () => {
+ this.props.dispatch(changeComposing(false));
+ }
+
+ render() {
+ return (
+ <div className='compose-panel' onFocus={this.onFocus}>
+ <SearchContainer openInRoute />
+ <NavigationContainer onClose={this.onBlur} />
+ <ComposeFormContainer singleColumn />
+ <LinkFooter withHotkeys />
+ </div>
+ );
+ }
+
+}
dispatch(synchronouslySubmitMarkers());
if (isComposing && (hasComposingText || hasMediaAttachments)) {
+ e.preventDefault();
// Setting returnValue to any string causes confirmation dialog.
// Many browsers no longer display this text to users,
// but we set user-friendly message for other browsers, e.g. Edge.