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 | 105x 214x 214x 98x 8x 8x 4x 4x 15x 105x | import { Check, Pencil, X } from "lucide-react";
import * as React from "react";
import { InputProps } from "shared-types";
import { Input } from "@/components";
import { cn } from "@/utils";
interface EditableTextProps extends InputProps {
className?: string;
label: string;
value: string | number | readonly string[];
onValueChange: (value: string | number | readonly string[]) => void;
}
const EditableText = React.forwardRef<HTMLInputElement, EditableTextProps>(
// eslint-disable-next-line @typescript-eslint/no-unused-vars
({ className, label, id, value, onValueChange, onChange, ...props }, ref) => {
const [edit, setEdit] = React.useState<boolean>(false);
const [newValue, setNewValue] = React.useState<string | number | readonly string[]>(value);
return (
<div className={cn(className, "flex gap-x-4 items-center leading-[2.25]")}>
{edit ? (
<>
<Input
ref={ref}
key={id}
type="text"
value={newValue}
onChange={(event) => setNewValue(event.target.value)}
aria-label={label}
{...props}
/>
<button
type="button"
onClick={() => {
onValueChange(newValue);
setEdit(false);
}}
aria-label="Save"
>
<Check className="text-[#0071BC]" />
</button>
<button
type="button"
onClick={() => {
setNewValue(value);
setEdit(false);
}}
aria-label="Cancel"
>
<X />
</button>
</>
) : (
<>
<div ref={ref} {...props} className="text-left">
{newValue}
</div>
<button type="button" onClick={() => setEdit(true)} aria-label="Edit">
<Pencil />
</button>
</>
)}
</div>
);
},
);
EditableText.displayName = "EditableText";
export { EditableText };
|