ar-design 0.4.44 → 0.4.46

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

@@ -7,11 +7,16 @@ export type Config<T extends object> = {
         bottom?: number;
         left?: number;
     };
+    perPage?: number;
     filter?: {
+        /**
+         * @deprecated *
+         */
         search?: (item: T, value: string) => boolean;
         keys: (item: T) => {
+            key: keyof T;
             name: string;
-            key: string;
+            value: string;
             type: "select" | "date";
         }[];
     };
@@ -20,6 +25,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;
+    onLazyLoad?: (query: Record<string, string>, perPage: number, currentPage: number) => void;
     config?: Config<T>;
 }
 export default IProps;

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

@@ -4,8 +4,8 @@ import { Config } from "../IProps";
 interface IProps<T extends object> {
     states: {
         search: {
-            get: string;
-            set: Dispatch<React.SetStateAction<string>>;
+            get: string | null;
+            set: Dispatch<React.SetStateAction<string | null>>;
         };
         dateFilters: {
             get: Record<string, {

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

@@ -1,11 +1,13 @@
 "use client";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import DateFilters from "./DateFilters";
 import SelectFilters from "./SelectFilters";
 import React from "react";
 import Input from "../../../form/input";
 import { useTranslation } from "../../../../libs/core/application/hooks";
 function Filter({ states, config }) {
+    // refs
+    const _searchTimeOut = useRef(null);
     // states
     const [openName, setOpenName] = useState(null);
     // hooks
@@ -13,7 +15,13 @@ function Filter({ states, config }) {
     // methods
     const handleOpen = (name) => setOpenName(openName === name ? null : name);
     return (React.createElement("div", { className: "filters" },
-        React.createElement(Input, { variant: "borderless", placeholder: t("KanbanBoard.Search.Input.Placeholder"), onChange: (event) => states.search.set(event.target.value.toLocaleLowerCase()) }),
+        React.createElement(Input, { variant: "borderless", placeholder: t("KanbanBoard.Search.Input.Placeholder"), onChange: (event) => {
+                if (_searchTimeOut.current)
+                    clearTimeout(_searchTimeOut.current);
+                _searchTimeOut.current = setTimeout(() => {
+                    states.search.set(event.target.value.toLocaleLowerCase());
+                }, 750);
+            } }),
         React.createElement("ul", null,
             React.createElement(DateFilters, { states: {
                     dateFilters: {

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, onLazyLoad, config, }: IProps<T, TColumnProperties>) => React.JSX.Element;
 export default KanbanBoard;

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

@@ -1,21 +1,28 @@
 "use client";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, 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, onLazyLoad, config, }) {
     // refs
     const _kanbanWrapper = useRef(null);
     const _kanbanItems = useRef({});
     const _hoverItemIndex = useRef(null);
+    const _isProgrammaticScroll = useRef(false);
     const _scrollInterval = useRef(null);
     const _scrollAnimationFrame = useRef(null);
-    const _scrollSpeedRef = useRef(0); // px/frame
+    const _scrollSpeedRef = useRef(0);
+    const _lastScrollTop = useRef(0);
+    const _lastRequest = useRef("");
     // states
     const [data, setData] = useState([]);
+    // states -> Lazy Load
+    const [query, setQuery] = useState(null);
+    const [perPage] = useState(config?.perPage ?? 10);
+    const [currentPage, setCurrentPage] = useState(1);
     // states -> Filters
-    const [search, setSearch] = useState("");
+    const [search, setSearch] = useState(null);
     const [selectFilters, setSelectFilters] = useState({});
     const [selectedFilters, setSelectedFilters] = useState({});
     const [dateFilters, setDateFilters] = useState({});
@@ -104,6 +111,22 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
         if (item.classList.contains("dragging"))
             item.classList.remove("dragging");
     };
+    const handleLazyLoadScroll = useCallback((event) => {
+        const target = event.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        if (_isProgrammaticScroll.current) {
+            if (scrollTop <= 5)
+                _isProgrammaticScroll.current = false;
+            return;
+        }
+        const isScrollingDown = scrollTop > _lastScrollTop.current;
+        _lastScrollTop.current = scrollTop;
+        if (!isScrollingDown)
+            return;
+        const isBottom = scrollHeight - scrollTop <= clientHeight;
+        if (isBottom)
+            setCurrentPage((prev) => prev + 1);
+    }, []);
     const handleStartScroll = (direction) => {
         const el = _kanbanWrapper.current;
         if (!el)
@@ -138,6 +161,11 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
     };
     // useEffects
     useEffect(() => {
+        let _data = columns.map((col) => ({
+            ...col,
+            items: [...col.items],
+        }));
+        setData(_data);
         const selectMap = new Map();
         const dateMap = new Map();
         columns.forEach((col) => {
@@ -147,7 +175,7 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
                     if (k.type === "select") {
                         if (!selectMap.has(k.name))
                             selectMap.set(k.name, new Set());
-                        selectMap.get(k.name).add(k.key ?? null);
+                        selectMap.get(k.name).add(k.value ?? null);
                     }
                     if (k.type === "date")
                         dateMap.set(k.name, true);
@@ -165,82 +193,61 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
             return next;
         });
     }, [columns]);
+    const _prevFilters = useRef(JSON.stringify({ search, selectedFilters, dateFilters }));
     useEffect(() => {
-        let nextData = columns.map((col) => ({
-            ...col,
-            items: [...col.items],
-        }));
-        let firstMatchedId = null;
-        // Search varsa...
-        if (config?.filter?.search && search?.trim()) {
-            const q = search.trim();
-            nextData = nextData.map((col) => {
-                const filteredItems = col.items.filter((item) => {
-                    const isMatch = config.filter.search(item, q);
-                    if (isMatch && !firstMatchedId)
-                        firstMatchedId = trackBy(item);
-                    return isMatch;
-                });
-                return { ...col, items: filteredItems };
-            });
-        }
-        else {
-            if (config?.filter?.search)
-                config.filter.search({}, "");
-        }
-        // Select ve Date varsa...
-        nextData = nextData.map((col) => ({
-            ...col,
-            items: col.items.filter((item) => {
-                const keys = config?.filter?.keys(item) ?? [];
-                // Select (checkbox)
-                const selectOk = Object.entries(selectedFilters).every(([filterName, selectedSet]) => {
-                    if (!selectedSet || selectedSet.size === 0)
-                        return true;
-                    const value = keys.find((k) => k.name === filterName)?.key ?? null;
-                    return selectedSet.has(value);
-                });
-                if (!selectOk)
-                    return false;
-                // Date (range)
-                const dateOk = Object.entries(dateFilters).every(([filterName, range]) => {
-                    if (!range.from && !range.to)
-                        return true;
-                    const raw = keys.find((k) => k.name === filterName)?.key;
-                    if (!raw)
-                        return false;
-                    const d = new Date(raw);
-                    if (range.from && d < range.from)
-                        return false;
-                    if (range.to && d > range.to)
-                        return false;
-                    return true;
-                });
-                return dateOk;
-            }),
-        }));
-        setData(nextData);
-        // Focus / Scroll Control
-        if (search?.trim() && firstMatchedId) {
-            const element = _kanbanItems.current[firstMatchedId];
-            const container = _kanbanWrapper.current;
-            if (element && container) {
-                const elementRect = element.getBoundingClientRect();
-                const containerRect = container.getBoundingClientRect();
-                // Senin hesaplaman: Mevcut scroll + elemanın container'a göre konumu - ofset değerlerin
-                const scrollLeft = container.scrollLeft + (elementRect.left - containerRect.left) - 17.5;
-                const scrollTop = container.scrollTop + (elementRect.top - containerRect.top) - 100;
-                container.scrollTo({
-                    left: scrollLeft,
-                    top: scrollTop,
-                    behavior: "smooth",
-                });
+        const currentFilters = JSON.stringify({
+            search,
+            selectedFilters: Object.fromEntries(Object.entries(selectedFilters).map(([k, v]) => [k, Array.from(v)])),
+            dateFilters,
+        });
+        if (_prevFilters.current !== currentFilters) {
+            setCurrentPage(1);
+            _prevFilters.current = currentFilters;
+            if (_kanbanWrapper.current) {
+                _isProgrammaticScroll.current = true;
+                _kanbanWrapper.current.scrollTo({ top: 0, left: 0, behavior: "smooth" });
             }
         }
-        else if (!search?.trim() && _kanbanWrapper.current) {
-            _kanbanWrapper.current.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+    }, [search, selectedFilters, dateFilters]);
+    useEffect(() => {
+        if (!search && Object.keys(selectedFilters).length === 0 && Object.keys(dateFilters).length === 0) {
+            setQuery(null);
+            return;
         }
-    }, [columns, search, selectedFilters, dateFilters]);
+        const sampleItem = columns[0]?.items[0];
+        const keys = sampleItem ? (config?.filter?.keys(sampleItem) ?? []) : [];
+        const dateQuery = Object.entries(dateFilters).reduce((acc, [name, range]) => {
+            if (range.from || range.to) {
+                const technicalKey = keys.find((k) => k.name === name)?.key || name;
+                acc[technicalKey] = {
+                    from: range.from,
+                    to: range.to,
+                };
+            }
+            return acc;
+        }, {});
+        const selectQuery = Object.entries(selectedFilters).reduce((acc, [filterName, selectedSet]) => {
+            if (selectedSet && selectedSet.size > 0) {
+                const technicalKey = keys.find((k) => k.name === filterName)?.key || filterName;
+                acc[technicalKey] = Array.from(selectedSet);
+            }
+            return acc;
+        }, {});
+        setQuery({
+            keyword: search ?? "",
+            ...dateQuery,
+            ...selectQuery,
+        });
+    }, [search, selectedFilters, dateFilters]);
+    useEffect(() => {
+        if (!onLazyLoad)
+            return;
+        const key = JSON.stringify({ query, currentPage, perPage });
+        if (_lastRequest.current === key)
+            return;
+        _lastRequest.current = key;
+        onLazyLoad(query, perPage, currentPage);
+    }, [query, currentPage, perPage, onLazyLoad]);
     return (React.createElement(React.Fragment, null,
         config?.filter && (React.createElement(Filter, { states: {
                 search: {
@@ -262,7 +269,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: handleLazyLoadScroll, 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" })),
@@ -288,7 +295,7 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
                                     const rect = event.currentTarget.getBoundingClientRect();
                                     const mouseY = event.clientY;
                                     const isBelow = mouseY > rect.top + rect.height / 2;
-                                    _hoverItemIndex.current = isBelow ? index + 1 : index;
+                                    _hoverItemIndex.current = isBelow ? dndIndex + 1 : dndIndex;
                                 } }, board.renderItem(item, index)));
                         }, columnKey: board.key, confing: { isMoveIcon: false } })))))))));
 };

package/package.json

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