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

Adds autoresize functionality to chat input

Browse Source
This commit is contained in:
~litpub 2020-02-18 22:26:05 -08:00
parent 5b1c3f3cca
commit e687b8988b
3 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/arvo/app/chat/js/index.js
View File

File diff suppressed because one or more lines are too long

2
pkg/arvo/app/chat/js/tile.js
View File

File diff suppressed because one or more lines are too long

18
pkg/interface/chat/src/js/components/lib/chat-input.js
View File

@ -8,6 +8,7 @@ import { Sigil } from '/components/lib/icons/sigil';
import { uuid, uxToHex } from '/lib/util';
const DEFAULT_INPUT_HEIGHT = 28;
export class ChatInput extends Component {
@ -16,12 +17,15 @@ export class ChatInput extends Component {
this.state = {
message: '',
textareaHeight: DEFAULT_INPUT_HEIGHT
};
this.textareaRef = React.createRef();
this.messageSubmit = this.messageSubmit.bind(this);
this.messageChange = this.messageChange.bind(this);
// Call once per frame @ 60hz
this.textareaInput = _.debounce(this.textareaInput.bind(this), 16);
// perf testing:
/*let closure = () => {
@ -80,6 +84,16 @@ export class ChatInput extends Component {
});
}
textareaInput() {
const newHeight = this.textareaRef.current.scrollHeight < DEFAULT_INPUT_HEIGHT * 8
? `${this.textareaRef.current.scrollHeight}px`
: `${DEFAULT_INPUT_HEIGHT * 8}px`
this.setState({
textareaHeight: newHeight
});
}
getLetterType(letter) {
if (letter[0] === '#') {
letter = letter.slice(1);
@ -149,6 +163,7 @@ export class ChatInput extends Component {
this.setState({
message: '',
textareaHeight: DEFAULT_INPUT_HEIGHT
});
}
@ -194,7 +209,7 @@ export class ChatInput extends Component {
<div className="fr h-100 flex bg-gray0-d" style={{ flexGrow: 1 }}>
<textarea
className={"pl3 bn bg-gray0-d white-d"}
style={{ flexGrow: 1, height: 28, paddingTop: 6, resize: "none" }}
style={{ flexGrow: 1, height: state.textareaHeight, paddingTop: 6, resize: "none" }}
autoCapitalize="none"
autoFocus={(
/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(
@ -204,6 +219,7 @@ export class ChatInput extends Component {
placeholder={props.placeholder}
value={state.message}
onChange={this.messageChange}
onInput={this.textareaInput}
/>
</div>
</div>