@harjs/react-ui 1.0.0

package/dist/components/data-display/table/body/TBody.js

@@ -0,0 +1,184 @@
+"use client";
+import React, { Fragment, memo, useEffect, useRef, useState } from "react";
+import { ARIcon } from "../../../icons";
+import Checkbox from "../../../form/checkbox";
+import Editable from "./Editable";
+import { useTranslation } from "../../../../libs/core/application/hooks";
+const SubitemList = ({ items, columns, depth, level = 1, parentKey = "", config, methods, states, renderCell, }) => {
+    const _subrowSelector = config.subrow?.selector ?? "subitems";
+    const _subrowButton = config.subrow?.button ?? true;
+    if (config.subrow?.render) {
+        return (React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
+            methods.selections && React.createElement("td", { className: "sticky sticky-left", "data-sticky-position": "left" }),
+            _subrowButton && React.createElement("td", { className: "sticky sticky-left", "data-sticky-position": "left" }),
+            React.createElement("td", { colSpan: columns.length || 1, style: { ...config.subrow.render.styles, padding: "7.5px 7.5px 7.5px 0" } }, config.subrow?.render.element(items) ?? React.createElement(React.Fragment, null))));
+    }
+    return (React.createElement(React.Fragment, null, items.map((subitem, subindex) => {
+        const id = methods.trackBy?.(subitem) ?? `sub-${subindex}`;
+        const key = `${parentKey}.${id}`;
+        const _subitem = subitem[_subrowSelector];
+        const isHasSubitems = _subrowSelector in subitem;
+        return (React.createElement(Fragment, { key: `subitem-wrapper-${key}` },
+            React.createElement("tr", { className: `subrow-item ${_subrowButton ? "type-b" : "type-a"}`, "data-level": level },
+                methods.selections && (React.createElement("td", { className: "sticky sticky-left", "data-sticky-position": "left", style: { display: "table-cell", verticalAlign: "middle" } })),
+                _subrowButton && (React.createElement("td", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left", style: { display: "table-cell", verticalAlign: "middle" } },
+                    React.createElement("div", { className: "subitem-open-button-wrapper", style: { display: "flex", justifyContent: "center", alignItems: "center" } },
+                        React.createElement("span", { className: `${(states.showSubitems.get[key] && "opened") ?? ""} ${!isHasSubitems || !_subitem ? "passive passive-arrow" : ""}`, onClick: () => {
+                                if (!isHasSubitems || !_subitem)
+                                    return;
+                                states.showSubitems.set((prev) => ({ ...prev, [key]: !prev[key] }));
+                            } })))),
+                columns.map((column, cIndex) => renderCell({
+                    item: subitem,
+                    column,
+                    index: subindex,
+                    cIndex,
+                    depth: depth * (config.isTreeView ? 2.25 : 1.75),
+                    level,
+                    height: 0,
+                    isSubrows: true,
+                }))),
+            states.showSubitems.get[key] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, depth: depth + 0.75, level: level + 1, parentKey: key, config: config, methods: methods, states: states, renderCell: renderCell }))));
+    })));
+};
+function TBody({ data, columns, refs, methods, states, config }) {
+    const _tBodyTR = useRef([]);
+    const _tHeadTH = useRef([]);
+    const [triggerForRender, setTriggerForRender] = useState(false);
+    const [rowHeights, setRowHeights] = useState([]);
+    const _subrowSelector = config.subrow?.selector ?? "subitems";
+    const _subrowButton = config.subrow?.button ?? false;
+    const { t } = useTranslation(String(config.locale ?? "tr"));
+    const renderCell = ({ item, column, index, cIndex, depth, level, height = 0, isSubrows = false }) => {
+        let render;
+        const itemTrackId = methods.trackBy?.(item) ?? index.toString();
+        if (typeof column.key !== "object")
+            render = column.render ? column.render(item) : item[column.key];
+        else if (typeof column.key === "object") {
+            const _item = item[column.key.field];
+            if (_item && typeof _item === "object") {
+                render = column.render ? column.render(item) : _item[column.key.nestedKey];
+            }
+        }
+        else
+            render = null;
+        const _className = [];
+        if (column.config?.alignContent)
+            _className.push(`align-content-${column.config.alignContent}`);
+        if (column.config?.sticky)
+            _className.push(`sticky-${column.config.sticky}`);
+        if (column.config?.textWrap)
+            _className.push(`text-${column.config.textWrap}`);
+        const firstCleanDataColumn = columns.find((col) => col.config?.sticky === undefined || col.config?.sticky !== "left");
+        const isTargetPaddingColumn = firstCleanDataColumn !== undefined && column === firstCleanDataColumn;
+        return (React.createElement("td", { key: `cell-${itemTrackId}-${cIndex}`, className: _className.join(" "), style: {
+                ...(column.config?.sticky ? { height } : {}),
+                ...(column.config?.width
+                    ? {
+                        width: column.config.width,
+                        minWidth: column.config.width,
+                        maxWidth: column.config.width,
+                        overflow: "hidden",
+                    }
+                    : {}),
+            }, "data-sticky-position": column.config?.sticky },
+            React.createElement("div", { style: {
+                    paddingLeft: isTargetPaddingColumn ? `${depth === 0 ? 1 : depth}rem` : "",
+                }, className: "table-cell" },
+                config.isTreeView && cIndex === 0 && (React.createElement(React.Fragment, null,
+                    isSubrows &&
+                        Array.from({ length: level }).map((_, i) => (React.createElement("div", { key: `last-before-${itemTrackId}-${i}`, style: { left: `${(i > 0 ? i * 1.655 : i) + 0.65}rem` }, className: "last-before" }))),
+                    React.createElement("div", { className: "before" }))),
+                React.isValidElement(render) ? (render) : column.editable && methods.onEditable ? (React.createElement(Editable, { key: `editable-${itemTrackId}-${String(column.key)}`, c: column, item: item, trackByValue: itemTrackId, onEditable: methods.onEditable, config: config })) : (React.createElement("span", null, render)),
+                config.isTreeView && cIndex === 0 && (React.createElement("div", { className: "after" },
+                    React.createElement("div", { className: "circle" }))))));
+    };
+    const renderRow = (item, index, deph, parentKey = "") => {
+        const id = methods.trackBy?.(item) ?? index.toString();
+        const key = parentKey ? `${parentKey}.${id}` : id;
+        const _subitem = item[_subrowSelector];
+        const isHasSubitems = _subrowSelector in item;
+        const currentRowHeight = rowHeights[index] ?? 0;
+        return (React.createElement(Fragment, { key: `row-wrapper-${id}` },
+            React.createElement("tr", { ref: (element) => {
+                    _tBodyTR.current[index] = element;
+                }, ...(methods.rowBackgroundColor ? { style: { backgroundColor: methods.rowBackgroundColor(item) } } : {}), ...(methods.onDnD && data.length > 1 ? { className: "draggable", draggable: true } : {}) },
+                methods.selections && (React.createElement("td", { ref: (element) => {
+                        _tHeadTH.current[index] = element;
+                    }, className: "sticky sticky-left", "data-sticky-position": "left", style: {
+                        display: "table-cell",
+                        verticalAlign: "middle",
+                    } },
+                    React.createElement("div", { className: "flex justify-content-center align-items-center", style: { width: "100%", height: "100%" } },
+                        React.createElement(Checkbox, { ref: (element) => {
+                                if (element)
+                                    refs._checkboxItems.current[index] = element;
+                            }, variant: "filled", color: "green", checked: refs._selectionItems.current.some((sItem) => methods.trackBy?.(sItem) === methods.trackBy?.(item)), onChange: (event) => {
+                                const rKey = methods.trackBy?.(item);
+                                if (event.target.checked) {
+                                    if (!refs._selectionItems.current.some((_item) => methods.trackBy?.(_item) === rKey)) {
+                                        refs._selectionItems.current = [...refs._selectionItems.current, item];
+                                    }
+                                }
+                                else {
+                                    refs._selectionItems.current = refs._selectionItems.current.filter((_item) => methods.trackBy?.(_item) !== rKey);
+                                }
+                                methods.selections?.(refs._selectionItems.current);
+                                setTriggerForRender((prev) => !prev);
+                            }, disabled: methods.selectionDisabled?.(item) })))),
+                _subrowButton && (React.createElement("td", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left", style: {
+                        display: "table-cell",
+                        verticalAlign: "middle",
+                    } },
+                    React.createElement("div", { className: "subitem-open-button-wrapper", style: { display: "flex", justifyContent: "center", alignItems: "center" } },
+                        React.createElement("span", { className: `subitem-open-button ${(states.showSubitems.get[key] && "opened") ?? ""} ${!isHasSubitems || !_subitem ? "passive passive-arrow" : ""}`, onClick: () => {
+                                if (!isHasSubitems || !_subitem)
+                                    return;
+                                states.showSubitems.set((prev) => ({ ...prev, [key]: !prev[key] }));
+                            } })))),
+                columns.map((column, cIndex) => renderCell({
+                    item,
+                    column,
+                    index,
+                    cIndex,
+                    depth: deph * (config.isTreeView ? 1.75 : 0),
+                    level: 0,
+                    height: currentRowHeight,
+                }))),
+            states.showSubitems.get[key] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, depth: 1.5, parentKey: key, config: config, methods: methods, states: states, renderCell: renderCell }))));
+    };
+    // useEffects
+    useEffect(() => {
+        if (!data || data.length === 0)
+            return;
+        const heights = _tBodyTR.current.map((el) => (el ? el.getBoundingClientRect().height : 0));
+        setRowHeights(heights);
+    }, [data.length, data]);
+    useEffect(() => {
+        if (Array.isArray(refs._checkboxItems.current) && refs._checkboxItems.current.length > 0) {
+            const allChecked = refs._checkboxItems.current.every((item) => item?.checked === true);
+            states.setSelectAll.set(allChecked);
+        }
+    }, [triggerForRender]);
+    useEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const tableContainer = _tBodyTR.current[0]?.closest("div");
+        if (tableContainer && tableContainer.scrollLeft > 0) {
+            const currentScroll = tableContainer.scrollLeft;
+            requestAnimationFrame(() => {
+                tableContainer.scrollLeft = currentScroll + 1;
+                tableContainer.scrollLeft = currentScroll;
+            });
+        }
+    }, [states.showSubitems.get]);
+    return data.length > 0 ? (data.map((item, index) => {
+        const rowKey = methods.trackBy?.(item) ?? index.toString();
+        return React.createElement(React.Fragment, { key: `tbody-row-${rowKey}` }, renderRow(item, index, 1));
+    })) : (React.createElement("tr", null,
+        React.createElement("td", { colSpan: columns.length || 1 },
+            React.createElement("div", { className: "no-item" },
+                React.createElement(ARIcon, { icon: "Inbox-Fill", fill: "var(--gray-300)", size: 64, style: { position: "relative", zIndex: 1 } }),
+                React.createElement("span", null, t("Table.Body.NoData.Text"))))));
+}
+export default memo(TBody);

