@wix/design-system/dist/cjs/CheckToggle/CheckToggle.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.CheckToggle = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _CheckToggleSt = require("./CheckToggle.st.css.js");
var _constants = require("./constants");
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _Focusable = require("../common/Focusable");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _IconThemeContext = require("../WixDesignSystemIconThemeProvider/IconThemeContext");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/CheckToggle/CheckToggle.tsx";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/** CheckToggle */
class CheckToggle extends _react.PureComponent {
  constructor() {
    super(...arguments);
    this.state = {
      checked: !!this.props.checked
    };
    /**
     * Checks if the component is controlled or uncontrolled.
     * The component is controlled only if prop checked is provided.
     *
     * @returns boolean
     * @private
     */
    this._isControlled = () => {
      return this.props.hasOwnProperty('checked');
    };
    /**
     * Toggles checked state and triggers the onChange callback.
     * Except when disabled
     */
    this._handleChange = changeEvent => {
      var {
        checked
      } = this.state;
      var {
        onChange
      } = this.props;
      this.setState({
        checked: !checked
      }, () => {
        if (onChange) onChange(changeEvent);
      });
    };
    /**
     * Renders the toggle itself
     * @returns React.ReactNode
     * @private
     */
    this._renderInput = iconMap => {
      var {
        checked
      } = this._isControlled() ? this.props : this.state;
      var {
        size,
        disabled,
        onChange
      } = this.props;
      if (!size) return null;
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", {
        type: "checkbox",
        className: _CheckToggleSt.classes.input,
        "data-hook": _constants.dataHooks.toggle,
        checked: checked,
        disabled: disabled,
        onChange: this._isControlled() ? onChange : this._handleChange,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 62,
          columnNumber: 9
        }
      }), /*#__PURE__*/_react.default.createElement("span", {
        className: _CheckToggleSt.classes.toggle,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 70,
          columnNumber: 9
        }
      }, iconMap[size]));
    };
    /**
     * Renders a tooltip wrapper
     * @returns React.ReactNode
     * @private
     */
    this._renderTooltip = iconMap => {
      var {
        tooltipContent,
        tooltipProps
      } = this.props;
      return /*#__PURE__*/_react.default.createElement(_Tooltip.default, (0, _extends2.default)({
        dataHook: _constants.dataHooks.tooltip,
        content: tooltipContent
      }, tooltipProps, {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 83,
          columnNumber: 7
        }
      }), this._renderInput(iconMap));
    };
  }
  render() {
    var {
      checked
    } = this._isControlled() ? this.props : this.state;
    var {
      dataHook,
      size,
      skin,
      disabled,
      tooltipContent,
      focusableOnFocus,
      focusableOnBlur,
      className
    } = this.props;
    return /*#__PURE__*/_react.default.createElement(_IconThemeContext.IconThemeContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 107,
        columnNumber: 7
      }
    }, _ref => {
      var _icons$CheckToggle, _icons$CheckToggle2;
      var {
        icons = {}
      } = _ref;
      var ConfirmIcon = ((_icons$CheckToggle = icons.CheckToggle) == null ? void 0 : _icons$CheckToggle.Confirm) || _wixUiIconsCommon.Confirm;
      var ConfirmSmallIcon = ((_icons$CheckToggle2 = icons.CheckToggle) == null ? void 0 : _icons$CheckToggle2.ConfirmSmall) || _wixUiIconsCommon.ConfirmSmall;
      var iconMap = {
        small: /*#__PURE__*/_react.default.createElement(ConfirmSmallIcon, {
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 114,
            columnNumber: 20
          }
        }),
        medium: /*#__PURE__*/_react.default.createElement(ConfirmIcon, {
          __self: this,
          __source: {
            fileName: _jsxFileName,
            lineNumber: 115,
            columnNumber: 21
          }
        })
      };
      return /*#__PURE__*/_react.default.createElement("label", {
        className: (0, _CheckToggleSt.st)(_CheckToggleSt.classes.root, {
          checked,
          size,
          skin,
          disabled
        }, className),
        "data-hook": dataHook,
        onFocus: focusableOnFocus,
        onBlur: focusableOnBlur,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 119,
          columnNumber: 13
        }
      }, tooltipContent ? this._renderTooltip(iconMap) : this._renderInput(iconMap));
    });
  }
}
exports.CheckToggle = CheckToggle;
CheckToggle.displayName = 'CheckToggle';
CheckToggle.defaultProps = {
  disabled: false,
  size: 'small',
  skin: 'standard'
};
var _default = exports.default = (0, _Focusable.withFocusable)(CheckToggle);
//# sourceMappingURL=CheckToggle.js.map