@onepercentio/one-ui 0.16.4 → 0.17.0

package/dist/components/StaticScroller/StaticScroller.d.ts

@@ -0,0 +1,5 @@
+import { DetailedHTMLProps, HTMLAttributes, PropsWithChildren } from "react";
+/**
+ * Mantains a static content at the start of the container and when scrolled animates it's concealment
+ **/
+export default function StaticScroller({ children, ...props }: PropsWithChildren<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>>): JSX.Element;

package/dist/components/StaticScroller/StaticScroller.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const StaticScroller_module_scss_1 = __importDefault(require("./StaticScroller.module.scss"));
+const lodash_1 = require("lodash");
+/**
+ * Mantains a static content at the start of the container and when scrolled animates it's concealment
+ **/
+function StaticScroller(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const rootRef = (0, react_1.useRef)(null);
+    (0, react_1.useLayoutEffect)(() => {
+        const el = rootRef.current;
+        let latestScroll;
+        const child = el.children[0];
+        const checkIfNeedsToHide = (0, lodash_1.debounce)(() => {
+            const direction = el.scrollLeft > latestScroll ? "in" : "out";
+            if (el.scrollLeft < child.clientWidth) {
+                el.scrollTo({
+                    left: direction === "in" ? child.clientWidth : 0,
+                    behavior: "smooth",
+                });
+            }
+            latestScroll = undefined;
+        }, 500);
+        const throtleSetLast = (0, lodash_1.throttle)((last) => {
+            latestScroll = last;
+        }, 1000 / 5, {
+            leading: true,
+            trailing: false,
+        });
+        const onScroll = () => {
+            const min = Math.min(el.scrollLeft, child.clientWidth);
+            const opacity = String(1 - min / child.clientWidth);
+            child.style.opacity = opacity;
+            checkIfNeedsToHide();
+            throtleSetLast(el.scrollLeft);
+        };
+        el.addEventListener("scroll", onScroll);
+        return () => {
+            el.removeEventListener("scroll", onScroll);
+        };
+    }, []);
+    return (react_1.default.createElement("div", Object.assign({ className: StaticScroller_module_scss_1.default.root }, props, { ref: rootRef }), children));
+}
+exports.default = StaticScroller;
+//# sourceMappingURL=StaticScroller.js.map

package/dist/components/StaticScroller/StaticScroller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StaticScroller.js","sourceRoot":"","sources":["../../../src/components/StaticScroller/StaticScroller.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAMe;AACf,8FAAkD;AAClD,mCAA4C;AAE5C;;IAEI;AACJ,SAAwB,cAAc,CAAC,EAKtC;QALsC,EACrC,QAAQ,OAIT,EAHI,KAAK,cAF6B,YAGtC,CADS;IAIR,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAE7C,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,MAAM,EAAE,GAAG,OAAO,CAAC,OAAQ,CAAC;QAC5B,IAAI,YAAgC,CAAC;QACrC,MAAM,KAAK,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAmB,CAAC;QAE/C,MAAM,kBAAkB,GAAG,IAAA,iBAAQ,EAAC,GAAG,EAAE;YACvC,MAAM,SAAS,GAAG,EAAE,CAAC,UAAU,GAAG,YAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/D,IAAI,EAAE,CAAC,UAAU,GAAG,KAAK,CAAC,WAAW,EAAE;gBACrC,EAAE,CAAC,QAAQ,CAAC;oBACV,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;oBAChD,QAAQ,EAAE,QAAQ;iBACnB,CAAC,CAAC;aACJ;YACD,YAAY,GAAG,SAAS,CAAC;QAC3B,CAAC,EAAE,GAAG,CAAC,CAAC;QACR,MAAM,cAAc,GAAG,IAAA,iBAAQ,EAC7B,CAAC,IAAY,EAAE,EAAE;YACf,YAAY,GAAG,IAAI,CAAC;QACtB,CAAC,EACD,IAAI,GAAG,CAAC,EACR;YACE,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,KAAK;SAChB,CACF,CAAC;QACF,MAAM,QAAQ,GAAG,GAAG,EAAE;YACpB,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;YACvD,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,GAAG,GAAG,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC;YACpD,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YAC9B,kBAAkB,EAAE,CAAC;YACrB,cAAc,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;QAChC,CAAC,CAAC;QACF,EAAE,CAAC,gBAAgB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAExC,OAAO,GAAG,EAAE;YACV,EAAE,CAAC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;QAC7C,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,qDAAK,SAAS,EAAE,oCAAM,CAAC,IAAI,IAAM,KAAK,IAAE,GAAG,EAAE,OAAO,KACjD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AApDD,iCAoDC"}

package/dist/components/StaticScroller/StaticScroller.module.scss

@@ -0,0 +1,12 @@
+.root {
+  display: flex;
+  overflow: auto;
+  > * {
+    flex-shrink: 0;
+  }
+  > :first-child {
+    z-index: -1;
+    position: sticky;
+    left: 0;
+  }
+}

package/dist/components/StaticScroller/index.d.ts

@@ -0,0 +1 @@
+export { default } from './StaticScroller';

package/dist/components/StaticScroller/index.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var StaticScroller_1 = require("./StaticScroller");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(StaticScroller_1).default; } });
+//# sourceMappingURL=index.js.map

package/dist/components/StaticScroller/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/StaticScroller/index.tsx"],"names":[],"mappings":";;;;;;AAAA,mDAA2C;AAAlC,0HAAA,OAAO,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onepercentio/one-ui",
-  "version": "0.16.4",
+  "version": "0.17.0",
   "description": "A set of reusable components created through the development of Onepercent projects",
   "repository": "git@github.com:onepercentio/one-ui.git",
   "author": "Murilo Oliveira de Araujo <murilo.araujo@onepercent.io>",