@streamlayer/react 1.21.3 → 1.22.1

package/lib/dist/cjs/gamification-feature2.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("./masters.js"),u=require("react");require("react-countdown-circle-timer");require("react-dom");require("react-countup");require("nanostores");require("lodash.throttle");const A=require("react-infinite-scroller"),S=(t,a,r)=>{const n=a>=e.A.lg&&a<e.A.xl?75:52;t.current&&window.scrollTo({top:t.current.offsetTop-n,...r})},k=e.styled_default("div")({name:"Container",class:"c115qtkr",propsAsIs:!1}),C=e.styled_default("div")({name:"STabs",class:"sxnslc8",propsAsIs:!1}),_=e.styled_default("button")({name:"Button",class:"b1umzux0",propsAsIs:!1}),$=e.styled_default("span")({name:"Title",class:"tspsaas",propsAsIs:!1});var h=(t=>(t.HOME="home",t.LEADERBOARD="leaderboard",t))(h||{});const y=({title:t,active:a,onClick:r})=>s.jsx(_,{"data-a":"intr",onClick:r,"data-selected":a,children:s.jsx($,{"data-a":"intr",children:t})}),N=({activePage:t="home",toggleActivePage:a})=>s.jsx(k,{children:s.jsxs(C,{"data-position":t==="home"?"left":"right",children:[s.jsx(y,{title:"Home",active:t==="home",onClick:()=>a("home")}),s.jsx(y,{title:"Friends",active:t==="leaderboard",onClick:()=>a("leaderboard")})]})}),w=e.styled_default("div")({name:"Container",class:"c1ux29ft",propsAsIs:!1}),M=()=>e.B1,q=e.styled_default(M())({name:"FriendsIcon",class:"f10ncfg2",propsAsIs:!0}),T=e.styled_default("div")({name:"Content",class:"c1yc07bd",propsAsIs:!1}),D=e.styled_default("div")({name:"Title",class:"tj6cq7w",propsAsIs:!1}),E=e.styled_default("div")({name:"Description",class:"d1ag78xo",propsAsIs:!1}),L=()=>e.B1,R=e.styled_default(L())({name:"ArrowInviteIcon",class:"awohrz6",propsAsIs:!0}),P=({title:t,description:a,onClick:r,className:n})=>{const[o]=e.f({type:"invitation",action:"sent",payload:{from:e.InvitationFrom.TITLE_CARD}});return s.jsxs(w,{"data-a":"intr",onClick:o(r),className:n,children:[s.jsx(q,{name:"icon-friends"}),s.jsxs(T,{children:[s.jsx(D,{children:t}),s.jsx(E,{children:a})]}),s.jsx(R,{name:"icon-copy"})]})},F=e.styled_default("div")({name:"Container",class:"culdu4a",propsAsIs:!1}),B=e.styled_default("div")({name:"Position",class:"pwf8e69",propsAsIs:!1}),O=e.styled_default("img")({name:"Avatar",class:"atf4yh4",propsAsIs:!1}),U=e.styled_default("div")({name:"AvatarPlaceholder",class:"a1dg29ja",propsAsIs:!1}),z=e.styled_default("div")({name:"Content",class:"c10a68rc",propsAsIs:!1}),H=e.styled_default("div")({name:"NameContainer",class:"nc4kck5",propsAsIs:!1}),V=e.styled_default("span")({name:"Name",class:"njsrqgr",propsAsIs:!1}),Q=()=>e.B1,K=e.styled_default(Q())({name:"CurrentUserBadge",class:"c17uc4zr",propsAsIs:!0}),W=({friendsRank:t,avatar:a,name:r,userId:n,points:o,isCurrentUser:l,style:c})=>s.jsxs(F,{"data-name":n,style:c,children:[s.jsx(B,{children:t||0}),s.jsxs(z,{children:[a?s.jsx(O,{alt:"leaderboard-item-avatar",src:a}):s.jsx(U,{children:e.I(r||"")}),s.jsxs(H,{children:[s.jsx(V,{children:r||""}),l&&s.jsx(K,{name:"icon-star"})]})]}),s.jsx("div",{children:e.s(o)})]}),G=e.styled_default("div")({name:"Container",class:"c16btbfp",propsAsIs:!1}),J=({items:t,currentUserId:a,openItemDetail:r,fetchMore:n,scrollNode:o,hasMore:l})=>{const c=u.useCallback(i=>{const d=i.target.getAttribute("data-name");d&&r(d)},[r]);return s.jsx(A,{loadMore:n,initialLoad:!1,hasMore:l,useWindow:!1,getScrollParent:()=>o.current,children:s.jsx(G,{"data-a":"intr",onClick:c,children:t.map(i=>s.jsx(W,{...i,isCurrentUser:!!a&&a===i.userId},i.userId))})})},X=e.styled_default("div")({name:"InviteFriendsContainer",class:"i1c9dygq",propsAsIs:!1}),Y=({deepLink:t})=>s.jsx(X,{children:s.jsx(e.M,{inviteLink:t,inviteCardTitle:"It’s More Fun With Friends",inviteCardSubtext:"Invite and compete against your friends for the top spot on the leaderboard."})}),Z=e.styled_default("div")({name:"InviteLinkContainer",class:"i1odbhm4",propsAsIs:!1}),ee=({gamification:t,scrollNode:a,scrollStore:r})=>{const n=u.useRef(null),{data:o,hasMore:l,loading:c,key:i}=e.useStore(t.leaderboardList.$store),{data:d}=e.useStore(t.deepLink.$store),[p,f]=e.T(n);return!o.length&&!c?s.jsx(Y,{deepLink:d}):s.jsxs(s.Fragment,{children:[s.jsx(J,{items:o,scrollNode:a,scrollStore:r,fetchMore:t.leaderboardList.fetchMore,hasMore:l,openItemDetail:t.openUser,currentUserId:t.currentUserId.get()},i),d&&s.jsx(Z,{ref:n,children:s.jsx(P,{"data-a":"intr",onClick:()=>p(d),title:"Invite Friends",description:"Challenge them now!"})}),f]})},se=({store:t,openQuestion:a})=>{const{sdk:r}=e.p(),n=e.useStore(t);return s.jsx(e.k,{openQuestion:a,questions:n.data,controlVideo:r==null?void 0:r.controlVideoPlayer})},te=({userSummary:t})=>{var a;const[r,n]=u.useState(void 0);return u.useEffect(()=>{const o=t.$store.subscribe(l=>{l&&n(l)});return()=>{o()}},[t]),s.jsx(e.z,{loading:!(r!=null&&r.summary),...r==null?void 0:r.summary,successRate:(a=r==null?void 0:r.percentage)==null?void 0:a.correct})},re=({gamification:t,className:a,scrollStore:r,scrollNode:n,appNode:o,style:l,responsiveStore:c})=>{const{tabsShown:i}=e.useStore(r,{keys:["tabsShown"]}),d=e.useStore(t.friendsTabEnabled),[p,f]=u.useState(h.HOME),[,I]=e.useTransition(),{sdkInDesktopView:v,screen:g}=e.useStore(c,{keys:["sdkInDesktopView"]}),b=m=>{I(()=>{var j;f(m),v===!1&&(((j=o.current)==null?void 0:j.getBoundingClientRect().y)||0)<0&&S(o,g.size,{behavior:"instant"})})};u.useEffect(()=>r.subscribe(m=>{if(m.scrollPosition===0){r.setKey("tabsShown",!0);return}c.get().sdkInDesktopView?r.setKey("tabsShown",m.scrollDirection==="backward"):r.setKey("tabsShown",m.scrollDirection==="forward")}),[r,c]),u.useEffect(()=>{d||f(h.HOME)},[d]);let x="0px";return v?x=i?"0px":"calc(0px - var(--header-height))":x=i?"var(--header-height)":"0px",s.jsxs(e.l,{className:e.cx_default(a,"SL-Tabs","sl-hide-on-modal"),style:l,children:[d&&s.jsx(e.S,{style:{top:x},children:s.jsx(N,{activePage:p,toggleActivePage:b})}),p===h.HOME&&s.jsxs(s.Fragment,{children:[s.jsx(e.m,{children:s.jsx(e.d,{children:s.jsx(te,{userSummary:t.userSummary})})}),s.jsx(e.n,{style:{flex:1},children:s.jsx(se,{openQuestion:t.openQuestion,store:t.feedList.getStore()})})]}),p===h.LEADERBOARD&&s.jsx(e.C$1,{children:s.jsx(ee,{scrollStore:r,scrollNode:n,gamification:t})})]})},ae=({gamification:t,scrollStore:a,className:r,appNode:n,scrollNode:o,responsiveStore:l})=>s.jsx(re,{appNode:n,scrollStore:a,scrollNode:o,className:r,gamification:t,responsiveStore:l});exports.default=ae;

