vcc-ui/es/components/toggle/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import React from "react";
import { Inline } from "../inline";
import { COLORS } from "../../constants/colors";
export var Toggle = function Toggle(_ref) {
  var id = _ref.id,
      checked = _ref.checked,
      onChange = _ref.onChange,
      props = _objectWithoutProperties(_ref, ["id", "checked", "onChange"]);

  return React.createElement(Inline, _extends({
    as: "label",
    extend: styles.root
  }, props), React.createElement(Inline, {
    as: "input",
    type: "checkbox",
    extend: styles.input,
    id: id,
    name: id,
    checked: checked,
    onChange: onChange
  }), React.createElement(Inline, {
    extend: styles.background(checked)
  }));
};
var styles = {
  root: {
    width: "40px",
    height: "25px",
    position: "relative",
    display: "inline-block",
    verticalAlign: "middle",
    flexBasis: "40px",
    flexShrink: 0,
    margin: "0 10px"
  },
  input: {
    appearance: "none",
    display: "none"
  },
  background: function background(checked) {
    return {
      cursor: "pointer",
      position: "absolute",
      border: "1px solid #999999",
      borderRadius: "45px",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      "::after": {
        content: "''",
        position: "absolute",
        bottom: "3px",
        left: "3px",
        width: "17px",
        height: "17px",
        background: COLORS.primaryBlue,
        borderRadius: "50%",
        transition: "transform 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)",
        transform: checked ? "translateX(15px)" : "translateX(0px)"
      }
    };
  }
};