2018-06-20 11:50:31 +08:00
|
|
|
import Button from './Button';
|
2015-07-15 12:30:11 +08:00
|
|
|
|
|
|
|
/**
|
|
|
|
* The `LinkButton` component defines a `Button` which links to a route.
|
|
|
|
*
|
|
|
|
* ### Props
|
|
|
|
*
|
|
|
|
* All of the props accepted by `Button`, plus:
|
|
|
|
*
|
|
|
|
* - `active` Whether or not the page that this button links to is currently
|
|
|
|
* active.
|
|
|
|
* - `href` The URL to link to. If the current URL `m.route()` matches this,
|
|
|
|
* the `active` prop will automatically be set to true.
|
|
|
|
*/
|
|
|
|
export default class LinkButton extends Button {
|
|
|
|
static initProps(props) {
|
|
|
|
props.active = this.isActive(props);
|
|
|
|
props.config = props.config || m.route;
|
|
|
|
}
|
|
|
|
|
2015-07-17 13:17:49 +08:00
|
|
|
view() {
|
|
|
|
const vdom = super.view();
|
|
|
|
|
|
|
|
vdom.tag = 'a';
|
|
|
|
|
|
|
|
return vdom;
|
|
|
|
}
|
|
|
|
|
2015-07-15 12:30:11 +08:00
|
|
|
/**
|
|
|
|
* Determine whether a component with the given props is 'active'.
|
|
|
|
*
|
|
|
|
* @param {Object} props
|
|
|
|
* @return {Boolean}
|
|
|
|
*/
|
|
|
|
static isActive(props) {
|
2020-04-17 17:57:55 +08:00
|
|
|
return typeof props.active !== 'undefined' ? props.active : m.route() === props.href;
|
2015-07-15 12:30:11 +08:00
|
|
|
}
|
|
|
|
}
|