@lanaco/lnc-react-ui
Version:
React component library
698 lines (645 loc) • 17.9 kB
JavaScript
import { jsxs as i, jsx as e } from "react/jsx-runtime";
import { forwardRef as T, useState as b, useRef as D, useEffect as q } from "react";
import { p as ee, l as B, q as re } from "./utils-DtRLzzTZ.js";
import R from "./Button.js";
import { n as Q } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { M as S, C as M, a as L } from "./consts-C1uHV4xc.js";
import F from "./Icon.js";
import te from "./ProgressBar.js";
const ae = Q.div`
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2rem;
flex: 1 0 0;
& .wrapper__content {
display: flex;
flex-direction: column;
& .wrapper__title {
color: var(--gray-950, #14161a);
font-size: 1.75rem;
font-style: normal;
font-weight: 600;
line-height: 2.25rem;
letter-spacing: -0.59px;
}
& .wrapper__description {
color: var(--gray-950, #14161a);
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.5rem;
letter-spacing: -0.18px;
}
}
& .wrapper__action {
background: var(--gray-950, #14161a);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
padding: 0.625rem 0.75rem;
&:hover {
color: var(--white, #fff);
background: var(---gray-600, #676e79);
}
&:focus {
outline: none;
background: var(--gray-950, #14161a);
}
}
@media (max-width: ${S + "px"}) {
& .wrapper__title {
font-size: 1.375rem;
line-height: 1.75rem;
}
& .wrapper__description {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
`, ie = Q.div`
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
align-self: stretch;
& .wrapper__headline {
display: flex;
align-items: flex-start;
justify-items: space-between;
gap: 32px;
width: 100%;
& .wrapper__question-no {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 0.75rem;
width: 100%;
& .question-no__text {
color: var(--gray-950, #14161a);
font-size: 1.375rem;
font-style: normal;
font-weight: 600;
line-height: 1.75rem;
}
& .question-no__progress-bar {
height: 0.25rem;
& > div {
background: var(--yellow-600, #d97706);
}
}
}
& .wrapper__timer {
position: relative;
width: 3.75rem;
height: 3.75rem;
background-color: #f0f0f0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
& .timer__display {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
& .timer__text {
color: var(--red-600, #e11d48);
font-size: 0.75rem;
font-style: normal;
font-weight: 500;
line-height: 1rem;
letter-spacing: 0.5px;
}
}
}
}
& .wrapper__content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2.5rem;
width: 100%;
& .wrapper__item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
align-self: stretch;
& .wrapper__text {
color: var(--gray-950, #14161a);
font-size: 1rem;
font-style: normal;
font-weight: 600;
line-height: 1.5rem;
letter-spacing: 0.1px;
}
& .wrapper__answers {
display: flex;
align-items: flex-start;
gap: 0.75rem;
align-self: stretch;
& .wrapper__answer {
display: flex;
padding: 1rem 0.75rem;
align-items: flex-start;
justify-content: space-between;
border-radius: 0.75rem;
border: 1px solid var(--neutral-95012, rgba(20, 22, 26, 0.12));
color: var(--gray-950, #14161a);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
width: 100%;
&:hover {
cursor: pointer;
}
&.active {
border: 2px solid var(--yellow-600, #d97706);
}
& .wrapper__icon {
color: var(--yellow-600, #d97706);
}
}
}
}
& .wrapper__actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
align-items: center;
align-self: stretch;
width: 100%;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
& .wrapper__action {
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
min-width: 5rem;
&.action__give-up {
background: transparent;
color: var(--gray-950, #14161a);
&:hover {
background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
}
&:focus {
outline: none;
background: transparent;
}
}
&.action__next {
background: var(--gray-950, #14161a);
&:hover {
background: var(---gray-600, #676e79);
}
&:focus {
outline: none;
background: var(--gray-950, #14161a);
}
&:disabled {
color: var(--white, #fff);
background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
}
}
}
}
}
@media (max-width: ${S + "px"}) {
& .wrapper__content {
& .wrapper__item {
& .wrapper__answers {
flex-direction: column;
}
}
}
}
`, ne = Q.div`
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
& .wrapper__content {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
align-self: stretch;
& .wrapper__info {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
align-self: stretch;
color: var(--gray-950, #14161a);
align-items: center;
& .wrapper__title {
font-size: 1.75rem;
font-style: normal;
font-weight: 600;
line-height: 2.25rem;
}
& .wrapper__description {
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
}
}
}
& .wrapper__actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
width: 100%;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
& .wrapper__action {
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
min-width: 22rem;
width: 100%;
&.action__end-quiz {
background: transparent;
color: var(--gray-950, #14161a);
&:hover {
background: var(--neutral-9504, rgba(20, 22, 26, 0.12));
}
&:focus {
outline: none;
background: transparent;
}
}
&.action__continue {
background: var(--gray-950, #14161a);
&:hover {
background: var(---gray-600, #676e79);
}
&:focus {
outline: none;
background: var(--gray-950, #14161a);
}
}
}
}
@media (max-width: ${S + "px"}) {
width: 100%;
& .wrapper__actions {
& .wrapper__action {
width: 100%;
min-width: 100%;
}
}
}
`, le = T(
({
title: s,
description: c,
startQuizText: d = "Start quiz",
onStartQuiz: _ = () => {
}
}, o) => /* @__PURE__ */ i(ae, { children: [
/* @__PURE__ */ i("div", { className: "wrapper__content", children: [
/* @__PURE__ */ e("div", { className: "wrapper__title", children: s }),
/* @__PURE__ */ e("div", { className: "wrapper__description", children: c })
] }),
/* @__PURE__ */ e(
R,
{
text: d,
size: "medium",
className: "wrapper__action",
onClick: _
}
)
] })
), ce = T(
({
questionNoText: s,
questionNo: c,
totalQuestions: d,
text: _,
answers: o,
selectedAnswer: m,
secondsPerQuestion: r,
nextText: E = "Next",
giveUpText: C = "Give up",
nextDisabled: U = !0,
onSelectAnswer: Z = () => {
},
onGiveUp: $ = () => {
},
onNext: W = () => {
}
}, O) => {
const [f, k] = b(r), [h, I] = b(!0), u = D(null);
q(() => (h && f > 0 && (u.current = setInterval(() => {
k((a) => a > 0 ? a - 1 : 0);
}, 1e3)), () => clearInterval(u.current)), [h, f]);
const z = f > 0 ? f / r * L : 0, w = (a) => (m == null ? void 0 : m.uuid) === a;
return /* @__PURE__ */ i(ie, { children: [
/* @__PURE__ */ i("div", { className: "wrapper__headline", children: [
/* @__PURE__ */ i("div", { className: "wrapper__question-no", children: [
/* @__PURE__ */ e("div", { className: "question-no__text", children: `${s} ${c} / ${d}` }),
/* @__PURE__ */ e(
te,
{
progressPercentage: c / d * 100,
className: "question-no__progress-bar"
}
)
] }),
/* @__PURE__ */ i("div", { className: "wrapper__timer", children: [
/* @__PURE__ */ i("svg", { className: "timer__ring", width: "60", height: "60", children: [
/* @__PURE__ */ e(
"circle",
{
className: "ring__progres-background",
cx: "30",
cy: "30",
r: M,
stroke: "#e0e0e0",
strokeWidth: "4",
fill: "transparent"
}
),
/* @__PURE__ */ e(
"circle",
{
className: "ring__progres",
cx: "30",
cy: "30",
r: M,
stroke: "#d97706",
strokeWidth: "4",
fill: "transparent",
strokeLinecap: "round",
transform: "rotate(-90 30 30)",
strokeDasharray: L,
strokeDashoffset: L - z
}
)
] }),
/* @__PURE__ */ e("div", { className: "timer__display", children: /* @__PURE__ */ e("span", { className: "timer__text", children: ee(f) }) })
] })
] }),
/* @__PURE__ */ i("div", { className: "wrapper__content", children: [
/* @__PURE__ */ i("div", { className: "wrapper__item", children: [
/* @__PURE__ */ e("div", { className: "wrapper__text", children: _ }),
/* @__PURE__ */ e("div", { className: "wrapper__answers", children: o && (o == null ? void 0 : o.map((a, x) => /* @__PURE__ */ i(
"div",
{
className: `wrapper__answer ${w(a == null ? void 0 : a.uuid) ? "active" : ""}`,
onClick: () => Z(a),
children: [
`${String.fromCharCode(65 + x)}: ${a == null ? void 0 : a.label}`,
w(a == null ? void 0 : a.uuid) && /* @__PURE__ */ e(
F,
{
icon: " mng-lnc-checkmark--filled",
sizeInUnits: "1.25rem",
className: "wrapper__icon"
}
)
]
},
`quiz-answer__${x + 1}`
))) })
] }),
/* @__PURE__ */ i("div", { className: "wrapper__actions", children: [
/* @__PURE__ */ e(
R,
{
text: C,
borderRadius: "curved",
size: "medium",
className: "wrapper__action action__give-up",
onClick: $
}
),
/* @__PURE__ */ e(
R,
{
text: E,
borderRadius: "curved",
size: "medium",
className: "wrapper__action action__next",
disabled: U,
onClick: W
}
)
] })
] })
] });
}
), oe = T(
({
title: s,
description: c,
continueText: d = "Continue",
endQuizText: _ = "End quiz",
onContinue: o = () => {
},
onEndQuiz: m = () => {
}
}, r) => /* @__PURE__ */ i(ne, { children: [
/* @__PURE__ */ i("div", { className: "wrapper__content", children: [
/* @__PURE__ */ e(
F,
{
icon: " mng-lnc-checkmark--outline",
color: "success",
sizeInUnits: "4rem",
className: "wrapper__icon"
}
),
/* @__PURE__ */ i("div", { className: "wrapper__info", children: [
s && /* @__PURE__ */ e("div", { className: "wrapper__title", children: s }),
c && /* @__PURE__ */ e("div", { className: "wrapper__description", children: c })
] })
] }),
/* @__PURE__ */ i("div", { className: "wrapper__actions", children: [
/* @__PURE__ */ e(
R,
{
text: d,
borderRadius: "curved",
size: "medium",
className: "wrapper__action action__continue",
onClick: o
}
),
/* @__PURE__ */ e(
R,
{
text: _,
borderRadius: "curved",
size: "medium",
className: "wrapper__action action__end-quiz",
onClick: m
}
)
] })
] })
), l = {
START_QUIZ: 0,
QUIZ: 1,
CORRECT_ANSWER: 2
}, pe = Q.div`
display: flex;
width: 100%;
align-items: center;
gap: 2rem;
& .wrapper__outlet {
display: flex;
padding: 2rem 3rem;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
align-self: stretch;
}
& .wrapper__image {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
max-width: 22.5rem;
}
@media (max-width: ${S + "px"}) {
& .wrapper__outlet {
padding: 0;
}
& .wrapper__image {
display: none;
}
}
`, we = T(
({
welcomeTitle: s,
welcomeDescription: c,
endTitle: d,
endDescription: _,
image: o,
imageComponent: m,
questions: r,
secondsPerQuestion: E,
numOfCredits: C,
startQuizText: U = "Start quiz",
nextText: Z = "Next",
giveUpText: $ = "Give up",
questionNoText: W = "Question",
continueText: O = "Continue",
endQuizText: f = "End quiz",
onStartQuiz: k = () => {
},
onSelectAnswer: h = () => {
},
onGiveUp: I = () => {
},
onNext: u = () => {
},
onContinue: z = () => {
},
onEndQuiz: w = () => {
}
}, a) => {
const [x, g] = b(l.START_QUIZ), [p, v] = b(1), [t, j] = b(null), [y, N] = b(null), P = D([]), X = D(0), G = () => {
g(l.QUIZ), j(
r == null ? void 0 : r.find((n) => (n == null ? void 0 : n.questionNo) === p)
), k == null || k();
}, H = (n) => {
N(n), h == null || h();
}, J = () => {
g(l.START_QUIZ), v(1), N(null), I == null || I();
}, K = () => {
let n = (y == null ? void 0 : y.uuid) === (t == null ? void 0 : t.correctAnswer);
n ? (g(l.CORRECT_ANSWER), X.current += C || (t == null ? void 0 : t.numOfCredits)) : p === (r == null ? void 0 : r.length) ? (g(l.START_QUIZ), v(1), N(null)) : (v(p + 1), j(
r == null ? void 0 : r.find((A) => (A == null ? void 0 : A.questionNo) === p + 1)
), N(null)), P.current = [
...P.current,
{
question: t,
selectedAnswer: y,
isCorrect: n
}
], u == null || u();
}, V = () => {
p === (r == null ? void 0 : r.length) ? (g(l.START_QUIZ), v(1)) : (g(l.QUIZ), v(p + 1), j(
r == null ? void 0 : r.find((n) => (n == null ? void 0 : n.questionNo) === p + 1)
)), N(null), z == null || z();
}, Y = () => {
g(l.START_QUIZ), v(1), N(null), w == null || w();
};
return /* @__PURE__ */ i(pe, { ref: a, children: [
/* @__PURE__ */ i("div", { className: "wrapper__outlet", children: [
x === l.START_QUIZ && /* @__PURE__ */ e(
le,
{
title: s,
description: c,
startQuizText: U,
onStartQuiz: G
}
),
x === l.QUIZ && t && /* @__PURE__ */ e(
ce,
{
questionNoText: W,
questionNo: p,
totalQuestions: (r == null ? void 0 : r.length) || 0,
text: t == null ? void 0 : t.text,
answers: t == null ? void 0 : t.answers,
secondsPerQuestion: E || (t == null ? void 0 : t.secondsPerQuestion),
selectedAnswer: y,
nextText: Z,
giveUpText: $,
nextDisabled: !B(y),
onSelectAnswer: H,
onGiveUp: J,
onNext: K
},
`quiz-question__${p}`
),
x === l.CORRECT_ANSWER && /* @__PURE__ */ e(
oe,
{
title: d,
description: re(
_,
C || (t == null ? void 0 : t.numOfCredits)
),
continueText: O,
endQuizText: f,
onContinue: V,
onEndQuiz: Y
}
)
] }),
B(m) ? m : /* @__PURE__ */ e("img", { src: o, className: "wrapper__image" })
] });
}
);
export {
we as default
};