backpack-ui/dist/components/switch/index.js

Lonely Planet's Components

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

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _zIndex = require("../../styles/zIndex");

var _zIndex2 = _interopRequireDefault(_zIndex);

var _color = require("../../utils/color");

var _propTypes3 = require("../../utils/propTypes");

var _propTypes4 = _interopRequireDefault(_propTypes3);

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

var size = 32;
var offset = 20;

var buttonShadow = function buttonShadow(color) {
  var focus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
  return "\n  0 0 0 1px " + color + ",\n  0 3px 1px " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.05) + ",\n  0 2px 2px " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.1) + ",\n  0 3px 3px " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.05) + (focus ? ",\n  0 3px 12px " + (0, _color.rgba)(_colors2.default.bgOverlay, 0.2) + " !important" : "");
};

var styles = {
  container: {
    backgroundColor: _colors2.default.bgPrimary,
    borderRadius: size + "px",
    boxShadow: "0 0 0 1px " + _colors2.default.borderPrimary + " inset",
    display: "block",
    height: size + "px",
    position: "relative",
    transition: "\n      background-color " + _timing2.default.fast + ",\n      box-shadow " + _timing2.default.fast,
    width: size + offset + "px"
  },

  containerChecked: {
    backgroundColor: _colors2.default.uiGreen,
    boxShadow: "none"
  },

  input: {
    border: 0,
    cursor: "pointer",
    display: "block",
    height: "100%",
    left: 0,
    opacity: 0,
    outline: 0,
    position: "absolute",
    top: 0,
    width: "100%",
    zIndex: _zIndex2.default.default + 2,
    MozAppearance: "none",
    WebkitAppearance: "none"
  },

  button: {
    backgroundColor: _colors2.default.bgPrimary,
    borderRadius: "100%",
    boxShadow: buttonShadow(_colors2.default.borderPrimary),
    display: "block",
    height: size - 4 + "px",
    left: "2px",
    position: "absolute",
    top: "2px",
    transition: "\n      box-shadow " + _timing2.default.fast + ",\n      transform " + _timing2.default.fast,
    transform: "translateX(0)",
    width: size - 4 + "px",
    zIndex: _zIndex2.default.default + 1
  },

  buttonChecked: {
    boxShadow: buttonShadow((0, _color.rgba)(_colors2.default.bgOverlay, 0.1)),
    transform: "translateX(" + offset + "px)"
  },

  scoped: {
    ".Switch-input:focus ~ .Switch-button": {
      boxShadow: buttonShadow(_colors2.default.borderPrimary, true)
    },

    ".Switch-input:checked:focus ~ .Switch-button": {
      boxShadow: buttonShadow((0, _color.rgba)(_colors2.default.bgOverlay, 0.1), true)
    }
  }
};

var Switch = function Switch(_ref) {
  var id = _ref.id,
      name = _ref.name,
      value = _ref.value,
      onClick = _ref.onClick,
      checked = _ref.checked,
      className = _ref.className,
      style = _ref.style,
      qaHook = _ref.qaHook;
  return _react2.default.createElement(
    "div",
    {
      "data-testid": qaHook ? "switch-div" : null,
      className: (0, _classnames2.default)("Switch", className),
      style: [styles.container, checked && styles.containerChecked, style]
    },
    _react2.default.createElement(_radium.Style, {
      scopeSelector: ".Switch",
      rules: styles.scoped
    }),
    _react2.default.createElement("input", {
      id: id,
      name: name,
      className: "Switch-input",
      type: "checkbox",
      value: value,
      checked: checked,
      style: styles.input,
      onClick: onClick
    }),
    _react2.default.createElement("span", {
      className: "Switch-button",
      style: [styles.button, checked && styles.buttonChecked],
      "aria-hidden": "true"
    })
  );
};

Switch.propTypes = {
  id: _propTypes2.default.string.isRequired,
  name: _propTypes2.default.string.isRequired,
  value: _propTypes2.default.string,
  onClick: _propTypes2.default.func,
  checked: _propTypes2.default.bool,
  className: _propTypes2.default.string,
  style: _propTypes4.default.style,
  qaHook: _propTypes2.default.bool
};

Switch.defaultProps = {
  onClick: null,
  checked: false,
  className: null,
  style: null,
  qaHook: false
};

exports.default = (0, _radium2.default)(Switch);