@shopgate/pwa-common/components/Link/index.js

Common library for the Shopgate Connect PWA.

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import "core-js/modules/es.string.replace.js";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { hasWebBridge } from '@shopgate/engage/core';
import connect from "./connector";
import styles from "./style";

/**
 * Link component.
 * @param {Object} props Props for the component.
 * @returns {JSX}
 */
import { jsx as _jsx } from "react/jsx-runtime";
let Link = /*#__PURE__*/function (_Component) {
  function Link(...args) {
    var _this;
    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    /**
     * Opens the link.
     * @param {Event} e An event object.
     */
    _this.handleOpenLink = e => {
      e.preventDefault();
      if (_this.props.disabled) {
        return;
      }
      const params = {
        pathname: _this.props.href,
        state: {
          ...(_this.props.state || {}),
          ...(_this.props.target ? {
            target: _this.props.target
          } : {})
        }
      };

      // setTimeout prevents double click while VoiceOver is active
      setTimeout(() => {
        if (_this.props.replace) {
          _this.props.historyReplace(params);
        } else {
          _this.props.historyPush(params);
        }
      }, 0);
    };
    /**
     * key listener for screen readers
     * @param {Object} event The event object
     */
    _this.handleKeyDown = event => {
      if (event.key === 'Enter' || event.key === ' ') {
        _this.handleOpenLink(event);
      }
    };
    return _this;
  }
  _inheritsLoose(Link, _Component);
  var _proto = Link.prototype;
  /**
   * Renders the component.
   * @returns {JSX.Element}
   */
  _proto.render = function render() {
    const {
      tag,
      className,
      href,
      children,
      role,
      'aria-label': ariaLabel,
      'aria-hidden': ariaHidden,
      tabIndex
    } = this.props;
    let Tag = tag;
    if (!hasWebBridge() && tag === 'a') {
      /**
       * Don't use link tags on apps. Sometimes links are really opened since the preventDefault
       * doesn't work as expected which results in white pages.
       */
      Tag = 'span';
    }
    return /*#__PURE__*/_jsx(Tag, {
      className: `${styles} ${className} common__link`,
      onClick: this.handleOpenLink,
      onKeyDown: this.handleKeyDown,
      role: role,
      "data-test-id": `link: ${href}`,
      "aria-label": ariaLabel,
      tabIndex: tabIndex,
      "aria-hidden": ariaHidden,
      href: href && Tag === 'a' ? href : null,
      children: children
    });
  };
  return Link;
}(Component);
Link.defaultProps = {
  'aria-hidden': null,
  'aria-label': null,
  className: '',
  disabled: false,
  replace: false,
  role: 'link',
  tag: 'div',
  tabIndex: null,
  target: null,
  state: {}
};
export const Disconnected = Link;
export default connect(Link);