@streamlayer/react-ui 0.80.1 → 0.81.0

package/lib/ui/app/Features/Gamification/Leaderboard.d.ts

@@ -2,4 +2,5 @@
 import type { Gamification } from '@streamlayer/feature-gamification';
 export declare const Leaderboard: React.FC<{
     gamification: Gamification;
+    hideTabs: (hide: boolean) => void;
 }>;

package/lib/ui/app/Features/Gamification/Leaderboard.js

@@ -1,7 +1,9 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useStore as o } from "@nanostores/react";
-import { LeaderboardList as p } from "../../../gamification/leaderboard/index.js";
-import { Friends as m } from "./Friends.js";
+import { jsx as l } from "react/jsx-runtime";
+import { useStore as i } from "@nanostores/react";
+import n from "lodash.throttle";
+import { useRef as p, useCallback as c } from "react";
+import { LeaderboardList as f } from "../../../gamification/leaderboard/index.js";
+import { Friends as d } from "./Friends.js";
 import "react-virtualized-auto-sizer";
 import "react-window";
 import "react-window-infinite-loader";
@@ -10,22 +12,27 @@ import "../../../../utils/common.js";
 import "../../../gamification/leaderboard/list-item/styles.js";
 import "@linaria/react";
 import "../../../icons/index.js";
-import "react";
 import "../../../gamification/leaderboard/styles.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/index.js";
 import "../../../gamification/onboarding/slides/onboarding-invite-card/styles.js";
