[Practice] Tweet Box Using React.js

[Practice] Tweet Box Using React.js.markdown

[Practice] Tweet Box Using React.js

http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/

A Pen by TOBY on CodePen.

License.

index.html

#main

script.js

// ref. http://reactfordesigners.com/labs/reactjs-introduction-for-people-who-know-just-enough-jquery-to-get-by/

// Create a new UI component
const TweetBox = React.createClass({
  maxLength: 140,
  photoLength: 23,
  
  // ref. https://gist.github.com/matori/6338674
  dummyText: 
    'QS とは Quality Start の略であり、1985年にスポーツライター John Lowe により提唱された。' + 
    'これは先発投手が少なくとも6イニングを投げ、ER (Earned Runs＝自責点) を3以下に抑えた場合に達成される指標で、いわゆる「試合を作れた」かどうかを見るのに使われる。',
  
  getInitialState() {
    return {
      text: this.dummyText,
      photoAdded: false
    };
  },
  
  // Event Handler
  handleChange(event) {
    this.setState({ 
      text: event.target.value
    });
    
    console.log(event.target.value);
  },
  
  togglePhoto(event) {
    console.log('toggle photo button:',
                this.state.photoAdded);
    this.setState({ photoAdded: !this.state.photoAdded });
  },
  
  // 
  maxTotalLength() {
    let result = this.maxLength; 
    if (this.state.photoAdded) { result -= this.photoLength }
    return result
  },
  
  // Count Length
  remainingCharacters() {
    return this.maxTotalLength() - this.state.text.length;
  },
  
  overlofwAlert() {
    if (this.remainingCharacters() < 0) {
      const maxLength = this.maxTotalLength();
      const beforeOverflowText = this.state.text.substring(
        maxLength - 10, maxLength);
      const overflowText = this.state.text.substring(maxLength);         
      
      return (
        <div className='alert alert-warning'>
          <strong>Opps! Too Long:</strong>
          &nbsp;...{beforeOverflowText}
          <strong className='bg-danger'>{overflowText}</strong>
        </div>
      );
    } else {
      return '';
    }
  },
  
  render() {
    return (
      <div className='well clearfix'>
        { /* Warning */ }
        { this.overlofwAlert() }
  
        { /* Text box to tweet */ }
        <textarea className='form-control'
                  onChange={this.handleChange}>
          {this.state.text}
        </textarea>
                                 
        <br/>
                                 
        { /* Remaining Length */ }
        <span>{ this.remainingCharacters() }</span>
  
        { /* Button to tweet  */ }
        <button className='btn btn-primary pull-right' 
                disabled={this.state.text.length === 0 
                          && !this.state.photoAdded}>
          Tweet
        </button>
                                 
        { /* Button to add photo  */ }
        <button className='btn btn-default pull-right'
                onClick={this.togglePhoto}>
          {this.state.photoAdded ? '✔ Photo Added' : 'Add Photo' }
        </button>

      </div>
    );
  }
});

// Attach to the DOM, <div id='main'></div>
React.render(
  <TweetBox/>,
  document.getElementById('main')
);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />