analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
288 lines (286 loc) • 10.7 kB
JavaScript
import {
HtmlMathRenderer_default
} from "./chunk-FN4G43WK.mjs";
import {
RadioGroup,
RadioGroupItem
} from "./chunk-NLK3GG73.mjs";
import {
Badge_default
} from "./chunk-OEW3ST4F.mjs";
import {
cn
} from "./chunk-53ICLDGS.mjs";
// src/components/Alternative/Alternative.tsx
import { CheckCircleIcon } from "@phosphor-icons/react/dist/csr/CheckCircle";
import { XCircleIcon } from "@phosphor-icons/react/dist/csr/XCircle";
import { forwardRef, useId, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var AlternativesList = ({
alternatives,
name,
defaultValue,
value,
onValueChange,
disabled = false,
layout = "default",
className = "",
mode = "interactive" /* INTERACTIVE */,
selectedValue
}) => {
const uniqueId = useId();
const groupName = name || `alternatives-${uniqueId}`;
const [actualValue, setActualValue] = useState(value);
const isReadonly = mode === "readonly";
const getStatusStyles = (status, isReadonly2) => {
const hoverClass = isReadonly2 ? "" : "hover:bg-background-50";
switch (status) {
case "correct" /* CORRECT */:
return "bg-success-background border-success-300";
case "incorrect" /* INCORRECT */:
return "bg-error-background border-error-300";
default:
return `bg-background border-border-100 ${hoverClass}`;
}
};
const getStatusBadge = (status) => {
switch (status) {
case "correct" /* CORRECT */:
return /* @__PURE__ */ jsx(
Badge_default,
{
variant: "solid",
action: "success",
iconLeft: /* @__PURE__ */ jsx(CheckCircleIcon, {}),
children: "Resposta correta"
}
);
case "incorrect" /* INCORRECT */:
return /* @__PURE__ */ jsx(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ jsx(XCircleIcon, {}), children: "Resposta incorreta" });
default:
return null;
}
};
const getLayoutClasses = () => {
switch (layout) {
case "compact":
return "gap-2";
case "detailed":
return "gap-4";
default:
return "gap-3.5";
}
};
const renderReadonlyAlternative = (alternative) => {
const alternativeId = alternative.value;
const isUserSelected = selectedValue === alternative.value;
const isCorrectAnswer = alternative.status === "correct" /* CORRECT */;
let displayStatus = void 0;
if (isUserSelected && !isCorrectAnswer) {
displayStatus = "incorrect" /* INCORRECT */;
} else if (isCorrectAnswer) {
displayStatus = "correct" /* CORRECT */;
}
const statusStyles = getStatusStyles(displayStatus, true);
const statusBadge = getStatusBadge(displayStatus);
const renderRadio = () => {
const radioClasses = `w-6 h-6 rounded-full border-2 cursor-default transition-all duration-200 flex items-center justify-center ${isUserSelected ? "border-primary-950 bg-background" : "border-border-400 bg-background"}`;
const dotClasses = "w-3 h-3 rounded-full bg-primary-950 transition-all duration-200";
return /* @__PURE__ */ jsx("div", { className: radioClasses, children: isUserSelected && /* @__PURE__ */ jsx("div", { className: dotClasses }) });
};
if (layout === "detailed") {
return /* @__PURE__ */ jsx(
"div",
{
className: cn(
"border-2 rounded-lg p-4 w-full",
statusStyles,
alternative.disabled ? "opacity-50" : ""
),
children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 flex-1", children: [
/* @__PURE__ */ jsx("div", { className: "mt-1", children: renderRadio() }),
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsx(
HtmlMathRenderer_default,
{
content: alternative.label,
className: cn(
"block font-medium",
selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
)
}
),
alternative.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
] })
] }),
statusBadge && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: statusBadge })
] })
},
alternativeId
);
}
return /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"flex flex-row justify-between items-start gap-2 p-2 rounded-lg w-full",
statusStyles,
alternative.disabled ? "opacity-50" : ""
),
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
renderRadio(),
/* @__PURE__ */ jsx(
HtmlMathRenderer_default,
{
content: alternative.label,
className: cn(
"flex-1",
selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
)
}
)
] }),
statusBadge && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: statusBadge })
]
},
alternativeId
);
};
if (isReadonly) {
return /* @__PURE__ */ jsx(
"div",
{
className: cn("flex flex-col", getLayoutClasses(), "w-full", className),
children: alternatives.map(
(alternative) => renderReadonlyAlternative(alternative)
)
}
);
}
return /* @__PURE__ */ jsx(
RadioGroup,
{
name: groupName,
defaultValue,
value,
onValueChange: (value2) => {
setActualValue(value2);
onValueChange?.(value2);
},
disabled,
className: cn("flex flex-col", getLayoutClasses(), className),
children: alternatives.map((alternative, index) => {
const alternativeId = alternative.value || `alt-${index}`;
const statusStyles = getStatusStyles(alternative.status, false);
const statusBadge = getStatusBadge(alternative.status);
if (layout === "detailed") {
return /* @__PURE__ */ jsx(
"div",
{
className: cn(
"border-2 rounded-lg p-4 transition-all",
statusStyles,
alternative.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
),
children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 flex-1", children: [
/* @__PURE__ */ jsx(
RadioGroupItem,
{
value: alternative.value,
id: alternativeId,
disabled: alternative.disabled,
className: "mt-1"
}
),
/* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
/* @__PURE__ */ jsx(
"label",
{
htmlFor: alternativeId,
className: cn(
"block font-medium",
actualValue === alternative.value ? "text-text-950" : "text-text-600",
alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
),
children: /* @__PURE__ */ jsx(HtmlMathRenderer_default, { content: alternative.label, inline: true })
}
),
alternative.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
] })
] }),
statusBadge && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: statusBadge })
] })
},
alternativeId
);
}
return /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"flex flex-row justify-between gap-2 items-start p-2 rounded-lg transition-all",
statusStyles,
alternative.disabled ? "opacity-50 cursor-not-allowed" : ""
),
children: [
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-1", children: [
/* @__PURE__ */ jsx(
RadioGroupItem,
{
value: alternative.value,
id: alternativeId,
disabled: alternative.disabled
}
),
/* @__PURE__ */ jsx(
"label",
{
htmlFor: alternativeId,
className: cn(
"flex-1",
actualValue === alternative.value ? "text-text-950" : "text-text-600",
alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
),
children: /* @__PURE__ */ jsx(HtmlMathRenderer_default, { content: alternative.label, inline: true })
}
)
] }),
statusBadge && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: statusBadge })
]
},
alternativeId
);
})
}
);
};
var HeaderAlternative = forwardRef(
({ className, title, subTitle, content, ...props }, ref) => {
return /* @__PURE__ */ jsxs(
"div",
{
ref,
className: cn(
"bg-background p-4 flex flex-col gap-4 rounded-xl",
className
),
...props,
children: [
/* @__PURE__ */ jsxs("span", { className: "flex flex-col", children: [
/* @__PURE__ */ jsx("p", { className: "text-text-950 font-bold text-lg", children: title }),
/* @__PURE__ */ jsx("p", { className: "text-text-700 text-sm ", children: subTitle })
] }),
/* @__PURE__ */ jsx(HtmlMathRenderer_default, { content, className: "text-text-950 text-md" })
]
}
);
}
);
export {
AlternativesList,
HeaderAlternative
};
//# sourceMappingURL=chunk-TUJ3CWS2.mjs.map