Newer
Older
CrypticOreWallet / src / components / ConditionalLink.tsx
@Drew Lemmy Drew Lemmy on 20 Mar 2021 1 KB chore: update license information
// Copyright (c) 2020-2021 Drew Lemmy
// This file is part of KristWeb 2 under AGPL-3.0.
// Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
import { FC } from "react";

import { Link, useRouteMatch } from "react-router-dom";

interface Props {
  to: string;
  condition?: boolean;

  replace?: boolean;

  matchTo?: boolean;
  matchPath?: string;
  matchExact?: boolean;
  matchStrict?: boolean;
  matchSensitive?: boolean;
}

export const ConditionalLink: FC<Props> = ({
  to,
  condition,

  replace,

  matchTo,
  matchPath,
  matchExact,
  matchStrict,
  matchSensitive,

  children, ...props
}): JSX.Element => {
  // Disable the link if we're already on that route
  const wantsCondition = condition !== undefined;
  const wantsMatch = matchTo || !!matchPath;

  const match = useRouteMatch(wantsMatch ? {
    path: matchTo && to ? to : matchPath,
    exact: matchExact,
    strict: matchStrict,
    sensitive: matchSensitive
  } : {});

  const active = (!wantsCondition || !!condition) && (!wantsMatch || !match);

  return active && to
    ? (
      <Link
        to={to}
        replace={replace}
        {...props}
      >
        {children}
      </Link>
    )
    : (
      <a className="conditional-link-disabled" {...props}>
        {children}
      </a>
    );
};