kjannette/ax3Client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more

Browse Source
This commit is contained in:
Kenneth Jannette
2024-01-25 13:18:53 -06:00
parent 9dff4abd04
commit a076a3bf9f
3 changed files with 100 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/pageElements/Radio.js
View File

@@ -1,23 +1,95 @@
import { CircleFill, Circle } from "react-bootstrap-icons";
const Radio = ({
rightLabel,
leftLabel,
containerClassName,
labelClassName,
...props
}) => {
const Radio = (props) => {
const {
className,
classNames,
labelText,
title,
price,
ref,
onClick,
value,
options,
disabled,
} = props;
const classCheckbox = "checkbox";
const classOption = "option";
const foo = [];
return (
<div className={containerClassName}>
<label className={labelClassName}>
<input {...props} type="radio" />
{leftLabel && <span>{leftLabel}</span>}
<div></div>
{rightLabel && <span>{rightLabel}</span>}
</label>
<div>
{options.map((option) => (
<>{option.name}</>
))}
</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 Radio;
//
/*
{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>
))}
*/

27
src/pageElements/Radiogroup.js
View File

@@ -1,7 +1,6 @@
import { CircleFill, Circle } from "react-bootstrap-icons";
const Radiogroup = (props) => {
console.log("hello");
const {
className,
classNames,
@@ -13,37 +12,25 @@ const Radiogroup = (props) => {
value,
options,
disabled,
dynamicClassName,
optionContainerDynamicClass,
} = props;
const classCheckbox = "checkbox";
const classOption = "option";
const dynamicClass =
dynamicClassName === "signup-option-div"
? dynamicClassName
: "checkbox-option-div";
const optionContainerDynamic = optionContainerDynamicClass
? optionContainerDynamicClass
: "";
return (
<div className="radio-option-container">
{title && <div className="checkbox-title">{title}</div>}
<div className={`${dynamicClass}`}>
<div className="checkbox-option-div">
{options &&
options?.length &&
options.map((option, index) => (
<div
className={`option-container`}
className="option-container"
key={option.name}
onClick={() => !disabled && onClick && onClick(option)}
>
<div className="checked-icon">
{value === option.value ? (
<div className={`zora ${optionContainerDynamic}`}>
<div className="zora">
<div className="circle-container">
<CircleFill
className={
@@ -60,14 +47,14 @@ const Radiogroup = (props) => {
</div>
<div
className={`option-label ${optionContainerDynamic}`}
className="option-label"
htmlFor={"helper-radio-" + index}
>
{option.name}
</div>
</div>
) : (
<div className={`zora ${optionContainerDynamic}`}>
<div className="zora">
<div className="circle-container">
<Circle
className={
@@ -98,4 +85,8 @@ const Radiogroup = (props) => {
);
};
/**
* 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;