@zohodesk/components/es/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.module.css";
export default class Switch extends React.Component {
  constructor(props) {
    super(props);
    this.onChange = this.onChange.bind(this);
  }

  onChange(e) {
    let {
      onChange,
      checked
    } = this.props;
    onChange && onChange(!checked, e);
  }

  render() {
    let {
      id,
      name,
      value,
      checked,
      disabled,
      isReadOnly,
      size,
      text,
      labelSize,
      labelPalette,
      title,
      disableTitle,
      dataId,
      dataSelectorId,
      customClass,
      customProps
    } = this.props;
    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 ? this.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 ? this.onChange : null,
      customClass: customLabel,
      ...LabelProps
    }));
  }

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