vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
75 lines (74 loc) • 2.17 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import PropTypes from 'prop-types';
import React from 'react';
import { useConfig } from '../../config/use-config';
import { getLinkRel } from '../../utils/helpers';
import { Block } from '../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.
*/
export const Click = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
children,
extend,
href,
disabled,
onClick,
...props
} = _ref;
const config = useConfig();
const hasHref = typeof href === 'string';
const as = hasHref ? config.linkComponent : 'button';
const rel = getLinkRel(props);
return /*#__PURE__*/React.createElement(Block, _extends({}, 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.oneOfType([PropTypes.object, PropTypes.func, PropTypes.array]),
/** Setting an href attribute will force the component to render with an `<a>` tag */
href: PropTypes.string,
/** If rendering a button (by not supplying an href), this let's you provide a type attribute for that button */
type: PropTypes.string,
/** A JSX node */
children: PropTypes.node,
/** Set the Click to disabled */
disabled: PropTypes.bool,
/** An action that is fired on click */
onClick: PropTypes.func
};