Skip to content

Commit 3832f66

Browse files
NicolasChambonNicolasChambon
authored
Merge pull request #121 from WildCodeSchool/dev
deploy
2 parents f84f4bf + 249b642 commit 3832f66

File tree

3 files changed

+154
-113
lines changed

3 files changed

+154
-113
lines changed

‎frontend/src/components/ui/calendar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export function Calendar(props: CalendarProps) {
1616
)
1717
}
1818

19-
export function CalendarPopover(props: CalendarProps & { triggerLabel?: string }) {
19+
export function CalendarPopover(props: CalendarProps & { triggerLabel?: string; selected?: any }) {
2020
const [open, setOpen] = React.useState(false);
2121
// Ferme le popover si une plage complète et différente est sélectionnée
2222
React.useEffect(() => {

‎frontend/src/components/ui/command.tsx‎

Lines changed: 77 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,91 @@
11
// Utilisation pour les composants EcogesturesSelect.tsx et AddingParticipants.tsx
2-
import * as React from "react"
3-
import { cn } from "@/lib/utils"
2+
import * as React from "react";
3+
import { cn } from "@/lib/utils";
44

55
export function Command({ className, ...props }: React.ComponentProps<"div">) {
6-
return (
7-
<div
8-
className={cn(
9-
"flex flex-col overflow-hidden rounded-md bg-white text-black shadow-md border border-border",
10-
className
11-
)}
12-
{...props}
13-
/>
14-
)
6+
return (
7+
<div
8+
className={cn(
9+
"flex flex-col overflow-hidden rounded-md bg-white text-black shadow-md border border-border",
10+
className,
11+
)}
12+
{...props}
13+
/>
14+
);
1515
}
1616

17-
export function CommandInput({ className, ...props }: React.ComponentProps<"input">) {
18-
return (
19-
<input
20-
className={cn(
21-
"w-full border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground",
22-
className
23-
)}
24-
{...props}
25-
/>
26-
)
17+
export function CommandInput({
18+
className,
19+
...props
20+
}: React.ComponentProps<"input">) {
21+
return (
22+
<input
23+
className={cn(
24+
"w-full border-0 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground",
25+
className,
26+
)}
27+
{...props}
28+
/>
29+
);
2730
}
2831

29-
export function CommandList({ className, ...props }: React.ComponentProps<"ul">) {
30-
return (
31-
<ul className={cn("max-h-60 overflow-y-auto", className)} {...props} />
32-
)
32+
export function CommandList({
33+
className,
34+
...props
35+
}: React.ComponentProps<"ul">) {
36+
return (
37+
<ul className={cn("max-h-60 overflow-y-auto", className)} {...props} />
38+
);
3339
}
3440

35-
export function CommandEmpty({ className, ...props }: React.ComponentProps<"div">) {
36-
return (
37-
<div className={cn("py-6 text-center text-sm text-muted-foreground", className)} {...props} />
38-
)
41+
export function CommandEmpty({
42+
className,
43+
...props
44+
}: React.ComponentProps<"div">) {
45+
return (
46+
<div
47+
className={cn(
48+
"py-6 text-center text-sm text-muted-foreground",
49+
className,
50+
)}
51+
{...props}
52+
/>
53+
);
3954
}
4055

41-
export function CommandGroup({ className, ...props }: React.ComponentProps<"div">) {
42-
return (
43-
<div className={cn("py-2 px-1", className)} {...props} />
44-
)
56+
export function CommandGroup({
57+
className,
58+
...props
59+
}: React.ComponentProps<"div">) {
60+
return <div className={cn("py-2 px-1", className)} {...props} />;
4561
}
4662

47-
export function CommandItem({ className, onSelect, onClick, ...props }: React.ComponentProps<"div"> & { onSelect?: (value: string | undefined) => void }) {
48-
return (
49-
<div
50-
className={cn(
51-
"flex cursor-pointer select-none items-center px-3 py-2 text-sm text-black hover:bg-gray-100 aria-selected:bg-gray-200 aria-selected:text-black",
52-
className
53-
)}
54-
role="option"
55-
tabIndex={0}
56-
onMouseDown={(e) => {
57-
e.preventDefault();
58-
if (onSelect) {
59-
onSelect(props.value);
60-
} else if (onClick) {
61-
onClick(e);
62-
}
63-
}}
64-
{...props}
65-
/>
66-
)
63+
export function CommandItem({
64+
className,
65+
onSelect,
66+
onClick,
67+
...props
68+
}: Omit<React.ComponentProps<"div">, "onSelect"> & {
69+
onSelect?: (value: string | undefined) => void;
70+
value?: string;
71+
}) {
72+
return (
73+
<div
74+
className={cn(
75+
"flex cursor-pointer select-none items-center px-3 py-2 text-sm text-black hover:bg-gray-100 aria-selected:bg-gray-200 aria-selected:text-black",
76+
className,
77+
)}
78+
role="option"
79+
tabIndex={0}
80+
onMouseDown={(e) => {
81+
e.preventDefault();
82+
if (onSelect) {
83+
onSelect(props.value);
84+
} else if (onClick) {
85+
onClick(e);
86+
}
87+
}}
88+
{...props}
89+
/>
90+
);
6791
}

‎frontend/src/components/ui/popover.tsx‎

Lines changed: 76 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,90 @@ import * as React from "react";
22
import { cn } from "@/lib/utils";
33

44
type PopoverContextType = {
5-
open: boolean;
6-
setOpen: (open: boolean) => void;
5+
open: boolean;
6+
setOpen: (open: boolean) => void;
77
};
88

9-
const PopoverContext = React.createContext<PopoverContextType | undefined>(undefined);
9+
const PopoverContext = React.createContext<PopoverContextType | undefined>(
10+
undefined,
11+
);
1012

1113
type PopoverProps = React.ComponentProps<"div"> & {
12-
open?: boolean;
13-
onOpenChange?: (open: boolean) => void;
14+
open?: boolean;
15+
onOpenChange?: (open: boolean) => void;
1416
};
1517

16-
export function Popover({ className, open, onOpenChange, children, ...props }: PopoverProps) {
17-
const [isOpen, setIsOpen] = React.useState(open ?? false);
18-
React.useEffect(() => {
19-
if (typeof open === "boolean") setIsOpen(open);
20-
}, [open]);
21-
const handleOpenChange = (next: boolean) => {
22-
setIsOpen(next);
23-
onOpenChange?.(next);
24-
};
25-
return (
26-
<PopoverContext.Provider value={{ open: isOpen, setOpen: handleOpenChange }}>
27-
<div className={cn("relative", className)} {...props}>
28-
{children}
29-
</div>
30-
</PopoverContext.Provider>
31-
);
18+
export function Popover({
19+
className,
20+
open,
21+
onOpenChange,
22+
children,
23+
...props
24+
}: PopoverProps) {
25+
const [isOpen, setIsOpen] = React.useState(open ?? false);
26+
React.useEffect(() => {
27+
if (typeof open === "boolean") setIsOpen(open);
28+
}, [open]);
29+
const handleOpenChange = (next: boolean) => {
30+
setIsOpen(next);
31+
onOpenChange?.(next);
32+
};
33+
return (
34+
<PopoverContext.Provider
35+
value={{ open: isOpen, setOpen: handleOpenChange }}
36+
>
37+
<div className={cn("relative", className)} {...props}>
38+
{children}
39+
</div>
40+
</PopoverContext.Provider>
41+
);
3242
}
3343

34-
export function PopoverTrigger({ asChild, ...props }: { asChild?: boolean } & React.ComponentProps<"button">) {
35-
const context = React.useContext(PopoverContext);
36-
if (!context) throw new Error("PopoverTrigger must be used within a Popover");
37-
const { open, setOpen } = context;
38-
if (asChild && React.isValidElement(props.children)) {
39-
// Inject onClick to child
40-
return React.cloneElement(props.children as React.ReactElement, {
41-
onClick: (e: React.MouseEvent) => {
42-
props.children.props.onClick?.(e);
43-
setOpen(!open);
44-
},
45-
'aria-expanded': open,
46-
});
47-
}
48-
return (
49-
<button
50-
{...props}
51-
onClick={(e) => {
52-
props.onClick?.(e);
53-
setOpen(!open);
54-
}}
55-
aria-expanded={open}
56-
/>
57-
);
44+
export function PopoverTrigger({
45+
asChild,
46+
...props
47+
}: { asChild?: boolean } & React.ComponentProps<"button">) {
48+
const context = React.useContext(PopoverContext);
49+
if (!context) throw new Error("PopoverTrigger must be used within a Popover");
50+
const { open, setOpen } = context;
51+
if (asChild && React.isValidElement(props.children)) {
52+
// Inject onClick to child
53+
const childProps = (props.children as React.ReactElement<any>).props;
54+
return React.cloneElement(props.children as React.ReactElement<any>, {
55+
onClick: (e: React.MouseEvent) => {
56+
childProps?.onClick?.(e);
57+
setOpen(!open);
58+
},
59+
"aria-expanded": open,
60+
});
61+
}
62+
return (
63+
<button
64+
{...props}
65+
onClick={(e) => {
66+
props.onClick?.(e);
67+
setOpen(!open);
68+
}}
69+
aria-expanded={open}
70+
/>
71+
);
5872
}
5973

60-
export function PopoverContent({ className, ...props }: React.ComponentProps<"div">) {
61-
const context = React.useContext(PopoverContext);
62-
if (!context) throw new Error("PopoverContent must be used within a Popover");
63-
const { open } = context;
64-
if (!open) return null;
65-
return (
66-
<div
67-
className={cn(
68-
"absolute z-50 mt-2 w-auto min-w-[8rem] max-w-[90vw] rounded-md border bg-white p-2 text-black shadow-md outline-none",
69-
className
70-
)}
71-
{...props}
72-
/>
73-
);
74+
export function PopoverContent({
75+
className,
76+
...props
77+
}: React.ComponentProps<"div">) {
78+
const context = React.useContext(PopoverContext);
79+
if (!context) throw new Error("PopoverContent must be used within a Popover");
80+
const { open } = context;
81+
if (!open) return null;
82+
return (
83+
<div
84+
className={cn(
85+
"absolute z-50 mt-2 w-auto min-w-[8rem] max-w-[90vw] rounded-md border bg-white p-2 text-black shadow-md outline-none",
86+
className,
87+
)}
88+
{...props}
89+
/>
90+
);
7491
}

0 commit comments

Comments
 (0)