forked from rDrama/rDrama
Calculate correct position of bottom input
parent
6f02738eb5
commit
c5c11a09ce
|
@ -1,12 +1,13 @@
|
|||
{
|
||||
"name": "chat",
|
||||
"version": "0.1.3",
|
||||
"version": "0.1.4",
|
||||
"main": "./src/index.tsx",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/humanize-duration": "^3.27.1",
|
||||
"@types/lodash.clonedeep": "^4.5.7",
|
||||
"@types/lodash.debounce": "^4.0.7",
|
||||
"@types/lodash.throttle": "^4.1.7",
|
||||
"@types/lozad": "^1.16.1",
|
||||
"@types/react": "^18.0.20",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
|
@ -18,6 +19,7 @@
|
|||
"humanize-duration": "^3.27.3",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"lodash.debounce": "^4.0.8",
|
||||
"lodash.throttle": "^4.1.1",
|
||||
"lozad": "^1.16.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dnd": "^16.0.1",
|
||||
|
|
|
@ -51,6 +51,7 @@ body {
|
|||
position: relative;
|
||||
flex: 3;
|
||||
height: 62vh;
|
||||
height: calc(var(--vh, 1vh) * 75);
|
||||
max-height: 1000px;
|
||||
overflow: auto;
|
||||
-ms-overflow-style: none;
|
||||
|
|
|
@ -2,6 +2,7 @@ import React, { useEffect, useRef } from "react";
|
|||
import { DndProvider, useDrop } from "react-dnd";
|
||||
import { HTML5Backend } from "react-dnd-html5-backend";
|
||||
import cx from "classnames";
|
||||
import throttle from "lodash.throttle";
|
||||
import {
|
||||
ChatHeading,
|
||||
ChatMessageList,
|
||||
|
@ -14,6 +15,7 @@ import { ChatProvider, DrawerProvider, useChat, useDrawer } from "./hooks";
|
|||
import "./App.css";
|
||||
|
||||
const SCROLL_CANCEL_THRESHOLD = 500;
|
||||
const WINDOW_RESIZE_THROTTLE_WAIT = 250;
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
|
@ -36,6 +38,26 @@ function AppInner() {
|
|||
const initiallyScrolledDown = useRef(false);
|
||||
const { messages, quote } = useChat();
|
||||
|
||||
// See: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
||||
useEffect(() => {
|
||||
const updateViewportHeightUnit = () => {
|
||||
const vh = window.innerHeight * 0.01;
|
||||
document.documentElement.style.setProperty("--vh", `${vh}px`);
|
||||
};
|
||||
const throttledResizeHandler = throttle(
|
||||
updateViewportHeightUnit,
|
||||
WINDOW_RESIZE_THROTTLE_WAIT
|
||||
);
|
||||
|
||||
throttledResizeHandler();
|
||||
|
||||
window.addEventListener("resize", throttledResizeHandler);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("resize", throttledResizeHandler);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (messages.length > 0) {
|
||||
if (initiallyScrolledDown.current) {
|
||||
|
|
|
@ -53,6 +53,13 @@
|
|||
dependencies:
|
||||
"@types/lodash" "*"
|
||||
|
||||
"@types/lodash.throttle@^4.1.7":
|
||||
version "4.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash.throttle/-/lodash.throttle-4.1.7.tgz#4ef379eb4f778068022310ef166625f420b6ba58"
|
||||
integrity sha512-znwGDpjCHQ4FpLLx19w4OXDqq8+OvREa05H89obtSyXyOFKL3dDjCslsmfBz0T2FU8dmf5Wx1QvogbINiGIu9g==
|
||||
dependencies:
|
||||
"@types/lodash" "*"
|
||||
|
||||
"@types/lodash@*":
|
||||
version "4.14.185"
|
||||
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.185.tgz#c9843f5a40703a8f5edfd53358a58ae729816908"
|
||||
|
@ -407,6 +414,11 @@ lodash.debounce@^4.0.8:
|
|||
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||
integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
|
||||
|
||||
lodash.throttle@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
|
||||
integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
|
||||
|
||||
lodash@^4.17.21:
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
|
|
Loading…
Reference in New Issue