package/dist/components/data-display/table/header/ActionButtons.d.ts

@@ -0,0 +1,14 @@
+import { Dispatch, SetStateAction } from "react";
+import { Actions } from "../IProps";
+import React from "react";
+interface IProps {
+    states: {
+        createTrigger: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
+    };
+    actions: Actions;
+}
+declare const _default: React.MemoExoticComponent<({ states, actions }: IProps) => React.JSX.Element>;
+export default _default;

package/dist/components/data-display/table/header/ActionButtons.js

@@ -0,0 +1,65 @@
+import { memo, useState } from "react";
+import React from "react";
+import Grid from "../../grid-system";
+import Popover from "../../../feedback/popover";
+import Upload from "../../../form/upload";
+import Tooltip from "../../../feedback/tooltip";
+import Button from "../../../form/button";
+import { ARIcon } from "../../../icons";
+const { Row, Column } = Grid;
+const ActionButtons = ({ states, actions }) => {
+    // states
+    const [files, setFiles] = useState([]);
+    const [formData, setFormData] = useState(undefined);
+    const [base64, setBase64] = useState([]);
+    return (React.createElement("div", { className: "actions" },
+        actions.import && (React.createElement(Popover, { title: actions.import.title ?? "İçeri Aktar", message: actions.import.message ??
+                "Seçtiğiniz dosyaları uygulamaya yükleyebilirsiniz. Bu işlem, dosyalardaki verileri sistemimize aktarır ve verilerle işlem yapmanıza olanak tanır.", content: React.createElement(React.Fragment, null,
+                actions.import.prefixItem && (React.createElement(Row, null,
+                    React.createElement(Column, { size: 12 }, actions.import.prefixItem))),
+                React.createElement(Row, null,
+                    React.createElement(Column, { size: 12 },
+                        React.createElement(Upload, { text: actions.import.buttonText ?? "Belge Yükleyin", allowedTypes: actions.import.allowedTypes, files: files, onChange: (formData, files, base64) => {
+                                setFormData(formData);
+                                setFiles(files);
+                                setBase64(base64);
+                            }, size: "small", fullWidth: true }))),
+                actions.import.suffixItem), onConfirm: (confirm) => {
+                if (!confirm) {
+                    setFiles([]);
+                    return;
+                }
+                if (actions.import && actions.import.onClick)
+                    actions.import.onClick(formData, files, base64);
+            }, config: { buttons: { okay: "Yükle", cancel: "İptal" } }, windowBlur: true },
+            React.createElement(Tooltip, { text: actions.import.tooltip },
+                React.createElement(Button, { variant: "outlined", color: "purple", icon: { element: React.createElement(ARIcon, { icon: "Upload", fill: "currentcolor" }) } })))),
+        actions.export && (React.createElement(Popover, { title: actions.export.title ?? "Dışarı Aktar", message: actions.export.message ??
+                "Seçtiğiniz verileri bilgisayarınıza indirebilirsiniz. Bu işlem, sistemimizdeki verileri dosya olarak dışa aktarır ve verileri harici olarak kullanmanıza olanak tanır.", content: actions.export.content, onConfirm: (confirm) => {
+                if (!confirm) {
+                    setFiles([]);
+                    return;
+                }
+                if (actions.export && actions.export.onClick)
+                    actions.export.onClick();
+            }, config: { buttons: { okay: "Dışarı Aktar", cancel: "İptal" } }, windowBlur: true },
+            React.createElement(Tooltip, { text: actions.export.tooltip },
+                React.createElement(Button, { variant: "outlined", color: "blue", icon: { element: React.createElement(ARIcon, { icon: "Download", fill: "currentcolor" }) } })))),
+        actions.create && (React.createElement(Tooltip, { text: actions.create.tooltip },
+            React.createElement(Button, { variant: "outlined", color: "green", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 24 }) }, onClick: (event) => {
+                    if (!actions.create)
+                        return;
+                    actions.create.onClick(event);
+                    states.createTrigger.set((prev) => !prev);
+                } }))),
+        actions.delete && (React.createElement(Popover, { title: actions.delete.title ?? "Siliniyor", message: actions.delete.message ??
+                "Seçtiğiniz verileri uygulamadan silebilirsiniz. Bu işlem, verilerin sistemimizden tamamen kaldırılmasını sağlar ve bu verilerle artık işlem yapılamaz.", onConfirm: (confirm) => {
+                if (!confirm)
+                    return;
+                if (actions.delete && actions.delete.onClick)
+                    actions.delete.onClick();
+            } },
+            React.createElement(Tooltip, { text: actions.delete.tooltip },
+                React.createElement(Button, { variant: "outlined", color: "red", icon: { element: React.createElement(ARIcon, { icon: "Trash-Fill", fill: "currentcolor" }) } }))))));
+};
+export default memo(ActionButtons);

