ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-12-15 18:12:47 +03:00
Code Issues Packages Projects Releases Wiki Activity

autoresize comment box

Browse Source
This commit is contained in:
Isaac Visintainer 2019-07-18 15:06:10 -07:00
parent efc08504cb
commit 6e34df27e7
2 changed files with 22 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/publish/src/js/components/lib/comment-box.js
View File

@ -23,16 +23,30 @@ class PostButton extends Component {
export class CommentBox extends Component {
constructor(props){
super(props);
this.commentChange = this.commentChange.bind(this);
this.commentHeight = 54;
}
componentDidUpdate(prevProps, prevState) {
if (!prevProps.enabled && this.props.enabled) {
if (this.textarea) {
this.textarea.value = '';
if (this.commentInput) {
this.commentInput.value = '';
this.commentInput.style.height = 54;
}
}
}
commentChange(evt) {
this.commentInput.style.height = 'auto';
let newHeight = (this.commentInput.scrollHeight < 54)
? 54 : this.commentInput.scrollHeight+2;
this.commentInput.style.height = newHeight+'px';
this.commentHeight = this.commentInput.style.height;
this.props.action(evt);
}
render() {
let textClass = (this.props.enabled)
? "body-regular-400 w-100"
@ -45,12 +59,12 @@ export class CommentBox extends Component {
</div>
<div className="flex-col w-100">
<textarea className={textClass}
ref={(el) => {this.textarea = el}}
style={{resize: "none"}}
ref={(el) => {this.commentInput = el}}
style={{resize: "none", height: this.commentHeight}}
type="text"
name="commentBody"
defaultValue=''
onChange={this.props.action}
onChange={this.commentChange}
disabled={(!this.props.enabled)}>
</textarea>
<PostButton

5
apps/publish/src/js/components/lib/comment.js
View File

@ -45,8 +45,9 @@ export class Comment extends Component {
</div>
<div className="flex-col fl">
<div className="label-small-mono gray-50">
<p className="fl" style={{width: 107}}>{this.props.ship}</p>
<p className="fl">{date}</p>
<p className="fl label-small-mono"
style={{width: 107}}>{this.props.ship}</p>
<p className="fl label-small-mono">{date}</p>
</div>
<div className="cb body-regular-400">
{body}