40 lines
866 B
TypeScript
40 lines
866 B
TypeScript
import { useEffect, useState } from "react";
|
|
import { useDebouncedCallback } from "use-debounce";
|
|
import { autoGrowTextArea } from "../utils";
|
|
import { useAppConfig } from "../store";
|
|
|
|
export default function useRows({
|
|
inputRef,
|
|
}: {
|
|
inputRef: React.RefObject<HTMLTextAreaElement>;
|
|
}) {
|
|
const [inputRows, setInputRows] = useState(2);
|
|
const config = useAppConfig();
|
|
const { isMobileScreen } = config;
|
|
|
|
const measure = useDebouncedCallback(
|
|
() => {
|
|
const rows = inputRef.current ? autoGrowTextArea(inputRef.current) : 1;
|
|
const inputRows = Math.min(
|
|
20,
|
|
Math.max(2 + (isMobileScreen ? -1 : 1), rows),
|
|
);
|
|
setInputRows(inputRows);
|
|
},
|
|
100,
|
|
{
|
|
leading: true,
|
|
trailing: true,
|
|
},
|
|
);
|
|
|
|
useEffect(() => {
|
|
measure();
|
|
}, [isMobileScreen]);
|
|
|
|
return {
|
|
inputRows,
|
|
measure,
|
|
};
|
|
}
|