@yakad/ui 1.3.133 → 1.3.136

package/dist/LoadingControl/LoadingControl.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
-type LoadingControlV2Children = React.ReactElement<{
+type LoadingControlChildren = React.ReactElement<{
     index?: number;
 }>;
-export interface LoadingControlV2Props extends React.HTMLAttributes<HTMLDivElement> {
+export interface LoadingControlProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
     fullWidth?: boolean;
     loadingLimit?: number;
-    children: LoadingControlV2Children;
+    children: LoadingControlChildren;
 }
-export declare const LoadingControlV2: React.ForwardRefExoticComponent<LoadingControlV2Props & React.RefAttributes<HTMLDivElement>>;
+export declare const LoadingControl: React.ForwardRefExoticComponent<LoadingControlProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/LoadingControl/LoadingControl.js

@@ -15,7 +15,7 @@ import React, { forwardRef, useEffect, useState } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import { DisplayOnVisible } from "..";
-export const LoadingControlV2 = forwardRef(function LoadingControlV2(_a, ref) {
+export const LoadingControl = forwardRef(function LoadingControl(_a, ref) {
     var { align, fullWidth = true, loadingLimit = 200, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "loadingLimit", "className", "children"]);
     const [maxTotalVisibledItems, setMaxTotalVisibledItems] = useState(3); // Min: default
     const extraLoading = maxTotalVisibledItems * 2;

package/dist/LoadingControlV3/LoadingControlV3.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type LoadingControlV3Children = React.ReactElement<{
+    index?: number;
+}>;
+export interface LoadingControlV3Props extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "space" | "center" | "end";
+    fullWidth?: boolean;
+    loadingLimit?: number;
+    children: LoadingControlV3Children;
+}
+export declare const LoadingControlV3: React.ForwardRefExoticComponent<LoadingControlV3Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/LoadingControlV3/LoadingControlV3.js

@@ -0,0 +1,94 @@
+"use client";
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { forwardRef, useEffect, useState } from "react";
+import classNames from "classnames";
+import boxingStyles from "../boxing.module.css";
+import { DisplayOnVisible } from "..";
+export const LoadingControlV3 = forwardRef(function LoadingControlV3(_a, ref) {
+    var { align, fullWidth = true, loadingLimit = 200, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "loadingLimit", "className", "children"]);
+    const [maxTotalVisibledItems, setMaxTotalVisibledItems] = useState(3); // Min: default
+    const extraLoading = maxTotalVisibledItems * 2;
+    const [loadedItems, setLoadedItems] = useState({
+        0: React.cloneElement(children, {
+            index: 0,
+        }),
+    });
+    const [visibilityStatus, setVisibilityStatus] = useState({});
+    const handleOnVisibilityChange = (visible, i) => {
+        if (i !== undefined)
+            if (visibilityStatus[i] !== visible)
+                setVisibilityStatus((prev) => (Object.assign(Object.assign({}, prev), { [i]: visible })));
+    };
+    const visibleIndexes = Object.entries(visibilityStatus)
+        // eslint-disable-next-line
+        .filter(([_, isVisible]) => isVisible)
+        .map(([index]) => parseInt(index));
+    const visibleCount = Object.values(visibilityStatus).filter(Boolean).length;
+    const lowestVisibleItemIndex = visibleIndexes.length
+        ? Math.min(...visibleIndexes)
+        : 0;
+    const highestVisibleItemIndex = visibleIndexes.length
+        ? Math.max(...visibleIndexes)
+        : 0;
+    const loadedItemsLength = Object.values(loadedItems).length;
+    const lowestLoadedItemIndex = Number(Object.keys(loadedItems)[0]);
+    const highestLoadedItemIndex = Number(Object.keys(loadedItems)[loadedItemsLength - 1]);
+    useEffect(() => {
+        if (highestLoadedItemIndex < loadingLimit &&
+            highestLoadedItemIndex - highestVisibleItemIndex < extraLoading) {
+            setLoadedItems(Object.assign(Object.assign({}, loadedItems), { [highestLoadedItemIndex + 1]: React.cloneElement(children, {
+                    index: highestLoadedItemIndex + 1,
+                }) }));
+            console.log(">>>>>>>>>>>>>>>>>>>>>>>> ++++ Item ", highestLoadedItemIndex + 1, " Added to end");
+        }
+        if (lowestLoadedItemIndex > 0 &&
+            lowestVisibleItemIndex - lowestLoadedItemIndex < extraLoading) {
+            setLoadedItems(Object.assign({ [lowestLoadedItemIndex - 1]: React.cloneElement(children, {
+                    index: lowestLoadedItemIndex - 1,
+                }) }, loadedItems));
+            console.log(">>>>>>>>>>>> ---- Item ", lowestLoadedItemIndex - 1, " Added to start");
+        }
+        if (visibleCount > maxTotalVisibledItems) {
+            setMaxTotalVisibledItems(visibleCount);
+        }
+        // eslint-disable-next-line
+    }, [visibilityStatus]);
+    useEffect(() => {
+        const loadLimit = extraLoading + 2;
+        if (lowestVisibleItemIndex - lowestLoadedItemIndex > loadLimit) {
+            setLoadedItems(removeFromStart(loadedItems, lowestVisibleItemIndex - loadLimit));
+            console.log("$$$$$$$$$$$ Sliced $$$$$$$$$$$$$$$$$$$$$ from start smaller than:", lowestVisibleItemIndex - loadLimit);
+        }
+        if (highestLoadedItemIndex - highestVisibleItemIndex > loadLimit) {
+            setLoadedItems(removeFromEnd(loadedItems, highestVisibleItemIndex + loadLimit));
+            console.log("$$$$$$$$$$$ Sliced $$$$$$$$$$$$$$$$$$$$$ from end bigger than:", highestVisibleItemIndex + loadLimit);
+        }
+        // eslint-disable-next-line
+    }, [loadedItems, visibilityStatus]);
+    console.log("###### ", "Total Loaded:", loadedItemsLength, "extraLoading:", extraLoading, " ##### ", "L:", lowestLoadedItemIndex, "V:", lowestVisibleItemIndex, "D:", -(lowestLoadedItemIndex - lowestVisibleItemIndex), "|", "TV:", visibleCount, "|", "D:", highestLoadedItemIndex - highestVisibleItemIndex, "V:", highestVisibleItemIndex, "L:", highestLoadedItemIndex);
+    // console.log("visibilityStatus", visibilityStatus);
+    // console.log("loadedItems", loadedItems);
+    // console.log(
+    //     "visibilityStatus.length",
+    //     Object.keys(visibilityStatus).length
+    // );
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, className);
+    return (_jsx("div", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: Object.entries(loadedItems).map(([key, value]) => (_jsx(DisplayOnVisible, { onVisibilityChange: (visible) => handleOnVisibilityChange(visible, Number(key)), children: value }, key))) })));
+});
+function removeFromStart(obj, start) {
+    return Object.fromEntries(Object.entries(obj).filter(([key]) => Number(key) >= start));
+}
+function removeFromEnd(obj, end) {
+    return Object.fromEntries(Object.entries(obj).filter(([key]) => Number(key) <= end));
+}

