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

@wix/design-system

"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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _ToggleSwitchCore = _interopRequireDefault(require("./ToggleSwitchCore"));
var _system = require("@wix/wix-ui-icons-common/system");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _generateDataAttr = require("../utils/generateDataAttr");
var _ToggleSwitch2 = require("./ToggleSwitch.constants");
var _ToggleSwitchSt = require("./ToggleSwitch.st.css.js");
var _excluded = ["size", "skin", "styles", "dataHook", "className"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/ToggleSwitch/ToggleSwitch.js";
var checkedIconMap = {
  [_ToggleSwitch2.SIZES.small]: undefined,
  [_ToggleSwitch2.SIZES.medium]: /*#__PURE__*/_react.default.createElement(_system.ToggleOnSmall, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 17,
      columnNumber: 19
    }
  }),
  [_ToggleSwitch2.SIZES.large]: /*#__PURE__*/_react.default.createElement(_system.ToggleOn, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18,
      columnNumber: 18
    }
  })
};
var uncheckedIconMap = {
  [_ToggleSwitch2.SIZES.small]: undefined,
  [_ToggleSwitch2.SIZES.medium]: /*#__PURE__*/_react.default.createElement(_system.ToggleOffSmall, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 23,
      columnNumber: 19
    }
  }),
  [_ToggleSwitch2.SIZES.large]: /*#__PURE__*/_react.default.createElement(_system.ToggleOff, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 24,
      columnNumber: 18
    }
  })
};

/** toggle switch */
class ToggleSwitch extends _react.default.PureComponent {
  render() {
    var _this$props = this.props,
      {
        size,
        skin,
        styles: stylesProp,
        // Should not allow inline styles (applied in core component)
        dataHook,
        className
      } = _this$props,
      rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
    return /*#__PURE__*/_react.default.createElement(_ToggleSwitchCore.default, (0, _extends2.default)({
      className: (0, _ToggleSwitchSt.st)(_ToggleSwitchSt.classes.root, {
        skin,
        size
      }, className)
    }, (0, _generateDataAttr.generateDataAttr)(this.props, ['skin', 'size']), {
      "data-hook": dataHook,
      checkedIcon: checkedIconMap[size],
      uncheckedIcon: uncheckedIconMap[size]
    }, rest, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 79,
        columnNumber: 7
      }
    }));
  }
}
ToggleSwitch.displayName = 'ToggleSwitch';
ToggleSwitch.propTypes = {
  /** Applies a data-hook HTML attribute that can be used in the tests. */
  dataHook: _propTypes.default.string,
  /** Specifies a CSS class name to be appended to the component’s root element.
   * @internal
   */

  className: _propTypes.default.string,
  /** Assigns an unique identifier for the root element. */
  id: _propTypes.default.string,
  /** Controls the skin of a toggle. */
  skin: _propTypes.default.oneOf(['standard', 'success', 'error', 'urgent']),
  /** Controls the size of a toggle. */
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),
  /** Specifies whether toggle is checked. */
  checked: _propTypes.default.bool,
  /** Specifies whether toggle is disabled. */
  disabled: _propTypes.default.bool,
  /** Defines a callback function which is called every time toggle state changes. */
  onChange: _propTypes.default.func,
  /** Indicates that element can be focused and where it participates in sequential keyboard navigation. */
  tabIndex: _propTypes.default.number
};
ToggleSwitch.defaultProps = {
  skin: 'standard',
  size: 'large'
};
var _default = exports.default = ToggleSwitch;
//# sourceMappingURL=ToggleSwitch.js.map