react-lightning-design-system/lib/scripts/Toggle.js

Salesforce Lightning Design System components built with React

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Toggle = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _FormElement = require("./FormElement");
var _hooks = require("./hooks");
var _common = require("./common");
var _excluded = ["id", "className", "label", "required", "error", "cols", "elementRef", "inputRef", "onChange", "onValueChange"];
/**
 *
 */

/**
 *
 */
var Toggle = exports.Toggle = (0, _common.createFC)(function (props) {
  var id = props.id,
    className = props.className,
    label = props.label,
    required = props.required,
    error = props.error,
    cols = props.cols,
    elementRef = props.elementRef,
    inputRef = props.inputRef,
    onChange_ = props.onChange,
    onValueChange = props.onValueChange,
    rprops = (0, _objectWithoutProperties2["default"])(props, _excluded);
  var onChange = (0, _hooks.useEventCallback)(function (e) {
    onChange_ === null || onChange_ === void 0 || onChange_(e);
    onValueChange === null || onValueChange === void 0 || onValueChange(e.target.checked);
  });
  var toggleClassNames = (0, _classnames["default"])(className, 'slds-checkbox_toggle slds-grid');
  var toggle = /*#__PURE__*/_react["default"].createElement("label", {
    className: toggleClassNames
  }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
    ref: inputRef,
    id: id,
    type: "checkbox"
  }, rprops, {
    onChange: onChange
  })), /*#__PURE__*/_react["default"].createElement("span", {
    className: "slds-checkbox_faux_container"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "slds-checkbox_faux"
  }), /*#__PURE__*/_react["default"].createElement("span", {
    className: "slds-checkbox_on"
  }, "Enabled"), /*#__PURE__*/_react["default"].createElement("span", {
    className: "slds-checkbox_off"
  }, "Disabled")));
  var formElemProps = {
    controlId: id,
    label: label,
    required: required,
    error: error,
    cols: cols,
    elementRef: elementRef
  };
  return /*#__PURE__*/_react["default"].createElement(_FormElement.FormElement, formElemProps, toggle);
}, {
  isFormElement: true
});
//# sourceMappingURL=Toggle.js.map