@shopgate/engage/components/RadioGroup/RadioGroup.js

Shopgate's ENGAGE library.

import React, { useState, useCallback, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import { css } from 'glamor';
import classNames from 'classnames';
import RadioGroupContext from "./RadioGroup.context";
import { jsx as _jsx } from "react/jsx-runtime";
const styles = {
  root: css({
    display: 'flex',
    flexDirection: 'column'
  }).toString()
};

/**
 * @param {Object} props The component props
 * @returns {JSX}
 */
const RadioGroup = ({
  classes,
  children,
  name,
  disabled,
  value: valueProp,
  defaultValue,
  onChange,
  component: Component
}) => {
  const [value, setValue] = useState(valueProp || defaultValue);
  useEffect(() => {
    setValue(valueProp || defaultValue);
  }, [defaultValue, valueProp]);
  const handleChange = useCallback(event => {
    setValue(event.target.value);
    if (onChange) {
      onChange(event, event.target.value);
    }
  }, [onChange]);
  const contextValue = useMemo(() => ({
    name,
    onChange: handleChange,
    value,
    disabled
  }), [disabled, handleChange, name, value]);
  return /*#__PURE__*/_jsx(RadioGroupContext.Provider, {
    value: contextValue,
    children: /*#__PURE__*/_jsx(Component, {
      role: "radiogroup",
      className: classNames(styles.root, classes.root),
      children: children
    })
  });
};
RadioGroup.defaultProps = {
  classes: {},
  children: null,
  defaultValue: null,
  disabled: false,
  value: null,
  onChange: null,
  component: 'div'
};
export default RadioGroup;