package/dist/Screen/Screen.js

@@ -16,6 +16,6 @@ import boxingStyles from "../boxing.module.css";
 import styles from "./Screen.module.css";
 export const Screen = forwardRef(function Screen(_a, ref) {
     var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.screen, className);
+    const joinedClassNames = classNames("portalRoot", boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.screen, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/WithOverlay/WithOverlay.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useState, cloneElement, useEffect, useRef } from "react";
 import { WithInteractions, } from "..";
 import { mergeRefs } from "@yakad/lib";
+import { createPortal } from "react-dom";
 export function WithOverlay({ trigger = "onClick", overlay, children, }) {
     var _a;
     const triggerRef = useRef(null);
@@ -26,12 +27,13 @@ export function WithOverlay({ trigger = "onClick", overlay, children, }) {
                         },
                     }) }), showOverlay &&
                 overlay &&
-                cloneElement(overlay, {
+                createPortal(cloneElement(overlay, {
                     triggerref: triggerRef,
                     onClose: () => {
                         var _a, _b;
                         (_b = (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
                         setShowOverlay(false);
                     },
-                })] }));
+                }), document.getElementsByClassName("portalRoot")[0] ||
+                    document.body)] }));
 }

package/dist/index.d.ts

@@ -33,5 +33,6 @@ export * from "./WithOverlay/WithOverlay";
 export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
 export * from "./LoadingControl/LoadingControl";
+export * from "./LoadingControlV3/LoadingControlV3";
 export * from "./DisplayOnVisible/DisplayOnVisible";
 export * from "./RenderOnVisible/RenderOnVisible";

package/dist/index.js

@@ -40,5 +40,6 @@ export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
 // Loading Control
 export * from "./LoadingControl/LoadingControl";
+export * from "./LoadingControlV3/LoadingControlV3";
 export * from "./DisplayOnVisible/DisplayOnVisible";
 export * from "./RenderOnVisible/RenderOnVisible";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.133",
+    "version": "1.3.136",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",