49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import { useFocusable } from '@noriginmedia/norigin-spatial-navigation';
|
|
import { Link, navigate } from "gatsby";
|
|
|
|
|
|
const isBrowser = typeof window !== "undefined"
|
|
|
|
function CompatBtn({autoFocus, href, onClick, group, target, children, className, ...props}) {
|
|
const { ref, focused, focusSelf} = useFocusable();
|
|
|
|
useEffect(() => {
|
|
if (!autoFocus) return;
|
|
focusSelf()
|
|
}, [focusSelf])
|
|
|
|
if (onClick) href = "#!"
|
|
|
|
if (focused && ref.current) {
|
|
ref.current?.focus()
|
|
}
|
|
|
|
if (isBrowser) {
|
|
window.addEventListener("keyup", (ev) => {
|
|
if (!focused) return;
|
|
if (document.activeElement !== ref.current) return;
|
|
if (ev.key === "Enter" || ev.key === " ") {
|
|
ref.current?.click()
|
|
}
|
|
})
|
|
}
|
|
|
|
if (target !== "_blank" && !group && !onClick) {
|
|
return <Link to={href} className={`btn ${className||""}`} ref={ref} {...props}>{children}</Link>
|
|
} else if (!group && !onClick) {
|
|
return <a href={href} target="_blank" className={`btn ${className||""}`} ref={ref} {...props}>{children}</a>
|
|
} else {
|
|
return <button className={`btn ${className||""}`} ref={ref} {...props} onClick={() => {
|
|
if (onClick) {
|
|
onClick()
|
|
} else if (target === "_blank") {
|
|
window.open(href)
|
|
} else {
|
|
navigate(href)
|
|
}
|
|
}}>{children}</button>
|
|
}
|
|
}
|
|
|
|
export default CompatBtn |