ar-design 0.4.62 → 0.4.64

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

@@ -4,14 +4,13 @@ import { ARIcon } from "../../../icons";
 import Checkbox from "../../../form/checkbox";
 import Editable from "./Editable";
 import { useTranslation } from "../../../../libs/core/application/hooks";
-// SubitemList bağımsız bir bileşen.
-// Böylece her render döngüsünde hafızada sıfırdan yaratılıp alt DOM elementlerini çökertmiyor.
 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 },
-            _subrowButton && React.createElement("td", { style: { ...config.subrow.render.styles, width: 0, minWidth: 0 } }),
+            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) => {
@@ -21,13 +20,14 @@ const SubitemList = ({ items, columns, depth, level = 1, parentKey = "", config,
         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 },
-                isHasSubitems && _subrowButton ? (React.createElement("td", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left" },
-                    React.createElement("div", { className: "subitem-open-button-wrapper" },
-                        React.createElement("span", { className: `${(states.showSubitems.get[key] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
-                                if (!_subitem)
+                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] }));
-                            } })))) : !isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
+                            } })))),
                 columns.map((column, cIndex) => renderCell({
                     item: subitem,
                     column,
@@ -42,21 +42,15 @@ const SubitemList = ({ items, columns, depth, level = 1, parentKey = "", config,
     })));
 };
 function TBody({ data, columns, refs, methods, states, config }) {
-    // refs
     const _tBodyTR = useRef([]);
     const _tHeadTH = useRef([]);
-    // states
     const [triggerForRender, setTriggerForRender] = useState(false);
     const [rowHeights, setRowHeights] = useState([]);
-    // variables
     const _subrowSelector = config.subrow?.selector ?? "subitems";
     const _subrowButton = config.subrow?.button ?? true;
-    // hooks
     const { t } = useTranslation(String(config.locale ?? "tr"));
-    // methods
     const renderCell = ({ item, column, index, cIndex, depth, level, height = 0, isSubrows = false }) => {
         let render;
-        // const isHasSubitems = _subrowSelector in item;
         const itemTrackId = methods.trackBy?.(item) ?? index.toString();
         if (typeof column.key !== "object")
             render = column.render ? column.render(item) : item[column.key];
@@ -80,11 +74,16 @@ function TBody({ data, columns, refs, methods, states, config }) {
         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 }
+                    ? {
+                        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` : "",
+                    paddingLeft: isTargetPaddingColumn ? `${depth === 0 ? 1 : depth}rem` : "",
                 }, className: "table-cell" },
                 config.isTreeView && cIndex === 0 && (React.createElement(React.Fragment, null,
                     isSubrows &&
@@ -99,34 +98,44 @@ function TBody({ data, columns, refs, methods, states, config }) {
         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: "flex justify-content-center sticky sticky-left", "data-sticky-position": "left" },
-                    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];
+                    }, 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) }))),
-                isHasSubitems && _subrowButton ? (React.createElement("td", { className: "subrow-col sticky sticky-left", "data-sticky-position": "left" },
-                    React.createElement("div", { className: "subitem-open-button-wrapper" },
-                        React.createElement("span", { className: `subitem-open-button ${(states.showSubitems.get[key] && "opened") ?? ""} ${!_subitem && "passive"}`, onClick: () => {
+                                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] }));
-                            } })))) : isHasSubitems && _subrowButton ? (React.createElement("td", { style: { width: 0, minWidth: 0 } })) : null,
+                            } })))),
                 columns.map((column, cIndex) => renderCell({
                     item,
                     column,
@@ -134,7 +143,7 @@ function TBody({ data, columns, refs, methods, states, config }) {
                     cIndex,
                     depth: deph * (config.isTreeView ? 1.75 : 0),
                     level: 0,
-                    height: rowHeights[index] ?? 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 }))));
     };
@@ -144,13 +153,25 @@ function TBody({ data, columns, refs, methods, states, config }) {
             return;
         const heights = _tBodyTR.current.map((el) => (el ? el.getBoundingClientRect().height : 0));
         setRowHeights(heights);
-    }, [data.length]);
+    }, [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));