Home Reference Source

src/components/snippets/Link/Link.js

import React from 'react';
import PropTypes from 'prop-types';
import history from '../../../history';

/**
 * Компонент ссылки с сохранением в объект history
 * @reactProps {string} to - путь куда следует перейти
 * @reactProps {function} onClick - callback нажатия на ссылку
 * @example
 * <Link to="/path/1" onClick={this.changeUrl}>Ссылка</Link>
 */
class Link extends React.Component {
  /**
   * Обработчик нажатия
   * @param event
   */
  handleClick(event) {
    if (this.props.onClick) {
      this.props.onClick(event);
    }

    if (event.button !== 0 /* left click */) {
      return;
    }

    if (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey) {
      return;
    }

    if (event.defaultPrevented === true) {
      return;
    }

    event.preventDefault();

    if (this.props.to) {
      history.push(this.props.to);
    } else {
      history.push({
        pathname: event.currentTarget.pathname,
        search: event.currentTarget.search,
      });
    }
  }

  /**
   * Базовый рендер компонента
   */
  render() {
    const { to, ...props } = this.props;
    return (
      <a
        href={typeof to === 'string' ? to : history.createHref(to)}
        {...props}
        onClick={this.handleClick}
      />
    );
  }
}

Link.propTypes = {
  to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
  onClick: PropTypes.func,
};

export default Link;