From 944ebfc75612d761b8960ef00771dbf82f57047e Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Wed, 1 Mar 2017 20:55:37 +0900
Subject: [PATCH] Add cancel button for video URI form Close #220
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

動画URIを入力させるためのダイアログを表示させると、
最初から入力されている値と異なる値が入れるまでダイアログを閉じることができなかった。
これでは入力をしようと思っていたが途中でやめるということができない。
このままでは非常にユーザー体験が悪いのでキャンセルボタンを追加してダイアログを閉じれるようにする。
---
 src/components/header.jsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/header.jsx b/src/components/header.jsx
index 9222bee..ed13b71 100644
--- a/src/components/header.jsx
+++ b/src/components/header.jsx
@@ -67,6 +67,14 @@ export default class Header extends Component {
     }
   }
 
+  handleRequestClose = () => {
+    if (this.props.videoUri) {
+      this.setState({
+        open: false,
+      });
+    }
+  }
+
   handleSubmit = (event) => {
     event.preventDefault();
     this.context.setVideo({
@@ -84,8 +92,8 @@ export default class Header extends Component {
               <MenuIcon onClick={this.handleClick} />
             </IconButton>
             <Text className="main-title" colorInherit type="title">TV</Text>
-            <Button contrast onClick={this.handleClick}>Open</Button>
-            <Dialog open={this.state.open}>
+            <Button contrast onClick={this.handleClick} primary>Open</Button>
+            <Dialog onRequestClose={this.handleRequestClose} open={this.state.open}>
               <form action="/" onSubmit={this.handleSubmit}>
                 <DialogTitle>Open video</DialogTitle>
                 <DialogContent>
@@ -100,7 +108,8 @@ export default class Header extends Component {
                   />
                 </DialogContent>
                 <DialogActions>
-                  <Button primary type="submit">Play</Button>
+                  <Button onClick={this.handleRequestClose} primary>Cancel</Button>
+                  <Button disabled={!this.state.videoUri} primary type="submit">Play</Button>
                 </DialogActions>
               </form>
             </Dialog>