vcc-ui/dist/components/radio/radio.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.Radio = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = require("prop-types");
var _react = _interopRequireWildcard(require("react"));
var _autoId = require("../../utils/auto-id");
var _block = require("../block");
var _radioGroup = require("../radioGroup");
var _view = require("../view");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const radioStyle = _ref => {
  let {
    isValid
  } = _ref;
  return _ref2 => {
    let {
      theme
    } = _ref2;
    return {
      boxSizing: 'border-box',
      borderWidth: 1,
      borderStyle: 'solid',
      appearance: 'none',
      borderRadius: '50%',
      flexShrink: 0,
      width: 20,
      height: 20,
      margin: 0,
      padding: 0,
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      position: 'relative',
      cursor: 'pointer',
      borderColor: theme.tokens.inputControlBorder,
      backgroundColor: theme.tokens.inputBackground,
      outlineWidth: 0,
      extend: [{
        condition: !isValid,
        style: {
          borderColor: theme.color.foreground.alert,
          borderWidth: 2
        }
      }, {
        condition: isValid,
        style: {
          ':focus-visible': theme.states.focus
        }
      }],
      ':checked': {
        backgroundColor: theme.tokens.inputControlBackground,
        borderColor: theme.tokens.inputControlBackground,
        ':before': {
          borderRadius: '50%',
          display: 'block',
          content: "''",
          width: 8,
          height: 8,
          position: 'absolute',
          backgroundColor: theme.tokens.inputControlForeground
        }
      },
      ':disabled': {
        cursor: 'not-allowed',
        borderColor: theme.tokens.inputDisabledBorder,
        backgroundColor: theme.tokens.inputDisabledBackground,
        ':checked': {
          borderColor: theme.tokens.inputDisabledBorder,
          backgroundColor: theme.tokens.inputDisabledBackground,
          ':before': {
            backgroundColor: theme.tokens.inputDisabledControl
          }
        }
      }
    };
  };
};
const labelStyle = _ref3 => {
  let {
    isValid
  } = _ref3;
  return _ref4 => {
    let {
      theme
    } = _ref4;
    return {
      color: isValid ? theme.color.foreground.primary : theme.color.foreground.alert,
      fontSize: 16,
      letterSpacing: '0.02em',
      marginTop: -1,
      lineHeight: 1.3,
      fontFamily: theme.fontTypes.NOVUM,
      fontWeight: 300
    };
  };
};
/**
 * @deprecated Use `import { Radio } from '@volvo-cars/react-forms'` instead. See [Radio](https://developer.volvocars.com/design-system/web/?path=/docs/components-forms-radio--docs)
 */
const Radio = exports.Radio = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
  let {
    isValid: userIsValid,
    value: userValue,
    onChange: userOnChange,
    checked: userChecked,
    name: userName,
    label = '',
    ...props
  } = _ref5;
  const {
    name,
    value,
    isValid,
    onChange
  } = (0, _react.useContext)(_radioGroup.RadioContext);
  const styleProps = {
    isValid: userIsValid !== undefined ? userIsValid : isValid !== undefined ? isValid : true
  };
  const id = (0, _autoId.useId)(name ? name + '-' + userValue : userValue, props.id);
  const checked = userChecked || value === userValue;
  return /*#__PURE__*/_react.default.createElement(_view.View, {
    spacing: 1,
    direction: "row",
    alignItems: "center",
    shrink: 1
  }, /*#__PURE__*/_react.default.createElement(_block.Block, (0, _extends2.default)({
    ref: ref,
    onChange: event => {
      if (userOnChange) {
        userOnChange(event);
      } else if (onChange) {
        onChange(event);
      }
    },
    checked: checked
  }, props, {
    as: "input",
    type: "radio",
    value: userValue,
    name: name || userName,
    id: id,
    extend: radioStyle(styleProps)
  })), /*#__PURE__*/_react.default.createElement(_block.Block, {
    as: "label",
    htmlFor: id,
    extend: labelStyle(styleProps)
  }, label));
});
Radio.displayName = 'Radio';
Radio.propTypes = {
  onChange: _propTypes.func,
  checked: _propTypes.bool,
  /** Should be the same for all radio buttons belonging to same group. */
  name: _propTypes.string,
  id: _propTypes.string,
  isValid: _propTypes.bool,
  /** Value of the radio button. */
  value: _propTypes.string,
  /** The label text that is associated with the radio button. */
  label: _propTypes.node.isRequired
};