@netdata/netdata-ui
Version:
netdata UI kit
63 lines • 2.69 kB
JavaScript
var _excluded = ["alignItems", "alignSelf", "checked", "children", "disabled", "iconProps", "label", "margin"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import React from "react";
import { Text } from "../typography";
import { Container, IconContainer, Input, StyledIcon } from "./styled";
var radioButtonStyles = {
disabled: {
containerColor: "disabledBackground",
dotColor: "disabledBackground",
borderColor: "disabledBackground"
},
checked: {
containerColor: "inputBg",
dotColor: "primary",
borderColor: "inputBorder"
},
checkedDisabled: {
containerColor: "inputBg",
dotColor: "disabled",
borderColor: "inputBorder"
},
"default": {
containerColor: "inputBg",
dotColor: "bright",
borderColor: "inputBorder"
}
};
var RadioButton = function RadioButton(_ref) {
var _ref$alignItems = _ref.alignItems,
alignItems = _ref$alignItems === void 0 ? "center" : _ref$alignItems,
alignSelf = _ref.alignSelf,
checked = _ref.checked,
children = _ref.children,
disabled = _ref.disabled,
iconProps = _ref.iconProps,
label = _ref.label,
margin = _ref.margin,
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
var radioStatus = disabled && !checked ? "disabled" : checked && disabled ? "checkedDisabled" : checked ? "checked" : "default";
var radioStyles = React.useMemo(function () {
return radioButtonStyles[radioStatus];
}, [radioStatus]);
var showIcon = radioStatus === "checkedDisabled" || radioStatus === "checked";
return /*#__PURE__*/React.createElement(Container, {
alignItems: alignItems,
alignSelf: alignSelf,
disabled: disabled,
margin: margin
}, /*#__PURE__*/React.createElement(Input, _extends({
type: "radio",
disabled: disabled,
checked: checked
}, rest)), /*#__PURE__*/React.createElement(IconContainer, {
background: radioStyles.containerColor,
borderColor: radioStyles.borderColor,
margin: children || label ? [0.5, 2, 0, 0] : null
}, showIcon && /*#__PURE__*/React.createElement(StyledIcon, _extends({
name: "dot",
color: radioStyles.dotColor
}, iconProps))), children, label && !children && /*#__PURE__*/React.createElement(Text, null, label));
};
export default RadioButton;