package/dist/components/data-display/table/header/Header.d.ts

@@ -0,0 +1,15 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { Actions } from "../IProps";
+interface IProps {
+    states: {
+        createTrigger: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
+    };
+    title?: string;
+    description?: string;
+    actions?: Actions;
+}
+declare const _default: React.MemoExoticComponent<({ states, title, description, actions }: IProps) => React.JSX.Element>;
+export default _default;

package/dist/components/data-display/table/header/Header.js

@@ -0,0 +1,10 @@
+import React, { memo } from "react";
+import ActionButtons from "./ActionButtons";
+const Header = ({ states, title, description, actions }) => {
+    return (React.createElement("div", { className: "header" },
+        React.createElement("div", { className: "title" },
+            React.createElement("h4", null, title),
+            description && React.createElement("h5", null, description)),
+        actions && React.createElement(ActionButtons, { states: states, actions: actions })));
+};
+export default memo(Header);

package/dist/components/data-display/table/index.d.ts

@@ -0,0 +1,7 @@
+import "../../../assets/css/components/data-display/table/styles.css";
+import IProps from "./IProps";
+import React from "react";
+declare const _default: <T extends object>(props: IProps<T> & {
+    ref?: React.Ref<HTMLTableElement>;
+}) => React.JSX.Element;
+export default _default;