radioField.tsx 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import RadioGroup, {RadioGroupProps} from 'sentry/components/forms/controls/radioGroup';
  2. import FormField from 'sentry/components/forms/formField';
  3. // XXX(epurkhiser): This is wrong, it should not be inheriting these props
  4. import {InputFieldProps, OnEvent} from './inputField';
  5. export interface RadioFieldProps extends Omit<InputFieldProps, 'type'> {
  6. choices?: RadioGroupProps<any>['choices'];
  7. orientInline?: RadioGroupProps<any>['orientInline'];
  8. }
  9. function handleChange(
  10. id: string,
  11. onChange: OnEvent,
  12. onBlur: OnEvent,
  13. e: React.FormEvent<HTMLInputElement>
  14. ) {
  15. onChange(id, e);
  16. onBlur(id, e);
  17. }
  18. function RadioField(props: RadioFieldProps) {
  19. return (
  20. <FormField {...props}>
  21. {({id, onChange, onBlur, value, disabled, orientInline, ...fieldProps}) => (
  22. // XXX: The label must be present on the role="radiogroup" element. The
  23. // `htmlFor` attribute on the Field label does NOT link to the group.
  24. <RadioGroup
  25. id={id}
  26. choices={fieldProps.choices}
  27. disabled={disabled}
  28. orientInline={orientInline}
  29. label={fieldProps.label}
  30. value={value === '' ? null : value}
  31. onChange={(v, e) => handleChange(v, onChange, onBlur, e)}
  32. />
  33. )}
  34. </FormField>
  35. );
  36. }
  37. export default RadioField;