<head>
<meta charset="utf-8">
<title>React</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="//fb.me/react-with-addons-15.1.0.js"></script>
<script src="//fb.me/react-dom-15.1.0.js"></script>
</head>
<body>
<div id="container"></div>
</body>
// The reference comes from http://chibicode.com/react-js-introduction-for-people-who-know-just-enough-jquery-to-get-by/
// The syntax has been changed to ES6
class TweetBox extends React.Component {
constructor(props) {
super(props);
this.state = {
text: '',
photoAdded: false
};
this.handleChange = this.handleChange.bind(this);
this.togglePhoto = this.togglePhoto.bind(this);
this.remainingCharacters = this.remainingCharacters.bind(this);
this.overflowAlert = this.overflowAlert.bind(this);
}
handleChange(e) {
e.preventDefault();
this.setState({ text: event.target.value });
}
togglePhoto(e) {
e.preventDefault();
this.setState({photoAdded:!this.state.photoAdded});
}
overflowAlert() {
if (this.remainingCharacters() < 0 ) {
if (this.state.photoAdded) {
let beforeOverflowText = this.state.text.substring(140 - 23 - 10, 140 - 23);
let overflowText = this.state.text.substring(140 - 23);
} else {
let beforeOverflowText = this.state.text.substring(140 - 10, 140);
let overflowText = this.state.text.substring(140);
}
return (
<div className="alert alert-warning">
<strong>Oops! Too Long:</strong>
...{this.beforeOverflowText}
<strong className="bg-danger">{this.overflowText}</strong>
</div>
);
} else {
return "";
}
}
remainingCharacters (){
if(this.state.photoAdded) {
return 140 - 23 - this.state.text.length;
} else {
return 140 - this.state.text.length;
}
}
render() {
return (
<div className="well clearfix">
{ this.overflowAlert() }
<textarea className="form-control"
onChange={this.handleChange}>
</textarea>
<br/>
<span>{this.remainingCharacters()}</span>
<button className="btn btn-primary pull-right"
disabled={this.state.text.length === 0 && !this.state.photoAdded}>Tweet</button>
<button className="btn btn-default pull-right"
onClick={this.togglePhoto}>
{this.state.photoAdded ? "✓ Photo Added" : "Add Photo" }
</button>
</div>
);
}
}
ReactDOM.render(
<TweetBox />,
document.getElementById("container")
);
View Compiled
