97 lines
2.3 KiB
TypeScript
97 lines
2.3 KiB
TypeScript
import FormControl from "@material-ui/core/FormControl";
|
|
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
|
import Radio from "@material-ui/core/Radio";
|
|
import RadioGroup from "@material-ui/core/RadioGroup";
|
|
import { createStyles, withStyles, WithStyles } from "@material-ui/core/styles";
|
|
import classNames from "classnames";
|
|
import React from "react";
|
|
|
|
const styles = createStyles({
|
|
formControl: {
|
|
padding: 0,
|
|
width: "100%"
|
|
},
|
|
formLabel: {
|
|
marginLeft: "-5px",
|
|
paddingBottom: "10px"
|
|
},
|
|
radioLabel: {
|
|
"& > span": {
|
|
padding: "10px 6px"
|
|
}
|
|
},
|
|
secondLabel: {
|
|
display: "block",
|
|
fontSize: "12px"
|
|
}
|
|
});
|
|
|
|
interface RadioSwitchFieldProps {
|
|
className?: string;
|
|
disabled?: boolean;
|
|
error?: boolean;
|
|
firstOptionLabel: React.ReactNode;
|
|
name?: string;
|
|
secondOptionLabel: React.ReactNode;
|
|
value?: boolean;
|
|
onChange: (event: React.ChangeEvent<any>) => void;
|
|
}
|
|
|
|
export const RadioSwitchField = withStyles(styles, {
|
|
name: "RadioSwitchField"
|
|
})(
|
|
({
|
|
className,
|
|
classes,
|
|
disabled,
|
|
error,
|
|
firstOptionLabel,
|
|
onChange,
|
|
name,
|
|
secondOptionLabel,
|
|
value
|
|
}: RadioSwitchFieldProps & WithStyles<typeof styles>) => {
|
|
const initialValue = value ? "true" : "false";
|
|
|
|
const change = event => {
|
|
onChange({
|
|
target: {
|
|
name: event.target.name,
|
|
value: event.target.value === "true" ? true : false
|
|
}
|
|
} as any);
|
|
};
|
|
|
|
return (
|
|
<FormControl
|
|
className={classNames(classes.formControl, className)}
|
|
error={error}
|
|
disabled={disabled}
|
|
>
|
|
<RadioGroup
|
|
aria-label={name}
|
|
name={name}
|
|
value={initialValue}
|
|
onChange={event => change(event)}
|
|
>
|
|
<FormControlLabel
|
|
value="true"
|
|
className={classes.radioLabel}
|
|
control={<Radio color="primary" />}
|
|
label={firstOptionLabel}
|
|
name={name}
|
|
/>
|
|
<FormControlLabel
|
|
value="false"
|
|
className={classes.radioLabel}
|
|
control={<Radio color="primary" />}
|
|
label={secondOptionLabel}
|
|
name={name}
|
|
/>
|
|
</RadioGroup>
|
|
</FormControl>
|
|
);
|
|
}
|
|
);
|
|
RadioSwitchField.displayName = "RadioSwitchField";
|
|
export default RadioSwitchField;
|