@mapbox/mr-ui
Version:
UI components for Mapbox projects
90 lines (89 loc) • 3.86 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ControlToggleSet;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _omit = _interopRequireDefault(require("../utils/omit"));
var _controlWrapper = _interopRequireDefault(require("../control-wrapper"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function ControlToggleSet(_ref) {
let {
id,
options,
onChange,
value = '',
optional = false,
validationError,
autoFocus = false,
themeToggleGroup = 'border border--gray-light py3 px3',
themeToggleContainer = '',
themeToggle = 'txt-s py0 round-full toggle--s toggle--gray',
themeControlWrapper
} = _ref;
const groupProps = {
id,
className: `toggle-group round-full ${themeToggleGroup}`,
role: 'radiogroup',
'aria-required': optional ? false : true,
'data-testid': `${id}-input`
};
if (validationError) {
groupProps['aria-invalid'] = true;
}
const renderOptions = (_ref2, index) => {
let {
label,
...d
} = _ref2;
const extraProps = (0, _omit.default)(d, ['value', 'label']);
return /*#__PURE__*/_react.default.createElement("label", {
key: d.value,
className: `toggle-container ${themeToggleContainer}`
}, /*#__PURE__*/_react.default.createElement("input", _extends({
value: d.value,
checked: d.value === value,
autoFocus: autoFocus && d.value === value,
onChange: e => onChange(e.target.value, id),
name: id,
type: "radio",
"data-testid": `${id}-${index}-input`
}, extraProps)), /*#__PURE__*/_react.default.createElement("div", {
className: `${themeToggle} toggle`
}, label));
};
return /*#__PURE__*/_react.default.createElement(_controlWrapper.default, {
themeControlWrapper: themeControlWrapper,
id: id,
validationError: validationError
}, /*#__PURE__*/_react.default.createElement("div", groupProps, options.map(renderOptions)));
}
ControlToggleSet.propTypes = {
/** Identifying value for input element. */
id: _propTypes.default.string.isRequired,
/** Function that's called when text changes in the input element. Argument that's returned the id prop and value entered. */
onChange: _propTypes.default.func.isRequired,
/** An array of objects containing `label` `value` key value pairings to represent each option. Any additional keys are passed as props to the input. */
options: _propTypes.default.arrayOf(_propTypes.default.shape({
label: _propTypes.default.node.isRequired,
value: _propTypes.default.string.isRequired
})).isRequired,
/** input value */
value: _propTypes.default.string,
/** If provided, aria-required=true is added to the control element. */
optional: _propTypes.default.bool,
/** Add auto focus attributes. */
autoFocus: _propTypes.default.bool,
/** If provided, the value of this propery displays as an error message. */
validationError: _propTypes.default.node,
/** Assembly classes to apply to the toggle group */
themeToggleGroup: _propTypes.default.string,
/** Assembly classes to apply to the toggle container */
themeToggleContainer: _propTypes.default.string,
/** Assembly classes to apply to the toggle element */
themeToggle: _propTypes.default.string,
/** Assembly classes to apply to the control wrapper */
themeControlWrapper: _propTypes.default.string
};