package/lib/dist/es/gamification-feature2.js

@@ -1,285 +0,0 @@
-import { jsx as s, jsxs as p, Fragment as y } from "react/jsx-runtime";
-import { A as C, s as r, B as b, f as M, I as D, a as L, b as T, M as E, u as m, T as P, p as R, k as F, z, c as B, l as U, d as O, S as j, m as q, e as H, n as V, g as Q } from "./masters.js";
-import { useCallback as K, useRef as W, useState as S, useEffect as f } from "react";
-import "react-countdown-circle-timer";
-import "react-dom";
-import "react-countup";
-import "nanostores";
-import "lodash.throttle";
-import _ from "react-infinite-scroller";
-const G = (e, t, a) => {
-  const n = t >= C.lg && t < C.xl ? 75 : 52;
-  e.current && window.scrollTo({
-    top: e.current.offsetTop - n,
-    ...a
-  });
-}, J = /* @__PURE__ */ r("div")({
-  name: "Container",
-  class: "c115qtkr",
-  propsAsIs: !1
-}), X = /* @__PURE__ */ r("div")({
-  name: "STabs",
-  class: "sxnslc8",
-  propsAsIs: !1
-}), Y = /* @__PURE__ */ r("button")({
-  name: "Button",
-  class: "b1umzux0",
-  propsAsIs: !1
-}), Z = /* @__PURE__ */ r("span")({
-  name: "Title",
-  class: "tspsaas",
-  propsAsIs: !1
-});
-var v = /* @__PURE__ */ ((e) => (e.HOME = "home", e.LEADERBOARD = "leaderboard", e))(v || {});
-const $ = ({ title: e, active: t, onClick: a }) => /* @__PURE__ */ s(Y, { "data-a": "intr", onClick: a, "data-selected": t, children: /* @__PURE__ */ s(Z, { "data-a": "intr", children: e }) }), ee = ({ activePage: e = "home", toggleActivePage: t }) => /* @__PURE__ */ s(J, { children: /* @__PURE__ */ p(X, { "data-position": e === "home" ? "left" : "right", children: [
-  /* @__PURE__ */ s($, { title: "Home", active: e === "home", onClick: () => t(
-    "home"
-    /* HOME */
-  ) }),
-  /* @__PURE__ */ s(
-    $,
-    {
-      title: "Friends",
-      active: e === "leaderboard",
-      onClick: () => t(
-        "leaderboard"
-        /* LEADERBOARD */
-      )
-    }
-  )
-] }) }), se = /* @__PURE__ */ r("div")({
-  name: "Container",
-  class: "c1ux29ft",
-  propsAsIs: !1
-}), ae = () => b, te = /* @__PURE__ */ r(ae())({
-  name: "FriendsIcon",
-  class: "f10ncfg2",
-  propsAsIs: !0
-}), re = /* @__PURE__ */ r("div")({
-  name: "Content",
-  class: "c1yc07bd",
-  propsAsIs: !1
-}), ne = /* @__PURE__ */ r("div")({
-  name: "Title",
-  class: "tj6cq7w",
-  propsAsIs: !1
-}), oe = /* @__PURE__ */ r("div")({
-  name: "Description",
-  class: "d1ag78xo",
-  propsAsIs: !1
-}), ie = () => b, ce = /* @__PURE__ */ r(ie())({
-  name: "ArrowInviteIcon",
-  class: "awohrz6",
-  propsAsIs: !0
-}), le = ({ title: e, description: t, onClick: a, className: n }) => {
-  const [o] = M({
-    type: "invitation",
-    action: "sent",
-    payload: {
-      from: D.TITLE_CARD
-    }
-  });
-  return /* @__PURE__ */ p(se, { "data-a": "intr", onClick: o(a), className: n, children: [
-    /* @__PURE__ */ s(te, { name: "icon-friends" }),
-    /* @__PURE__ */ p(re, { children: [
-      /* @__PURE__ */ s(ne, { children: e }),
-      /* @__PURE__ */ s(oe, { children: t })
-    ] }),
-    /* @__PURE__ */ s(ce, { name: "icon-copy" })
-  ] });
-}, de = /* @__PURE__ */ r("div")({
-  name: "Container",
-  class: "culdu4a",
-  propsAsIs: !1
-}), pe = /* @__PURE__ */ r("div")({
-  name: "Position",
-  class: "pwf8e69",
-  propsAsIs: !1
-}), me = /* @__PURE__ */ r("img")({
-  name: "Avatar",
-  class: "atf4yh4",
-  propsAsIs: !1
-}), ue = /* @__PURE__ */ r("div")({
-  name: "AvatarPlaceholder",
-  class: "a1dg29ja",
-  propsAsIs: !1
-}), he = /* @__PURE__ */ r("div")({
-  name: "Content",
-  class: "c10a68rc",
-  propsAsIs: !1
-}), ve = /* @__PURE__ */ r("div")({
-  name: "NameContainer",
-  class: "nc4kck5",
-  propsAsIs: !1
-}), Ie = /* @__PURE__ */ r("span")({
-  name: "Name",
-  class: "njsrqgr",
-  propsAsIs: !1
-}), ge = () => b, fe = /* @__PURE__ */ r(ge())({
-  name: "CurrentUserBadge",
-  class: "c17uc4zr",
-  propsAsIs: !0
-}), be = ({
-  friendsRank: e,
-  avatar: t,
-  name: a,
-  userId: n,
-  points: o,
-  isCurrentUser: i,
-  style: d
-}) => /* @__PURE__ */ p(de, { "data-name": n, style: d, children: [
-  /* @__PURE__ */ s(pe, { children: e || 0 }),
-  /* @__PURE__ */ p(he, { children: [
-    t ? /* @__PURE__ */ s(me, { alt: "leaderboard-item-avatar", src: t }) : /* @__PURE__ */ s(ue, { children: L(a || "") }),
-    /* @__PURE__ */ p(ve, { children: [
-      /* @__PURE__ */ s(Ie, { children: a || "" }),
-      i && /* @__PURE__ */ s(fe, { name: "icon-star" })
-    ] })
-  ] }),
-  /* @__PURE__ */ s("div", { children: T(o) })
-] }), Ae = /* @__PURE__ */ r("div")({
-  name: "Container",
-  class: "c16btbfp",
-  propsAsIs: !1
-}), ke = ({
-  items: e,
-  currentUserId: t,
-  openItemDetail: a,
-  fetchMore: n,
-  scrollNode: o,
-  hasMore: i
-}) => {
-  const d = K((c) => {
-    const l = c.target.getAttribute("data-name");
-    l && a(l);
-  }, [a]);
-  return /* @__PURE__ */ s(_, {
-    loadMore: n,
-    initialLoad: !1,
-    hasMore: i,
-    useWindow: !1,
-    getScrollParent: () => o.current,
-    children: /* @__PURE__ */ s(Ae, {
-      "data-a": "intr",
-      onClick: d,
-      children: e.map((c) => /* @__PURE__ */ s(be, {
-        ...c,
-        isCurrentUser: !!t && t === c.userId
-      }, c.userId))
-    })
-  });
-}, Ce = /* @__PURE__ */ r("div")({
-  name: "InviteFriendsContainer",
-  class: "i1c9dygq",
-  propsAsIs: !1
-}), $e = ({
-  deepLink: e
-}) => /* @__PURE__ */ s(Ce, {
-  children: /* @__PURE__ */ s(E, {
-    inviteLink: e,
-    inviteCardTitle: "It’s More Fun With Friends",
-    inviteCardSubtext: "Invite and compete against your friends for the top spot on the leaderboard."
-  })
-}), ye = /* @__PURE__ */ r("div")({
-  name: "InviteLinkContainer",
-  class: "i1odbhm4",
-  propsAsIs: !1
-}), Se = ({
-  gamification: e,
-  scrollNode: t,
-  scrollStore: a
-}) => {
-  const n = W(null), {
-    data: o,
-    hasMore: i,
-    loading: d,
-    key: c
-  } = m(e.leaderboardList.$store), {
-    data: l
-  } = m(e.deepLink.$store), [u, I] = P(n);
-  return !o.length && !d ? /* @__PURE__ */ s($e, {
-    deepLink: l
-  }) : /* @__PURE__ */ p(y, {
-    children: [/* @__PURE__ */ s(ke, {
-      items: o,
-      scrollNode: t,
-      scrollStore: a,
-      fetchMore: e.leaderboardList.fetchMore,
-      hasMore: i,
-      openItemDetail: e.openUser,
-      currentUserId: e.currentUserId.get()
-    }, c), l && /* @__PURE__ */ s(ye, {
-      ref: n,
-      children: /* @__PURE__ */ s(le, {
-        "data-a": "intr",
-        onClick: () => u(l),
-        title: "Invite Friends",
-        description: "Challenge them now!"
-      })
-    }), I]
-  });
-}, Ne = ({ store: e, openQuestion: t }) => {
-  const { sdk: a } = R(), n = m(e);
-  return /* @__PURE__ */ s(F, { openQuestion: t, questions: n.data, controlVideo: a == null ? void 0 : a.controlVideoPlayer });
-}, we = ({ userSummary: e }) => {
-  var t;
-  const [a, n] = S(void 0);
-  return f(() => {
-    const o = e.$store.subscribe((i) => {
-      i && n(i);
-    });
-    return () => {
-      o();
-    };
-  }, [e]), /* @__PURE__ */ s(z, { loading: !(a != null && a.summary), ...a == null ? void 0 : a.summary, successRate: (t = a == null ? void 0 : a.percentage) == null ? void 0 : t.correct });
-}, xe = ({ gamification: e, className: t, scrollStore: a, scrollNode: n, appNode: o, style: i, responsiveStore: d }) => {
-  const { tabsShown: c } = m(a, { keys: ["tabsShown"] }), l = m(e.friendsTabEnabled), [u, I] = S(v.HOME), [, N] = B(), { sdkInDesktopView: A, screen: w } = m(d, { keys: ["sdkInDesktopView"] }), x = (h) => {
-    N(() => {
-      var k;
-      I(h), A === !1 && (((k = o.current) == null ? void 0 : k.getBoundingClientRect().y) || 0) < 0 && G(o, w.size, { behavior: "instant" });
-    });
-  };
-  f(() => a.subscribe((h) => {
-    if (h.scrollPosition === 0) {
-      a.setKey("tabsShown", !0);
-      return;
-    }
-    d.get().sdkInDesktopView ? a.setKey("tabsShown", h.scrollDirection === "backward") : a.setKey("tabsShown", h.scrollDirection === "forward");
-  }), [a, d]), f(() => {
-    l || I(v.HOME);
-  }, [l]);
-  let g = "0px";
-  return A ? g = c ? "0px" : "calc(0px - var(--header-height))" : g = c ? "var(--header-height)" : "0px", /* @__PURE__ */ p(U, { className: O(t, "SL-Tabs", "sl-hide-on-modal"), style: i, children: [
-    l && /* @__PURE__ */ s(
-      j,
-      {
-        style: {
-          top: g
-        },
-        children: /* @__PURE__ */ s(ee, { activePage: u, toggleActivePage: x })
-      }
-    ),
-    u === v.HOME && /* @__PURE__ */ p(y, { children: [
-      /* @__PURE__ */ s(q, { children: /* @__PURE__ */ s(H, { children: /* @__PURE__ */ s(we, { userSummary: e.userSummary }) }) }),
-      /* @__PURE__ */ s(V, { style: { flex: 1 }, children: /* @__PURE__ */ s(Ne, { openQuestion: e.openQuestion, store: e.feedList.getStore() }) })
-    ] }),
-    u === v.LEADERBOARD && /* @__PURE__ */ s(Q, { children: /* @__PURE__ */ s(Se, { scrollStore: a, scrollNode: n, gamification: e }) })
-  ] });
-}, Be = ({
-  gamification: e,
-  scrollStore: t,
-  className: a,
-  appNode: n,
-  scrollNode: o,
-  responsiveStore: i
-}) => /* @__PURE__ */ s(xe, {
-  appNode: n,
-  scrollStore: t,
-  scrollNode: o,
-  className: a,
-  gamification: e,
-  responsiveStore: i
-});
-export {
-  Be as default
-};