@age/quantum/Toggle/Toggle.js

Catho react components

"use strict";

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

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _theme = require("../shared/theme");

var _Icon = _interopRequireDefault(require("../Icon"));

var _shared = require("../shared");

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

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

var CheckIcon = (0, _styledComponents.default)(_Icon.default).attrs({
  name: 'check'
}).withConfig({
  displayName: "Toggle__CheckIcon",
  componentId: "sc-128948c-0"
})([""]);
var CloseIcon = (0, _styledComponents.default)(_Icon.default).attrs({
  name: 'close'
}).withConfig({
  displayName: "Toggle__CloseIcon",
  componentId: "sc-128948c-1"
})([""]);

var Wrapper = _styledComponents.default.div.withConfig({
  displayName: "Toggle__Wrapper",
  componentId: "sc-128948c-2"
})(["display:inline-block;position:relative;pointer-events:none;"]);

var Switch = _styledComponents.default.div.withConfig({
  displayName: "Toggle__Switch",
  componentId: "sc-128948c-3"
})(["cursor:pointer;display:inline-block;height:24px;", " &:before{", ";border-radius:16px;content:'';height:24px;position:absolute;left:0;top:0;width:42px;transition:background-color 0.2s ease-in-out,color 0.2s ease-in-out,transform 0.2s ease-in-out;}", ",", "{align-items:center;", ";border-radius:50%;display:flex;", ";height:20px;justify-content:center;position:absolute;left:2px;top:2px;visibility:hidden;width:20px;transition:transform 0.2s ease-in-out;}", "{visibility:visible;}"], function (_ref) {
  var xxlarge = _ref.theme.spacing.xxlarge;
  return "padding-left: ".concat(xxlarge, "px;");
}, function (_ref2) {
  var neutral500 = _ref2.theme.colors.neutral[500];
  return "background-color: ".concat(neutral500, ";");
}, CloseIcon, CheckIcon, function (_ref3) {
  var _ref3$theme$colors$ne = _ref3.theme.colors.neutral,
      neutral100 = _ref3$theme$colors$ne[100],
      neutral500 = _ref3$theme$colors$ne[500];
  return "\n      background-color: ".concat(neutral100, ";\n      color: ").concat(neutral500, ";\n    ");
}, function (_ref4) {
  var fontSize = _ref4.theme.baseFontSize;
  return "font-size: ".concat(fontSize * 0.75, "px");
}, CloseIcon);

var HiddenCheckbox = _styledComponents.default.input.attrs({
  type: 'checkbox',
  role: 'switch'
}).withConfig({
  displayName: "Toggle__HiddenCheckbox",
  componentId: "sc-128948c-4"
})(["cursor:pointer;height:24px;left:0;opacity:0;position:absolute;pointer-events:initial;width:100%;&:focus + ", ":before{", ";}&:hover + ", ":before{", ";}&:checked + ", " ", "{visibility:hidden;transform:translateX(18px);}&:checked + ", " ", "{visibility:visible;}&:checked + ", ":before{", ";}&:checked:hover + ", ":before{", ";}&:checked + ", " ", "{", ";transform:translateX(18px);}"], Switch, function (_ref5) {
  var primary900 = _ref5.theme.colors.primary[900];
  return (0, _shared.shadow)(4, primary900);
}, Switch, function (_ref6) {
  var neutral700 = _ref6.theme.colors.neutral[700];
  return "background-color: ".concat(neutral700, ";");
}, Switch, CloseIcon, Switch, CheckIcon, Switch, function (_ref7) {
  var primary700 = _ref7.theme.colors.primary[700];
  return "background-color: ".concat(primary700, ";");
}, Switch, function (_ref8) {
  var primary900 = _ref8.theme.colors.primary[900];
  return "background-color: ".concat(primary900, ";");
}, Switch, CheckIcon, function (_ref9) {
  var _ref9$theme$colors$pr = _ref9.theme.colors.primary,
      primary100 = _ref9$theme$colors$pr[100],
      primary700 = _ref9$theme$colors$pr[700];
  return "background-color: ".concat(primary100, ";\n     color: ").concat(primary700, ";");
});

HiddenCheckbox.displayName = 'HiddenCheckbox';

var Toggle = function Toggle(_ref10) {
  var checked = _ref10.checked,
      theme = _ref10.theme,
      rest = _objectWithoutProperties(_ref10, ["checked", "theme"]);

  return _react.default.createElement(Wrapper, null, _react.default.createElement(HiddenCheckbox, _extends({
    theme: theme,
    checked: checked
  }, rest)), _react.default.createElement(Switch, {
    theme: theme
  }, _react.default.createElement(CloseIcon, null), _react.default.createElement(CheckIcon, null)));
};

Toggle.propTypes = {
  checked: _propTypes.default.bool,
  theme: _propTypes.default.shape({
    colors: _propTypes.default.object,
    spacing: _propTypes.default.object,
    baseFontSize: _propTypes.default.number
  })
};
Toggle.defaultProps = {
  checked: null,
  theme: {
    colors: _theme.colors,
    spacing: _theme.spacing,
    baseFontSize: _theme.baseFontSize
  }
};
var _default = Toggle;
exports.default = _default;