85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
|
|
import { useContext, useEffect, useState } from "react";
|
|
import { PopUpContext } from "../../contexts/popUpContext";
|
|
import { TextAreaComponentType } from "../../types/components";
|
|
import GenericModal from "../../modals/genericModal";
|
|
import { TypeModal } from "../../utils";
|
|
import { INPUT_STYLE } from "../../constants";
|
|
export default function TextAreaComponent({
|
|
value,
|
|
onChange,
|
|
disabled,
|
|
editNode = false,
|
|
}: TextAreaComponentType) {
|
|
const [myValue, setMyValue] = useState(value);
|
|
const { openPopUp, closePopUp } = useContext(PopUpContext);
|
|
|
|
useEffect(() => {
|
|
if (disabled) {
|
|
setMyValue("");
|
|
onChange("");
|
|
}
|
|
}, [disabled, onChange]);
|
|
|
|
useEffect(() => {
|
|
setMyValue(value);
|
|
}, [closePopUp]);
|
|
|
|
return (
|
|
<div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
|
|
<div
|
|
className={
|
|
editNode
|
|
? "w-full flex items-center"
|
|
: "w-full flex items-center gap-3"
|
|
}
|
|
>
|
|
<span
|
|
onClick={() => {
|
|
openPopUp(
|
|
<GenericModal
|
|
type={TypeModal.TEXT}
|
|
buttonText="Finishing Editing"
|
|
modalTitle="Edit Text"
|
|
value={myValue}
|
|
setValue={(t: string) => {
|
|
setMyValue(t);
|
|
onChange(t);
|
|
}}
|
|
/>
|
|
);
|
|
}}
|
|
className={
|
|
editNode
|
|
? "truncate cursor-pointer placeholder:text-center text-ring border-1 block w-full pt-0.5 pb-0.5 form-input dark:bg-foreground dark:text-medium-low-gray dark:border-muted-foreground rounded-md border-ring shadow-sm sm:text-sm" +
|
|
INPUT_STYLE
|
|
: "truncate block w-full text-ring dark:text-muted px-3 py-2 rounded-md border border-ring dark:border-foreground shadow-sm sm:text-sm" +
|
|
(disabled ? " bg-input" : "")
|
|
}
|
|
>
|
|
{myValue !== "" ? myValue : "Type something..."}
|
|
</span>
|
|
<button
|
|
onClick={() => {
|
|
openPopUp(
|
|
<GenericModal
|
|
type={TypeModal.TEXT}
|
|
buttonText="Finishing Editing"
|
|
modalTitle="Edit Text"
|
|
value={myValue}
|
|
setValue={(t: string) => {
|
|
setMyValue(t);
|
|
onChange(t);
|
|
}}
|
|
/>
|
|
);
|
|
}}
|
|
>
|
|
{!editNode && (
|
|
<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-ring dark:text-medium-low-gray" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|