@zohodesk/components/lib/v1/Switch/Switch.js

In this Package, we Provide Some Basic Components to Build Web App

"use strict";

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

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

var _defaultProps = require("./props/defaultProps");

var _propTypes = require("./props/propTypes");

var _Layout = require("../Layout");

var _Label = _interopRequireDefault(require("../Label/Label"));

var _SwitchModule = _interopRequireDefault(require("../../Switch/Switch.module.css"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var Switch = function Switch(props) {
  var id = props.id,
      name = props.name,
      value = props.value,
      checked = props.checked,
      disabled = props.disabled,
      isReadOnly = props.isReadOnly,
      size = props.size,
      text = props.text,
      labelSize = props.labelSize,
      labelPalette = props.labelPalette,
      title = props.title,
      disableTitle = props.disableTitle,
      dataId = props.dataId,
      dataSelectorId = props.dataSelectorId,
      customClass = props.customClass,
      customProps = props.customProps;

  function onChange(e) {
    var onChange = props.onChange;
    onChange && onChange(!checked, e);
  }

  var _customProps$SwitchPr = customProps.SwitchProps,
      SwitchProps = _customProps$SwitchPr === void 0 ? {} : _customProps$SwitchPr,
      _customProps$LabelPro = customProps.LabelProps,
      LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro;
  var _customClass$customSw = customClass.customSwitchWrap,
      customSwitchWrap = _customClass$customSw === void 0 ? '' : _customClass$customSw,
      _customClass$customSw2 = customClass.customSwitch,
      customSwitch = _customClass$customSw2 === void 0 ? '' : _customClass$customSw2,
      _customClass$customSw3 = customClass.customSwitchSize,
      customSwitchSize = _customClass$customSw3 === void 0 ? '' : _customClass$customSw3,
      _customClass$customLa = customClass.customLabel,
      customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
  size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
    align: "vertical",
    isCover: false,
    alignBox: "row",
    isInline: true,
    className: "".concat(_SwitchModule["default"].container, " ").concat(customSwitchWrap, " ").concat(disabled ? _SwitchModule["default"].disabled : isReadOnly ? _SwitchModule["default"].readonly : _SwitchModule["default"].effect),
    "data-title": disabled ? disableTitle : title,
    "aria-checked": checked,
    role: "switch",
    dataSelectorId: dataSelectorId
  }, SwitchProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
    className: "".concat(_SwitchModule["default"][size], " ").concat(customSwitchSize)
  }, /*#__PURE__*/_react["default"].createElement("input", {
    type: "checkbox",
    id: id,
    className: "".concat(_SwitchModule["default"].input, " ").concat(checked ? _SwitchModule["default"].checked : ''),
    name: name,
    value: value,
    checked: checked,
    disabled: disabled,
    readOnly: isReadOnly,
    onClick: !disabled || !isReadOnly ? onChange : null
  }), /*#__PURE__*/_react["default"].createElement("label", {
    htmlFor: id,
    "data-id": dataId,
    "data-test-id": dataId,
    className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
    tabIndex: isReadOnly || disabled ? '-1' : '0'
  })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
    text: text,
    palette: labelPalette,
    id: id,
    size: labelSize,
    type: "subtitle",
    onClick: !disabled || !isReadOnly ? onChange : null,
    customClass: customLabel
  }, LabelProps)));
};

Switch.defaultProps = _defaultProps.defaultProps;
Switch.propTypes = _propTypes.propTypes;
var _default = Switch; // if (__DOCS__) {
//   Switch.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide'
//   };
// }

exports["default"] = _default;