117 lines
3.4 KiB
JavaScript
117 lines
3.4 KiB
JavaScript
import { CircleFill, Circle, ExclamationTriangle } from "react-bootstrap-icons";
|
|
|
|
const Radiogroup = (props) => {
|
|
const {
|
|
className,
|
|
classNames,
|
|
labelText,
|
|
title,
|
|
price,
|
|
ref,
|
|
onClick,
|
|
value,
|
|
options,
|
|
disabled,
|
|
radioError,
|
|
} = props;
|
|
const classCheckbox = "checkbox";
|
|
const classOption = "option";
|
|
|
|
return (
|
|
<div className="radio-option-container">
|
|
<div className="radio-group-title-box">
|
|
{title === "Document type" ? (
|
|
<div className="checkbox-title-icon-box">
|
|
<ExclamationTriangle
|
|
style={{
|
|
color: "red",
|
|
marginRight: "8px",
|
|
marginBottom: "6px",
|
|
}}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
{title && <div className="checkbox-title">{title}</div>}
|
|
</div>
|
|
|
|
<div className="checkbox-option-div">
|
|
{options &&
|
|
options?.length &&
|
|
options.map((option, index) => (
|
|
<div
|
|
className="option-container"
|
|
key={option.name}
|
|
onClick={() => !disabled && onClick && onClick(option)}
|
|
>
|
|
<div className="checked-icon">
|
|
{value === option.value ? (
|
|
<div className="zora">
|
|
<div className="circle-container">
|
|
<CircleFill
|
|
className={
|
|
value === option.value
|
|
? "clickable-icon-active"
|
|
: "clieckable-icon"
|
|
}
|
|
color="#1a76c7"
|
|
size="20px"
|
|
onClick={(e) => {
|
|
!disabled && onClick(e);
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
className="option-label"
|
|
htmlFor={"helper-radio-" + index}
|
|
>
|
|
{option.name}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="zora">
|
|
<div className="circle-container">
|
|
<Circle
|
|
className={
|
|
value === option.value
|
|
? "clickable-icon-active"
|
|
: "clieckable-icon"
|
|
}
|
|
color="#1a76c7"
|
|
size="20px"
|
|
onClick={(e) => {
|
|
!disabled && onClick(e);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div
|
|
className="option-label"
|
|
htmlFor={"helper-radio-" + index}
|
|
>
|
|
{option.name}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="radio-error-box">
|
|
{radioError ? (
|
|
<div className="modal-document-error">{radioError}</div>
|
|
) : (
|
|
<></>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen.
|
|
*/
|
|
|
|
export default Radiogroup;
|