@hackoregon/component-library/es/Sandbox/SandboxToggleSwitch.js

Official repo for Hack Oregon React component library

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: #ccc;\n  border-radius: 35px;\n  width: 50px;\n  -webkit-transition: 0.4s;\n  transition: 0.4s;\n\n  &:before {\n    position: absolute;\n    content: \"\";\n    height: 25px;\n    width: 25px;\n    left: 4px;\n    bottom: 0px;\n    background-color: white;\n    -webkit-transition: 0.4s;\n    transition: 0.4s;\n    border-radius: 50%;\n  }\n\n  input:checked + & {\n    background-color: darkOrange;\n  }\n\n  input:checked + &:before {\n    -webkit-transform: translateX(18px);\n    -ms-transform: translateX(18px);\n    transform: translateX(18px);\n  }\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  height: 25px;\n  outline: none;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React from "react";
import PropTypes from "prop-types";
import { css } from "emotion";
var containerStyle = css(_templateObject());
var toggleStyle = css(_templateObject2());
var sliderStyle = css(_templateObject3());

var SandboxToggleSwitch = function SandboxToggleSwitch(props) {
  var name = props.name,
      checked = props.checked,
      onChange = props.onChange,
      label = props.label,
      mapType = props.mapType;
  var decodeMapType = mapType === "PolygonPlotMap" ? "Polygons" : mapType === "SmallPolygonMap" ? "Polygons" : mapType === "ScatterPlotMap" ? "Points" : mapType === "PathMap" ? "Lines" : mapType === "IconMap" ? "Icons" : mapType === "ScreenGridMap" ? "Squares" : "";
  return React.createElement("div", {
    className: containerStyle
  }, React.createElement("label", {
    className: toggleStyle,
    htmlFor: "slide-input-".concat(label)
  }, React.createElement("input", {
    id: "slide-input-".concat(label),
    type: "checkbox",
    name: name,
    checked: checked,
    onChange: onChange
  }), React.createElement("div", {
    className: sliderStyle
  }), React.createElement("div", {
    style: {
      marginLeft: "40px"
    }
  }, "".concat(label, " - ").concat(decodeMapType))));
};

SandboxToggleSwitch.propTypes = {
  name: PropTypes.string,
  checked: PropTypes.bool,
  onChange: PropTypes.func,
  label: PropTypes.string,
  mapType: PropTypes.string
};
export default SandboxToggleSwitch;