tsf-inline-edit

1'use client';
2 
3import { InfoIcon } from 'lucide-react';
4import * as React from 'react';
5import { Field, FieldLabel } from '@/components/ui/field';
6import { Input } from '@/components/ui/input';
7import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
8import { useFieldContext } from '@/components/ui/shuip/tanstack-form/form-context';
9import { Textarea } from '@/components/ui/textarea';
10import { cn } from '@/lib/utils';
11 
12type InlineEditSize = 'sm' | 'default' | 'title';
13type InlineEditVariant = 'ghost' | 'boxed';
14type InlineEditInput = 'text' | 'textarea';
15 
16interface InlineEditProps {
17  value: string;
18  onCommit: (next: string) => Promise<string | undefined> | string | undefined;
19  input?: InlineEditInput;
20  variant?: InlineEditVariant;
21  size?: InlineEditSize;
22  placeholder?: string;
23  canEdit?: boolean;
24  children?: (api: {
25    value: string;
26    setValue: (v: string) => void;
27    commit: (next?: string) => void;
28    cancel: () => void;
29    className: string;
30    autoFocus: true;
31  }) => React.ReactNode;
32}
33 
34type State =
35  | { kind: 'reading' }
36  | { kind: 'editing'; draft: string; error?: string }
37  | { kind: 'saving'; draft: string };
38 
39const sizeClasses: Record<InlineEditSize, string> = {
40  sm: 'px-1.5 py-0.5 text-xs',
41  default: 'px-2 py-1 text-sm',
42  title: 'px-2 py-1 text-3xl font-semibold tracking-tight',
43};
44 
45const variantClasses: Record<InlineEditVariant, string> = {
46  ghost:
47    'border border-transparent bg-transparent hover:bg-muted focus-visible:bg-muted dark:bg-transparent dark:hover:bg-muted',
48  boxed: 'border border-input bg-transparent shadow-xs focus-visible:border-ring',
49};
50 
51function InlineEdit({
52  value,
53  onCommit,
54  input = 'text',
55  variant = 'ghost',
56  size = 'default',
57  placeholder = '—',
58  canEdit = true,
59  children,
60}: InlineEditProps) {
61  const [state, setState] = React.useState<State>({ kind: 'reading' });
62  const errorId = React.useId();
63 
64  const fieldClassName = cn(
65    'w-full rounded-md text-left outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50',
66    sizeClasses[size],
67    variantClasses[variant],
68  );
69 
70  const startEdit = () => {
71    if (canEdit) setState({ kind: 'editing', draft: value });
72  };
73 
74  const cancel = () => setState({ kind: 'reading' });
75 
76  const setDraft = (draft: string) => setState((s) => (s.kind === 'editing' ? { kind: 'editing', draft } : s));
77 
78  const commit = async (override?: string) => {
79    if (state.kind !== 'editing') return;
80// … truncated