issue #2158 - Toggle text area placeholder for New post thread expanded & collapsed.

Author: maxceem

src/components/Feed/NewPost.jsx

@@ -13,7 +13,7 @@ class NewPost extends React.Component {
   }
 
   render() {
-    const {currentUser, allMembers, titlePlaceholder, contentPlaceholder, isCreating, hasError} = this.props
+    const {currentUser, allMembers, titlePlaceholder, contentPlaceholder, isCreating, hasError, expandedTitlePlaceholder} = this.props
     let authorName = currentUser.firstName
     if (authorName && currentUser.lastName) {
       authorName += ' ' + currentUser.lastName
@@ -29,6 +29,7 @@ class NewPost extends React.Component {
       <RichTextArea
         className={composerClasses}
         titlePlaceholder={titlePlaceholder || 'Title of the post'}
+        expandedTitlePlaceholder={expandedTitlePlaceholder || titlePlaceholder || 'Title of the post'}
         contentPlaceholder={contentPlaceholder || 'New reply...'}
         onPost={this.props.onPost}
         onPostChange={this.props.onNewPostChange}
@@ -44,6 +45,7 @@ class NewPost extends React.Component {
 
 
 NewPost.propTypes = {
+  expandedTitlePlaceholder: PropTypes.string,
   currentUser: PropTypes.object.isRequired,
   allMembers: PropTypes.object.isRequired,
   onPost: PropTypes.func.isRequired,

src/components/RichTextArea/RichTextArea.jsx

@@ -254,7 +254,7 @@ class RichTextArea extends React.Component {
   render() {
     const {MentionSuggestions} = this.mentionPlugin
     const {className, avatarUrl, authorName, titlePlaceholder, contentPlaceholder, editMode, isCreating,
-      isGettingComment, disableTitle, disableContent} = this.props
+      isGettingComment, disableTitle, disableContent, expandedTitlePlaceholder} = this.props
     const {editorExpanded, editorState, titleValue, oldMDContent, currentMDContent, uploading} = this.state
     let canSubmit = (disableTitle || titleValue.trim())
         && (disableContent || editorState.getCurrentContent().hasText())
@@ -311,7 +311,7 @@ class RichTextArea extends React.Component {
               className={cn('new-post-title', {'hide-title': disableTitle})}
               type="text"
               onChange={this.onTitleChange}
-              placeholder={titlePlaceholder || 'Title of the post'}
+              placeholder={editorExpanded ? expandedTitlePlaceholder : titlePlaceholder || 'Title of the post'}
             />
             <div className="draftjs-editor tc-textarea">
               {!disableContent && !isGettingComment &&
@@ -415,6 +415,7 @@ class RichTextArea extends React.Component {
 }
 
 RichTextArea.propTypes = {
+  expandedTitlePlaceholder: PropTypes.string,
   onPost: PropTypes.func.isRequired,
   onPostChange: PropTypes.func.isRequired,
   cancelEdit: PropTypes.func,

src/projects/detail/containers/FeedContainer.js

@@ -415,6 +415,7 @@ class FeedView extends React.Component {
                 heading="NEW STATUS POST"
                 onNewPostChange={this.onNewPostChange}
                 titlePlaceholder="Start a new discussion"
+                expandedTitlePlaceholder="Add your discussion title"
                 contentPlaceholder="Add your first post"
               />
             </MediaQuery>