@shopgate/engage
Version:
Shopgate's ENGAGE library.
79 lines (76 loc) • 2.76 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
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";
import { DIRECT_SHIP, ROPIS, BOPIS } from "../../constants";
/** @typedef {import('./FulfillmentSelector.types').Selection} Selection */
/**
* Renders a fulfillment selector radio item.
* @param {Object} props The component props.
* @param {Selection} props.name The name of the selection.
* @param {React.ReactNode} props.children The child elements.
* @param {function(Selection): void} props.onChange The change handler.
* @param {boolean} [props.disabled=false] Whether the item is disabled.
* @returns {JSX.Element} The rendered component.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const FulfillmentSelectorItemUnwrapped = ({
name,
children,
onChange,
disabled
}) => {
const {
selection
} = useFulfillmentSelectorState();
const checked = selection === name;
/**
* Handle the change to the radio item.
* @param {React.MouseEvent<HTMLLabelElement>} event The click event.
*/
const handleChange = event => {
event.preventDefault();
if (disabled) {
return;
}
onChange(name);
};
const containerClasses = classNames(radioContainer.toString(), {
[radioContainerDisabled.toString()]: disabled
});
return (
/*#__PURE__*/
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
_jsxs("label", {
htmlFor: name,
className: containerClasses,
onClick: handleChange
// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
,
role: "radio",
"aria-checked": checked,
tabIndex: "0",
children: [checked ? /*#__PURE__*/_jsx(CheckedIcon, {
className: disabled ? activeIconDisabled : activeIcon
}) : /*#__PURE__*/_jsx(UncheckedIcon, {
className: disabled ? inactiveIconDisabled : inactiveIcon
}), /*#__PURE__*/_jsx("input", {
type: "radio",
checked: checked,
name: name,
className: radio,
readOnly: true
}), /*#__PURE__*/_jsx("div", {
className: content,
children: children
})]
})
);
};
FulfillmentSelectorItemUnwrapped.defaultProps = {
disabled: false
};
export const FulfillmentSelectorItem = /*#__PURE__*/React.memo(FulfillmentSelectorItemUnwrapped);