forked from rDrama/rDrama
Tweak
parent
92f6454593
commit
2f45f86b7c
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "chat",
|
"name": "chat",
|
||||||
"version": "0.1.23",
|
"version": "0.1.24",
|
||||||
"main": "./src/index.tsx",
|
"main": "./src/index.tsx",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|
|
@ -142,6 +142,7 @@ function AppInner() {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<UserInput
|
<UserInput
|
||||||
|
large={focused}
|
||||||
onFocus={toggleFocus}
|
onFocus={toggleFocus}
|
||||||
onBlur={toggleFocus}
|
onBlur={toggleFocus}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -4,9 +4,20 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1100px) {
|
||||||
|
.UserInput-input__large {
|
||||||
|
min-height: 100px !important;
|
||||||
|
height: 100px !important;
|
||||||
|
max-height: 100px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.UserInput-input {
|
.UserInput-input {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-right: 2rem;
|
margin-right: 2rem;
|
||||||
|
min-height: 50px;
|
||||||
|
height: 50px;
|
||||||
|
max-height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.UserInput-emoji {
|
.UserInput-emoji {
|
||||||
|
|
|
@ -8,16 +8,18 @@ import React, {
|
||||||
useState,
|
useState,
|
||||||
useEffect,
|
useEffect,
|
||||||
} from "react";
|
} from "react";
|
||||||
|
import cx from "classnames";
|
||||||
import { useChat, useEmojis } from "../../hooks";
|
import { useChat, useEmojis } from "../../hooks";
|
||||||
import { QuickEmojis } from "../emoji";
|
import { QuickEmojis } from "../emoji";
|
||||||
import "./UserInput.css";
|
import "./UserInput.css";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
large?: boolean;
|
||||||
onFocus(): void;
|
onFocus(): void;
|
||||||
onBlur(): void;
|
onBlur(): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function UserInput({ onFocus, onBlur }: Props) {
|
export function UserInput({ large = false, onFocus, onBlur }: Props) {
|
||||||
const { draft, userToDm, sendMessage, updateDraft } = useChat();
|
const { draft, userToDm, sendMessage, updateDraft } = useChat();
|
||||||
const builtChatInput = useRef<HTMLTextAreaElement>(null);
|
const builtChatInput = useRef<HTMLTextAreaElement>(null);
|
||||||
const { visible, addQuery } = useEmojis();
|
const { visible, addQuery } = useEmojis();
|
||||||
|
@ -115,12 +117,9 @@ export function UserInput({ onFocus, onBlur }: Props) {
|
||||||
<textarea
|
<textarea
|
||||||
ref={builtChatInput}
|
ref={builtChatInput}
|
||||||
id="builtChatInput"
|
id="builtChatInput"
|
||||||
className="UserInput-input form-control"
|
className={cx("UserInput-input form-control", {
|
||||||
style={{
|
"UserInput-input__large": large
|
||||||
minHeight: 50,
|
})}
|
||||||
height: 50,
|
|
||||||
maxHeight: 50,
|
|
||||||
}}
|
|
||||||
minLength={1}
|
minLength={1}
|
||||||
maxLength={1000}
|
maxLength={1000}
|
||||||
rows={1}
|
rows={1}
|
||||||
|
|
Loading…
Reference in New Issue