Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 3x 3x 3x 3x 3x 3x 3x | import {
NoteContentProps,
NotesContent,
} from "@features/Merchants/MerchantSidePanel/UnderwritingTasks/components/Sections";
import TaskCard from "@features/Merchants/MerchantSidePanel/UnderwritingTasks/components/TaskCard";
import GiveButton from "@shared/Button/GiveButton";
import { isEmpty } from "lodash";
import { useRef, useState } from "react";
import { useFormContext } from "react-hook-form";
interface Props
extends Omit<NoteContentProps, "inputRef" | "setIsNotesFocused"> {
title?: string;
fieldName?: string;
minHeight?: number;
maxHeight?: number;
hideActions?: boolean
}
export default function HFNotesInput({
title = "Notes",
fieldName = "notes",
minHeight = 60,
maxHeight = 248,
hideActions = false,
...rest
}: Props) {
const [isNotesFocused, setIsNotesFocused] = useState(false);
const notesRef = useRef<HTMLTextAreaElement | null>(null);
const { setValue, watch } = useFormContext();
const value = watch(fieldName);
const initialNote = useRef(value);
const handleDiscardNote = (e: React.MouseEvent) => {
e.preventDefault();
setValue(fieldName, initialNote.current, {
shouldDirty: true,
shouldTouch: true,
});
setIsNotesFocused(false);
if (notesRef?.current) {
notesRef.current.blur();
}
};
return (
<TaskCard
title={title}
onEdit={isNotesFocused ? undefined : () => notesRef?.current?.focus()}
actions={
isNotesFocused && !hideActions
? [
{
element: (
<GiveButton
label="Discard"
variant="ghost"
onMouseDown={handleDiscardNote}
disabled={isEmpty(value)}
/>
),
},
{
element: (
<GiveButton
data-testid="note-save-button"
label="Save"
variant="filled"
size="small"
onClick={() => setIsNotesFocused(false)}
disabled={isEmpty(value)}
/>
),
},
]
: undefined
}
>
<NotesContent
name={fieldName}
inputRef={notesRef}
setIsNotesFocused={setIsNotesFocused}
minHeight={minHeight}
maxHeight={maxHeight}
{...rest}
/>
</TaskCard>
);
}
|