@shopgate/engage/components/Switch/index.js

Shopgate's ENGAGE library.

import React,{useMemo}from'react';import PropTypes from'prop-types';import{VisuallyHidden}from'@shopgate/engage/a11y/components';import styles from"./style";/**
 * The Switch component.
 * @param {Object} props The component props.
 * @param {React.ReactNode} [children=null] Component children are rendered as the checkbox label
 * @param {boolean} [props.checked=false] Whether the checkbox is checked
 * @param {boolean} [props.disabled=false] Whether the checkbox is disabled
 * @param {Function} [props.onChange] Callback invoked when the checkbox changes
 * @param {string} [props.a11yFallbackText=null] Optional text to be presented to screen readers
 * when issues with the regular label are expected e.g. due to problematic layout.
 * @param {string} [props.id=null] Optional custom id for checkbox input and label
 * @returns {JSX.Element}
 */var Switch=function Switch(_ref){var disabled=_ref.disabled,checked=_ref.checked,onChange=_ref.onChange,id=_ref.id,a11yFallbackText=_ref.a11yFallbackText,children=_ref.children;var switchId=useMemo(function(){return id||Math.random();},[id]);return React.createElement("div",{className:styles.container},React.createElement("input",{type:"checkbox",disabled:disabled,checked:checked,onChange:onChange,className:styles.input,id:switchId}),children&&React.createElement("label",{htmlFor:switchId},React.createElement("span",{"aria-hidden":!!a11yFallbackText},children),a11yFallbackText&&React.createElement(VisuallyHidden,null,a11yFallbackText)));};Switch.defaultProps={children:null,disabled:false,a11yFallbackText:null,checked:false,onChange:null,id:null};export default Switch;