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