ar-design 0.4.44 → 0.4.45

package/dist/components/data-display/kanban-board/IProps.d.ts

@@ -7,6 +7,7 @@ export type Config<T extends object> = {
         bottom?: number;
         left?: number;
     };
+    perPage?: number;
     filter?: {
         search?: (item: T, value: string) => boolean;
         keys: (item: T) => {
@@ -20,6 +21,7 @@ interface IProps<T extends object, TColumnProperties> {
     trackBy: (item: T) => string;
     columns: KanbanBoardColumnType<T, TColumnProperties>[];
     onChange?: (item: T, columnKey: string, columnProperties: TColumnProperties, hoverIndex: number) => void;
+    onLazy?: (perPage: number) => void;
     config?: Config<T>;
 }
 export default IProps;

package/dist/components/data-display/kanban-board/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/data-display/kanban-board/styles.css";
-declare const KanbanBoard: <T extends object, TColumnProperties>({ trackBy, columns, onChange, config, }: IProps<T, TColumnProperties>) => React.JSX.Element;
+declare const KanbanBoard: <T extends object, TColumnProperties>({ trackBy, columns, onChange, onLazy, config, }: IProps<T, TColumnProperties>) => React.JSX.Element;
 export default KanbanBoard;

package/dist/components/data-display/kanban-board/index.js

@@ -1,19 +1,21 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import "../../../assets/css/components/data-display/kanban-board/styles.css";
 import DnD from "../dnd";
 import { ARIcon } from "../../icons";
 import Filter from "./filter";
-const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
+const KanbanBoard = function ({ trackBy, columns, onChange, onLazy, config, }) {
     // refs
     const _kanbanWrapper = useRef(null);
     const _kanbanItems = useRef({});
     const _hoverItemIndex = useRef(null);
     const _scrollInterval = useRef(null);
     const _scrollAnimationFrame = useRef(null);
-    const _scrollSpeedRef = useRef(0); // px/frame
+    const _scrollSpeedRef = useRef(0);
+    const _lastScrollTop = useRef(0);
     // states
     const [data, setData] = useState([]);
+    const [perPage, setPerPage] = useState(config?.perPage ?? 10);
     // states -> Filters
     const [search, setSearch] = useState("");
     const [selectFilters, setSelectFilters] = useState({});
@@ -104,6 +106,20 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
         if (item.classList.contains("dragging"))
             item.classList.remove("dragging");
     };
+    const handleLazyScroll = useMemo(() => {
+        return (event) => {
+            const target = event.currentTarget;
+            const { scrollTop, scrollHeight, clientHeight } = target;
+            const isVerticalScroll = scrollTop !== _lastScrollTop.current;
+            _lastScrollTop.current = scrollTop;
+            if (!isVerticalScroll)
+                return;
+            const isBottom = scrollHeight - scrollTop <= clientHeight;
+            if (isBottom) {
+                setPerPage((prev) => prev + Number(config?.perPage ?? 10));
+            }
+        };
+    }, [config?.perPage]);
     const handleStartScroll = (direction) => {
         const el = _kanbanWrapper.current;
         if (!el)
@@ -237,10 +253,14 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
                 });
             }
         }
-        else if (!search?.trim() && _kanbanWrapper.current) {
-            _kanbanWrapper.current.scrollTo({ top: 0, left: 0, behavior: "smooth" });
-        }
+        // else if (!search?.trim() && _kanbanWrapper.current) {
+        //   _kanbanWrapper.current.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+        // }
     }, [columns, search, selectedFilters, dateFilters]);
+    useEffect(() => {
+        if (onLazy)
+            onLazy(perPage);
+    }, [perPage, onLazy]);
     return (React.createElement(React.Fragment, null,
         config?.filter && (React.createElement(Filter, { states: {
                 search: {
@@ -262,7 +282,7 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
             }, config: config })),
         React.createElement("div", { ref: _kanbanWrapper, className: "ar-kanban-board", style: {
                 height: `calc(100dvh - (${_kanbanWrapper.current?.getBoundingClientRect().top}px + ${config?.safeAreaOffset?.bottom ?? 0}px))`,
-            }, onDragOver: handleBoardDragOver, onDragEnd: stopScrolling, onDrop: stopScrolling },
+            }, onScroll: handleLazyScroll, onDragOver: handleBoardDragOver, onDragEnd: stopScrolling, onDrop: stopScrolling },
             React.createElement("div", { className: "buttons" },
                 React.createElement("div", { className: "button left", onMouseDown: () => handleStartScroll("left"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
                     React.createElement(ARIcon, { icon: "ArrowLeft" })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.4.44",
+  "version": "0.4.45",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",