You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
5.3 KiB
135 lines
5.3 KiB
'use strict'; |
|
|
|
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })(); |
|
|
|
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } }; |
|
|
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } } |
|
|
|
function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } |
|
|
|
var React = require('react'); |
|
var assign = require('react/lib/Object.assign'); |
|
var PropTypes = require('../PropTypes'); |
|
|
|
function isLeftClickEvent(event) { |
|
return event.button === 0; |
|
} |
|
|
|
function isModifiedEvent(event) { |
|
return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey); |
|
} |
|
|
|
/** |
|
* <Link> components are used to create an <a> element that links to a route. |
|
* When that route is active, the link gets an "active" class name (or the |
|
* value of its `activeClassName` prop). |
|
* |
|
* For example, assuming you have the following route: |
|
* |
|
* <Route name="showPost" path="/posts/:postID" handler={Post}/> |
|
* |
|
* You could use the following component to link to that route: |
|
* |
|
* <Link to="showPost" params={{ postID: "123" }} /> |
|
* |
|
* In addition to params, links may pass along query string parameters |
|
* using the `query` prop. |
|
* |
|
* <Link to="showPost" params={{ postID: "123" }} query={{ show:true }}/> |
|
*/ |
|
|
|
var Link = (function (_React$Component) { |
|
_inherits(Link, _React$Component); |
|
|
|
function Link() { |
|
_classCallCheck(this, Link); |
|
|
|
_get(Object.getPrototypeOf(Link.prototype), 'constructor', this).apply(this, arguments); |
|
} |
|
|
|
// TODO: Include these in the above class definition |
|
// once we can use ES7 property initializers. |
|
// https://github.com/babel/babel/issues/619 |
|
|
|
_createClass(Link, [{ |
|
key: 'handleClick', |
|
value: function handleClick(event) { |
|
var allowTransition = true; |
|
var clickResult; |
|
|
|
if (this.props.onClick) clickResult = this.props.onClick(event); |
|
|
|
if (isModifiedEvent(event) || !isLeftClickEvent(event)) return; |
|
|
|
if (clickResult === false || event.defaultPrevented === true) allowTransition = false; |
|
|
|
event.preventDefault(); |
|
|
|
if (allowTransition) this.context.router.transitionTo(this.props.to, this.props.params, this.props.query); |
|
} |
|
|
|
/** |
|
* Returns the value of the "href" attribute to use on the DOM element. |
|
*/ |
|
}, { |
|
key: 'getHref', |
|
value: function getHref() { |
|
return this.context.router.makeHref(this.props.to, this.props.params, this.props.query); |
|
} |
|
|
|
/** |
|
* Returns the value of the "class" attribute to use on the DOM element, which contains |
|
* the value of the activeClassName property when this <Link> is active. |
|
*/ |
|
}, { |
|
key: 'getClassName', |
|
value: function getClassName() { |
|
var className = this.props.className; |
|
|
|
if (this.getActiveState()) className += ' ' + this.props.activeClassName; |
|
|
|
return className; |
|
} |
|
}, { |
|
key: 'getActiveState', |
|
value: function getActiveState() { |
|
return this.context.router.isActive(this.props.to, this.props.params, this.props.query); |
|
} |
|
}, { |
|
key: 'render', |
|
value: function render() { |
|
var props = assign({}, this.props, { |
|
href: this.getHref(), |
|
className: this.getClassName(), |
|
onClick: this.handleClick.bind(this) |
|
}); |
|
|
|
if (props.activeStyle && this.getActiveState()) props.style = props.activeStyle; |
|
|
|
return React.DOM.a(props, this.props.children); |
|
} |
|
}]); |
|
|
|
return Link; |
|
})(React.Component); |
|
|
|
Link.contextTypes = { |
|
router: PropTypes.router.isRequired |
|
}; |
|
|
|
Link.propTypes = { |
|
activeClassName: PropTypes.string.isRequired, |
|
to: PropTypes.oneOfType([PropTypes.string, PropTypes.route]).isRequired, |
|
params: PropTypes.object, |
|
query: PropTypes.object, |
|
activeStyle: PropTypes.object, |
|
onClick: PropTypes.func |
|
}; |
|
|
|
Link.defaultProps = { |
|
activeClassName: 'active', |
|
className: '' |
|
}; |
|
|
|
module.exports = Link; |