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 | 11196x 11196x 11196x 50x 50x 50x 50x 11196x 50x | import { Pencil } from "lucide-react";
import { useState } from "react";
import { cn } from "@/lib/utils";
import {
AccessControlledProps,
useAccessControlledState,
} from "./accessControlled";
import DebouncedInput from "./debounced-input";
import { ToolTipCover } from "./tooltip";
export type AutoSelectInputProps = {
value: string;
onUpdateValue: (value: string) => void;
textSize?: string;
width?: string;
textColor?: string;
} & AccessControlledProps;
export function AutoSelectInput({
value,
width,
onUpdateValue,
textSize = "",
textColor,
writeAccessOnly = true,
hideIfNoAccess = false,
...props
}: AutoSelectInputProps) {
const [isEditing, setIsEditing] = useState(false);
const { lacksWriteAccess, shouldHide } = useAccessControlledState({
writeAccessOnly,
hideIfNoAccess,
});
Iif (shouldHide) return null;
const handleStartEditing = () => {
Iif (lacksWriteAccess) return;
setIsEditing(true);
};
const handleFinishEditing = (update: string) => {
setIsEditing(false);
onUpdateValue(update);
};
return (
<>
{isEditing ? (
<DebouncedInput
autoSelect
className={cn("text-muted-foreground font-medium w-full", textSize)}
value={value}
endIcon={Pencil}
onUpdate={handleFinishEditing}
autoFocus
onBlur={() => setIsEditing(false)}
writeAccessOnly={writeAccessOnly}
hideIfNoAccess={hideIfNoAccess}
{...props}
/>
) : (
<ToolTipCover content="Click to edit name" asChild>
<button
onClick={handleStartEditing}
disabled={lacksWriteAccess}
className={cn(
"hover:text-foreground-muted flex items-center gap-2 group w-full truncate disabled:cursor-not-allowed disabled:opacity-70",
width,
)}
{...props}
>
<span
className={cn(
"truncate strong",
textSize,
textColor || "text-foreground",
)}
>
{value}
</span>{" "}
{/* Apply truncate here */}
<Pencil className="h-4 w-4 opacity-0 group-hover:opacity-100 transition-opacity" />
</button>
</ToolTipCover>
)}
</>
);
}
|