UNPKG

vcc-ui

Version:

A React library for building user interfaces at Volvo Cars

167 lines (166 loc) 5.41 kB
"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 };