analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
288 lines (275 loc) • 12.9 kB
JavaScript
"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
var _chunkHZE6VBF5js = require('./chunk-HZE6VBF5.js');
var _chunkJR4KWECXjs = require('./chunk-JR4KWECX.js');
var _chunkBJMKBBN3js = require('./chunk-BJMKBBN3.js');
var _chunkTN3AYOMVjs = require('./chunk-TN3AYOMV.js');
// src/components/Alternative/Alternative.tsx
var _CheckCircle = require('@phosphor-icons/react/dist/csr/CheckCircle');
var _XCircle = require('@phosphor-icons/react/dist/csr/XCircle');
var _react = require('react');
var _jsxruntime = require('react/jsx-runtime');
var AlternativesList = ({
alternatives,
name,
defaultValue,
value,
onValueChange,
disabled = false,
layout = "default",
className = "",
mode = "interactive" /* INTERACTIVE */,
selectedValue
}) => {
const uniqueId = _react.useId.call(void 0, );
const groupName = name || `alternatives-${uniqueId}`;
const [actualValue, setActualValue] = _react.useState.call(void 0, 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__ */ _jsxruntime.jsx.call(void 0,
_chunkBJMKBBN3js.Badge_default,
{
variant: "solid",
action: "success",
iconLeft: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _CheckCircle.CheckCircleIcon, {}),
children: "Resposta correta"
}
);
case "incorrect" /* INCORRECT */:
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBJMKBBN3js.Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _XCircle.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__ */ _jsxruntime.jsx.call(void 0, "div", { className: radioClasses, children: isUserSelected && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: dotClasses }) });
};
if (layout === "detailed") {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"border-2 rounded-lg p-4 w-full",
statusStyles,
alternative.disabled ? "opacity-50" : ""
),
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start justify-between gap-3", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3 flex-1", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mt-1", children: renderRadio() }),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkHZE6VBF5js.HtmlMathRenderer_default,
{
content: alternative.label,
className: _chunkTN3AYOMVjs.cn.call(void 0,
"block font-medium",
selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
)
}
),
alternative.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
] })
] }),
statusBadge && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0", children: statusBadge })
] })
},
alternativeId
);
}
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex flex-row justify-between items-start gap-2 p-2 rounded-lg w-full",
statusStyles,
alternative.disabled ? "opacity-50" : ""
),
children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 flex-1", children: [
renderRadio(),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkHZE6VBF5js.HtmlMathRenderer_default,
{
content: alternative.label,
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex-1",
selectedValue === alternative.value || statusBadge ? "text-text-950" : "text-text-600"
)
}
)
] }),
statusBadge && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0", children: statusBadge })
]
},
alternativeId
);
};
if (isReadonly) {
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0, "flex flex-col", getLayoutClasses(), "w-full", className),
children: alternatives.map(
(alternative) => renderReadonlyAlternative(alternative)
)
}
);
}
return /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkJR4KWECXjs.RadioGroup,
{
name: groupName,
defaultValue,
value,
onValueChange: (value2) => {
setActualValue(value2);
_optionalChain([onValueChange, 'optionalCall', _ => _(value2)]);
},
disabled,
className: _chunkTN3AYOMVjs.cn.call(void 0, "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__ */ _jsxruntime.jsx.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"border-2 rounded-lg p-4 transition-all",
statusStyles,
alternative.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
),
children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start justify-between gap-3", children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3 flex-1", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkJR4KWECXjs.RadioGroupItem,
{
value: alternative.value,
id: alternativeId,
disabled: alternative.disabled,
className: "mt-1"
}
),
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"label",
{
htmlFor: alternativeId,
className: _chunkTN3AYOMVjs.cn.call(void 0,
"block font-medium",
actualValue === alternative.value ? "text-text-950" : "text-text-600",
alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
),
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHZE6VBF5js.HtmlMathRenderer_default, { content: alternative.label, inline: true })
}
),
alternative.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-text-600 mt-1", children: alternative.description })
] })
] }),
statusBadge && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0", children: statusBadge })
] })
},
alternativeId
);
}
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
className: _chunkTN3AYOMVjs.cn.call(void 0,
"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__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 flex-1", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
_chunkJR4KWECXjs.RadioGroupItem,
{
value: alternative.value,
id: alternativeId,
disabled: alternative.disabled
}
),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0,
"label",
{
htmlFor: alternativeId,
className: _chunkTN3AYOMVjs.cn.call(void 0,
"flex-1",
actualValue === alternative.value ? "text-text-950" : "text-text-600",
alternative.disabled ? "cursor-not-allowed" : "cursor-pointer"
),
children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHZE6VBF5js.HtmlMathRenderer_default, { content: alternative.label, inline: true })
}
)
] }),
statusBadge && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0", children: statusBadge })
]
},
alternativeId
);
})
}
);
};
var HeaderAlternative = _react.forwardRef.call(void 0,
({ className, title, subTitle, content, ...props }, ref) => {
return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0,
"div",
{
ref,
className: _chunkTN3AYOMVjs.cn.call(void 0,
"bg-background p-4 flex flex-col gap-4 rounded-xl",
className
),
...props,
children: [
/* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "flex flex-col", children: [
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-950 font-bold text-lg", children: title }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-text-700 text-sm ", children: subTitle })
] }),
/* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkHZE6VBF5js.HtmlMathRenderer_default, { content, className: "text-text-950 text-md" })
]
}
);
}
);
exports.AlternativesList = AlternativesList; exports.HeaderAlternative = HeaderAlternative;
//# sourceMappingURL=chunk-DR7XX7RN.js.map