React TweetBox

by ramnathv

HTML

<script src="//fb.me/react-with-addons-0.14.0.js"></script>
<script src="//fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid" id="main">
  <h3>
    TweetBox
  </h3>
  <div class="row" id='mount'>
    
  </div>
  <div id="test"></div>
</div>

CSS

.tweetbox textarea { resize:vertical ; }

CoffeeScript

R = React.DOM
Rc = React.createElement

IconText = (props) ->
  {icon, text} = props
  R.span {},
    R.span {className: "glyphicon glyphicon-#{icon}"}
    R.span {}, " #{text}"
AddPhoto = (props) ->
  {photoAdded, togglePhoto} = props
  R.div {
      className: "addphoto btn btn-default"
      onClick: togglePhoto   
     },
    if photoAdded
      IconText(icon: "ok", text: "Photo Added")
    else 
       IconText(icon: "camera", text: "Add Photo")

    
TextArea = (props) ->
  R.textarea(
    className: 'form-control' 
    value: props.text
    onChange: props.handleChange
  )
TweetButton = (props) ->
  {remainingChars} = props
  R.div {className: "pull-right"},
    R.span {style: {marginRight: 10}}, remainingChars
    R.button {className: "btn btn-primary"}, "Tweet"

    
TweetBox = React.createClass
  getInitialState: ->
    text: ""
    photoAdded: false
  handleChange: (e) ->
    @setState text: e.target.value
  remainingChars: ->
    140 - @state.text.length - 23*@state.photoAdded
  togglePhoto: ->
    @setState photoAdded: [email protected]
  render: ->
    R.div {className: 'well clearfix tweetbox'},
      TextArea(
        text: @state.text
        handleChange: @handleChange
      )
      R.br()
      AddPhoto(
        photoAdded: @state.photoAdded
        togglePhoto: @togglePhoto
      )
      TweetButton({remainingChars: @remainingChars()})
  
ReactDOM.render(
  Rc TweetBox
  document.getElementById("test")
)