@mapbox/mr-ui
Version:
UI components for Mapbox projects
73 lines (72 loc) • 3.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = ControlSwitch;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _classnames = _interopRequireDefault(require("classnames"));
var _controlWrapper = _interopRequireDefault(require("../control-wrapper"));
var Switch = _interopRequireWildcard(require("@radix-ui/react-switch"));
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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 ControlSwitch(props) {
const {
id,
onChange,
disabled = false,
validationError,
label,
value = false,
themeControlWrapper = '',
themeControlSwitchContainer = '',
themeControlSwitch = 'switch--s-label',
themeLabel = 'txt-s ml6'
} = props;
const switchProps = {
id,
checked: value,
disabled,
onCheckedChange: v => onChange(v, id),
'data-testid': `${id}-switch`
};
const labelClasses = (0, _classnames.default)(`switch-container ${themeControlSwitchContainer}`, {
'cursor-pointer': !disabled
});
return /*#__PURE__*/_react.default.createElement(_controlWrapper.default, {
themeControlWrapper: themeControlWrapper,
id: id,
validationError: validationError
}, /*#__PURE__*/_react.default.createElement("fieldset", {
className: "flex flex--center-cross"
}, /*#__PURE__*/_react.default.createElement("label", {
htmlFor: id,
className: labelClasses
}, /*#__PURE__*/_react.default.createElement(Switch.Root, _extends({}, switchProps, {
className: `switch ${themeControlSwitch}`
}), /*#__PURE__*/_react.default.createElement(Switch.Thumb, null)), /*#__PURE__*/_react.default.createElement("span", {
className: themeLabel
}, label))));
}
ControlSwitch.propTypes = {
/** Identifying value for input element. */
id: _propTypes.default.string.isRequired,
/** Input value */
value: _propTypes.default.bool,
/** Called during changes to the input element. Two arguments are received: 1. The incoming value and 2. the ID of the input. */
onChange: _propTypes.default.func.isRequired,
/** Value passed to the label element. */
label: _propTypes.default.node,
/** If provided, the value of this propery displays as an error message. */
validationError: _propTypes.default.node,
/** Assembly classes to apply to the switch container */
themeControlSwitchContainer: _propTypes.default.string,
/** Assembly classes to apply to the switch element */
themeControlSwitch: _propTypes.default.string,
/** Assembly classes to apply to the control wrapper */
themeControlWrapper: _propTypes.default.string,
/** Assembly classes to apply to the label element */
themeLabel: _propTypes.default.string
};