@ -4,11 +4,62 @@ import PureRenderMixin from 'react-addons-pure-render-mixin';
import ImmutablePropTypes from 'react-immutable-proptypes' ;
import ReplyIndicator from './reply_indicator' ;
import UploadButton from './upload_button' ;
import Autosuggest from 'react-autosuggest' ;
const getTokenForSuggestions = ( str , caretPosition ) => {
let word ;
let left = str . slice ( 0 , caretPosition ) . search ( /\S+$/ ) ;
let right = str . slice ( caretPosition ) . search ( /\s/ ) ;
if ( right < 0 ) {
word = str . slice ( left ) ;
} else {
word = str . slice ( left , right + caretPosition ) ;
}
if ( ! word || word . trim ( ) . length < 2 || word [ 0 ] !== '@' ) {
return null ;
}
word = word . trim ( ) . toLowerCase ( ) . slice ( 1 ) ;
if ( word . length > 0 ) {
return word ;
} else {
return null ;
}
} ;
const getSuggestionValue = suggestion => suggestion ;
const renderSuggestion = suggestion => (
< span > { suggestion } < / span >
) ;
const textareaStyle = {
display : 'block' ,
boxSizing : 'border-box' ,
width : '100%' ,
height : '100px' ,
resize : 'none' ,
border : 'none' ,
color : '#282c37' ,
padding : '10px' ,
fontFamily : 'Roboto' ,
fontSize : '14px' ,
margin : '0'
} ;
const renderInputComponent = inputProps => (
< textarea { ...inputProps } placeholder = 'What is on your mind?' className = 'compose-form__textarea' style = { textareaStyle } / >
) ;
const ComposeForm = React . createClass ( {
propTypes : {
text : React . PropTypes . string . isRequired ,
suggestions : React . PropTypes . array ,
is_submitting : React . PropTypes . bool ,
is_uploading : React . PropTypes . bool ,
in_reply_to : ImmutablePropTypes . map ,
@ -35,7 +86,39 @@ const ComposeForm = React.createClass({
componentDidUpdate ( prevProps ) {
if ( prevProps . text !== this . props . text || prevProps . in_reply_to !== this . props . in_reply_to ) {
this . refs . textarea . focus ( ) ;
const node = ReactDOM . findDOMNode ( this . refs . autosuggest ) ;
const textarea = node . querySelector ( 'textarea' ) ;
if ( textarea ) {
textarea . focus ( ) ;
}
}
} ,
onSuggestionsClearRequested ( ) {
this . props . onClearSuggestions ( ) ;
} ,
onSuggestionsFetchRequested ( { value } ) {
const node = ReactDOM . findDOMNode ( this . refs . autosuggest ) ;
const textarea = node . querySelector ( 'textarea' ) ;
if ( textarea ) {
const token = getTokenForSuggestions ( value , textarea . selectionStart ) ;
if ( token !== null ) {
this . props . onFetchSuggestions ( token ) ;
}
}
} ,
onSuggestionSelected ( e , { suggestionValue , method } ) {
const node = ReactDOM . findDOMNode ( this . refs . autosuggest ) ;
const textarea = node . querySelector ( 'textarea' ) ;
if ( textarea ) {
const str = this . props . text ;
this . props . onChange ( [ str . slice ( 0 , textarea . selectionStart ) , suggestionValue , str . slice ( textarea . selectionStart ) ] . join ( '' ) ) ;
}
} ,
@ -47,11 +130,29 @@ const ComposeForm = React.createClass({
replyArea = < ReplyIndicator status = { this . props . in_reply_to } onCancel = { this . props . onCancelReply } / > ;
}
const inputProps = {
placeholder : 'What is on your mind?' ,
value : this . props . text ,
onKeyUp : this . handleKeyUp ,
onChange : this . handleChange ,
disabled : disabled
} ;
return (
< div style = { { padding : '10px' } } >
{ replyArea }
< textarea ref = 'textarea' disabled = { disabled } 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' } } / >
< Autosuggest
ref = 'autosuggest'
suggestions = { this . props . suggestions }
onSuggestionsFetchRequested = { this . onSuggestionsFetchRequested }
onSuggestionsClearRequested = { this . onSuggestionsClearRequested }
onSuggestionSelected = { this . onSuggestionSelected }
getSuggestionValue = { getSuggestionValue }
renderSuggestion = { renderSuggestion }
renderInputComponent = { renderInputComponent }
inputProps = { inputProps }
/ >
< div style = { { marginTop : '10px' , overflow : 'hidden' } } >
< div style = { { float : 'right' } } > < Button text = 'Publish' onClick = { this . handleSubmit } disabled = { disabled } / > < / div >
Eugen Rochko
7 years ago