wix-style-react/dist/src/ToggleSwitch/ToggleSwitch.js

wix-style-react

"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 _generateDataAttr = require("../utils/generateDataAttr");
var _constants = require("./constants");
var _ToggleSwitchSt = require("./ToggleSwitch.st.css");
var _context = require("../WixStyleReactProvider/context");
var _excluded = ["size", "skin", "styles", "dataHook", "className"];
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/ToggleSwitch/ToggleSwitch.js";
var checkedIconMap = {
  [_constants.SIZES.small]: undefined,
  [_constants.SIZES.medium]: /*#__PURE__*/_react.default.createElement(_system.ToggleOnSmall, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 18,
      columnNumber: 19
    }
  }),
  [_constants.SIZES.large]: /*#__PURE__*/_react.default.createElement(_system.ToggleOn, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 19,
      columnNumber: 18
    }
  })
};
var uncheckedIconMap = {
  [_constants.SIZES.small]: undefined,
  [_constants.SIZES.medium]: /*#__PURE__*/_react.default.createElement(_system.ToggleOffSmall, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 24,
      columnNumber: 19
    }
  }),
  [_constants.SIZES.large]: /*#__PURE__*/_react.default.createElement(_system.ToggleOff, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 25,
      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(_context.WixStyleReactContext.Consumer, {
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 77,
        columnNumber: 7
      }
    }, _ref => {
      var {
        newColorsBranding
      } = _ref;
      return /*#__PURE__*/_react.default.createElement(_ToggleSwitchCore.default, (0, _extends2.default)({
        className: (0, _ToggleSwitchSt.st)(_ToggleSwitchSt.classes.root, {
          skin,
          size,
          newColorsBranding
        }, 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: 11
        }
      }));
    });
  }
}
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. */
  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