vcc-ui/dist/components/click/click.js

A React library for building user interfaces at Volvo Cars

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Click = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _useConfig = require("../../config/use-config");
var _helpers = require("../../utils/helpers");
var _block = require("../block");
const buttonResetStyle = {
  background: 'none',
  margin: 0,
  padding: 0,
  textAlign: 'left',
  cursor: 'pointer',
  appearance: 'none',
  borderWidth: 0,
  touchAction: 'manipulation',
  '::-moz-focus-inner': {
    borderWidth: 0,
    padding: 0
  }
};
const linkResetStyle = {
  textDecoration: 'none'
};

/**
 * @deprecated Use either a `<button>` or `<a>` tag instead.
 */
const Click = exports.Click = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
  let {
    children,
    extend,
    href,
    disabled,
    onClick,
    ...props
  } = _ref;
  const config = (0, _useConfig.useConfig)();
  const hasHref = typeof href === 'string';
  const as = hasHref ? config.linkComponent : 'button';
  const rel = (0, _helpers.getLinkRel)(props);
  return /*#__PURE__*/_react.default.createElement(_block.Block, (0, _extends2.default)({}, props, {
    disabled: as === 'button' && disabled,
    href: !disabled && hasHref ? href : undefined,
    onClick: !disabled && onClick ? onClick : undefined,
    ref: ref,
    as: as,
    rel: rel,
    type: as === 'button' ? props.type || 'button' : null,
    extend: [{
      boxSizing: 'border-box'
    }, as === 'button' ? buttonResetStyle : linkResetStyle, _ref2 => {
      let {
        theme
      } = _ref2;
      return {
        ':focus-visible': theme.states.focus
      };
    }, extend]
  }), children);
});
Click.displayName = 'Click';
Click.propTypes = {
  /** An object containing valid CSS style declarations */
  extend: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func, _propTypes.default.array]),
  /** Setting an href attribute will force the component to render with an `<a>` tag */
  href: _propTypes.default.string,
  /** If rendering a button (by not supplying an href), this let's you provide a type attribute for that button */
  type: _propTypes.default.string,
  /** A JSX node */
  children: _propTypes.default.node,
  /** Set the Click to disabled */
  disabled: _propTypes.default.bool,
  /** An action that is fired on click */
  onClick: _propTypes.default.func
};