@dr.pogodin/react-utils
Version:
Collection of generic ReactJS components and utils
107 lines (106 loc) • 3.98 kB
JavaScript
import "./style.scss";
import { jsx as _jsx } from "react/jsx-runtime";
/**
* The `<Link>` component, and almost identical `<NavLink>` component, are
* auxiliary wrappers around
* [React Router](https://github.com/ReactTraining/react-router)'s
* `<Link>` and `<NavLink>` components; they help to handle external and
* internal links in uniform manner.
*
* @param [props] Component properties.
* @param [props.className] CSS classes to apply to the link.
* @param [props.disabled] Disables the link.
* @param [props.enforceA] `true` enforces rendering of the link as
* a simple `<a>` element.
* @param [props.keepScrollPosition] If `true`, and the link is
* rendered as a React Router's component, it won't reset the viewport scrolling
* position to the origin when clicked.
* @param [props.onClick] Event handler to trigger upon click.
* @param [props.onMouseDown] Event handler to trigger on MouseDown
* event.
* @param [props.openNewTab] If `true` the link opens in a new tab.
* @param [props.replace] When `true`, the link will replace current
* entry in the history stack instead of adding a new one.
* @param [props.to] Link URL.
* @param [props.activeClassName] **`<NavLink>`** only: CSS class(es)
* to apply to rendered link when it is active.
* @param [props.activeStyle] **`<NavLink>`** only: CSS styles
* to apply to the rendered link when it is active.
* @param [props.exact] **`<NavLink>`** only: if `true`, the active
* class/style will only be applied if the location is matched exactly.
* @param [props.isActive] **`<NavLink>`** only: Add extra
* logic for determining whether the link is active. This should be used if you
* want to do more than verify that the link’s pathname matches the current URL
* pathname.
* @param [props.location] **`<NavLink>`** only: `isActive` compares
* current history location (usually the current browser URL). To compare to
* a different location, a custom `location` can be passed.
* @param [props.strict] **`<NavLink>`** only: . When `true`, trailing
* slash on a location’s pathname will be taken into consideration when
* determining if the location matches the current URL. See the `<Route strict>`
* documentation for more information.
*/
const GenericLink = ({
children,
className,
disabled,
enforceA,
keepScrollPosition,
onClick,
onMouseDown,
openNewTab,
replace,
routerLinkType,
to,
...rest
}) => {
/* Renders Link as <a> element if:
* - It is opted explicitely by `enforceA` prop;
* - It should be opened in a new tab;
* - It is an absolte URL (starts with http:// or https://);
* - It is anchor link (starts with #). */
if (disabled || enforceA || openNewTab || to.match(/^(#|(https?|mailto):)/)) {
return /*#__PURE__*/_jsx("a", {
className: className
// TODO: This requires a fix: disabled is not really an attribute of <a>
// tag, thus for disabled option we rather should render a plain text
// styled as a link.
// disabled={disabled}
,
href: to,
onClick: disabled ? e => {
e.preventDefault();
} : onClick,
onMouseDown: disabled ? e => {
e.preventDefault();
} : onMouseDown,
rel: "noopener noreferrer",
styleName: "link",
target: openNewTab ? '_blank' : '',
children: children
});
}
const L = routerLinkType;
return /*#__PURE__*/_jsx(L, {
className: className,
discover: "none"
// disabled
,
onClick: e => {
// Executes the user-provided event handler, if any.
if (onClick) onClick(e);
// By default, clicking the link scrolls the page to beginning.
if (!keepScrollPosition) window.scroll(0, 0);
},
onMouseDown: onMouseDown,
replace: replace,
to: to
// TODO: Refactor it later.
// eslint-disable-next-line react/jsx-props-no-spreading
,
...rest,
children: children
});
};
export default GenericLink;
//# sourceMappingURL=index.js.map