gitscope
/
← marzneshin / dashboard/src/common/components/form-fields/clearable-text.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/common/components/form-fields/clearable-text.tsx · master
Source
1 4056c66 Dawsh 1y ago import {
2 4056c66 Dawsh 1y ago Button,
3 4056c66 Dawsh 1y ago FormControl,
4 4056c66 Dawsh 1y ago FormField,
5 4056c66 Dawsh 1y ago FormItem,
6 4056c66 Dawsh 1y ago FormLabel,
7 4056c66 Dawsh 1y ago FormMessage,
8 4056c66 Dawsh 1y ago Input,
9 4056c66 Dawsh 1y ago } from "@marzneshin/common/components";
10 4056c66 Dawsh 1y ago import { useFormContext } from "react-hook-form";
11 4056c66 Dawsh 1y ago import { X } from "lucide-react";
12 4056c66 Dawsh 1y ago
13 4056c66 Dawsh 1y ago export const ClearableTextField = ({
14 4056c66 Dawsh 1y ago name,
15 4056c66 Dawsh 1y ago label,
16 4056c66 Dawsh 1y ago placeholder = "",
17 4056c66 Dawsh 1y ago }: {
18 4056c66 Dawsh 1y ago name: string;
19 4056c66 Dawsh 1y ago label: string;
20 4056c66 Dawsh 1y ago placeholder?: string;
21 4056c66 Dawsh 1y ago }) => {
22 4056c66 Dawsh 1y ago const form = useFormContext();
23 4056c66 Dawsh 1y ago const value = form.watch(name);
24 4056c66 Dawsh 1y ago
25 4056c66 Dawsh 1y ago const handleNullify = () => {
26 4056c66 Dawsh 1y ago form.setValue(name, null);
27 4056c66 Dawsh 1y ago };
28 4056c66 Dawsh 1y ago
29 4056c66 Dawsh 1y ago const handleRestore = () => {
30 4056c66 Dawsh 1y ago form.setValue(name, "");
31 4056c66 Dawsh 1y ago };
32 4056c66 Dawsh 1y ago
33 4056c66 Dawsh 1y ago return (
34 4056c66 Dawsh 1y ago <FormField
35 4056c66 Dawsh 1y ago control={form.control}
36 4056c66 Dawsh 1y ago name={name}
37 4056c66 Dawsh 1y ago render={({ field }) => (
38 4056c66 Dawsh 1y ago <FormItem className="w-full">
39 4056c66 Dawsh 1y ago <FormLabel>{label}</FormLabel>
40 4056c66 Dawsh 1y ago <FormControl>
41 4056c66 Dawsh 1y ago <div className="relative w-full flex items-center gap-2">
42 4056c66 Dawsh 1y ago {value === null ? (
43 4056c66 Dawsh 1y ago <div className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium">
44 4056c66 Dawsh 1y ago null
45 4056c66 Dawsh 1y ago </div>
46 4056c66 Dawsh 1y ago ) : (
47 4056c66 Dawsh 1y ago <Input placeholder={placeholder} {...field} />
48 4056c66 Dawsh 1y ago )}
49 4056c66 Dawsh 1y ago <Button
50 4056c66 Dawsh 1y ago type="button"
51 4056c66 Dawsh 1y ago aria-label="clear"
52 4056c66 Dawsh 1y ago variant="ghost"
53 4056c66 Dawsh 1y ago size="icon"
54 4056c66 Dawsh 1y ago onClick={
55 4056c66 Dawsh 1y ago value === null
56 4056c66 Dawsh 1y ago ? handleRestore
57 4056c66 Dawsh 1y ago : handleNullify
58 4056c66 Dawsh 1y ago }
59 4056c66 Dawsh 1y ago className="absolute hover:fg-destructive-background right-1 top-1/2 -translate-y-1/2 h-7"
60 4056c66 Dawsh 1y ago >
61 4056c66 Dawsh 1y ago <X className="h-4 w-4 " />
62 4056c66 Dawsh 1y ago <span className="sr-only">Clear</span>
63 4056c66 Dawsh 1y ago </Button>
64 4056c66 Dawsh 1y ago </div>
65 4056c66 Dawsh 1y ago </FormControl>
66 4056c66 Dawsh 1y ago <FormMessage />
67 4056c66 Dawsh 1y ago </FormItem>
68 4056c66 Dawsh 1y ago )}
69 4056c66 Dawsh 1y ago />
70 4056c66 Dawsh 1y ago );
71 4056c66 Dawsh 1y ago };