/
header.jsx
121 lines (108 loc) · 3.13 KB
/
header.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import AppBar from 'material-ui/AppBar';
import Button from 'material-ui/Button';
import { Dialog, DialogActions, DialogContent, DialogTitle } from 'material-ui/Dialog';
import IconButton from 'material-ui/IconButton';
import Text from 'material-ui/Text';
import TextField from 'material-ui/TextField';
import ToolBar from 'material-ui/Toolbar';
import MenuIcon from 'material-ui/svg-icons/menu';
import React, { Component, PropTypes } from 'react';
export default class Header extends Component {
static displayName = 'Header';
static contextTypes = {
setVideo: PropTypes.func.isRequired,
};
static propTypes = {
open: PropTypes.bool,
videoUri: PropTypes.string,
};
static defaultProps = {
open: false,
videoUri: null,
};
constructor(props, ...args) {
super(props, ...args);
Object.assign(this.state, {
open: props.open || !props.videoUri,
videoUri: props.videoUri || '',
});
}
state = {
open: false,
videoUri: null,
}
shouldComponentUpdate(nextProps, nextState) {
return (
this.state.open !== nextState.open ||
this.state.videoUri !== nextState.videoUri ||
this.props.open !== nextProps.open ||
this.props.videoUri !== nextProps.videoUri
);
}
componentWillUpdate(nextProps) {
if (nextProps.videoUri && this.props.videoUri !== nextProps.videoUri) {
this.setState({ open: false });
}
}
handleChange = ({ target }) => {
this.setState({
videoUri: target.value,
});
}
handleClick = () => {
if (!this.state.open) {
this.setState({
open: true,
});
}
}
handleRequestClose = () => {
if (this.props.videoUri) {
this.setState({
open: false,
});
}
}
handleSubmit = (event) => {
event.preventDefault();
this.context.setVideo({
uri: this.state.videoUri,
});
return false;
}
render() {
return (
<header>
<AppBar>
<ToolBar>
<IconButton contrast>
<MenuIcon onClick={this.handleClick} />
</IconButton>
<Text className="main-title" colorInherit type="title">TV</Text>
<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>
<TextField
id="video-uri"
inputProps={{ name: 'uri' }}
label="URI"
onChange={this.handleChange}
required
type="url"
value={this.state.videoUri}
/>
</DialogContent>
<DialogActions>
<Button onClick={this.handleRequestClose} primary>Cancel</Button>
<Button disabled={!this.state.videoUri} primary type="submit">Play</Button>
</DialogActions>
</form>
</Dialog>
</ToolBar>
</AppBar>
</header>
);
}
}