react-dipswitch/dist/Switch.js

An interactive & customizable Dipswitch component for react.

"use strict";

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

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

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

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var Switch = function Switch(props) {
  var _props$on = props.on,
      on = _props$on === undefined ? false : _props$on,
      _props$label = props.label,
      label = _props$label === undefined ? "1" : _props$label,
      _props$width = props.width,
      width = _props$width === undefined ? 12 : _props$width,
      onClick = props.onClick,
      _props$switchColor = props.switchColor,
      switchColor = _props$switchColor === undefined ? "#FFF" : _props$switchColor,
      _props$channelColor = props.channelColor,
      channelColor = _props$channelColor === undefined ? "#222" : _props$channelColor,
      _props$bodyColor = props.bodyColor,
      bodyColor = _props$bodyColor === undefined ? "#3768b2" : _props$bodyColor,
      _props$labelColor = props.labelColor,
      labelColor = _props$labelColor === undefined ? "#FFF" : _props$labelColor;


  var height = width * 4;
  var fontSize = width / 1.1;
  var switchPosition = on ? "24%" : "50%";

  return _react2.default.createElement(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: width,
      height: height,
      onClick: onClick
    },
    _react2.default.createElement("rect", { width: "100%", height: "100%", fill: bodyColor }),
    _react2.default.createElement("rect", { width: "66%", height: "40%", x: "16%", y: "24%", fill: channelColor }),
    _react2.default.createElement("rect", {
      width: "66%",
      height: "16%",
      x: "17%",
      y: switchPosition,
      fill: switchColor
    }),
    _react2.default.createElement(
      "text",
      {
        x: "50%",
        y: "92%",
        fontSize: fontSize,
        fill: labelColor,
        textAnchor: "middle"
      },
      label
    )
  );
};

Switch.PropTypes = {
  on: _propTypes2.default.bool,
  width: _propTypes2.default.number,
  onClick: _propTypes2.default.func,
  switchColor: _propTypes2.default.string,
  channelColor: _propTypes2.default.string,
  labelColor: _propTypes2.default.string,
  label: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
};

exports.default = Switch;