ar-design 0.4.21 → 0.4.22

package/dist/assets/css/components/data-display/kanban-board/styles.css

@@ -210,6 +210,71 @@
   }
 }
 
+.filters {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+  background-color: var(--white);
+  margin-bottom: 1rem;
+  border-radius: var(--border-radius-lg);
+  z-index: 6;
+
+  > :first-child {
+    flex: 1;
+  }
+
+  > ul {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+
+    > li {
+      position: relative;
+      padding: 0.5rem;
+      cursor: pointer;
+      transition: background-color 150ms ease-in-out;
+
+      &:hover {
+        background-color: var(--gray-100);
+
+        > ul {
+          display: block;
+        }
+      }
+
+      > div {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+
+        > span {
+          color: var(--gray-500);
+          font-weight: 500;
+        }
+      }
+
+      > ul {
+        display: none;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        background-color: var(--gray-100);
+        width: max-content;
+        padding: 1rem;
+        border-bottom-left-radius: var(--border-radius-sm);
+        border-bottom-right-radius: var(--border-radius-sm);
+        box-shadow: 0px 5px 5px -2px rgba(var(--black-rgb), 0.1);
+
+        > li {
+          cursor: auto;
+        }
+      }
+    }
+  }
+}
+
 /* --- [KÜÇÜK MOBİL - IPHONE SE VB.] --- */
 /* Çok dar ekranlar için özel düzeltmeler */
 @media (max-width: 375px) {

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

@@ -0,0 +1,17 @@
+import React, { Dispatch, SetStateAction } from "react";
+interface IProps {
+    states: {
+        dateFilters: {
+            get: Record<string, {
+                from: Date | null;
+                to: Date | null;
+            }>;
+            set: Dispatch<SetStateAction<Record<string, {
+                from: Date | null;
+                to: Date | null;
+            }>>>;
+        };
+    };
+}
+declare const DateFilters: ({ states }: IProps) => React.JSX.Element[];
+export default DateFilters;

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

@@ -0,0 +1,35 @@
+import React from "react";
+import DatePicker from "../../form/date-picker";
+import { ARIcon } from "../../icons";
+import Grid from "../grid-system";
+const { Row, Column } = Grid;
+const DateFilters = ({ states }) => {
+    return Object.entries(states.dateFilters.get).map(([name, range]) => (React.createElement("li", { key: name, className: "filter-box" },
+        React.createElement("div", null,
+            React.createElement("span", null, name),
+            React.createElement(ARIcon, { icon: "ChevronDown" })),
+        React.createElement("ul", null,
+            React.createElement(Row, null,
+                React.createElement(Column, null,
+                    React.createElement(DatePicker, { value: range.from?.toISOString(), onChange: (value) => {
+                            states.dateFilters.set((prev) => ({
+                                ...prev,
+                                [name]: {
+                                    ...prev[name],
+                                    from: new Date(value),
+                                },
+                            }));
+                        } }))),
+            React.createElement(Row, null,
+                React.createElement(Column, null,
+                    React.createElement(DatePicker, { value: range.to?.toISOString(), onChange: (value) => {
+                            states.dateFilters.set((prev) => ({
+                                ...prev,
+                                [name]: {
+                                    ...prev[name],
+                                    to: new Date(value),
+                                },
+                            }));
+                        } })))))));
+};
+export default DateFilters;

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

@@ -10,6 +10,14 @@ interface IProps<T, TColumnProperties> {
             bottom?: number;
             left?: number;
         };
+        filter?: {
+            search?: (item: T, value: string) => boolean;
+            keys: (item: T) => {
+                name: string;
+                key: string;
+                type: "select" | "date";
+            }[];
+        };
     };
 }
 export default IProps;

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

@@ -0,0 +1,19 @@
+import React, { Dispatch, SetStateAction } from "react";
+interface IProps {
+    states: {
+        selectFilters: {
+            get: {
+                [key: string]: (string | null)[];
+            };
+            set: Dispatch<SetStateAction<{
+                [key: string]: (string | null)[];
+            }>>;
+        };
+        selectedFilters: {
+            get: Record<string, Set<string | null>>;
+            set: Dispatch<SetStateAction<Record<string, Set<string | null>>>>;
+        };
+    };
+}
+declare const SelectFilters: ({ states }: IProps) => React.JSX.Element[];
+export default SelectFilters;

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

