@streamlayer/react-ui 1.19.1 → 1.21.0

package/lib/ui/gamification/vote/vote-option/index.js

@@ -1,15 +1,15 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { useState as U, useLayoutEffect as V } from "react";
-import { QuestionImages as a, QuestionType as o, QuestionStatus as D } from "@streamlayer/sdk-web-types";
-import { AnimatedCounter as $ } from "../../../animated-counter/index.js";
-import { IconDefault as F, IconContainer as M, IconWrap as z, IconCircle as G, ButtonContainer as H, ButtonPctWrap as J, ButtonPct as K, ButtonBody as X, Title as Y, PtsWrap as Z, Pts as _, Indicators as q, CheckIcon as tt, Percentage as et } from "./styles.js";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useState as j, useLayoutEffect as y } from "react";
+import { QuestionImages as a, QuestionType as o, QuestionStatus as S } from "@streamlayer/sdk-web-types";
+import { AnimatedCounter as U } from "../../../animated-counter/index.js";
+import { IconDefault as V, IconContainer as $, IconWrap as F, IconCircle as M, ButtonContainer as z, ButtonPctWrap as G, ButtonPct as H, ButtonBody as J, Title as K, PtsWrap as X, Pts as Y, Indicators as Z, CheckIcon as _, Percentage as q } from "./styles.js";
 const E = {
-  [a.CENTERED]: (t) => /* @__PURE__ */ e(F, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
-  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e(M, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(z, { style: { backgroundImage: `url(${t})` } }) }),
-  [a.ROUNDED]: (t) => /* @__PURE__ */ e(G, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
+  [a.CENTERED]: (t) => /* @__PURE__ */ e(V, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
+  [a.TRANSPARENT]: (t) => /* @__PURE__ */ e($, { "data-testid": "vote-icon", children: /* @__PURE__ */ e(F, { style: { backgroundImage: `url(${t})` } }) }),
+  [a.ROUNDED]: (t) => /* @__PURE__ */ e(M, { "data-testid": "vote-icon", alt: "option-icon", src: t }),
   [a.NONE]: () => null,
   [a.UNSET]: () => null
-}, nt = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: i }) => {
+}, tt = ({ questionType: t, hasCorrectAnswer: c, correct: n, youVoted: r, questionVoted: i }) => {
   if (t === o.POLL && r)
     return "voted";
   if (t === o.PREDICTION) {
@@ -21,79 +21,77 @@ const E = {
       return "correct";
   }
   return t === o.TRIVIA && i && r ? n ? "correct" : "incorrect" : "unset";
-}, rt = ({
+}, et = ({
   questionType: t,
   questionVoted: c,
   correct: n,
   hasCorrectAnswer: r,
   questionStatus: i
-}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === D.RESOLVED && n : !1, dt = (t) => {
-  var S;
+}) => t === o.TRIVIA ? c && n : t === o.PREDICTION ? c && n && r || i === S.RESOLVED && n : !1, st = (t) => {
+  var N;
   const {
     // option props
     id: c,
     icon: n,
     text: r,
     percentageDecimal: i,
-    points: O,
+    points: D,
     // extra props
-    onVote: g,
-    markThatVoted: v,
-    onPercentsAnimated: f,
+    onVote: O,
+    markThatVoted: g,
+    onPercentsAnimated: u,
     youSelected: h,
     youVoted: w,
     questionVoted: s,
     imageMode: P,
-    answerTimeExpired: A,
+    answerTimeExpired: k,
     questionStatus: C,
-    isLoading: k,
+    isLoading: v,
     questionType: d,
-    correct: x,
-    hasCorrectAnswer: B,
-    votedAfterQuestionClosed: L,
-    enteredAnActiveQuestion: R,
-    marketClosed: I,
-    isEarlyPrediction: Q
-  } = t, [W, T] = U(0), m = nt(t), b = rt({ questionType: d, questionVoted: s, correct: x, hasCorrectAnswer: B, questionStatus: C }), l = I && d === o.PREDICTION, p = s || l, j = d === o.PREDICTION && !s && !I, N = s && !h && m !== "incorrect" && !w;
-  return V(() => {
-    T(0), requestAnimationFrame(() => {
-      T(i);
+    correct: A,
+    hasCorrectAnswer: x,
+    marketClosed: f,
+    isEarlyPrediction: B
+  } = t, [L, R] = j(0), I = tt(t), Q = et({ questionType: d, questionVoted: s, correct: A, hasCorrectAnswer: x, questionStatus: C }), m = f && d === o.PREDICTION, T = s || m, W = d === o.PREDICTION && !s && !f, p = s && !h && I !== "incorrect" && !w;
+  return y(() => {
+    R(0), requestAnimationFrame(() => {
+      R(i);
     });
-  }, [i]), /* @__PURE__ */ u(
-    H,
+  }, [i]), /* @__PURE__ */ l(
+    z,
     {
       value: c,
       "data-selected": h,
-      "data-answer-state": m,
-      disabled: s || k || A || l && !R || l && R && L,
-      "data-is-not-checked": N,
-      onClick: (y) => {
-        v(
-          d === o.PREDICTION ? I : C === D.RESOLVED
-        ), g(y);
+      "data-answer-state": I,
+      disabled: s || v || k || m,
+      "data-is-not-checked": p,
+      onClick: (b) => {
+        g(
+          d === o.PREDICTION ? f : C === S.RESOLVED
+        ), O(b);
       },
       children: [
-        /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(
-          K,
+        /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+          H,
           {
-            "data-answer-state": m,
-            "data-is-not-checked": N,
-            style: { width: `${p ? W : 0}%` },
+            "data-answer-state": I,
+            "data-is-not-checked": p,
+            style: { width: `${T ? L : 0}%` },
             onTransitionEnd: () => {
-              l || f == null || f();
+              m || u == null || u();
             }
           }
         ) }),
-        /* @__PURE__ */ u(X, { children: [
-          n && P && ((S = E[P]) == null ? void 0 : S.call(E, n)),
-          /* @__PURE__ */ e(Y, { children: r }),
-          j && /* @__PURE__ */ u(Z, { children: [
-            O,
-            /* @__PURE__ */ e(_, { children: "pts" })
+        /* @__PURE__ */ l(J, { children: [
+          n && P && ((N = E[P]) == null ? void 0 : N.call(E, n)),
+          /* @__PURE__ */ e(K, { children: r }),
+          W && /* @__PURE__ */ l(X, { children: [
+            D,
+            /* @__PURE__ */ e(Y, { children: "pts" })
           ] }),
-          p && /* @__PURE__ */ u(q, { children: [
-            b && /* @__PURE__ */ e(tt, { name: Q ? "selectedBetPack" : "selected" }),
-            /* @__PURE__ */ e(et, { children: /* @__PURE__ */ e($, { value: i, suffix: "%" }) })
+          T && /* @__PURE__ */ l(Z, { children: [
+            Q && /* @__PURE__ */ e(_, { name: B ? "selectedBetPack" : "selected" }),
+            /* @__PURE__ */ e(q, { children: /* @__PURE__ */ e(U, { value: i, suffix: "%" }) })
           ] })
         ] })
       ]
@@ -101,5 +99,5 @@ const E = {
   );
 };
 export {
-  dt as VotingOption
+  st as VotingOption
 };

package/lib/ui/icons/index.d.ts

@@ -41,7 +41,10 @@ export declare const icons: {
     'icon-trophy-bet-pack': any;
     'icon-trivia-transparent': any;
     dashboard: any;
+    iconMute: any;
+    iconUnMute: any;
     correct: any;
+    iconSkip: any;
     incorrect: any;
     questionExpired: any;
     selected: any;