2023-02-10 08:39:46 +03:00
|
|
|
import { forwardRef } from 'preact/compat';
|
2023-01-20 19:23:59 +03:00
|
|
|
import { useLocation } from 'react-router-dom';
|
|
|
|
|
|
|
|
import states from '../utils/states';
|
|
|
|
|
|
|
|
/* NOTES
|
|
|
|
=====
|
|
|
|
Initially this uses <NavLink> from react-router-dom, but it doesn't work:
|
|
|
|
1. It interferes with nested <a> inside <a> and it's difficult to preventDefault/stopPropagation from the nested <a>
|
|
|
|
2. isActive doesn't work properly with the weird routes that's set up in this app, due to the faux "location" to make the modals work and prevent unmounting
|
|
|
|
3. Not using <Link state/> because it modifies history.state that *persists* across page reloads. I don't need that, so using valtio's states instead.
|
|
|
|
*/
|
|
|
|
|
2023-02-10 08:39:46 +03:00
|
|
|
const Link = forwardRef((props, ref) => {
|
2023-01-21 08:21:57 +03:00
|
|
|
let routerLocation;
|
|
|
|
try {
|
|
|
|
routerLocation = useLocation();
|
|
|
|
} catch (e) {}
|
2023-01-20 19:23:59 +03:00
|
|
|
let hash = (location.hash || '').replace(/^#/, '').trim();
|
|
|
|
if (hash === '') hash = '/';
|
2023-01-29 10:19:26 +03:00
|
|
|
const { to, ...restProps } = props;
|
2023-04-29 15:59:51 +03:00
|
|
|
const isActive = decodeURIComponent(hash) === to;
|
2023-01-20 19:23:59 +03:00
|
|
|
return (
|
|
|
|
<a
|
2023-02-10 08:39:46 +03:00
|
|
|
ref={ref}
|
2023-01-29 10:19:26 +03:00
|
|
|
href={`#${to}`}
|
|
|
|
{...restProps}
|
2023-01-20 19:23:59 +03:00
|
|
|
class={`${props.class || ''} ${isActive ? 'is-active' : ''}`}
|
2023-01-21 18:43:39 +03:00
|
|
|
onClick={(e) => {
|
2023-01-21 08:21:57 +03:00
|
|
|
if (routerLocation) states.prevLocation = routerLocation;
|
2023-01-21 18:43:39 +03:00
|
|
|
props.onClick?.(e);
|
2023-01-20 19:23:59 +03:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
);
|
2023-02-10 08:39:46 +03:00
|
|
|
});
|
2023-01-20 19:23:59 +03:00
|
|
|
|
|
|
|
export default Link;
|