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

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

import React from 'react';
import { defaultProps } from "./props/defaultProps";
import { propTypes } from "./props/propTypes";
import { Container, Box } from "../Layout";
import Label from "../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, {
    align: "vertical",
    isCover: false,
    alignBox: "row",
    isInline: true,
    className: `${style.container} ${customSwitchWrap} ${disabled ? style.disabled : isReadOnly ? style.readonly : style.effect}`,
    "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, {
    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'
//   };
// }