Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-28 19:01:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

Proper onClick types and give <a> the callback

Browse Source
This commit is contained in:
Astrid 2024-01-31 22:22:07 +01:00
parent 884a429a7c
commit a562cbeb25
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/buttons/Button.tsx
View File

@ -7,7 +7,9 @@ import { Spinner } from "@/components/layout/Spinner";
interface Props { interface Props {
icon?: Icons; icon?: Icons;
onClick?: () => void; onClick?: (
event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>,
) => void;
children?: ReactNode; children?: ReactNode;
theme?: "white" | "purple" | "secondary" | "danger"; theme?: "white" | "purple" | "secondary" | "danger";
padding?: string; padding?: string;
@ -21,11 +23,19 @@ interface Props {
export function Button(props: Props) { export function Button(props: Props) {
const navigate = useNavigate(); const navigate = useNavigate();
const { onClick, href, loading } = props; const { onClick, href, loading } = props;
const cb = useCallback(() => { const cb = useCallback(
if (loading) return; (
if (href) navigate(href); event: React.MouseEvent<
else onClick?.(); HTMLAnchorElement | HTMLButtonElement,
}, [onClick, href, navigate, loading]); MouseEvent
>,
) => {
if (loading) return;
if (href && !onClick) navigate(href);
else onClick?.(event);
},
[onClick, href, navigate, loading],
);
let colorClasses = "bg-white hover:bg-gray-200 text-black"; let colorClasses = "bg-white hover:bg-gray-200 text-black";
if (props.theme === "purple") if (props.theme === "purple")
@ -80,6 +90,7 @@ export function Button(props: Props) {
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
download={props.download} download={props.download}
onClick={cb}
> >
{content} {content}
</a> </a>