@@ -0,0 +1,20 @@
+import React from "react";
+import { ARIcon } from "../../icons";
+import Checkbox from "../../form/checkbox";
+const SelectFilters = ({ states }) => {
+    return Object.entries(states.selectFilters.get).map(([name, values]) => (React.createElement("li", null,
+        React.createElement("div", null,
+            React.createElement("span", null, name),
+            React.createElement(ARIcon, { icon: "ChevronDown" })),
+        React.createElement("ul", null, values.map((val) => (React.createElement("li", null,
+            React.createElement(Checkbox, { label: String(val ?? "-"), checked: states.selectedFilters.get[name]?.has(val) ?? false, onChange: () => {
+                    states.selectedFilters.set((prev) => {
+                        const next = { ...prev };
+                        const set = new Set(next[name] ?? []);
+                        set.has(val) ? set.delete(val) : set.add(val);
+                        next[name] = set;
+                        return next;
+                    });
+                } }))))))));
+};
+export default SelectFilters;

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

@@ -3,6 +3,9 @@ import React, { useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/data-display/kanban-board/styles.css";
 import DnD from "../dnd";
 import { ARIcon } from "../../icons";
+import Input from "../../form/input";
+import DateFilters from "./DateFilters";
+import SelectFilters from "./SelectFilters";
 const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
     // refs
     const _kanbanWrapper = useRef(null);
@@ -12,6 +15,11 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
     const _scrollSpeedRef = useRef(0); // px/frame
     // states
     const [data, setData] = useState([]);
+    // states -> Filters
+    const [search, setSearch] = useState("");
+    const [selectFilters, setSelectFilters] = useState({});
+    const [selectedFilters, setSelectedFilters] = useState({});
+    const [dateFilters, setDateFilters] = useState({});
     // methods
     const handleBoardDragOver = (event) => {
         event.preventDefault();
@@ -130,33 +138,129 @@ const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
                 .slice(1));
     };
     // useEffects
