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

A React library for building user interfaces at Volvo Cars

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Toggle = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _inline = require("../inline");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
const rootCSS = {
  width: 40,
  height: 24,
  position: 'relative',
  display: 'inline-block',
  verticalAlign: 'middle',
  flexGrow: 0,
  flexShrink: 0
};
const inputCSS = _ref => {
  let {
    theme
  } = _ref;
  return {
    height: '100%',
    margin: 0,
    opacity: 0,
    padding: 0,
    position: 'absolute',
    top: 0,
    width: '100%',
    '& + span:after': {
      content: '""',
      position: 'absolute',
      margin: 0,
      left: -1,
      right: -1,
      top: -1,
      bottom: -1,
      transformOrigin: 'center',
      borderRadius: 12,
      borderWidth: 1
    },
    ':focus-visible': {
      '& + span': {
        ':after': theme.states.focus
      }
    }
  };
};
const backgroundCSS = _ref2 => {
  let {
    checked,
    disabled
  } = _ref2;
  return _ref3 => {
    let {
      theme
    } = _ref3;
    return {
      position: 'absolute',
      borderWidth: 1,
      borderStyle: 'solid',
      borderRadius: 12,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      outlineWidth: 0,
      padding: 0,
      transition: 'background 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)',
      cursor: disabled ? 'not-allowed' : 'pointer',
      extend: [{
        condition: !checked,
        style: {
          background: theme.tokens.toggleControlBackground,
          borderColor: theme.tokens.toggleControlBackground
        }
      }, {
        condition: checked,
        style: {
          background: theme.tokens.toggleControlCheckedBackGround,
          borderColor: theme.tokens.toggleControlCheckedBackGround
        }
      }, {
        condition: disabled,
        style: {
          borderColor: theme.tokens.toggleControlBackground,
          background: theme.color.background.primary
        }
      }]
    };
  };
};
const ballCSS = _ref4 => {
  let {
    checked,
    disabled
  } = _ref4;
  return _ref5 => {
    let {
      theme
    } = _ref5;
    return {
      position: 'absolute',
      bottom: 1,
      width: 20,
      height: 20,
      borderWidth: 0,
      borderStyle: 'solid',
      background: theme.tokens.toggleControlForeground,
      borderColor: disabled ? theme.tokens.inputDisabledBorder : theme.tokens.inputBorder,
      borderRadius: '50%',
      transition: 'transform 300ms cubic-bezier(0.230, 1.000, 0.320, 1.000)',
      transform: checked ? 'translateX(17px)' : 'translateX(1px)',
      extend: [{
        condition: disabled,
        style: {
          background: theme.tokens.toggleControlBackground
        }
      }]
    };
  };
};
/**
 * @deprecated Use `<button role="switch">` instead. See [Switch](https://developer.volvocars.com/design-system/web/?path=/docs/components-switch--docs)
 */

const Toggle = exports.Toggle = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
  let {
    checked,
    disabled,
    onChange,
    'aria-label': ariaLabel,
    ...props
  } = _ref6;
  return /*#__PURE__*/_react.default.createElement(_inline.Inline, {
    as: "label",
    extend: rootCSS
  }, /*#__PURE__*/_react.default.createElement(_inline.Inline, (0, _extends2.default)({
    ref: ref,
    as: "input",
    type: "checkbox",
    extend: inputCSS,
    checked: checked,
    onChange: onChange,
    disabled: disabled,
    "aria-label": ariaLabel
  }, props)), /*#__PURE__*/_react.default.createElement(_inline.Inline, {
    extend: backgroundCSS({
      checked,
      disabled
    })
  }, /*#__PURE__*/_react.default.createElement(_inline.Inline, {
    extend: ballCSS({
      checked,
      disabled
    })
  })));
});
Toggle.displayName = 'Toggle';