pouncejs/dist/cjs/components/Switch/Switch.js

A collection of UI components from Panther labs

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _autoId = require("@reach/auto-id");

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

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

var _Box = _interopRequireDefault(require("../Box"));

var _Flex = _interopRequireDefault(require("../Flex"));

var switchFocusStyles = {
  outline: "1px solid " + _theme.theme.colors['blue-200']
};
/**
 *  A Switch is a typical Checkbox with a different UI. It's mainly used for settings pages, when
 *  enabling or disabling feature
 */

var Switch = /*#__PURE__*/_react.default.forwardRef(function Switch(_ref, ref) {
  var checked = _ref.checked,
      label = _ref.label,
      _ref$checkedText = _ref.checkedText,
      checkedText = _ref$checkedText === void 0 ? 'ON' : _ref$checkedText,
      _ref$uncheckedText = _ref.uncheckedText,
      uncheckedText = _ref$uncheckedText === void 0 ? 'OFF' : _ref$uncheckedText,
      disabled = _ref.disabled,
      invalid = _ref.invalid,
      readOnly = _ref.readOnly,
      hidden = _ref.hidden,
      id = _ref.id,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["checked", "label", "checkedText", "uncheckedText", "disabled", "invalid", "readOnly", "hidden", "id"]);
  var inputId = (0, _autoId.useId)(id);

  if (!label && !(rest['aria-label'] || rest['aria-labelledby'])) {
    console.error('The `label` prop was omitted without providing an `aria-label` or `aria-labelledby` attribute');
  }

  return /*#__PURE__*/_react.default.createElement(_Box.default, {
    as: "span",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    cursor: "pointer",
    fontSize: "medium",
    "aria-disabled": disabled,
    hidden: hidden,
    "aria-hidden": hidden
  }, label && /*#__PURE__*/_react.default.createElement(_Box.default, {
    as: "label",
    userSelect: "none",
    mr: 2,
    htmlFor: inputId
  }, label), /*#__PURE__*/_react.default.createElement(_Flex.default, {
    position: "relative",
    align: "center",
    borderRadius: "pill",
    width: 54,
    height: 27,
    p: 1,
    transition: "background-color 0.15s linear",
    backgroundColor: invalid ? 'red-300' : checked ? 'blue-400' : 'gray-600',
    _focusWithin: switchFocusStyles
  }, /*#__PURE__*/_react.default.createElement(_Box.default, {
    width: 21,
    height: 21,
    borderRadius: "circle",
    bg: "white",
    transform: checked ? 'translate3D(120%, 0, 0)' : 'translate3D(0, 0, 0)',
    transition: "transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms"
  }), /*#__PURE__*/_react.default.createElement(_Box.default, {
    fontWeight: "bold",
    fontSize: "x-small",
    userSelect: "none",
    mx: "7px",
    position: "absolute",
    left: checked ? 0 : undefined,
    right: !checked ? 0 : undefined
  }, checked ? checkedText : uncheckedText), /*#__PURE__*/_react.default.createElement(_Box.default, (0, _extends2.default)({
    ref: ref,
    as: "input",
    cursor: "pointer",
    position: "absolute",
    height: "100%",
    width: "100%",
    top: 0,
    left: 0,
    margin: "auto",
    opacity: 0,
    type: "checkbox",
    readOnly: readOnly,
    "aria-readonly": readOnly,
    "aria-checked": checked,
    "aria-invalid": invalid,
    checked: checked,
    disabled: disabled,
    id: inputId
  }, rest))));
});

var _default = /*#__PURE__*/_react.default.memo(Switch);

exports.default = _default;