import { FormControl, FormControlLabel, FormHelperText, FormLabel, MenuItem, Radio, RadioGroup } from "@material-ui/core"; import { makeStyles } from "@saleor/theme"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; const useStyles = makeStyles( theme => ({ alignTop: { alignSelf: "baseline", position: "relative", top: -6 }, formLabel: { marginBottom: theme.spacing(1) }, radioGroupInline: { flexDirection: "row" }, radioLabel: { marginBottom: -theme.spacing(0.5) }, radioLabelInline: { marginRight: theme.spacing(4) }, root: { "& $radioLabel": { "&:last-of-type": { marginBottom: 0 } }, padding: 0, width: "100%" }, rootNoLabel: { marginTop: -theme.spacing(1.5) } }), { name: "RadioGroupField" } ); export interface RadioGroupFieldChoice< T extends string | number = string | number > { disabled?: boolean; value: T; label: React.ReactNode; } interface RadioGroupFieldProps { alignTop?: boolean; choices: RadioGroupFieldChoice[]; className?: string; innerContainerClassName?: string; disabled?: boolean; error?: boolean; hint?: string; label?: React.ReactNode; name?: string; value: string | number; variant?: "block" | "inline" | "inlineJustify"; onChange: (event: React.ChangeEvent) => void; } export const RadioGroupField: React.FC = props => { const { alignTop, className, disabled, error, label, choices, value, onChange, name, hint, variant = "block", innerContainerClassName } = props; const classes = useStyles(props); return ( {label ? ( {label} ) : null} {choices.length > 0 ? ( choices.map(choice => ( } label={choice.label} key={choice.value} /> )) ) : ( )} {hint && {hint}} ); }; RadioGroupField.displayName = "RadioGroupField"; export default RadioGroupField;