@zohodesk/components/es/v1/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'; // props

import defaultProps from "./props/defaultProps";
import propTypes from "./props/propTypes"; // methods

import cssJSLogic from "./css/cssJSLogic";
import { mergeStyle } from '@zohodesk/utils'; // hooks

import useSwitch from "./useSwitch"; // constants

import { ALIGN_ITEMS, ITEMS_DIRECTION, OFF_LABEL_RADIUS, THUMB_RADIUS } from "./contants"; // components

import Flex from '@zohodesk/layout/es/Flex/Flex';
import Label from "../../Label/Label"; // css

import defaultStyle from "./css/Switch_v1.module.css";

const Switch = props => {
  const {
    name,
    value,
    id,
    size,
    isDisabled,
    isReadOnly,
    hasStateIndication,
    label,
    labelPlacement,
    labelSize,
    title,
    customProps,
    tagAttributes,
    a11yAttributes,
    i18nKeys,
    customId,
    testId,
    customStyle
  } = props;
  const {
    container: customProps_container,
    label: customProps_label
  } = customProps;
  const {
    container: tagAttributes_container,
    switch: tagAttributes_switch
  } = tagAttributes;
  const {
    container: a11yAttributes_container,
    switch: a11yAttributes_switch = {},
    label: a11yAttributes_label
  } = a11yAttributes;
  const {
    ariaDisabled = isDisabled,
    ariaLabel,
    ...restA11yAttributes_switch
  } = a11yAttributes_switch;
  const {
    readOnlyAriaLabel: i18n_readOnlyAriaLabel = 'Read Only'
  } = i18nKeys;
  const readOnlyAriaLabel = label ? `${label}, ${i18n_readOnlyAriaLabel}` : i18n_readOnlyAriaLabel;
  const {
    isChecked,
    handleChange
  } = useSwitch(props);
  const style = mergeStyle(defaultStyle, customStyle);
  const {
    containerClass,
    labelClass,
    trackClass,
    trackWrapperClass,
    thumbClass,
    labelIndicationClass
  } = cssJSLogic({
    props: { ...props,
      isChecked
    },
    style
  });
  return /*#__PURE__*/React.createElement(Flex, _extends({}, customProps_container, {
    $ui_displayMode: "inline",
    $ui_direction: ITEMS_DIRECTION[labelPlacement],
    $ui_alignItems: ALIGN_ITEMS[labelPlacement],
    $tagAttributes_container: { ...tagAttributes_container,
      'data-selector-id': customId
    },
    testId: testId,
    customId: customId,
    $ui_className: containerClass,
    $a11yAttributes_container: a11yAttributes_container
  }), label && /*#__PURE__*/React.createElement(Label, _extends({}, customProps_label, {
    text: label,
    palette: isDisabled ? 'primary' : 'default',
    size: labelSize,
    htmlFor: id,
    customClass: labelClass,
    a11y: a11yAttributes_label,
    clipped: true,
    title: label
  })), /*#__PURE__*/React.createElement(Flex, {
    $flag_shrink: false,
    $ui_className: trackWrapperClass
  }, /*#__PURE__*/React.createElement("input", _extends({}, tagAttributes_switch, restA11yAttributes_switch, {
    type: "checkbox",
    id: id,
    name: name,
    value: value,
    checked: isChecked,
    onChange: handleChange,
    className: trackClass,
    "data-title": title,
    role: "switch",
    "aria-disabled": ariaDisabled,
    "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
  })), /*#__PURE__*/React.createElement("svg", {
    className: thumbClass,
    xmlns: "http://www.w3.org/2000/svg"
  }, /*#__PURE__*/React.createElement("circle", {
    cx: "50%",
    cy: "50%",
    r: THUMB_RADIUS[size]
  })), hasStateIndication ? /*#__PURE__*/React.createElement("svg", {
    className: labelIndicationClass,
    xmlns: "http://www.w3.org/2000/svg"
  }, isChecked ? /*#__PURE__*/React.createElement("rect", {
    width: "100%",
    height: "100%",
    rx: "50%"
  }) : /*#__PURE__*/React.createElement("circle", {
    cx: "50%",
    cy: "50%",
    r: OFF_LABEL_RADIUS[size]
  })) : null));
};

export default Switch;
Switch.defaultProps = defaultProps;
Switch.propTypes = propTypes;