-const j = ({ gamification: r }) => {
-  const { data: e } = o(r.leaderboardList.$store);
-  return e != null && e.length ? /* @__PURE__ */ t(
-    p,
+const F = ({ gamification: r, hideTabs: o }) => {
+  const { data: e } = i(r.leaderboardList.$store), s = p(0), m = c(
+    n((t) => {
+      Math.abs(s.current - t.scrollOffset) < 112 || (s.current = t.scrollOffset, o(t.scrollOffset !== 0 && t.scrollDirection === "forward"));
+    }, 200),
+    [o]
+  );
+  return e != null && e.length ? /* @__PURE__ */ l(
+    f,
     {
       fetchMore: r.leaderboardList.fetchMore,
       items: e,
+      onScroll: m,
       openItemDetail: r.openUser,
       currentUserId: r.currentUserId.get()
     }
-  ) : /* @__PURE__ */ t(m, { deepLink: r.deepLink });
+  ) : /* @__PURE__ */ l(d, { deepLink: r.deepLink });
 };
 export {
-  j as Leaderboard
+  F as Leaderboard
 };

package/lib/ui/app/Features/Gamification/Tabs.js

@@ -1,10 +1,11 @@
-import { jsx as r, jsxs as m, Fragment as s } from "react/jsx-runtime";
-import { useState as n } from "react";
-import { SDKScrollContainer as d, SDKWhiteContainer as p, SDKContentContainer as a } from "../../styles.js";
-import { ActivePages as i, Tabs as l } from "../../../gamification/tabs/index.js";
-import { Leaderboard as c } from "./Leaderboard.js";
-import { QuestionsList as h } from "./QuestionsList.js";
-import { UserSummary as u } from "./UserSummary.js";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import S from "lodash.throttle";
+import { useState as d, useRef as u, useTransition as E, useCallback as y, useEffect as C } from "react";
+import { SDKWhiteContainer as f, SDKScrollContainer as D, SDKContentContainer as L } from "../../styles.js";
+import { ActivePages as s, Tabs as A } from "../../../gamification/tabs/index.js";
+import { Leaderboard as P } from "./Leaderboard.js";
+import { QuestionsList as R } from "./QuestionsList.js";
+import { UserSummary as w } from "./UserSummary.js";
 import "@linaria/react";
 import "../../../gamification/tabs/styles.js";
 import "@nanostores/react";
@@ -46,49 +47,76 @@ import "../../../gamification/user-statistics/components/rank/styles.js";
 import "../../../gamification/user-statistics/components/statistic/index.js";
 import "../../../gamification/user-statistics/components/statistic/styles.js";
 import "../../../gamification/user-statistics/styles.js";
-const dr = ({
-  gamification: t
+const Lr = ({
+  gamification: i
 }) => {
-  const [o, e] = n(i.HOME);
-  return /* @__PURE__ */ r("div", {
+  const [h, b] = d(!1), [o, T] = d(s.HOME), m = u(null), e = u(0), [g, l] = E(), v = (r) => {
+    l(() => T(r));
+  }, p = (r) => {
+    l(() => b(r));
+  }, c = y(S(() => {
+    const r = m.current;
+    if (!r)
+      return;
+    const {
+      scrollTop: n
+    } = r;
+    if (n === 0) {
+      e.current = 0, p(!1);
+      return;
+    }
+    if (Math.abs(e.current - n) < 112)
+      return;
+    const x = e.current < n ? "forward" : "backward";
+    e.current = n, p(x === "forward");
+  }, 200), []);
+  return C(() => {
+    const r = m.current;
+    return r ? (o === s.HOME && r.addEventListener("scroll", c), () => {
+      r.removeEventListener("scroll", c);
+    }) : () => {
+    };
+  }, [o, c]), /* @__PURE__ */ a("div", {
     style: {
       height: "100%",
       display: "flex",
       flexDirection: "column",
       overflow: "hidden"
     },
-    children: /* @__PURE__ */ m(d, {
-      children: [/* @__PURE__ */ r(p, {
+    children: [g, /* @__PURE__ */ t(f, {
+      style: {
+        paddingBottom: "4px",
+        transition: "margin-top 0.2s ease-in-out",
+        marginTop: h ? "-56px" : "0px"
+      },
+      children: /* @__PURE__ */ t(A, {
+        activePage: o,
+        toggleActivePage: v
+      })
+    }), o === s.HOME && /* @__PURE__ */ a(D, {
+      ref: m,
+      children: [/* @__PURE__ */ t(f, {
         style: {
-          paddingBottom: "4px"
+          paddingTop: "12px"
         },
-        children: /* @__PURE__ */ r(l, {
-          activePage: o,
-          toggleActivePage: e
+        children: /* @__PURE__ */ t(w, {
+          userSummary: i.userSummary
         })
-      }), o === i.HOME && /* @__PURE__ */ m(s, {
-        children: [/* @__PURE__ */ r(p, {
-          style: {
-            paddingTop: "12px"
-          },
-          children: /* @__PURE__ */ r(u, {
-            userSummary: t.userSummary
-          })
-        }), /* @__PURE__ */ r(a, {
-          children: /* @__PURE__ */ r(h, {
-            openQuestion: t.openQuestion,
-            store: t.feedList.getStore()
-          })
-        })]
-      }), o === i.LEADERBOARD && /* @__PURE__ */ r("div", {
-        className: "c1bp9dj2",
-        children: /* @__PURE__ */ r(c, {
-          gamification: t
+      }), /* @__PURE__ */ t(L, {
+        children: /* @__PURE__ */ t(R, {
+          openQuestion: i.openQuestion,
+          store: i.feedList.getStore()
         })
       })]
-    })
+    }), o === s.LEADERBOARD && /* @__PURE__ */ t("div", {
+      className: "c1bp9dj2",
+      children: /* @__PURE__ */ t(P, {
+        gamification: i,
+        hideTabs: p
+      })
+    })]
   });
 };
 export {
-  dr as Tabs
+  Lr as Tabs
 };

package/lib/ui/app/Features/Gamification/gamification-feature.js

@@ -48,6 +48,7 @@ import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
 import "./Tabs.js";
+import "lodash.throttle";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";

package/lib/ui/app/Features/Gamification/index.js

@@ -47,6 +47,7 @@ import "../../../questions/twitter/account/index.js";
 import "../../../questions/twitter/account/styles.js";
 import "../../../questions/twitter/styles.js";
 import "../../../gamification/vote/twitter-details/styles.js";
+import "lodash.throttle";
 import "../../../gamification/tabs/index.js";
 import "../../../gamification/tabs/styles.js";
 import "./Leaderboard.js";
@@ -86,7 +87,7 @@ const C = () => h, n = /* @__PURE__ */ s(C())({
 }) => {
   const i = r + t;
   return i === 0 ? 0 : Math.round(r / i * 100);
-}, Vr = ({
+}, Wr = ({
   gamification: r,
   className: t
 }) => {
@@ -120,5 +121,5 @@ const C = () => h, n = /* @__PURE__ */ s(C())({
   });
 };
 export {
-  Vr as GamificationOverlay
+  Wr as GamificationOverlay
 };

package/lib/ui/gamification/leaderboard/index.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { ListProps } from 'react-window';
 import { LeaderboardItemProps } from '../../gamification/leaderboard/list-item';
 type LeaderboardListProps = {
     items: Omit<LeaderboardItemProps, 'openItemDetail'>[];
     currentUserId?: string;
     openItemDetail: (id: string) => void;
     fetchMore: () => void;
+    onScroll?: ListProps['onScroll'];
 };
 export declare const LeaderboardList: React.FC<LeaderboardListProps>;
 export {};

package/lib/ui/gamification/leaderboard/index.js

@@ -1,38 +1,40 @@
 import { jsx as o } from "react/jsx-runtime";
-import h from "react-virtualized-auto-sizer";
-import { FixedSizeList as u } from "react-window";
-import f from "react-window-infinite-loader";
-import { LeaderboardItem as I } from "./list-item/index.js";
-import { ScrollContainer as L } from "./styles.js";
+import u from "react-virtualized-auto-sizer";
+import { FixedSizeList as f } from "react-window";
+import I from "react-window-infinite-loader";
+import { LeaderboardItem as L } from "./list-item/index.js";
+import { ScrollContainer as c } from "./styles.js";
 import "../../../utils/common.js";
 import "./list-item/styles.js";
 import "@linaria/react";
 import "../../icons/index.js";
 import "react";
-const D = ({
+const F = ({
   items: r,
   currentUserId: i,
   openItemDetail: m,
-  fetchMore: n
-}) => /* @__PURE__ */ o(h, { children: ({ width: p, height: d }) => /* @__PURE__ */ o(
-  f,
+  fetchMore: n,
+  onScroll: p
+}) => /* @__PURE__ */ o(u, { children: ({ width: d, height: l }) => /* @__PURE__ */ o(
+  I,
   {
     isItemLoaded: (e) => e < r.length,
     itemCount: r.length + 1,
     loadMoreItems: n,
-    children: ({ onItemsRendered: e, ref: l }) => /* @__PURE__ */ o(L, { children: /* @__PURE__ */ o(
-      u,
+    children: ({ onItemsRendered: e, ref: a }) => /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(
+      f,
       {
         itemSize: 56,
+        onScroll: p,
         onItemsRendered: e,
-        ref: l,
+        ref: a,
         itemCount: r.length,
-        width: p,
-        height: d,
-        children: ({ index: t, style: a }) => /* @__PURE__ */ o(
-          I,
+        width: d,
+        height: l,
+        children: ({ index: t, style: h }) => /* @__PURE__ */ o(
+          L,
           {
-            style: { ...a, maxHeight: 48 },
+            style: { ...h, maxHeight: 48 },
             ...r[t],
             openItemDetail: () => m(r[t].userId),
             isCurrentUser: !!i && i === r[t].userId
@@ -44,5 +46,5 @@ const D = ({
   }
 ) });
 export {
-  D as LeaderboardList
+  F as LeaderboardList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlayer/react-ui",
-  "version": "0.80.1",
+  "version": "0.81.0",
   "type": "module",
   "main": "./src/index.js",
   "typings": "./lib/index.d.ts",
@@ -37,19 +37,21 @@
   "peerDependencies": {
     "@lottiefiles/react-lottie-player": "*",
     "@streamlayer/sl-eslib": "^5.53.6",
+    "@types/lodash.throttle": "^4.1.9",
+    "lodash.throttle": "^4.1.1",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.9",
     "react-window-infinite-loader": "^1.0.9",
-    "@streamlayer/feature-gamification": "^0.30.0",
+    "@streamlayer/feature-gamification": "^0.30.1",
     "@streamlayer/sdk-web": "^0.29.5",
     "@streamlayer/sdk-web-anonymous-auth": "^0.11.30",
     "@streamlayer/sdk-web-api": "^0.1.0",
-    "@streamlayer/sdk-web-features": "^0.11.0",
     "@streamlayer/sdk-web-core": "^0.1.0",
-    "@streamlayer/sdk-web-interfaces": "^0.18.16",
-    "@streamlayer/sdk-web-notifications": "^0.1.0",
-    "@streamlayer/sdk-web-storage": "^0.0.4",
+    "@streamlayer/sdk-web-features": "^0.11.1",
+    "@streamlayer/sdk-web-interfaces": "^0.18.17",
     "@streamlayer/sdk-web-logger": "^0.0.1",
+    "@streamlayer/sdk-web-notifications": "^0.0.1",
+    "@streamlayer/sdk-web-storage": "^0.0.4",
     "@streamlayer/sdk-web-types": "^0.1.0"
   },
   "nx": {
@@ -90,6 +92,6 @@
     "vite-plugin-svgr": "^4.1.0",
     "vite-svg-loader": "^4.0.0",
     "vite-tsconfig-paths": "^4.2.1",
-    "@streamlayer/react": "^0.32.11"
+    "@streamlayer/react": "^0.33.0"
   }
 }