1import {
2 Button,
3 FormControl,
4 FormField,
5 FormItem,
6 Input,
7 SortableDragHandle,
8 SortableItem,
9 Select,
10 SelectContent,
11 SelectItem,
12 SelectTrigger,
13 SelectValue,
14 DeleteConfirmation
15} from "@marzneshin/components";
16import { useDialog } from "@marzneshin/hooks";
17import {
18 Schema
19} from "./schema"
20import {
21 useFormContext,
22 FieldArrayWithId,
23 UseFieldArrayRemove
24} from "react-hook-form";
25import { DragHandleDots2Icon, TrashIcon } from "@radix-ui/react-icons"
26
27interface RuleItemProps {
28 index: number;
29 field: FieldArrayWithId<Schema, "rules">;
30 onRemove: UseFieldArrayRemove;
31}
32
33export const RuleItem = ({ index, field, onRemove: remove }: RuleItemProps) => {
34 const form = useFormContext();
35 const [deleteDialogOpen, setDeleteDialogOpen] = useDialog(false);
36
37 return (
38 <>
39 <DeleteConfirmation
40 open={deleteDialogOpen}
41 onOpenChange={setDeleteDialogOpen}
42 action={() => remove(index)}
43 />
44 <SortableItem key={field.id} value={field.id} asChild>
45 <div className="grid grid-cols-[2fr,1.3fr,0.25fr,0.25fr] items-center justify-start gap-2 my-2">
46 <FormField
47 control={form.control}
48 name={`rules.${index}.pattern`}
49 render={({ field }) => (
50 <FormItem>
51 <FormControl>
52 <div>
53 <Input className="h-8" {...field} />
54 </div>
55 </FormControl>
56 </FormItem>
57 )}
58 />
59 <FormField
60 control={form.control}
61 name={`rules.${index}.result`}
62 render={({ field }) => (
63 <FormItem>
64 <Select onValueChange={field.onChange} defaultValue={field.value}>
65 <FormControl>
66 <div>
67 <SelectTrigger className="h-8 p-2">
68 <SelectValue />
69 </SelectTrigger>
70 </div>
71 </FormControl>
72 <SelectContent>
73 <SelectItem value="xray">xray</SelectItem>
74 <SelectItem value="v2ray">v2ray</SelectItem>
75 <SelectItem value="sing-box">sing-box</SelectItem>
76 <SelectItem value="clash">clash</SelectItem>
77 <SelectItem value="clash-meta">clash-meta</SelectItem>
78 <SelectItem value="block">block</SelectItem>
79 <SelectItem value="template">template</SelectItem>
80 <SelectItem value="base64-links">base64-links</SelectItem>
81 <SelectItem value="links">links</SelectItem>
82 </SelectContent>
83 </Select>
84 </FormItem>
85 )}
86 />
87 <SortableDragHandle
88 variant="outline"
89 size="icon"
90 className="size-8 shrink-0"
91 >
92 <DragHandleDots2Icon
93 className="size-4"
94 aria-hidden="true"
95 />
96 </SortableDragHandle>
97 <Button
98 type="button"
99 variant="outline"
100 size="icon"
101 className="size-8 shrink-0"
102 onClick={() => setDeleteDialogOpen(true)}
103 >
104 <TrashIcon
105 className="size-4 text-destructive"
106 aria-hidden="true"
107 />
108 <span className="sr-only">Remove</span>
109 </Button>
110 </div>
111 </SortableItem>
112 </>
113 )
114}