56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
import React from "react";
|
|
|
|
import Tooltip from "../ToolTip";
|
|
import Typography, { ETypo, ETypoColor } from "../Typography";
|
|
import classes from "./classes.module.scss";
|
|
import classNames from "classnames";
|
|
|
|
type IProps = {
|
|
name: string;
|
|
toolTip?: string;
|
|
checked?: boolean;
|
|
defaultChecked?: boolean;
|
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
value: string;
|
|
disabled: boolean;
|
|
description?: string;
|
|
label?: string;
|
|
};
|
|
|
|
export default class RadioBox extends React.Component<IProps> {
|
|
static defaultProps = {
|
|
disabled: false,
|
|
};
|
|
public override render(): JSX.Element {
|
|
return (
|
|
<Typography typo={ETypo.TEXT_LG_REGULAR} color={ETypoColor.COLOR_GENERIC_BLACK}>
|
|
<label className={classNames(classes["root"], this.props.disabled && classes["disabled"])}>
|
|
<input
|
|
type="radio"
|
|
name={this.props.name}
|
|
checked={this.props.checked}
|
|
defaultChecked={this.props.defaultChecked}
|
|
onChange={this.props.onChange}
|
|
value={this.props.value}
|
|
disabled={this.props.disabled}
|
|
/>
|
|
<div className={classes["content"]}>
|
|
{this.props.label && (
|
|
<Typography className={classes["label"]} typo={ETypo.TEXT_SM_SEMIBOLD}>
|
|
{this.props.label}
|
|
</Typography>
|
|
)}
|
|
{this.props.description && (
|
|
<Typography className={classes["description"]} typo={ETypo.TEXT_SM_REGULAR}>
|
|
{this.props.description}
|
|
</Typography>
|
|
)}
|
|
</div>
|
|
|
|
{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
|
|
</label>
|
|
</Typography>
|
|
);
|
|
}
|
|
}
|