@shopgate/engage/components/Radio/Radio.js

Shopgate's ENGAGE library.

function _defineProperty(obj,key,value){if(key in obj){Object.defineProperty(obj,key,{value:value,enumerable:true,configurable:true,writable:true});}else{obj[key]=value;}return obj;}function _extends(){_extends=Object.assign||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{hot}from'react-hot-loader/root';import React from'react';import PropTypes from'prop-types';import classNames from'classnames';import{css}from'glamor';import CheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';import UncheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';import{Ripple}from'@shopgate/engage/components';import{useRadioGroup}from"../RadioGroup";var styles={root:css({display:'inline-flex',alignItems:'inherit',justifyContent:'inherit',position:'relative',borderRadius:'50%'}).toString(),input:css({top:0,left:0,margin:0,opacity:0,padding:0,position:'absolute',zIndex:1,width:'100%',height:'100%'}).toString(),radioContainer:css({display:'flex',position:'relative',width:24,height:24}).toString(),radio:css({height:'100%',width:'100%'}).toString(),radioChecked:css({color:'var(--color-primary)'}).toString(),radioDisabled:css({opacity:0.5,pointerEvents:'none'}).toString(),ripple:css({padding:12}).toString()};/**
 * The Radio component
 * @param {Object} props The component props
 * @returns {JSX}
 */var Radio=function Radio(_ref){var classes=_ref.classes,nameProp=_ref.name,onChangeProp=_ref.onChange,checkedProp=_ref.checked,disabledProp=_ref.disabled,valueProp=_ref.value,attributes=_ref.attributes;var radioGroup=useRadioGroup();var name=nameProp;var checked=checkedProp;var onChange=onChangeProp;if(radioGroup){if(checked===null){checked=radioGroup.value===valueProp;}if(typeof radioGroup.name!=='undefined'){name=radioGroup.name;}if(typeof radioGroup.onChange!=='undefined'){onChange=radioGroup.onChange;}}return React.createElement("span",{className:classNames(styles.root,classes.root)},React.createElement(Ripple,{className:styles.ripple,color:"var(--color-primary)"},React.createElement("input",_extends({className:styles.input,type:"radio",name:name,value:valueProp,checked:checked,onChange:onChange,disabled:disabledProp,id:"".concat(name,"_").concat(valueProp)},attributes)),React.createElement("div",{className:classNames(styles.radioContainer,_defineProperty(_defineProperty({},styles.radioDisabled,disabledProp),classes.disabled,disabledProp))},checked&&React.createElement(CheckedIcon,{className:classNames(styles.radio,styles.radioChecked,classes.radioChecked,'checkedIcon')}),!checked&&React.createElement(UncheckedIcon,{className:classNames(styles.radio,classes.radioUnchecked,'uncheckedIcon')}))));};Radio.defaultProps={classes:{},checked:null,disabled:false,onChange:null,name:null,value:null,attributes:null};export default hot(Radio);