@yakad/ui 1.3.136 → 1.3.138

package/dist/RenderByVisibility/RenderByVisibility.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface RenderByVisibilityProps {
+    extraRender?: number;
+    jump?: number;
+    stopRendering?: boolean;
+    newChildRendered?: (index: number) => void;
+    children?: React.ReactNode;
+}
+export declare const RenderByVisibility: React.ForwardRefExoticComponent<RenderByVisibilityProps & React.RefAttributes<HTMLDivElement>>;

package/dist/RenderByVisibility/RenderByVisibility.js

@@ -0,0 +1,69 @@
+"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, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import { Card, LoadingIcon, Stack, WithInteractions } from "..";
+const data = Array.from({ length: 78 });
+export const RenderByVisibility = forwardRef(function RenderByVisibility(_a, ref) {
+    var { extraRender = 5, jump = 0, stopRendering, newChildRendered, children } = _a, restProps = __rest(_a, ["extraRender", "jump", "stopRendering", "newChildRendered", "children"]);
+    const childRefs = useRef({});
+    const childrenArray = React.Children.toArray(children);
+    // Collect Visibility Status
+    const [visibled, setVisibled] = useState({ lowest: jump, highest: jump });
+    const handleOnVisible = (i) => {
+        if (i < visibled.lowest)
+            setVisibled(Object.assign(Object.assign({}, visibled), { lowest: i }));
+        if (i > visibled.highest)
+            setVisibled(Object.assign(Object.assign({}, visibled), { highest: i }));
+    };
+    // Collect Rendered Childs Status
+    const [rendered, setRendered] = useState({ lowest: jump, highest: jump });
+    // Calculate Over Screen Renders
+    const overRenderedOnLowSide = visibled.lowest - rendered.lowest;
+    const overRenderedOnHighSide = rendered.highest - visibled.highest;
+    useEffect(() => {
+        if (!stopRendering) {
+            if (rendered.highest < data.length &&
+                overRenderedOnHighSide < extraRender) {
+                setRendered(Object.assign(Object.assign({}, rendered), { highest: rendered.highest + 1 }));
+                newChildRendered === null || newChildRendered === void 0 ? void 0 : newChildRendered(rendered.highest + 1);
+            }
+            else if (rendered.lowest > 0 &&
+                overRenderedOnLowSide < extraRender) {
+                setRendered(Object.assign(Object.assign({}, rendered), { lowest: rendered.lowest - 1 }));
+                newChildRendered === null || newChildRendered === void 0 ? void 0 : newChildRendered(rendered.lowest - 1);
+            }
+        }
+    }, [visibled, rendered, stopRendering]);
+    useEffect(() => {
+        var _a;
+        if (overRenderedOnHighSide == 1) {
+            (_a = childRefs.current[jump]) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+            console.log("SCROLL TO JUMP");
+        }
+    }, [overRenderedOnHighSide]);
+    useEffect(() => {
+        var _a;
+        if (overRenderedOnHighSide == 1) {
+            (_a = childRefs.current[jump]) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+            console.log("SCROLL TO JUMP");
+        }
+    }, [overRenderedOnHighSide]);
+    console.log("visibled", visibled);
+    console.log("rendered", rendered);
+    console.log("stopRendering", stopRendering);
+    return (_jsxs(Stack, Object.assign({ ref: ref }, restProps, { children: [rendered.lowest > 0 && (_jsx(Stack, { style: { height: "20rem" }, children: _jsx(LoadingIcon, { variant: "dots", size: "extraLarge" }) })), childrenArray.map((child, i) => i >= rendered.lowest &&
+                i <= rendered.highest && (_jsx(WithInteractions, { ref: (el) => {
+                    childRefs.current[i] = el;
+                }, onVisible: () => handleOnVisible(i), children: child }, i))), rendered.highest < data.length && (_jsx(Card, { children: _jsx(LoadingIcon, { variant: "dots", size: "extraLarge" }) }))] })));
+});

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("portalRoot", boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.screen, className);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.screen, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/Theme/Theme.js

@@ -22,6 +22,6 @@ export const Theme = forwardRef(function Theme(_a, ref) {
     useEffect(() => {
         document.documentElement.style.setProperty("font-size", zoomPercentage + "%");
     }, [zoomPercentage]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.theme, styles[darkStyle], styles[color], className);
+    const joinedClassNames = classNames("portalRoot", boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, styles.theme, styles[darkStyle], styles[color], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/WithInteractions/WithInteractions.d.ts

@@ -19,6 +19,6 @@ export interface WithInteractionsProps {
     onHidden?: () => void;
     onMouseHoverStart?: (e: MouseEvent) => void;
     onMouseHoverLeave?: (e: MouseEvent) => void;
-    children?: React.ReactElement;
+    children?: React.ReactNode;
 }
 export declare const WithInteractions: import("react").ForwardRefExoticComponent<WithInteractionsProps & import("react").RefAttributes<HTMLElement>>;

package/dist/WithInteractions/WithInteractions.js

@@ -10,6 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { jsx as _jsx } from "react/jsx-runtime";
 import { mergeRefs } from "@yakad/lib";
 import { cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, } from "react";
 export const WithInteractions = forwardRef(function WithInteractions(_a, forwardedRef) {
@@ -216,6 +217,7 @@ export const WithInteractions = forwardRef(function WithInteractions(_a, forward
     ]);
     if (!isValidElement(children))
         return null;
+    return _jsx("div", { ref: localRef, children: children });
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return cloneElement(children, Object.assign(Object.assign({}, restProps), { ref: mergeRefs(localRef, forwardedRef, 
         // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.136",
+    "version": "1.3.138",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -28,8 +28,7 @@
         "typecheck": "tsc --noEmit",
         "lint": "eslint src/**/*.{ts,tsx}",
         "test": "echo \"No tests specified\" && exit 0",
-        "prepublishOnly": "npm run lint && npm run test && npm run build && npm run typecheck",
-        "newPublish": "npm version patch && npm publish"
+        "prepublishOnly": "npm run lint && npm run test && npm run build && npm run typecheck"
     },
     "dependencies": {
         "@yakad/lib": "1.0.22",

package/dist/LoadingControlV3/LoadingControlV3.d.ts

@@ -1,12 +0,0 @@
-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

@@ -1,94 +0,0 @@
-"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));
-}