@shopify/polaris/dist/esm/components/RadioButton/RadioButton.js

Shopify’s product component library

import React$1, { useRef, useState } from 'react';
import { useFeatures } from '../../utilities/features/hooks.js';
import { useUniqueId } from '../../utilities/unique-id/hooks.js';
import { classNames } from '../../utilities/css.js';
import { useToggle as useToggle$1 } from '../../utilities/use-toggle.js';
import { Choice as Choice$1, helpTextID } from '../Choice/Choice.js';
import styles from './RadioButton.scss.js';

function RadioButton({
  ariaDescribedBy: ariaDescribedByProp,
  label,
  labelHidden,
  helpText,
  checked,
  disabled,
  onChange,
  onFocus,
  onBlur,
  id: idProp,
  name: nameProp,
  value
}) {
  const id = useUniqueId('RadioButton', idProp);
  const name = nameProp || id;
  const inputNode = useRef(null);
  const [keyFocused, setKeyFocused] = useState(false);
  const {
    newDesignLanguage
  } = useFeatures();
  const {
    value: mouseOver,
    setTrue: handleMouseOver,
    setFalse: handleMouseOut
  } = useToggle$1(false);

  const handleKeyUp = () => {
    !keyFocused && setKeyFocused(true);
  };

  const handleBlur = () => {
    onBlur && onBlur();
    setKeyFocused(false);
  };

  function handleChange({
    currentTarget
  }) {
    onChange && onChange(currentTarget.checked, id);
  }

  const describedBy = [];

  if (helpText) {
    describedBy.push(helpTextID(id));
  }

  if (ariaDescribedByProp) {
    describedBy.push(ariaDescribedByProp);
  }

  const ariaDescribedBy = describedBy.length ? describedBy.join(' ') : undefined;
  const inputClassName = classNames(styles.Input, newDesignLanguage && keyFocused && styles.keyFocused);
  const wrapperClassName = classNames(styles.RadioButton, newDesignLanguage && styles.newDesignLanguage);
  const iconMarkup = !newDesignLanguage && /*#__PURE__*/React$1.createElement("span", {
    className: styles.Icon
  });
  const backdropClassName = classNames(styles.Backdrop, mouseOver && styles.hover);
  return /*#__PURE__*/React$1.createElement(Choice$1, {
    label: label,
    labelHidden: labelHidden,
    disabled: disabled,
    id: id,
    helpText: helpText,
    onMouseOver: handleMouseOver,
    onMouseOut: handleMouseOut
  }, /*#__PURE__*/React$1.createElement("span", {
    className: wrapperClassName
  }, /*#__PURE__*/React$1.createElement("input", {
    id: id,
    name: name,
    value: value,
    type: "radio",
    checked: checked,
    disabled: disabled,
    className: inputClassName,
    onChange: handleChange,
    onFocus: onFocus,
    onKeyUp: handleKeyUp,
    onBlur: handleBlur,
    "aria-describedby": ariaDescribedBy,
    ref: inputNode
  }), /*#__PURE__*/React$1.createElement("span", {
    className: backdropClassName
  }), iconMarkup));
}

export { RadioButton };