2016-11-12 14:33:21 +01:00
import CharacterCounter from './character_counter' ;
import Button from '../../../components/button' ;
import PureRenderMixin from 'react-addons-pure-render-mixin' ;
2016-08-31 22:58:10 +02:00
import ImmutablePropTypes from 'react-immutable-proptypes' ;
2016-11-12 14:33:21 +01:00
import ReplyIndicator from './reply_indicator' ;
import UploadButton from './upload_button' ;
2016-12-14 18:21:31 +01:00
import AutosuggestTextarea from '../../../components/autosuggest_textarea' ;
2016-11-12 14:33:21 +01:00
import AutosuggestAccountContainer from '../../compose/containers/autosuggest_account_container' ;
2016-11-13 13:13:36 +01:00
import { debounce } from 'react-decoration' ;
2016-11-13 19:08:52 +01:00
import UploadButtonContainer from '../containers/upload_button_container' ;
2016-11-23 22:57:57 +01:00
import { defineMessages , injectIntl , FormattedMessage } from 'react-intl' ;
2016-11-23 18:53:23 +01:00
import Toggle from 'react-toggle' ;
2016-11-18 15:36:16 +01:00
const messages = defineMessages ( {
placeholder : { id : 'compose_form.placeholder' , defaultMessage : 'What is on your mind?' } ,
publish : { id : 'compose_form.publish' , defaultMessage : 'Publish' }
} ) ;
2016-10-30 18:13:05 +01: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-11-12 14:33:21 +01:00
suggestion _token : React . PropTypes . string ,
2016-12-14 18:21:31 +01:00
suggestions : ImmutablePropTypes . list ,
2016-11-23 18:53:23 +01:00
sensitive : React . PropTypes . bool ,
2016-11-30 21:32:11 +01:00
unlisted : React . PropTypes . bool ,
2016-08-31 22:58:10 +02:00
is _submitting : React . PropTypes . bool ,
2016-09-27 17:02:30 +02:00
is _uploading : React . PropTypes . bool ,
2016-08-31 22:58:10 +02:00
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 ,
2016-11-12 14:33:21 +01:00
onCancelReply : React . PropTypes . func . isRequired ,
onClearSuggestions : React . PropTypes . func . isRequired ,
onFetchSuggestions : React . PropTypes . func . isRequired ,
2016-11-23 18:53:23 +01:00
onSuggestionSelected : React . PropTypes . func . isRequired ,
2016-11-30 21:32:11 +01:00
onChangeSensitivity : React . PropTypes . func . isRequired ,
onChangeVisibility : 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 ) {
2016-12-11 23:54:32 +01:00
if ( e . keyCode === 13 && ( e . ctrlKey || e . metaKey ) ) {
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
} ,
2016-10-30 18:13:05 +01:00
onSuggestionsClearRequested ( ) {
this . props . onClearSuggestions ( ) ;
} ,
2016-11-13 13:13:36 +01:00
@ debounce ( 500 )
2016-12-14 18:21:31 +01:00
onSuggestionsFetchRequested ( token ) {
this . props . onFetchSuggestions ( token ) ;
2016-10-30 18:13:05 +01:00
} ,
2016-12-14 18:21:31 +01:00
onSuggestionSelected ( tokenStart , token , value ) {
this . props . onSuggestionSelected ( tokenStart , token , value ) ;
2016-11-12 14:33:21 +01:00
} ,
2016-11-23 18:53:23 +01:00
handleChangeSensitivity ( e ) {
this . props . onChangeSensitivity ( e . target . checked ) ;
} ,
2016-11-30 21:32:11 +01:00
handleChangeVisibility ( e ) {
this . props . onChangeVisibility ( e . target . checked ) ;
} ,
2016-12-14 18:21:31 +01:00
componentDidUpdate ( prevProps ) {
if ( prevProps . in _reply _to !== this . props . in _reply _to ) {
this . autosuggestTextarea . textarea . focus ( ) ;
}
} ,
setAutosuggestTextarea ( c ) {
this . autosuggestTextarea = c ;
} ,
2016-08-25 19:52:55 +02:00
render ( ) {
2016-11-16 17:20:52 +01:00
const { intl } = this . props ;
2016-09-27 17:02:30 +02:00
let replyArea = '' ;
const disabled = this . props . is _submitting || this . props . is _uploading ;
2016-08-31 22:58:10 +02:00
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-12-14 18:21:31 +01:00
< AutosuggestTextarea
ref = { this . setAutosuggestTextarea }
placeholder = { intl . formatMessage ( messages . placeholder ) }
disabled = { disabled }
value = { this . props . text }
onChange = { this . handleChange }
2016-10-30 18:13:05 +01:00
suggestions = { this . props . suggestions }
2016-12-14 18:38:28 +01:00
onKeyUp = { this . handleKeyUp }
2016-10-30 18:13:05 +01:00
onSuggestionsFetchRequested = { this . onSuggestionsFetchRequested }
onSuggestionsClearRequested = { this . onSuggestionsClearRequested }
onSuggestionSelected = { this . onSuggestionSelected }
/ >
2016-08-25 19:52:55 +02:00
< div style = { { marginTop : '10px' , overflow : 'hidden' } } >
2016-11-18 15:36:16 +01:00
< div style = { { float : 'right' } } > < Button text = { intl . formatMessage ( messages . publish ) } onClick = { this . handleSubmit } disabled = { disabled } / > < / div >
2016-09-25 15:26:56 +02:00
< div style = { { float : 'right' , marginRight : '16px' , lineHeight : '36px' } } > < CharacterCounter max = { 500 } text = { this . props . text } / > < / div >
2016-11-13 19:08:52 +01:00
< UploadButtonContainer style = { { paddingTop : '4px' } } / >
2016-08-25 19:52:55 +02:00
< / div >
2016-11-23 18:53:23 +01:00
2016-11-30 21:32:11 +01:00
< label style = { { display : 'block' , lineHeight : '24px' , verticalAlign : 'middle' , marginTop : '10px' , borderTop : '1px solid #282c37' , paddingTop : '10px' } } >
< Toggle checked = { this . props . unlisted } onChange = { this . handleChangeVisibility } / >
2016-12-01 18:19:58 +01:00
< span style = { { display : 'inline-block' , verticalAlign : 'middle' , marginBottom : '14px' , marginLeft : '8px' , color : '#9baec8' } } > < FormattedMessage id = 'compose_form.unlisted' defaultMessage = 'Do not show on public timeline' / > < / span >
2016-11-30 21:32:11 +01:00
< / label >
< label style = { { display : 'block' , lineHeight : '24px' , verticalAlign : 'middle' } } >
2016-11-23 18:53:23 +01:00
< Toggle checked = { this . props . sensitive } onChange = { this . handleChangeSensitivity } / >
2016-11-23 22:57:57 +01:00
< span style = { { display : 'inline-block' , verticalAlign : 'middle' , marginBottom : '14px' , marginLeft : '8px' , color : '#9baec8' } } > < FormattedMessage id = 'compose_form.sensitive' defaultMessage = 'Mark content as sensitive' / > < / span >
2016-11-23 18:53:23 +01:00
< / label >
2016-08-25 19:52:55 +02:00
< / div >
) ;
}
} ) ;
2016-11-16 17:20:52 +01:00
export default injectIntl ( ComposeForm ) ;