gitscope
/
← marzneshin / dashboard/src/libs/dynamic-field/dynamic-field.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/libs/dynamic-field/dynamic-field.tsx · v0.7.4
Source
1 4056c66 Dawsh 1y ago import React from "react";
2 4056c66 Dawsh 1y ago import { useFormContext, Controller } from "react-hook-form";
3 4056c66 Dawsh 1y ago import { Input, Button, Separator } from "@marzneshin/common/components";
4 4056c66 Dawsh 1y ago import { ListX } from "lucide-react";
5 4056c66 Dawsh 1y ago
6 4056c66 Dawsh 1y ago interface DynamicFieldProps {
7 4056c66 Dawsh 1y ago fieldIndex: number;
8 4056c66 Dawsh 1y ago parentFieldName: string;
9 4056c66 Dawsh 1y ago onRemove: () => void;
10 4056c66 Dawsh 1y ago }
11 4056c66 Dawsh 1y ago
12 4056c66 Dawsh 1y ago export const DynamicField: React.FC<DynamicFieldProps> = ({
13 4056c66 Dawsh 1y ago fieldIndex,
14 4056c66 Dawsh 1y ago parentFieldName,
15 4056c66 Dawsh 1y ago onRemove,
16 4056c66 Dawsh 1y ago }) => {
17 4056c66 Dawsh 1y ago const { control } = useFormContext();
18 4056c66 Dawsh 1y ago
19 4056c66 Dawsh 1y ago return (
20 4056c66 Dawsh 1y ago <div className="hstack gap-2 mt-1">
21 4056c66 Dawsh 1y ago <div className="hstack gap-0 items-center border-ghost border-2 rounded-md">
22 4056c66 Dawsh 1y ago <Controller
23 4056c66 Dawsh 1y ago name={`${parentFieldName}.${fieldIndex}.name`}
24 4056c66 Dawsh 1y ago control={control}
25 4056c66 Dawsh 1y ago render={({ field }) => (
26 4056c66 Dawsh 1y ago <Input
27 4056c66 Dawsh 1y ago {...field}
28 4056c66 Dawsh 1y ago className="border-none bg-transparent w-2/5 focus-visible:ring-offset-0 focus-visible:ring-0 text-end"
29 4056c66 Dawsh 1y ago placeholder="Header Name"
30 4056c66 Dawsh 1y ago />
31 4056c66 Dawsh 1y ago )}
32 4056c66 Dawsh 1y ago />
33 4056c66 Dawsh 1y ago <Separator className="h-2/4" orientation="vertical" />
34 4056c66 Dawsh 1y ago <Controller
35 4056c66 Dawsh 1y ago name={`${parentFieldName}.${fieldIndex}.value`}
36 4056c66 Dawsh 1y ago control={control}
37 4056c66 Dawsh 1y ago render={({ field }) => (
38 4056c66 Dawsh 1y ago <Input
39 4056c66 Dawsh 1y ago {...field}
40 4056c66 Dawsh 1y ago className="border-none bg-transparent w-3/5 focus-visible:ring-0 focus-visible:ring-offset-0 text-start"
41 4056c66 Dawsh 1y ago placeholder="Header Value"
42 4056c66 Dawsh 1y ago />
43 4056c66 Dawsh 1y ago )}
44 4056c66 Dawsh 1y ago />
45 4056c66 Dawsh 1y ago </div>
46 4056c66 Dawsh 1y ago <Button
47 4056c66 Dawsh 1y ago variant="secondary-destructive"
48 4056c66 Dawsh 1y ago size="icon"
49 4056c66 Dawsh 1y ago onClick={onRemove}
50 4056c66 Dawsh 1y ago >
51 4056c66 Dawsh 1y ago <ListX />
52 4056c66 Dawsh 1y ago </Button>
53 4056c66 Dawsh 1y ago </div>
54 4056c66 Dawsh 1y ago );
55 4056c66 Dawsh 1y ago };