df5aea6200
* Add component backbone * Make step component generic and typed * Add step tabs * Add settings view * Encapsulate all dialog components in one directory * Move types to separate file * Add mutations * Use gql types * Add error handling * Do not keep separate types file * Allow products to be exported * Fix types * Update snapshots * Update to latest schema * Add disabled option * Use wizard hook * Update type definitions * Queue export check task * Fix bug causing jobs to be endless and duplicated * Fix minor bugs * Add accordion component * Allow selection of fields to be exported * Add attribute export * Update snapshots * Update messages * Update changelog * Add missing key * Add quick peek to accordioin * Sort imports * Remove unused files * Add chiips to attribute selection * Change menu positioning * Add product counter * Add select all option * Update snapshots * Update messages * Remove unused import * Add chips * Add test tags * Update snapshots * Change number of max chips * Add accordion tags * Update messages
112 lines
2.7 KiB
TypeScript
112 lines
2.7 KiB
TypeScript
import FormControl from "@material-ui/core/FormControl";
|
|
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
|
import FormHelperText from "@material-ui/core/FormHelperText";
|
|
import FormLabel from "@material-ui/core/FormLabel";
|
|
import MenuItem from "@material-ui/core/MenuItem";
|
|
import Radio from "@material-ui/core/Radio";
|
|
import RadioGroup from "@material-ui/core/RadioGroup";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import classNames from "classnames";
|
|
import React from "react";
|
|
import { FormattedMessage } from "react-intl";
|
|
|
|
const useStyles = makeStyles(
|
|
theme => ({
|
|
formLabel: {
|
|
marginBottom: theme.spacing(1)
|
|
},
|
|
radioLabel: {
|
|
marginBottom: -theme.spacing(0.5)
|
|
},
|
|
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 {
|
|
choices: RadioGroupFieldChoice[];
|
|
className?: string;
|
|
disabled?: boolean;
|
|
error?: boolean;
|
|
hint?: string;
|
|
label?: string;
|
|
name?: string;
|
|
value: string | number;
|
|
onChange: (event: React.ChangeEvent<any>) => void;
|
|
}
|
|
|
|
export const RadioGroupField: React.FC<RadioGroupFieldProps> = props => {
|
|
const {
|
|
className,
|
|
disabled,
|
|
error,
|
|
label,
|
|
choices,
|
|
value,
|
|
onChange,
|
|
name,
|
|
hint
|
|
} = props;
|
|
const classes = useStyles(props);
|
|
|
|
return (
|
|
<FormControl
|
|
className={classNames(classes.root, className, {
|
|
[classes.rootNoLabel]: !label
|
|
})}
|
|
error={error}
|
|
disabled={disabled}
|
|
>
|
|
{label ? (
|
|
<FormLabel className={classes.formLabel}>{label}</FormLabel>
|
|
) : null}
|
|
<RadioGroup
|
|
aria-label={name}
|
|
name={name}
|
|
value={value}
|
|
onChange={onChange}
|
|
>
|
|
{choices.length > 0 ? (
|
|
choices.map(choice => (
|
|
<FormControlLabel
|
|
disabled={choice.disabled}
|
|
value={choice.value}
|
|
className={classes.radioLabel}
|
|
control={<Radio color="primary" />}
|
|
label={choice.label}
|
|
key={choice.value}
|
|
/>
|
|
))
|
|
) : (
|
|
<MenuItem disabled={true}>
|
|
<FormattedMessage defaultMessage="No results found" />
|
|
</MenuItem>
|
|
)}
|
|
</RadioGroup>
|
|
{hint && <FormHelperText>{hint}</FormHelperText>}
|
|
</FormControl>
|
|
);
|
|
};
|
|
RadioGroupField.displayName = "RadioGroupField";
|
|
export default RadioGroupField;
|