Implement Cancel button

Automattic · Feb 21, 2017 · 25e740b · 25e740b
1 parent 821402d
commit 25e740b
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 51 deletions.
diff --git a/client/blocks/video-editor/index.jsx b/client/blocks/video-editor/index.jsx
@@ -3,6 +3,7 @@
  */
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { noop } from 'lodash';
 import { localize } from 'i18n-calypso';
 import classNames from 'classnames';
 
@@ -13,6 +14,20 @@ import DetailPreviewVideo from 'post-editor/media-modal/detail/detail-preview-vi
 import VideoEditorButtons from './video-editor-buttons';
 
 class VideoEditor extends Component {
+	static propTypes = {
+		className: PropTypes.string,
+		media: PropTypes.object,
+		onCancel: PropTypes.func,
+
+		// Connected props
+		translate: PropTypes.func,
+	};
+
+	static defaultProps = {
+		media: null,
+		onCancel: noop,
+	};
+
 	handleSelectFrame() {}
 
 	handleUploadImage() {}
@@ -54,18 +69,4 @@ class VideoEditor extends Component {
 	}
 }
 
-VideoEditor.propTypes = {
-	// Component props
-	className: PropTypes.string,
-	media: PropTypes.object,
-	siteId: PropTypes.number,
-
-	// Redux props
-	translate: PropTypes.func,
-};
-
-VideoEditor.defaultProps = {
-	media: null,
-};
-
 export default connect()( localize( VideoEditor ) );
diff --git a/client/blocks/video-editor/video-editor-buttons.jsx b/client/blocks/video-editor/video-editor-buttons.jsx
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React, { PropTypes } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { noop } from 'lodash';
 import { localize } from 'i18n-calypso';
@@ -12,43 +12,52 @@ import { localize } from 'i18n-calypso';
 import Button from 'components/button';
 import UploadButton from './video-editor-upload-button';
 
-const VideoEditorButtons = ( { onCancel, onSelectFrame, onUploadImage, translate } ) => {
-	return (
-		<div className="video-editor__buttons">
-			{ onCancel &&
+class VideoEditorButtons extends Component {
+	static propTypes = {
+		onCancel: PropTypes.func,
+		onSelectFrame: PropTypes.func,
+		onUploadImage: PropTypes.func,
+	};
+
+	static defaultProps = {
+		onCancel: noop,
+		onSelectFrame: noop,
+		onUploadImage: noop,
+	};
+
+	render() {
+		const {
+			onCancel,
+			onSelectFrame,
+			onUploadImage,
+			translate,
+		} = this.props;
+
+		return (
+			<div className="video-editor__buttons">
+				{ onCancel &&
+					<Button
+						className="video-editor__buttons-button"
+						onClick={ onCancel }
+					>
+						{ translate( 'Cancel' ) }
+					</Button>
+				}
+				<UploadButton
+					className="button video-editor__buttons-button"
+					onUploadImage={ onUploadImage }>
+					{ translate( 'Upload Image' ) }
+				</UploadButton>
 				<Button
 					className="video-editor__buttons-button"
-					onClick={ onCancel }
+					primary
+					onClick={ onSelectFrame }
 				>
-					{ translate( 'Cancel' ) }
+					{ translate( 'Select Frame' ) }
 				</Button>
-			}
-			<UploadButton
-				className="button video-editor__buttons-button"
-				onUploadImage={ onUploadImage }>
-				{ translate( 'Upload Image' ) }
-			</UploadButton>
-			<Button
-				className="video-editor__buttons-button"
-				primary
-				onClick={ onSelectFrame }
-			>
-				{ translate( 'Select Frame' ) }
-			</Button>
-		</div>
-	);
-};
-
-VideoEditorButtons.propTypes = {
-	onCancel: PropTypes.func,
-	onSelectFrame: PropTypes.func,
-	onUploadImage: PropTypes.func,
-};
-
-VideoEditorButtons.defaultProps = {
-	onCancel: noop,
-	onSelectFrame: noop,
-	onUploadImage: noop,
-};
+			</div>
+		);
+	}
+}
 
 export default connect()( localize( VideoEditorButtons ) );
diff --git a/client/post-editor/media-modal/index.jsx b/client/post-editor/media-modal/index.jsx
@@ -75,6 +75,8 @@ export class EditorMediaModal extends Component {
 	constructor( props ) {
 		super( ...props );
 		this.state = this.getDefaultState( props );
+
+		this.handleCancel = this.handleCancel.bind( this );
 	}
 
 	componentWillReceiveProps( nextProps ) {
@@ -235,9 +237,8 @@ export class EditorMediaModal extends Component {
 		this.props.setView( ModalViews.DETAIL );
 	};
 
-	onImageEditorCancel = imageEditorProps => {
+	handleCancel() {
 		const { mediaLibrarySelectedItems } = this.props;
-
 		const item = mediaLibrarySelectedItems[ this.getDetailSelectedIndex() ];
 
 		if ( ! item ) {
@@ -246,9 +247,12 @@ export class EditorMediaModal extends Component {
 		}
 
 		this.props.setView( ModalViews.DETAIL );
+	}
 
+	onImageEditorCancel = imageEditorProps => {
 		const {	resetAllImageEditorState } = imageEditorProps;
 
+		this.handleCancel();
 		resetAllImageEditorState();
 	};
 
@@ -422,6 +426,7 @@ export class EditorMediaModal extends Component {
 					content = (
 						<VideoEditor
 							media={ media }
+							onCancel={ this.handleCancel }
 						/>
 					);
 				}