web-toolkit/lib/components/Switch.js

A GTK inspired toolkit designed to build awesome web apps

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));

var _react = _interopRequireDefault(require("react"));

var _clsx = _interopRequireDefault(require("clsx"));

/*
 * Switch.js
 */
var noop = function noop() {};

var DEFAULT_LABELS = ['On', 'Off'];
var nextId = 1;

var Switch = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2.default)(Switch, _React$Component);

  var _super = (0, _createSuper2.default)(Switch);

  function Switch(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Switch);
    _this = _super.call(this, props);

    _this.onChange = function (ev) {
      _this.props.onChange(ev.target.checked, ev);
    };

    _this.id = "switch_".concat(nextId++);
    return _this;
  }

  (0, _createClass2.default)(Switch, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          id = _this$props.id,
          label = _this$props.label,
          labelsValue = _this$props.labels,
          children = _this$props.children,
          className = _this$props.className,
          size = _this$props.size,
          value = _this$props.value,
          defaultValue = _this$props.defaultValue,
          disabled = _this$props.disabled,
          onChange = _this$props.onChange,
          rest = (0, _objectWithoutProperties2.default)(_this$props, ["id", "label", "labels", "children", "className", "size", "value", "defaultValue", "disabled", "onChange"]);
      var labels = Array.isArray(labelsValue) ? labelsValue : DEFAULT_LABELS;
      return /*#__PURE__*/_react.default.createElement("div", {
        className: (0, _clsx.default)('Switch', className, size, {
          disabled: disabled
        })
      }, /*#__PURE__*/_react.default.createElement("input", Object.assign({
        type: "checkbox",
        id: id || this.id,
        checked: value,
        defaultChecked: defaultValue,
        disabled: disabled,
        onChange: this.onChange
      }, rest)), /*#__PURE__*/_react.default.createElement("label", {
        htmlFor: id || this.id
      }, labelsValue && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, labels[0]), /*#__PURE__*/_react.default.createElement("em", {
        className: "sr-only"
      }, label), /*#__PURE__*/_react.default.createElement("span", null, labels[1]))));
    }
  }]);
  return Switch;
}(_react.default.Component);

Switch.defaultProps = {
  size: 'medium',
  labels: false,
  onChange: noop
};
var _default = Switch;
exports.default = _default;
//# sourceMappingURL=Switch.js.map