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