react-junctions
Version:
Junction-based routing for React.
135 lines • 6.14 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
import * as React from 'react';
import * as PropTypes from 'prop-types';
import { createHref } from 'junctions';
var Link = /** @class */ (function (_super) {
__extends(Link, _super);
function Link(props, context) {
var _this = _super.call(this, props, context) || this;
_this.handleFollow = function (event) {
if (_this.props.disabled) {
event.preventDefault();
return;
}
var location = _this.getLocation();
if (location) {
event.preventDefault();
_this.navigation.pushLocation(location);
}
};
_this.navigation = _this.props.env ? _this.props.env.navigation : context.navigation;
// NOTE: I may want to enable this even outside of productino at some
// point, as it can be used to pre-cache linked pages.
if (process.env.NODE_ENV !== 'production') {
if (!_this.navigation && _this.getLocation()) {
console.warn("A <Link> was created without access to a \"navigation\" object. " +
"You can provide a Navigation object through an \"env\" prop, or via " +
"React Context.");
}
var location_1 = _this.getLocation();
if (location_1 && location_1.pathname) {
_this.navigation.getPages(location_1.pathname).catch(function () {
console.warn("A <Link> referred to href \"" + location_1.pathname + "\", but the" +
"router could not find this path.");
});
}
}
return _this;
}
Link.prototype.getLocation = function () {
var href = this.props.href;
if (!href) {
return;
}
if (typeof href !== 'string') {
return href;
}
// If this is an external link, return undefined so that the native
// response will be used.
if (href.indexOf('://') !== -1 || href.indexOf('mailto:') === 0) {
return;
}
var _a = href.split('#'), lhs = _a[0], hash = _a[1];
var _b = lhs.split('?'), pathname = _b[0], search = _b[1];
var location = {
pathname: pathname || ''
};
if (search)
location.search = '?' + search;
if (hash)
location.hash = '#' + hash;
return location;
};
Link.prototype.render = function () {
var _a = this.props, env = _a.env, exact = _a.exact, href = _a.href, _b = _a.render, render = _b === void 0 ? Link.defaultProps.render : _b, other = __rest(_a, ["env", "exact", "href", "render"]);
var linkLocation = this.getLocation();
var navigationLocation = this.navigation.getLocation();
var active = env && linkLocation &&
(exact
? linkLocation.pathname === navigationLocation.pathname
: navigationLocation.pathname.indexOf(linkLocation.pathname) === 0);
return render(__assign({ active: !!active, href: linkLocation ? createHref(linkLocation) : href }, other, { onFollow: this.handleFollow }));
};
Link.defaultProps = {
render: function (props) {
return React.createElement(AnchorLink, __assign({}, props));
}
};
Link.contextTypes = {
navigation: PropTypes.object,
};
return Link;
}(React.Component));
export { Link };
var AnchorLink = /** @class */ (function (_super) {
__extends(AnchorLink, _super);
function AnchorLink() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.handleClick = function (event) {
// Let the browser handle the event directly if:
// - The user used the middle/right mouse button
// - The user was holding a modifier key
// - A `target` property is set (which may cause the browser to open the
// link in another tab)
if (event.button === 0 &&
!(event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) &&
!_this.props.target) {
_this.props.onFollow(event);
}
};
return _this;
}
AnchorLink.prototype.render = function () {
var _a = this.props, active = _a.active, activeClassName = _a.activeClassName, activeStyle = _a.activeStyle, className = _a.className, disabled = _a.disabled, style = _a.style, onFollow = _a.onFollow, other = __rest(_a, ["active", "activeClassName", "activeStyle", "className", "disabled", "style", "onFollow"]);
return (React.createElement("a", __assign({}, other, { className: (className || '') + ' ' + ((active && activeClassName) || ''), onClick: this.handleClick, style: Object.assign({}, style, active ? activeStyle : {}) })));
};
return AnchorLink;
}(React.Component));
export { AnchorLink };
//# sourceMappingURL=Link.js.map