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