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

Official repo for Hack Oregon React component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _emotion = require("emotion");

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

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) } })); }

var containerStyle = (0, _emotion.css)(_templateObject());
var toggleStyle = (0, _emotion.css)(_templateObject2());
var sliderStyle = (0, _emotion.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["default"].createElement("div", {
    className: containerStyle
  }, _react["default"].createElement("label", {
    className: toggleStyle,
    htmlFor: "slide-input-".concat(label)
  }, _react["default"].createElement("input", {
    id: "slide-input-".concat(label),
    type: "checkbox",
    name: name,
    checked: checked,
    onChange: onChange
  }), _react["default"].createElement("div", {
    className: sliderStyle
  }), _react["default"].createElement("div", {
    style: {
      marginLeft: "40px"
    }
  }, "".concat(label, " - ").concat(decodeMapType))));
};

SandboxToggleSwitch.propTypes = {
  name: _propTypes["default"].string,
  checked: _propTypes["default"].bool,
  onChange: _propTypes["default"].func,
  label: _propTypes["default"].string,
  mapType: _propTypes["default"].string
};
var _default = SandboxToggleSwitch;
exports["default"] = _default;