suomifi-ui-components
Version:
Suomi.fi UI component library
202 lines (196 loc) • 9 kB
JavaScript
'use strict';
var tslib = require('tslib');
var React = require('react');
var styledComponents = require('styled-components');
var classnames = require('classnames');
require('../../../reset/HtmlA/HtmlA.js');
require('../../../reset/HtmlButton/HtmlButton.js');
var HtmlDiv = require('../../../reset/HtmlDiv/HtmlDiv.js');
require('../../../reset/HtmlFieldSet/HtmlFieldSet.js');
require('../../../reset/HtmlH/HtmlH.js');
var HtmlInput = require('../../../reset/HtmlInput/HtmlInput.js');
var HtmlLabel = require('../../../reset/HtmlLabel/HtmlLabel.js');
require('../../../reset/HtmlLegend/HtmlLegend.js');
require('../../../reset/HtmlLi/HtmlLi.js');
require('../../../reset/HtmlNav/HtmlNav.js');
require('../../../reset/HtmlOl/HtmlOl.js');
var HtmlSpan = require('../../../reset/HtmlSpan/HtmlSpan.js');
require('../../../reset/HtmlTextarea/HtmlTextarea.js');
require('../../../reset/HtmlUl/HtmlUl.js');
require('../../../reset/HtmlTable/HtmlTable.js');
require('../../../reset/HtmlTable/HtmlTableCaption.js');
require('../../../reset/HtmlTable/HtmlTableHeader.js');
require('../../../reset/HtmlTable/HtmlTableRow.js');
require('../../../reset/HtmlTable/HtmlTableBody.js');
require('../../../reset/HtmlTable/HtmlTableHeaderCell.js');
require('../../../reset/HtmlTable/HtmlTableCell.js');
var logger = require('../../../utils/log/logger.js');
var AutoId = require('../../utils/AutoId/AutoId.js');
var SuomifiThemeProvider = require('../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js');
require('../../theme/SuomifiTheme/SuomifiTheme.js');
var SpacingProvider = require('../../theme/SpacingProvider/SpacingProvider.js');
var spacing = require('../../theme/utils/spacing.js');
var aria = require('../../../utils/aria/aria.js');
var HintText = require('../HintText/HintText.js');
var RadioButtonGroup = require('./RadioButtonGroup.js');
var RadioButton_baseStyles = require('./RadioButton.baseStyles.js');
var suomifiIcons = require('suomifi-icons');
var common = require('../../../utils/common/common.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
var React__default = /*#__PURE__*/_interopDefault(React);
var classnames__default = /*#__PURE__*/_interopDefault(classnames);
var baseClassName = 'fi-radio-button';
var radioButtonClassNames = {
container: "".concat(baseClassName, "_container"),
input: "".concat(baseClassName, "_input"),
iconWrapper: "".concat(baseClassName, "_icon_wrapper"),
icon: "".concat(baseClassName, "_icon"),
label: "".concat(baseClassName, "_label"),
hintText: "".concat(baseClassName, "_hintText"),
disabled: "".concat(baseClassName, "--disabled"),
large: "".concat(baseClassName, "--large"),
checked: "".concat(baseClassName, "--checked"),
error: "".concat(baseClassName, "--error")
};
var BaseRadioButton = function (_super) {
tslib.__extends(BaseRadioButton, _super);
function BaseRadioButton() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
checkedState: !!_this.props.checked
};
return _this;
}
BaseRadioButton.getDerivedStateFromProps = function (nextProps, prevState) {
var checked = nextProps.checked;
if (checked !== undefined && checked !== prevState.checkedState) {
return {
checkedState: checked
};
}
return null;
};
BaseRadioButton.prototype.render = function () {
var _a;
var _b = this.props,
id = _b.id,
name = _b.name,
variant = _b.variant,
checked = _b.checked,
defaultChecked = _b.defaultChecked,
status = _b.status,
children = _b.children,
value = _b.value,
hintText = _b.hintText,
className = _b.className,
forwardedRef = _b.forwardedRef,
onChange = _b.onChange,
_c = _b.disabled,
disabled = _c === void 0 ? false : _c,
style = _b.style,
rest = tslib.__rest(_b, ["id", "name", "variant", "checked", "defaultChecked", "status", "children", "value", "hintText", "className", "forwardedRef", "onChange", "disabled", "style"]);
var _d = spacing.separateMarginProps(rest),
passProps = _d[1];
if (!children) {
logger.getLogger().error('RadioButton component should have a label or a child element that acts as one. Add label content or a child element.');
}
if ('value' in this.props && value.trim().length === 0) {
logger.getLogger().error('RadioButton value can not be empty.');
}
var checkedState = this.state.checkedState;
var hintTextId = "".concat(id, "-hintText");
return /*#__PURE__*/React__default.default.createElement(HtmlDiv.HtmlDiv, {
className: classnames__default.default(baseClassName, radioButtonClassNames.container, className, (_a = {}, _a[radioButtonClassNames.disabled] = disabled, _a[radioButtonClassNames.large] = variant === 'large', _a[radioButtonClassNames.checked] = checked, _a[radioButtonClassNames.error] = status === 'error' && !disabled, _a)),
style: style
}, /*#__PURE__*/React__default.default.createElement(HtmlInput.HtmlInput, tslib.__assign({
className: radioButtonClassNames.input,
type: "radio",
name: name,
id: id,
disabled: disabled,
forwardedRef: forwardedRef,
onChange: onChange
}, checked !== undefined ? {
checked: checkedState
} : {
defaultChecked: defaultChecked
}, aria.getConditionalAriaProp('aria-describedby', [hintText ? hintTextId : undefined]), value ? {
value: value
} : {}, passProps)), /*#__PURE__*/React__default.default.createElement(HtmlSpan.HtmlSpan, {
className: radioButtonClassNames.iconWrapper
}, variant === 'large' ? ( /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconRadioButtonLarge, {
className: radioButtonClassNames.icon
})) : ( /*#__PURE__*/React__default.default.createElement(suomifiIcons.IconRadioButton, {
className: radioButtonClassNames.icon,
baseColor: "alertBase"
}))), /*#__PURE__*/React__default.default.createElement(HtmlLabel.HtmlLabel, {
htmlFor: id,
className: radioButtonClassNames.label
}, children), /*#__PURE__*/React__default.default.createElement(HintText.HintText, {
className: radioButtonClassNames.hintText,
id: hintTextId
}, hintText));
};
return BaseRadioButton;
}(React.Component);
var StyledRadioButton = styledComponents.styled(function (_a) {
_a.theme;
_a.globalMargins;
var passProps = tslib.__rest(_a, ["theme", "globalMargins"]);
return /*#__PURE__*/React__default.default.createElement(BaseRadioButton, tslib.__assign({}, passProps));
}).withConfig({
componentId: "sc-1m157d0-0"
})(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme,
globalMargins = _a.globalMargins,
rest = tslib.__rest(_a, ["theme", "globalMargins"]);
var _b = spacing.separateMarginProps(rest),
marginProps = _b[0];
var cleanedGlobalMargins = common.filterDuplicateKeys(globalMargins.radioButton, marginProps);
return RadioButton_baseStyles.baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var RadioButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
var propId = props.id,
_onChange = props.onChange,
propStatus = props.status,
passProps = tslib.__rest(props, ["id", "onChange", "status"]);
return /*#__PURE__*/React__default.default.createElement(SpacingProvider.SpacingConsumer, null, function (_a) {
var margins = _a.margins;
return /*#__PURE__*/React__default.default.createElement(SuomifiThemeProvider.SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React__default.default.createElement(AutoId.AutoId, {
id: propId
}, function (id) {
return /*#__PURE__*/React__default.default.createElement(RadioButtonGroup.RadioButtonGroupConsumer, null, function (_a) {
var onRadioButtonChange = _a.onRadioButtonChange,
selectedValue = _a.selectedValue,
name = _a.name,
groupStatus = _a.groupStatus;
return /*#__PURE__*/React__default.default.createElement(StyledRadioButton, tslib.__assign({
theme: suomifiTheme,
id: id,
forwardedRef: ref,
globalMargins: margins,
status: !!propStatus ? propStatus : groupStatus
}, passProps, !!onRadioButtonChange ? {
checked: selectedValue === passProps.value,
name: name
} : {}, {
onChange: function onChange(event) {
if (!!onRadioButtonChange) {
onRadioButtonChange(event.target.value);
}
if (!!_onChange) {
_onChange(event);
}
}
}));
});
});
});
});
});
RadioButton.displayName = 'RadioButton';
var templateObject_1;
exports.RadioButton = RadioButton;
//# sourceMappingURL=RadioButton.js.map