vcc-ui
Version:
A React library for building user interfaces at Volvo Cars
167 lines (166 loc) • 5.41 kB
JavaScript
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
};
;