Skip to content

Commit

Permalink
feat(component): word count
Browse files Browse the repository at this point in the history
  • Loading branch information
@abalone0204
abalone0204 committed Jun 12, 2016
1 parent b658663 commit 2b879ce
Show file tree
Hide file tree
Showing 3 changed files with 91 additions and 40 deletions.
125 changes: 86 additions & 39 deletions front-end/app/components/CommentInput/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,19 @@ class CommentInput extends React.Component {
this.state = {
confirm: false,
showConfirm: false,
showTextArea: false,
commentType: 'normal',
commentsWordCount: 0
commentsWordCount: 500
}
}
handleChange(e) {
const {commentsWordCount} = this.state
// this.setState({commentsWordCount: })
console.log('e:', 501-this.refs.commentInput.value.length);
const {
commentsWordCount
} = this.state

this.setState({
commentsWordCount: 500 - this.refs.commentInput.value.length
})

}
render() {
Expand All @@ -28,32 +32,58 @@ class CommentInput extends React.Component {
changeUserIdentity,
sendCreateCommentRequest
} = this.props
const {showConfirm, commentsWordCount} =this.state

const {
showConfirm,
showTextArea,
commentsWordCount
} = this.state
const {commentInput} =this.refs
const handleSubmit = (type) => (e) => {
if (!!this.refs.commentInput.value) {
this.setState({showConfirm: true, commentType: type})
}
this.setState({
showTextArea: true,
commentType: type
})
}

const type = this.state.commentType
console.log('user.anonymous:', user.anonymous);

const confirmHandler = () => {
const content = this.refs.commentInput.value
const content = commentInput.value
this.refs.commentInput.value = ''
this.setState({showConfirm: false}, ()=> {
this.setState({
showConfirm: false,
showTextArea: false,
commentsWordCount: 500
}, () => {
sendCreateCommentRequest({
job_id: job.job.id,
source: '13123',
content,
anonymous: user.anonymous,
access_token: user.access_token,
type
})
})
})
}
const cancelHandler = () => {
this.setState({showConfirm: false})
this.setState({
showConfirm: false,
commentsWordCount: 500
})
}
const cancelShowTextAreaHandler = () => {
this.setState({
showTextArea: false,
commentsWordCount: 500
})
}
const showConfirmBlockHandler = () => {
if(!!this.refs.commentInput.value && commentsWordCount >= 0 ) {
this.setState({
showConfirm: true
})
}
}
return (
<div styleName='container'>
Expand All @@ -63,13 +93,18 @@ class CommentInput extends React.Component {
<FacebookLoginBtn sendLoginRequest={sendLoginRequest}/>
}
<div>
<h4>按以下按鈕推薦( <i className="fa fa-thumbs-o-up"/>)、噓文( <i className="fa fa-thumbs-o-down"/>)、或送出一般評論（<i className="fa fa-comment-o"/>）</h4>
{user.status === 'complete'?
showConfirm ?
<textarea disabled ref='commentInput' placeholder="對這份工作有什麼看法，或分享你的面試心得" styleName='comment-input' name="comment" cols="30" rows="7"></textarea>
:
<textarea onChange={this.handleChange.bind(this)} ref='commentInput' placeholder="對這份工作有什麼看法，或分享你的面試心得" styleName='comment-input' name="comment" cols="30" rows="7"></textarea>
:
<textarea disabled placeholder="登入後才能留言" styleName='comment-input' name="comment" cols="30" rows="7"></textarea>
showTextArea ?
showConfirm ?
<textarea disabled ref='commentInput' placeholder="對這份工作有什麼看法，或分享你的面試心得" styleName='comment-input' name="comment" cols="30" rows="7"></textarea>
:
<div>
<h6>還剩下 {commentsWordCount} 字可以輸入</h6>
<textarea onChange={this.handleChange.bind(this)} ref='commentInput' placeholder="對這份工作有什麼看法，或分享你的面試心得" styleName='comment-input' name="comment" cols="30" rows="7"></textarea>
</div>
: null
: null
}
{
user.status === 'complete'?
Expand All @@ -84,27 +119,39 @@ class CommentInput extends React.Component {
<div styleName='confirm-text'>確定送出嗎？</div>
</div>
:
<div styleName='btn-block'>
<div styleName='good' onClick={handleSubmit('good')}>
<i className="fa fa-thumbs-o-up"/>
showTextArea ?
<div styleName='btn-block'>
<div styleName='good' onClick={showConfirmBlockHandler}>
<i className="fa fa-check"/>
</div>
<div styleName='bad' onClick={cancelShowTextAreaHandler}>
<i className="fa fa-times"/>
</div>
<div styleName='confirm-text'>送出</div>
</div>
<div styleName='bad' onClick={handleSubmit('bad')}>
<i className="fa fa-thumbs-o-down"/>
</div>
<div styleName='normal' onClick={handleSubmit('normal')}>
<i className="fa fa-comment-o"/>
</div>
<div styleName='toggle-identity' onClick={changeUserIdentity}>
:
<div styleName='btn-block'>
<div styleName='good' onClick={handleSubmit('good')}>
<i className="fa fa-thumbs-o-up"/>
</div>
<div styleName='bad' onClick={handleSubmit('bad')}>
<i className="fa fa-thumbs-o-down"/>
</div>
<div styleName='normal' onClick={handleSubmit('normal')}>
<i className="fa fa-comment-o"/>
</div>
<div styleName='toggle-identity' onClick={changeUserIdentity}>

{
user.anonymous ?
<input type="checkbox" defaultChecked/>
:
<input type="checkbox"/>
}
<span>匿名</span>
</div>
</div>

{
user.anonymous ?
<input type="checkbox" defaultChecked/>
:
<input type="checkbox"/>
}
<span>匿名</span>
</div>
</div>


:
Expand Down Expand Up @@ -138,7 +185,7 @@ class CommentInput extends React.Component {

CommentInput.propTypes = {
job: React.PropTypes.object.isRequired,
comments:React.PropTypes.object.isRequired,
comments: React.PropTypes.object.isRequired,
user: React.PropTypes.object.isRequired,
sendLoginRequest: React.PropTypes.func.isRequired,
sendCreateCommentRequest: React.PropTypes.func.isRequired,
Expand Down
3 changes: 2 additions & 1 deletion front-end/app/components/CommentInput/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@ $background: #F6F6F6;
margin: 0 auto;
margin-bottom: 20px;
font-family: 'Open Sans', sans-serif;

min-height: 400px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
background: $background;
padding: 10px 12px;
border-bottom: 1px solid #E5E5E5;
border-radius: 4px 4px 0 0;
transition: all ease-in-out 0.3s;
}

.comment-input {
Expand Down
3 changes: 3 additions & 0 deletions front-end/app/components/FloatingBlock/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ class FloatingBlock extends React.Component {
<h2 styleName="header">Clairvoyance</h2>
<div styleName="body">
{this.props.children}
<div>
<h6>留言在最下方</h6>
</div>
<h3 styleName='toggle-display-word' onClick={handleClick}>關閉</h3>
</div>
</div>
Expand Down

0 comments on commit 2b879ce

Please sign in to comment.