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

Shopgate's ENGAGE library.

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";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const 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}
 */
const Radio = ({
  classes,
  name: nameProp,
  onChange: onChangeProp,
  checked: checkedProp,
  disabled: disabledProp,
  value: valueProp,
  attributes
}) => {
  const radioGroup = useRadioGroup();
  let name = nameProp;
  let checked = checkedProp;
  let onChange = onChangeProp;
  if (radioGroup) {
    if (checked === null) {
      checked = radioGroup.value === valueProp;
    }
    if (typeof radioGroup.name !== 'undefined') {
      ({
        name
      } = radioGroup);
    }
    if (typeof radioGroup.onChange !== 'undefined') {
      ({
        onChange
      } = radioGroup);
    }
  }
  return /*#__PURE__*/_jsx("span", {
    className: classNames(styles.root, classes.root),
    children: /*#__PURE__*/_jsxs(Ripple, {
      className: styles.ripple,
      color: "var(--color-primary)",
      children: [/*#__PURE__*/_jsx("input", {
        className: styles.input,
        type: "radio",
        name: name,
        value: valueProp,
        checked: checked,
        onChange: onChange,
        disabled: disabledProp,
        id: `${name}_${valueProp}`,
        ...attributes
      }), /*#__PURE__*/_jsxs("div", {
        className: classNames(styles.radioContainer, {
          [styles.radioDisabled]: disabledProp,
          [classes.disabled]: disabledProp
        }),
        children: [checked && /*#__PURE__*/_jsx(CheckedIcon, {
          className: classNames(styles.radio, styles.radioChecked, classes.radioChecked, 'checkedIcon')
        }), !checked && /*#__PURE__*/_jsx(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 Radio;