@zohodesk/components/es/deprecated/Switch/Switch.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

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); }

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Container, Box } from "../../v1/Layout";
import Label from "../../v1/Label/Label";
import style from "../../Switch/Switch.module.css";

const Switch = props => {
  let {
    id,
    name,
    value,
    checked,
    disabled,
    isReadOnly,
    size,
    text,
    labelSize,
    labelPalette,
    title,
    disableTitle,
    dataId,
    dataSelectorId,
    customClass,
    customProps
  } = props;

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

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

Switch.defaultProps = defaultProps;
Switch.propTypes = propTypes;
export default Switch; // if (__DOCS__) {
//   Switch.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide'
//   };
// }