2016-08-31 22:58:10 +02:00
import CharacterCounter from './character_counter' ;
import Button from './button' ;
import PureRenderMixin from 'react-addons-pure-render-mixin' ;
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import ReplyIndicator from './reply_indicator' ;
2016-09-07 18:17:15 +02:00
import UploadButton from './upload_button' ;
2016-08-25 19:52:55 +02:00
2016-09-03 14:01:10 +02:00
const ComposeForm = React . createClass ( {
2016-08-25 19:52:55 +02:00
propTypes : {
2016-08-31 16:15:12 +02:00
text : React . PropTypes . string . isRequired ,
2016-08-31 22:58:10 +02:00
is _submitting : React . PropTypes . bool ,
in _reply _to : ImmutablePropTypes . map ,
2016-08-31 16:15:12 +02:00
onChange : React . PropTypes . func . isRequired ,
2016-08-31 22:58:10 +02:00
onSubmit : React . PropTypes . func . isRequired ,
onCancelReply : React . PropTypes . func . isRequired
2016-08-25 19:52:55 +02:00
} ,
2016-08-31 16:15:12 +02:00
mixins : [ PureRenderMixin ] ,
2016-08-25 19:52:55 +02:00
handleChange ( e ) {
2016-08-31 16:15:12 +02:00
this . props . onChange ( e . target . value ) ;
2016-08-25 19:52:55 +02:00
} ,
handleKeyUp ( e ) {
if ( e . keyCode === 13 && e . ctrlKey ) {
2016-08-31 16:15:12 +02:00
this . props . onSubmit ( ) ;
2016-08-25 19:52:55 +02:00
}
} ,
handleSubmit ( ) {
2016-08-31 16:15:12 +02:00
this . props . onSubmit ( ) ;
2016-08-25 19:52:55 +02:00
} ,
render ( ) {
2016-08-31 22:58:10 +02:00
let replyArea = '' ;
if ( this . props . in _reply _to ) {
replyArea = < ReplyIndicator status = { this . props . in _reply _to } onCancel = { this . props . onCancelReply } / > ;
}
2016-08-25 19:52:55 +02:00
return (
2016-09-07 18:17:15 +02:00
< div style = { { padding : '10px' } } >
2016-08-31 22:58:10 +02:00
{ replyArea }
2016-09-03 14:01:10 +02:00
< textarea disabled = { this . props . is _submitting } placeholder = 'What is on your mind?' value = { this . props . text } onKeyUp = { this . handleKeyUp } onChange = { this . handleChange } className = 'compose-form__textarea' style = { { display : 'block' , boxSizing : 'border-box' , width : '100%' , height : '100px' , resize : 'none' , border : 'none' , color : '#282c37' , padding : '10px' , fontFamily : 'Roboto' , fontSize : '14px' , margin : '0' } } / >
2016-08-25 19:52:55 +02:00
< div style = { { marginTop : '10px' , overflow : 'hidden' } } >
2016-08-31 23:07:46 +02:00
< div style = { { float : 'right' } } > < Button text = 'Publish' onClick = { this . handleSubmit } disabled = { this . props . is _submitting } / > < / div >
2016-08-31 16:15:12 +02:00
< div style = { { float : 'right' , marginRight : '16px' , lineHeight : '36px' } } > < CharacterCounter text = { this . props . text } / > < / div >
2016-08-25 19:52:55 +02:00
< / div >
< / div >
) ;
}
} ) ;
2016-09-03 14:01:10 +02:00
export default ComposeForm ;