suomifi-ui-components
Version:
Suomi.fi UI component library
196 lines (193 loc) • 8.42 kB
JavaScript
import { __extends, __rest, __assign, __makeTemplateObject } from 'tslib';
import React, { Component, forwardRef } from 'react';
import { styled } from 'styled-components';
import classnames from 'classnames';
import '../../../reset/HtmlA/HtmlA.js';
import '../../../reset/HtmlButton/HtmlButton.js';
import { HtmlDiv } from '../../../reset/HtmlDiv/HtmlDiv.js';
import '../../../reset/HtmlFieldSet/HtmlFieldSet.js';
import '../../../reset/HtmlH/HtmlH.js';
import { HtmlInput } from '../../../reset/HtmlInput/HtmlInput.js';
import { HtmlLabel } from '../../../reset/HtmlLabel/HtmlLabel.js';
import '../../../reset/HtmlLegend/HtmlLegend.js';
import '../../../reset/HtmlLi/HtmlLi.js';
import '../../../reset/HtmlNav/HtmlNav.js';
import '../../../reset/HtmlOl/HtmlOl.js';
import { HtmlSpan } from '../../../reset/HtmlSpan/HtmlSpan.js';
import '../../../reset/HtmlTextarea/HtmlTextarea.js';
import '../../../reset/HtmlUl/HtmlUl.js';
import '../../../reset/HtmlTable/HtmlTable.js';
import '../../../reset/HtmlTable/HtmlTableCaption.js';
import '../../../reset/HtmlTable/HtmlTableHeader.js';
import '../../../reset/HtmlTable/HtmlTableRow.js';
import '../../../reset/HtmlTable/HtmlTableBody.js';
import '../../../reset/HtmlTable/HtmlTableHeaderCell.js';
import '../../../reset/HtmlTable/HtmlTableCell.js';
import { getLogger } from '../../../utils/log/logger.js';
import { AutoId } from '../../utils/AutoId/AutoId.js';
import { SuomifiThemeConsumer } from '../../theme/SuomifiThemeProvider/SuomifiThemeProvider.js';
import '../../theme/SuomifiTheme/SuomifiTheme.js';
import { SpacingConsumer } from '../../theme/SpacingProvider/SpacingProvider.js';
import { separateMarginProps } from '../../theme/utils/spacing.js';
import { getConditionalAriaProp } from '../../../utils/aria/aria.js';
import { HintText } from '../HintText/HintText.js';
import { RadioButtonGroupConsumer } from './RadioButtonGroup.js';
import { baseStyles } from './RadioButton.baseStyles.js';
import { IconRadioButtonLarge, IconRadioButton } from 'suomifi-icons';
import { filterDuplicateKeys } from '../../../utils/common/common.js';
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) {
__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,
labelProps = _b.labelProps,
rest = __rest(_b, ["id", "name", "variant", "checked", "defaultChecked", "status", "children", "value", "hintText", "className", "forwardedRef", "onChange", "disabled", "style", "labelProps"]);
var _d = separateMarginProps(rest),
passProps = _d[1];
if (!children) {
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) {
getLogger().error('RadioButton value can not be empty.');
}
var checkedState = this.state.checkedState;
var hintTextId = "".concat(id, "-hintText");
return /*#__PURE__*/React.createElement(HtmlDiv, {
className: classnames(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.createElement(HtmlInput, __assign({
className: radioButtonClassNames.input,
type: "radio",
name: name,
id: id,
disabled: disabled,
forwardedRef: forwardedRef,
onChange: onChange
}, checked !== undefined ? {
checked: checkedState
} : {
defaultChecked: defaultChecked
}, getConditionalAriaProp('aria-describedby', [hintText ? hintTextId : undefined]), value ? {
value: value
} : {}, passProps)), /*#__PURE__*/React.createElement(HtmlSpan, {
className: radioButtonClassNames.iconWrapper
}, variant === 'large' ? ( /*#__PURE__*/React.createElement(IconRadioButtonLarge, {
className: radioButtonClassNames.icon
})) : ( /*#__PURE__*/React.createElement(IconRadioButton, {
className: radioButtonClassNames.icon,
baseColor: "alertBase"
}))), /*#__PURE__*/React.createElement(HtmlLabel, __assign({
htmlFor: id,
className: radioButtonClassNames.label
}, labelProps), children), /*#__PURE__*/React.createElement(HintText, {
className: radioButtonClassNames.hintText,
id: hintTextId
}, hintText));
};
return BaseRadioButton;
}(Component);
var StyledRadioButton = styled(function (_a) {
_a.theme;
_a.globalMargins;
var passProps = __rest(_a, ["theme", "globalMargins"]);
return /*#__PURE__*/React.createElement(BaseRadioButton, __assign({}, passProps));
}).withConfig({
componentId: "sc-1m157d0-0"
})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
var theme = _a.theme,
globalMargins = _a.globalMargins,
rest = __rest(_a, ["theme", "globalMargins"]);
var _b = separateMarginProps(rest),
marginProps = _b[0];
var cleanedGlobalMargins = filterDuplicateKeys(globalMargins.radioButton, marginProps);
return baseStyles(theme, cleanedGlobalMargins, marginProps);
});
var RadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
var propId = props.id,
_onChange = props.onChange,
propStatus = props.status,
passProps = __rest(props, ["id", "onChange", "status"]);
return /*#__PURE__*/React.createElement(SpacingConsumer, null, function (_a) {
var margins = _a.margins;
return /*#__PURE__*/React.createElement(SuomifiThemeConsumer, null, function (_a) {
var suomifiTheme = _a.suomifiTheme;
return /*#__PURE__*/React.createElement(AutoId, {
id: propId
}, function (id) {
return /*#__PURE__*/React.createElement(RadioButtonGroupConsumer, null, function (_a) {
var onRadioButtonChange = _a.onRadioButtonChange,
selectedValue = _a.selectedValue,
name = _a.name,
groupStatus = _a.groupStatus;
return /*#__PURE__*/React.createElement(StyledRadioButton, __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;
export { RadioButton };
//# sourceMappingURL=RadioButton.js.map