82 | {bars.map((amplitude, index) => (
83 |
= 0
90 | ? "bg-gray-600"
91 | : "bg-gray-200"
92 | )}
93 | style={{
94 | height: `${clamp(amplitude * scalingFactor, 2, 32)}px`,
95 | }}
96 | />
97 | ))}
98 |
99 | );
100 | }
101 |
--------------------------------------------------------------------------------
/components/ui/AutoSizeTextArea.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 | import * as React from "react";
3 | import { cn } from "@/lib/utils";
4 | import { useImperativeHandle } from "react";
5 |
6 | interface UseAutosizeTextAreaProps {
7 | textAreaRef: React.MutableRefObject
;
8 | minHeight?: number;
9 | maxHeight?: number;
10 | triggerAutoSize: string;
11 | }
12 |
13 | export const useAutosizeTextArea = ({
14 | textAreaRef,
15 | triggerAutoSize,
16 | maxHeight = Number.MAX_SAFE_INTEGER,
17 | minHeight = 0,
18 | }: UseAutosizeTextAreaProps) => {
19 | const [init, setInit] = React.useState(true);
20 | React.useEffect(() => {
21 | // We need to reset the height momentarily to get the correct scrollHeight for the textarea
22 | const offsetBorder = 6;
23 | const textAreaElement = textAreaRef.current;
24 | if (textAreaElement) {
25 | if (init) {
26 | textAreaElement.style.minHeight = `${minHeight + offsetBorder}px`;
27 | if (maxHeight > minHeight) {
28 | textAreaElement.style.maxHeight = `${maxHeight}px`;
29 | }
30 | setInit(false);
31 | }
32 | textAreaElement.style.height = `${minHeight + offsetBorder}px`;
33 | const scrollHeight = textAreaElement.scrollHeight;
34 | // We then set the height directly, outside of the render loop
35 | // Trying to set this with state or a ref will product an incorrect value.
36 | if (scrollHeight > maxHeight) {
37 | textAreaElement.style.height = `${maxHeight}px`;
38 | } else {
39 | textAreaElement.style.height = `${scrollHeight + offsetBorder}px`;
40 | }
41 | }
42 | }, [textAreaRef.current, triggerAutoSize]);
43 | };
44 |
45 | export type AutosizeTextAreaRef = {
46 | textArea: HTMLTextAreaElement;
47 | maxHeight: number;
48 | minHeight: number;
49 | };
50 |
51 | type AutosizeTextAreaProps = {
52 | maxHeight?: number;
53 | minHeight?: number;
54 | } & React.TextareaHTMLAttributes;
55 |
56 | export const AutosizeTextarea = React.forwardRef<
57 | AutosizeTextAreaRef,
58 | AutosizeTextAreaProps
59 | >(
60 | (
61 | {
62 | maxHeight = Number.MAX_SAFE_INTEGER,
63 | minHeight = 52,
64 | className,
65 | onChange,
66 | value,
67 | ...props
68 | }: AutosizeTextAreaProps,
69 | ref: React.Ref
70 | ) => {
71 | const textAreaRef = React.useRef(null);
72 | const [triggerAutoSize, setTriggerAutoSize] = React.useState("");
73 |
74 | useAutosizeTextArea({
75 | textAreaRef,
76 | triggerAutoSize: triggerAutoSize,
77 | maxHeight,
78 | minHeight,
79 | });
80 |
81 | useImperativeHandle(ref, () => ({
82 | textArea: textAreaRef.current as HTMLTextAreaElement,
83 | focus: () => textAreaRef?.current?.focus(),
84 | maxHeight,
85 | minHeight,
86 | }));
87 |
88 | React.useEffect(() => {
89 | setTriggerAutoSize(value as string);
90 | }, [props?.defaultValue, value]);
91 |
92 | return (
93 | 
32 | 
35 | 
34 | 
3 | 
52 | 
39 |
40 |
41 | 
68 |
69 | 
73 |