@readr-media/react-election-widgets/lib/seat-chart/react-components/switch.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = SeatsSwitch;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _jsxRuntime = require("react/jsx-runtime");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const Label = _styledComponents.default.label.withConfig({
  displayName: "switch__Label",
  componentId: "sc-4l8e98-0"
})(["position:relative;display:inline-block;width:40px;height:20px;"]);

const Slider = _styledComponents.default.span.withConfig({
  displayName: "switch__Slider",
  componentId: "sc-4l8e98-1"
})(["position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;border-radius:34px;border:1px solid black;background-color:rgb(217,217,217);-webkit-transition:0.4s;transition:0.4s;&:before{position:absolute;content:'';height:20px;width:20px;left:-1px;top:-1px;background-color:white;-webkit-transition:0.4s;transition:0.4s;border:1px solid black;border-radius:50%;}"]);

const Input = _styledComponents.default.input.withConfig({
  displayName: "switch__Input",
  componentId: "sc-4l8e98-2"
})(["opacity:0;width:0;height:0;&:checked + ", ":before{-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}"], Slider);
/**
 *
 * @param {Object} props
 * @param {(value: boolean) => void} props.onChange
 * @param {boolean} props.isOn
 * @returns {JSX.Element}
 */


function SeatsSwitch({
  onChange,
  isOn
}) {
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Input, {
      type: "checkbox",
      checked: isOn,
      onChange: e => {
        const switchOn = e.target.checked;
        onChange(switchOn);
      }
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, {})]
  });
}