@shopgate/engage
Version:
Shopgate's ENGAGE library.
8 lines • 1.96 kB
JavaScript
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;}import*as React from'react';import classNames from'classnames';import CheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioCheckedIcon';import UncheckedIcon from'@shopgate/pwa-ui-shared/icons/RadioUncheckedIcon';import{radioContainer,disabled as radioContainerDisabled,activeIcon,activeIconDisabled,inactiveIcon,inactiveIconDisabled,radio,content}from"./FulfillmentSelectorItem.style";import{useFulfillmentSelectorState}from"./FulfillmentSelector.hooks";/**
* Renders a fulfillment selector radio item.
* @param {Object} props The component props.
* @returns {JSX}
*/function FulfillmentSelectorItemUnwrapped(props){var name=props.name,children=props.children,onChange=props.onChange,disabled=props.disabled;var _useFulfillmentSelect=useFulfillmentSelectorState(),selection=_useFulfillmentSelect.selection;var checked=selection===name;/**
* Handle the change to the radio item.
* @param {Object} event The change event.
*/function handleChange(event){event.preventDefault();if(disabled){return;}onChange(name);}var containerClasses=classNames(radioContainer.toString(),_defineProperty({},radioContainerDisabled.toString(),disabled));return React.createElement("label",{htmlFor:name,className:containerClasses,onClick:handleChange,role:"radio","aria-checked":checked,tabIndex:"0"},checked?React.createElement(CheckedIcon,{className:disabled?activeIconDisabled:activeIcon}):React.createElement(UncheckedIcon,{className:disabled?inactiveIconDisabled:inactiveIcon}),React.createElement("input",{type:"radio",checked:checked,name:name,className:radio,readOnly:true}),React.createElement("div",{className:content},children));}FulfillmentSelectorItemUnwrapped.defaultProps={disabled:false};export var FulfillmentSelectorItem=React.memo(FulfillmentSelectorItemUnwrapped);