ar-design 0.2.61 → 0.2.63

package/dist/components/data-display/table/_index.js

@@ -1,411 +0,0 @@
-"use client";
-import "../../../assets/css/components/data-display/table/styles.css";
-import { ARIcon } from "../../icons";
-import Button from "../../form/button";
-import Checkbox from "../../form/checkbox";
-import Pagination from "../../navigation/pagination";
-import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
-import Actions from "./Actions";
-import Input from "../../form/input";
-import Popover from "../../feedback/popover";
-const TableWithRef = forwardRef(({ children, title, description, data, columns, actions, selections, previousSelections, searchedParams, pagination, config = { isSearchable: false }, }, ref) => {
-    // refs
-    const _tableWrapper = useRef(null);
-    const _table = useRef(null);
-    const _tableContent = useRef(null);
-    const _checkboxItems = useRef([]);
-    const _filterCheckboxItems = useRef([]);
-    // refs -> Search
-    const _searchTextInputs = useRef([]);
-    const _searchTimeOut = useRef(null);
-    // className
-    const _tableClassName = ["ar-table", "scroll"];
-    // states
-    const [selectAll, setSelectAll] = useState(false);
-    const [selectionItems, setSelectionItems] = useState([]);
-    // const [thWidths, setThWidths] = useState<number[]>([]);
-    // states -> Search
-    const [searchedText, setSearchedText] = useState(undefined);
-    const [_searchedParams, setSearchedParams] = useState(undefined);
-    const [checkboxSelectedParams, setCheckboxSelectedParams] = useState(undefined);
-    // const [selectedfilterCheckboxItems, setSelectedfilterCheckboxItems] = useState<
-    //   {
-    //     selectedCount: number;
-    //     columnKey: string;
-    //   }[]
-    // >([]);
-    // const [searchedFilters, setSearchedFilters] = useState<string | undefined>(undefined);
-    // const [totalRecords, setTotalRecords] = useState<number>(0);
-    const [currentPage, setCurrentPage] = useState(1);
-    if (config && Object.keys(config.scroll || {}).length > 0) {
-        if (_tableContent.current && config.scroll) {
-            if (config.scroll.maxHeight) {
-                _tableContent.current.style.maxHeight = `${config?.scroll?.maxHeight}rem`;
-            }
-        }
-    }
-    // Custom Attributes
-    useImperativeHandle(ref, () => {
-        const tableCurrent = _table.current;
-        return {
-            ...tableCurrent,
-            filterCleaner: () => {
-                if (config.isServerSide) {
-                    setSearchedParams({});
-                    // pagination && pagination.onChange(1);
-                }
-                else {
-                    setSearchedText({});
-                }
-                setCurrentPage(1);
-                _searchTextInputs.current.map((item) => item && (item.value = ""));
-            },
-        };
-    });
-    // methods
-    const handleScroll = () => {
-        if (!_tableWrapper.current)
-            return;
-        const wrapperRect = _tableWrapper.current.getBoundingClientRect();
-        const updateStickyPositions = (elements) => {
-            elements.forEach((element) => {
-                const leftChildren = Array.from(element.childNodes)
-                    .filter((node) => node.nodeType === Node.ELEMENT_NODE)
-                    .filter((child) => child.dataset.stickyPosition === "left");
-                const rightChildren = Array.from(element.childNodes)
-                    .filter((node) => node.nodeType === Node.ELEMENT_NODE)
-                    .filter((child) => child.dataset.stickyPosition === "right")
-                    .reverse();
-                // Calculate positions and minimize `getBoundingClientRect` calls
-                const leftRects = leftChildren.map((child) => child.getBoundingClientRect());
-                const rightRects = rightChildren.map((child) => child.getBoundingClientRect());
-                const leftPrevious = leftRects.map((rect) => Math.abs(rect.right - wrapperRect.left));
-                const rightPrevious = rightRects.map((rect) => Math.abs(rect.left - wrapperRect.right));
-                // #region Left
-                leftChildren.forEach((child, index) => {
-                    const prevLeft = index > 0 ? leftPrevious[index - 1] : 0;
-                    if (index > 0) {
-                        const childLeft = leftRects[index].left - wrapperRect.left;
-                        if (Math.floor(childLeft) === Math.floor(prevLeft)) {
-                            if (!child.classList.contains("active-sticky"))
-                                child.classList.add("active-sticky");
-                        }
-                        else
-                            child.classList.remove("active-sticky");
-                        child.style.left = `${prevLeft}px`;
-                    }
-                    else
-                        child.classList.add("sticky");
-                    if (child.nodeName === "TD")
-                        child.style.zIndex = `${leftChildren.length - index}`;
-                });
-                // #endregion
-                // #region Right
-                rightChildren.forEach((child, index) => {
-                    const prevRight = index > 0 ? rightPrevious[index - 1] : 0;
-                    if (index > 0) {
-                        const childRight = Math.abs(rightRects[index].right - wrapperRect.right);
-                        if (Math.floor(childRight) === Math.floor(prevRight)) {
-                            if (!child.classList.contains("active-sticky"))
-                                child.classList.add("active-sticky");
-                        }
-                        else
-                            child.classList.remove("active-sticky");
-                        child.style.right = `${prevRight}px`;
-                    }
-                    else
-                        child.classList.add("sticky");
-                });
-                // #endregion
-            });
-        };
-        const theadElements = _tableWrapper.current.querySelectorAll("table > thead > tr");
-        const tbodyElements = _tableWrapper.current.querySelectorAll("table > tbody > tr");
-        requestAnimationFrame(() => {
-            updateStickyPositions(theadElements);
-            updateStickyPositions(tbodyElements);
-        });
-    };
-    const handleSearch = (event) => {
-        if (config.isServerSide) {
-            if (_searchTimeOut.current)
-                clearTimeout(_searchTimeOut.current);
-            _searchTimeOut.current = setTimeout(() => {
-                setSearchedParams((prev) => ({ ...prev, [event.target.name]: event.target.value }));
-                setCurrentPage(1);
-                // pagination && pagination.onChange(1);
-            }, 750);
-        }
-        else {
-            setCurrentPage(1);
-            setSearchedText((prev) => ({ ...prev, [event.target.name]: event.target.value }));
-        }
-    };
-    const handleCheckboxChange = useCallback(async (event) => {
-        event.stopPropagation();
-        setCheckboxSelectedParams((prev) => {
-            const updatedValues = new Set(prev?.[event.target.name] || []);
-            event.target.checked ? updatedValues.add(event.target.value) : updatedValues.delete(event.target.value);
-            return {
-                ...prev,
-                ...(Array.from(updatedValues).length > 0
-                    ? { [event.target.name]: Array.from(updatedValues) }
-                    : { [event.target.name]: [] }),
-            };
-        });
-    }, []);
-    // Derinlemesine arama yapmak için özyinelemeli bir fonksiyon tanımlayalım.
-    const deepSearch = (item, searchedText) => {
-        if (!searchedText)
-            return false;
-        // Eğer değer bir sayı veya string ise, aranan metinle eşleşip eşleşmediğini kontrol ediyoruz.
-        return Object.entries(searchedText).every(([key, value]) => {
-            const _itemValue = item[key];
-            if (typeof _itemValue === "number" || typeof _itemValue === "string") {
-                if (Array.isArray(value)) {
-                    if (value.length === 0)
-                        return true;
-                    else
-                        return value.some((v) => _itemValue.toString().toLocaleLowerCase().includes(v.toLocaleLowerCase()));
-                }
-                return _itemValue.toString().toLocaleLowerCase().includes(value.toLocaleLowerCase());
-            }
-            if (typeof _itemValue === "object") {
-                if (Array.isArray(value)) {
-                    if (value.length === 0)
-                        return true;
-                    else {
-                        return value.some((v) => Object.entries(_itemValue ?? {}).some(([_, objValue]) => String(objValue).toLocaleLowerCase().includes(v.toLocaleLowerCase())));
-                    }
-                }
-                return Object.entries(_itemValue ?? {}).some(([_, objValue]) => String(objValue).toLocaleLowerCase().includes(value.toLocaleLowerCase()));
-            }
-            if (Array.isArray(_itemValue)) {
-                console.log("Buradasın", _itemValue);
-            }
-            return false;
-        });
-    };
-    const getData = useCallback(() => {
-        let _data = [...data];
-        if (searchedText)
-            _data = _data.filter((item) => deepSearch(item, searchedText));
-        if (pagination && !config.isServerSide) {
-            const indexOfLastRow = currentPage * pagination.perPage;
-            const indexOfFirstRow = indexOfLastRow - pagination.perPage;
-            _data = _data.slice(indexOfFirstRow, indexOfLastRow);
-        }
-        // Veriler yenilenmesi durumunda tablo üzerindeki hesaplamalar tekrar yapılacaktır.
-        setTimeout(() => handleScroll(), 0);
-        return _data;
-    }, [data, searchedText, currentPage]);
-    // useEffects
-    useEffect(() => {
-        // Eğer `previousSelections` özelliğinden değer geliyorsa bu daha önce seçim yapılmış öğeleri gönderiyorum
-        // demektir ve otomatik olarak seçim yap demek anlamına gekmektedir.
-        if (previousSelections && previousSelections.length > 0) {
-            const validSelections = data.filter((item) => previousSelections.some((selected) => JSON.stringify(selected) === JSON.stringify(item)));
-            setSelectionItems(validSelections);
-        }
-    }, [previousSelections]);
-    useEffect(() => {
-        if (!selections || selectionItems.length === 0)
-            return;
-        selections(selectionItems);
-    }, [selectionItems]);
-    useEffect(() => {
-        if (config?.isServerSide && searchedParams) {
-            // const query = Object.entries(_searchedParams ?? {})
-            //   .map(([key, value]) => {
-            //     return `${key}=${value}`;
-            //   })
-            //   .join("&");
-            const query = new URLSearchParams(_searchedParams).toString();
-            searchedParams(_searchedParams, query);
-        }
-    }, [_searchedParams]);
-    useEffect(() => {
-        if (config.isServerSide) {
-            if (_searchTimeOut.current)
-                clearTimeout(_searchTimeOut.current);
-            setSearchedParams(checkboxSelectedParams);
-        }
-        else {
-            setSearchedText(checkboxSelectedParams);
-        }
-        setCurrentPage(1);
-        // pagination && pagination.onChange(1);
-        // Filters...
-        // setSelectedfilterCheckboxItems((prev) => {
-        //   debugger;
-        //   const columnKeys = Object.keys(checkboxSelectedParams ?? {});
-        //   const selectedCount = _filterCheckboxItems.current.filter((x) => x?.checked).length;
-        //   const updatedItems = [...prev];
-        //   columnKeys.forEach((columnKey) => {
-        //     const existingIndex = updatedItems.findIndex((item) => item.columnKey === columnKey);
-        //     if (existingIndex !== -1) {
-        //       // Eğer aynı key varsa, güncelle
-        //       updatedItems[existingIndex] = { columnKey, selectedCount };
-        //     } else {
-        //       // Eğer aynı key yoksa, ekle
-        //       updatedItems.push({ columnKey, selectedCount });
-        //     }
-        //   });
-        //   return updatedItems;
-        // });
-    }, [checkboxSelectedParams]);
-    useEffect(() => {
-        if (!selections)
-            return;
-        let allChecked = false;
-        if (_checkboxItems.current.length > 0) {
-            allChecked = _checkboxItems.current.every((item) => item?.checked === true);
-        }
-        setSelectAll(allChecked);
-    }, [selectionItems, currentPage]);
-    // useEffect(() => {
-    //   if (!_tableContent.current) return;
-    //   const th = _tableContent.current?.querySelectorAll("table > thead > tr:first-child > th");
-    //   th.forEach((item) => setThWidths((prev) => [...prev, item.getBoundingClientRect().width]));
-    // }, []);
-    return (React.createElement("div", { ref: _tableWrapper, className: _tableClassName.map((c) => c).join(" ") },
-        (title || description || actions || React.Children.count(children) > 0) && (React.createElement("div", { className: "header" },
-            React.createElement("div", { className: "title" },
-                React.createElement("h3", null, title),
-                React.createElement("h5", null, description)),
-            React.createElement("div", { className: "actions" },
-                React.Children.count(children) > 0 && React.createElement("div", null, React.Children.map(children, (child) => child)),
-                actions && (React.createElement(React.Fragment, null, actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick }))))))),
-        React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
-            React.createElement("table", { ref: ref },
-                React.createElement("thead", null,
-                    React.createElement("tr", { key: "selection" },
-                        selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
-                            React.createElement(Checkbox, { variant: "filled", status: "primary", checked: selectAll, onChange: (event) => {
-                                    if (_checkboxItems.current.length > 0) {
-                                        setSelectAll(event.target.checked);
-                                        _checkboxItems.current.forEach((item) => {
-                                            if (item) {
-                                                if (item.checked !== event.target.checked)
-                                                    item.click();
-                                            }
-                                        });
-                                    }
-                                } }))),
-                        columns.map((c, cIndex) => {
-                            let _className = [];
-                            if (c.config?.sticky)
-                                _className.push(`sticky-${c.config.sticky}`);
-                            if (!c.config?.width)
-                                _className.push("min-w");
-                            if (c.config?.alignContent) {
-                                _className.push(`align-content-${c.config.alignContent}`);
-                            }
-                            return (React.createElement("th", { key: `column-${cIndex}-${Math.random()}`, ...(_className.length > 0 && {
-                                    className: `${_className.map((c) => c).join(" ")}`,
-                                }), ...(c.config?.width
-                                    ? {
-                                        style: { minWidth: c.config.width },
-                                    }
-                                    : // : { style: { maxWidth: thWidths[cIndex], minWidth: thWidths[cIndex] } })}
-                                        { style: {} }), ...(c.config?.sticky && {
-                                    "data-sticky-position": c.config.sticky,
-                                }) }, c.title));
-                        })),
-                    config?.isSearchable && (React.createElement("tr", { key: "isSearchable" },
-                        selections && (React.createElement("th", { key: `column-selections`, className: "selection-col sticky-left", "data-sticky-position": "left" })),
-                        columns.map((c, cIndex) => {
-                            if (!c.key)
-                                return React.createElement("th", null);
-                            let _className = [];
-                            if (c.config?.sticky)
-                                _className.push(`sticky-${c.config.sticky}`);
-                            if (c.config?.alignContent) {
-                                _className.push(`align-content-${c.config.alignContent}`);
-                            }
-                            return (React.createElement("th", { key: `column-${cIndex}`, ...(_className.length > 0 && {
-                                    className: `${_className.map((c) => c).join(" ")}`,
-                                }), ...(c.config?.sticky && {
-                                    "data-sticky-position": c.config.sticky,
-                                }) },
-                                React.createElement("div", { className: "filter-field" },
-                                    React.createElement(Input, { ref: (element) => (_searchTextInputs.current[cIndex] = element), variant: c.key && !c.filters ? "filled" : "outlined", status: "light", name: typeof c.key !== "object" ? String(c.key) : String(c.key.field), onChange: handleSearch, disabled: !c.key || !!c.filters }),
-                                    c.filters && (React.createElement(Popover, { content: React.createElement(React.Fragment, null,
-                                            React.createElement("div", null, c.filters.map((filter, fIndex) => {
-                                                const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
-                                                return (React.createElement("div", null,
-                                                    React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, status: "primary", 
-                                                        // value={filter.value}
-                                                        checked: checkboxSelectedParams?.[name]?.includes(String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
-                                            }))), windowBlur: true },
-                                        React.createElement(Button, { variant: "borderless", icon: { element: React.createElement(ARIcon, { icon: "Filter", stroke: "var(--primary)", size: 16 }) } }))))));
-                        })))),
-                React.createElement("tbody", null, getData().length > 0 ? (getData().map((item, index) => (React.createElement("tr", { key: `row-${index}-${Math.random()}` },
-                    selections && (React.createElement("td", { key: `selection-${index}`, className: "sticky-left", "data-sticky-position": "left" },
-                        React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), status: "primary", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
-                                if (event.target.checked)
-                                    setSelectionItems((prev) => [...prev, item]);
-                                else
-                                    setSelectionItems((prev) => prev.filter((_item) => _item !== item));
-                            } }))),
-                    columns.map((c, cIndex) => {
-                        let _className = [];
-                        let render; // TODO: Generic yapmak için çalışma yap. (Daha Sonra)
-                        // `c.key` bir string ise
-                        if (typeof c.key !== "object") {
-                            render = c.render ? c.render(item) : item[c.key];
-                        }
-                        // `c.key` bir nesne ise ve `nestedKey` mevcutsa
-                        else if (typeof c.key === "object") {
-                            const _item = item[c.key.field];
-                            if (_item && typeof _item === "object") {
-                                render = c.render ? c.render(item) : _item[c.key.nestedKey];
-                            }
-                        }
-                        // Diğer durumlarda `null` döndür
-                        else {
-                            render = null;
-                        }
-                        // const isTypeOfNumber = typeof render === "number" ? "type-of-number" : "";
-                        // if (isTypeOfNumber) _className.push(isTypeOfNumber);
-                        if (c.config?.sticky)
-                            _className.push(`sticky-${c.config.sticky}`);
-                        if (c.config?.alignContent)
-                            _className.push(`align-content-${c.config.alignContent}`);
-                        if (c.config?.textWrap)
-                            _className.push(`text-${c.config.textWrap}`);
-                        return (React.createElement("td", { key: `cell-${index}-${cIndex}`, ...(_className.length > 0 && {
-                                className: `${_className.map((c) => c).join(" ")}`,
-                            }), ...(c.config?.width
-                                ? {
-                                    style: { minWidth: c.config.width },
-                                }
-                                : // : {
-                                    //     style: { maxWidth: thWidths[cIndex], minWidth: thWidths[cIndex] },
-                                    //   })}
-                                    {
-                                        style: {},
-                                    }), ...(c.config?.sticky && {
-                                "data-sticky-position": c.config.sticky,
-                            }) }, React.isValidElement(render) ? render : String(render)));
-                    }))))) : (React.createElement("tr", null,
-                    React.createElement("td", { colSpan: columns.length + 1 }, "Herhangi bir kay\u0131t bulunamad\u0131!")))))),
-        pagination && pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
-            React.createElement("span", null,
-                React.createElement("strong", null,
-                    "Showing ",
-                    getData().length),
-                " ",
-                React.createElement("span", null,
-                    "of ",
-                    pagination?.perPage ?? getData().length,
-                    " agreement")),
-            React.createElement(Pagination, { totalRecords: pagination.totalRecords, currentPage: currentPage, perPage: pagination.perPage, onChange: (currentPage) => {
-                    // config.isServerSide && pagination.onChange(currentPage);
-                    setCurrentPage(currentPage);
-                } })))));
-});
-// Actions'ı ekliyoruz.
-const Table = TableWithRef;
-Table.Actions = Actions;
-export default Table;