chayns-components
Version:
A set of beautiful React components for developing chayns® applications.
149 lines (143 loc) • 5.12 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* @component
*/
let currentId = 0;
const PREFIX = 'CC_RB_';
/**
* A radio button that allows to select one of multiple options.
*/
class RadioButton extends _react.Component {
constructor() {
super();
this.handleChange = event => {
const {
disabled,
onChange,
value
} = this.props;
if (!disabled && onChange) {
if (value !== undefined) {
onChange(value);
} else {
onChange(event.target.value);
}
}
};
currentId += 1;
this.id = PREFIX + currentId;
}
/**
* Handles check event and passes the checked state to the handler.
* @param event
*/
/**
* Renders a radio button.
* @returns {XML}
*/
render() {
const {
checked,
id,
children,
disabled,
name,
className,
stopPropagation,
style,
...props
} = this.props;
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _clsx.default)('cc__radio-button', className),
style: style
}, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, props, {
id: id || this.id,
type: "radio",
className: "radio",
checked: checked,
onChange: this.handleChange,
name: name,
disabled: disabled,
onClick: event => {
var _props$onClick;
if (stopPropagation) {
event.stopPropagation();
}
(_props$onClick = props.onClick) === null || _props$onClick === void 0 ? void 0 : _props$onClick.call(props, event);
}
})), /*#__PURE__*/_react.default.createElement("label", {
htmlFor: id || this.id,
onClick: stopPropagation ? event => event.stopPropagation() : null
}, children));
}
}
exports.default = RadioButton;
RadioButton.propTypes = {
/**
* The HTML id of the `<input>`-element.
*/
id: _propTypes.default.string,
/**
* Multiple radio buttons with the same name belong to one group. Only one
* radio button in a group can be active at a time.
*/
name: _propTypes.default.string,
/**
* Wether the radio button is currently active.
*/
checked: _propTypes.default.bool,
/**
* A function that is called when the radio button gets checked. Receives
* the `value`-prop as its first argument.
*/
onChange: _propTypes.default.func,
/**
* Disables any user interaction and renders the radio button in a disabled
* style.
*/
disabled: _propTypes.default.bool,
/**
* A string or `ReactNode` that will be the label.
*/
children: _propTypes.default.node,
/**
* A value that will be sent to the `onChange`-callback as its first
* argument.
*/
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),
/**
* A classname string that will be applied to the container element.
*/
className: _propTypes.default.string,
/**
* Wether to stop propagation of click events to parent elements.
*/
stopPropagation: _propTypes.default.bool,
/**
* A React style object that will be applied to the container element.
*/
style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
};
RadioButton.defaultProps = {
id: null,
name: null,
checked: undefined,
onChange: null,
disabled: false,
children: null,
value: undefined,
className: null,
stopPropagation: false,
style: null
};
RadioButton.displayName = 'RadioButton';
//# sourceMappingURL=RadioButton.js.map