@geezee/react-ui/esm/toggle/toggle.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import withDefaults from '../utils/with-defaults';
import useTheme from '../styles/use-theme';
var defaultProps = {
  size: 'medium',
  disabled: false,
  initialChecked: false,
  className: ''
};

var getSizes = function getSizes(size) {
  var sizes = {
    mini: {
      width: '1.67rem',
      height: '.835rem'
    },
    small: {
      width: '1.67rem',
      height: '.835rem'
    },
    medium: {
      width: '1.75rem',
      height: '.875rem'
    },
    large: {
      width: '2rem',
      height: '1rem'
    }
  };
  return sizes[size];
};

var Toggle = function Toggle(_ref) {
  var initialChecked = _ref.initialChecked,
      checked = _ref.checked,
      disabled = _ref.disabled,
      onChange = _ref.onChange,
      size = _ref.size,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["initialChecked", "checked", "disabled", "onChange", "size", "className"]);

  var theme = useTheme();

  var _useState = useState(initialChecked),
      _useState2 = _slicedToArray(_useState, 2),
      selfChecked = _useState2[0],
      setSelfChecked = _useState2[1];

  var _useMemo = useMemo(function () {
    return getSizes(size);
  }, [size]),
      width = _useMemo.width,
      height = _useMemo.height;

  var changeHandle = useCallback(function (ev) {
    if (disabled) return;
    var selfEvent = {
      target: {
        checked: !selfChecked
      },
      stopPropagation: ev.stopPropagation,
      preventDefault: ev.preventDefault,
      nativeEvent: ev
    };
    setSelfChecked(!selfChecked);
    onChange && onChange(selfEvent);
  }, [disabled, selfChecked, onChange]);
  useEffect(function () {
    if (checked === undefined) return;
    setSelfChecked(checked);
  }, [checked]);
  return /*#__PURE__*/React.createElement("label", _extends({}, props, {
    className: _JSXStyle.dynamic([["351206348", [disabled ? 'not-allowed' : 'pointer', height, width, height, theme.palette.accents_2, height, height, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, theme.palette.success, height]]]) + " " + (props && props.className != null && props.className || className || "")
  }), /*#__PURE__*/React.createElement("input", {
    type: "checkbox",
    disabled: disabled,
    checked: selfChecked,
    onChange: changeHandle,
    className: _JSXStyle.dynamic([["351206348", [disabled ? 'not-allowed' : 'pointer', height, width, height, theme.palette.accents_2, height, height, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, theme.palette.success, height]]])
  }), /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["351206348", [disabled ? 'not-allowed' : 'pointer', height, width, height, theme.palette.accents_2, height, height, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, theme.palette.success, height]]]) + " " + "toggle ".concat(selfChecked ? 'checked' : '', " ").concat(disabled ? 'disabled' : '')
  }, /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["351206348", [disabled ? 'not-allowed' : 'pointer', height, width, height, theme.palette.accents_2, height, height, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, theme.palette.success, height]]]) + " " + "inner"
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "351206348",
    dynamic: [disabled ? 'not-allowed' : 'pointer', height, width, height, theme.palette.accents_2, height, height, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, theme.palette.success, height]
  }, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:center;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding:3px 0;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";}input.__jsx-style-dynamic-selector{overflow:hidden;visibility:hidden;height:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}.toggle.__jsx-style-dynamic-selector{height:").concat(height, ";width:").concat(width, ";border-radius:").concat(height, ";-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(").concat(height, " - 2px);height:calc(").concat(height, " - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0,rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.background, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.success, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (").concat(height, " - 2px));box-shadow:none;}")));
};

var MemoToggle = React.memo(Toggle);
export default withDefaults(MemoToggle, defaultProps);