-    useEffect(() => setData(columns), [columns]);
-    return (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 },
-        React.createElement("div", { className: "buttons" },
-            React.createElement("div", { className: "button left", onMouseDown: () => handleStartScroll("left"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
-                React.createElement(ARIcon, { icon: "ArrowLeft" })),
-            React.createElement("div", { className: "button right", onMouseDown: () => handleStartScroll("right"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
-                React.createElement(ARIcon, { icon: "ArrowRight" }))),
-        React.createElement("div", { className: "titles" }, data.map((board, index) => (React.createElement("div", { key: index, className: "title" },
-            React.createElement("h4", null,
-                React.createElement("span", { style: {
-                        backgroundColor: darkenColor(board.titleColor ?? "", 1),
-                        borderColor: darkenColor(board.titleColor ?? "", 1),
+    useEffect(() => {
+        const selectMap = new Map();
+        const dateMap = new Map();
+        columns.forEach((col) => {
+            col.items.forEach((item) => {
+                const keys = config?.filter?.keys(item);
+                keys?.forEach((k) => {
+                    if (k.type === "select") {
+                        if (!selectMap.has(k.name))
+                            selectMap.set(k.name, new Set());
+                        selectMap.get(k.name).add(k.key ?? null);
+                    }
+                    if (k.type === "date")
+                        dateMap.set(k.name, true);
+                });
+            });
+        });
+        // checkbox filtre seçenekleri
+        const nextSelectFilters = Object.fromEntries(Array.from(selectMap.entries()).map(([name, set]) => [name, Array.from(set)]));
+        setSelectFilters(nextSelectFilters);
+        // date filtreler (sadece isim + boş range)
+        setDateFilters((prev) => {
+            const next = { ...prev };
+            Array.from(dateMap.keys()).forEach((name) => {
+                if (!next[name]) {
+                    next[name] = { from: null, to: null };
+                }
+            });
+            return next;
+        });
+    }, [columns]);
+    useEffect(() => {
+        let nextData = columns.map((col) => ({
+            ...col,
+            items: [...col.items],
+        }));
+        // Search varsa...
+        if (config?.filter?.search && search?.trim()) {
+            const q = search.trim();
+            nextData = nextData.map((col) => ({
+                ...col,
+                items: col.items.filter((item) => config.filter.search(item, q)),
+            }));
+        }
+        // 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);
+    }, [columns, search, selectedFilters, dateFilters]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "filters" },
+            React.createElement(Input, { variant: "borderless", placeholder: "Filter by keyword", onChange: (event) => setSearch(event.target.value.toLocaleLowerCase()) }),
+            React.createElement("ul", null,
+                React.createElement(DateFilters, { states: {
+                        dateFilters: {
+                            get: dateFilters,
+                            set: setDateFilters,
+                        },
                     } }),
-                board.title.toLocaleUpperCase("tr")),
-            board.description && React.createElement("span", null, board.description))))),
-        React.createElement("div", { className: "columns" }, data.map((board, index) => (React.createElement("div", { key: index, className: "column", onDrop: handleDrop(board.key) },
-            React.createElement("div", { className: "items", onDragOver: handleItemsDragOver, onDragLeave: handleItemsDragLeave, onDrop: handleItemsDrop },
-                React.createElement(DnD, { key: board.key, data: board.items, renderItem: (item, index) => {
-                        return (React.createElement("div", { key: index, className: "item", onDragOver: (event) => {
-                                event.preventDefault();
-                                const rect = event.currentTarget.getBoundingClientRect();
-                                const mouseY = event.clientY;
-                                const isBelow = mouseY > rect.top + rect.height / 2;
-                                _hoverItemIndex.current = isBelow ? index + 1 : index;
-                            } }, board.renderItem(item, index)));
-                    }, columnKey: board.key, confing: { isMoveIcon: false } }))))))));
+                React.createElement(SelectFilters, { states: {
+                        selectFilters: {
+                            get: selectFilters,
+                            set: setSelectFilters,
+                        },
+                        selectedFilters: {
+                            get: selectedFilters,
+                            set: setSelectedFilters,
+                        },
+                    } }))),
+        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 },
+            React.createElement("div", { className: "buttons" },
+                React.createElement("div", { className: "button left", onMouseDown: () => handleStartScroll("left"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
+                    React.createElement(ARIcon, { icon: "ArrowLeft" })),
+                React.createElement("div", { className: "button right", onMouseDown: () => handleStartScroll("right"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
+                    React.createElement(ARIcon, { icon: "ArrowRight" }))),
+            React.createElement("div", { className: "titles" }, data.map((board, index) => (React.createElement("div", { key: index, className: "title" },
+                React.createElement("h4", null,
+                    React.createElement("span", { style: {
+                            backgroundColor: darkenColor(board.titleColor ?? "", 1),
+                            borderColor: darkenColor(board.titleColor ?? "", 1),
+                        } }),
+                    board.title.toLocaleUpperCase("tr")),
+                board.description && React.createElement("span", null, board.description))))),
+            React.createElement("div", { className: "columns" }, data.map((board, index) => (React.createElement("div", { key: index, className: "column", onDrop: handleDrop(board.key) },
+                React.createElement("div", { className: "items", onDragOver: handleItemsDragOver, onDragLeave: handleItemsDragLeave, onDrop: handleItemsDrop },
+                    React.createElement(DnD, { key: board.key, data: board.items, renderItem: (item, dndIndex) => {
+                            return (React.createElement("div", { key: dndIndex, className: "item", onDragOver: (event) => {
+                                    event.preventDefault();
+                                    const rect = event.currentTarget.getBoundingClientRect();
+                                    const mouseY = event.clientY;
+                                    const isBelow = mouseY > rect.top + rect.height / 2;
+                                    _hoverItemIndex.current = isBelow ? index + 1 : index;
+                                } }, board.renderItem(item, index)));
+                        }, columnKey: board.key, confing: { isMoveIcon: false } })))))))));
 };
 export default KanbanBoard;

package/package.json

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