ar-design 0.3.79 → 0.3.80

package/dist/assets/css/components/data-display/table/styles.css

@@ -51,6 +51,7 @@
 }
 
 .ar-table > .content > table {
+  display: table;
   border-collapse: collapse;
   width: 100%;
 }
@@ -139,6 +140,23 @@
 
 .ar-table > .content > table > tbody > tr {
   border-bottom: solid 1px var(--gray-200);
+
+  &.draggable {
+    > td:first-child {
+      position: relative;
+      padding-left: 20px;
+
+      &:first-child::before {
+        content: "⋮⋮";
+        position: absolute;
+        left: 8px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--gray-400);
+        cursor: move;
+      }
+    }
+  }
 }
 .ar-table > .content > table > tbody > tr:last-child {
   border-bottom: none;

package/dist/components/data-display/dnd/IProps.d.ts

@@ -5,7 +5,8 @@ interface IProps<T> {
     columnKey?: string;
     onChange?: (data: T[]) => void;
     confing?: {
-        isMoveIcon: boolean;
+        isMoveIcon?: boolean;
+        isInTable?: boolean;
     };
 }
 export default IProps;

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

@@ -72,6 +72,7 @@ interface IProps<T> extends IChildren {
     previousSelections?: T[];
     searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
     onEditable?: (item: T, index: number) => void;
+    onDnD?: (item: T[]) => void;
     pagination?: {
         totalRecords: number;
         perPage: number;

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

@@ -27,12 +27,14 @@ const filterOption = [
     { value: FilterOperator.NotBlank, text: "Boş değil" },
 ];
 const { Row, Column } = Grid;
-const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, previousSelections, searchedParams, onEditable, pagination, config = { isSearchable: false }, }, ref) => {
+const Table = forwardRef(({ children, trackBy, title, description, data, columns, actions, rowBackgroundColor, selections, previousSelections, searchedParams, onEditable, onDnD, pagination, config = { isSearchable: false }, }, ref) => {
     // refs
     const _innerRef = useRef(null);
     const _tableWrapper = useRef(null);
     const _tableContent = useRef(null);
+    const _tBody = useRef(null);
     const _tBodyTR = useRef([]);
+    const _dragItem = useRef();
     const _checkboxItems = useRef([]);
     const _filterCheckboxItems = useRef([]);
     // refs -> Search
@@ -358,7 +360,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
         return (React.createElement(Fragment, { key: `row-${index}` },
             React.createElement("tr", { key: `row-${index}`, ref: (element) => {
                     _tBodyTR.current[index] = element;
-                }, style: { ..._rowColor } },
+                }, style: { ..._rowColor }, ...(onDnD && data.length > 1 ? { className: "draggable", draggable: true } : {}) },
                 selections && (React.createElement("td", { className: "flex justify-content-center sticky-left", "data-sticky-position": "left" },
                     React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), variant: "filled", color: "green", checked: selectionItems.some((selectionItem) => trackBy?.(selectionItem) === trackBy?.(item)), onChange: (event) => {
                             if (event.target.checked)
@@ -444,6 +446,13 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                 showSubitems[`${index}.${subindex}`] && _subitem && (React.createElement(SubitemList, { items: _subitem, columns: columns, index: subindex, depth: depth + 0.75, level: level + 1 }))));
         });
     };
+    const renderTBody = useMemo(() => {
+        return getData.length > 0 ? (getData.map((item, index) => React.createElement(React.Fragment, { key: index }, 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, "No Data")))));
+    }, [getData, showSubitems, columns]);
     // useEffects
     useEffect(() => {
         if (Utils.DeepEqual(previousSelections, selectionItems))
@@ -512,6 +521,82 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
             handleFilterPopupContent(filterCurrentColumn, filterCurrentDataType, filterCurrentIndex);
         }
     }, [checkboxSelectedParams, filterPopupOption, filterPopupOptionSearchText]);
+    useLayoutEffect(() => {
+        // @DND
+        if (!onDnD || !_tBody.current || data.length === 0)
+            return;
+        _tBody.current.childNodes.forEach((item) => {
+            const _item = item;
+            // Events
+            _item.ondragstart = (event) => {
+                const dragItem = event.currentTarget;
+                _dragItem.current = dragItem;
+                dragItem.classList.add("drag-item");
+                if (event.dataTransfer) {
+                    // #region Shadow
+                    const shadow = document.createElement("div");
+                    shadow.innerHTML = `
+            <div class="ar-dnd-shadow">
+              <i class="bi bi-gear-wide-connected"></i>
+              <span>Dragging...</span>
+            </div>
+          `;
+                    shadow.style.position = "absolute";
+                    shadow.style.top = "-9999px";
+                    document.body.appendChild(shadow);
+                    event.dataTransfer.setDragImage(shadow, 0, 0);
+                    // #endregion
+                }
+            };
+            _item.ondragover = (event) => {
+                event.preventDefault();
+                const overItem = event.currentTarget;
+                const rect = overItem.getBoundingClientRect();
+                // Otomatik scroll.
+                if (rect.top < 250)
+                    window.scrollBy(0, -20);
+                if (rect.bottom > window.innerHeight - 150)
+                    window.scrollBy(0, 20);
+                // Gerçek taşıma işlemi.
+                if (_dragItem.current !== overItem) {
+                    if (_tBody.current && _dragItem.current) {
+                        const dragItemIndex = [..._tBody.current.children].indexOf(_dragItem.current);
+                        const dropItemIndex = [..._tBody.current.children].indexOf(overItem);
+                        if (dragItemIndex === -1 || dropItemIndex === -1)
+                            return;
+                        _tBody.current.insertBefore(_dragItem.current, dragItemIndex < dropItemIndex ? overItem.nextSibling : overItem);
+                        const movedItem = data.splice(dragItemIndex, 1)[0];
+                        if (movedItem) {
+                            data.splice(dropItemIndex, 0, movedItem);
+                            onDnD?.(data);
+                        }
+                    }
+                }
+            };
+            _item.ondragend = (event) => {
+                const item = event.currentTarget;
+                item.classList.remove("drag-item");
+                item.classList.add("end-item");
+                setTimeout(() => {
+                    item.classList.remove("end-item");
+                    if (item.classList.length === 0)
+                        item.removeAttribute("class");
+                }, 1000);
+            };
+        });
+        _tBody.current.ondragover = (event) => event.preventDefault();
+        return () => {
+            if (!_tBody.current)
+                return;
+            _tBody.current.childNodes.forEach((item) => {
+                const _item = item;
+                _item.ondragstart = null;
+                _item.ondragover = null;
+                _item.ondragend = null;
+            });
+            _tBody.current.ondragover = null;
+        };
+    }, [data]);
     useLayoutEffect(() => {
         const heights = _tBodyTR.current.map((el) => (el ? el.getBoundingClientRect().height : 0));
         setTimeout(() => handleScroll(), 0);
@@ -639,11 +724,7 @@ const Table = forwardRef(({ children, trackBy, title, description, data, columns
                                             element: (React.createElement(ARIcon, { viewBox: "0 0 16 16", size: 24, icon: "Filter", fill: "var(--dark)", strokeWidth: 0 })),
                                         } }))))));
                         })))),
-                React.createElement("tbody", null, getData.length > 0 ? (getData.map((item, index) => React.createElement(React.Fragment, { key: index }, renderRow(item, index, 1)))) : (React.createElement("tr", null,
-                    React.createElement("td", { colSpan: columns.length },
-                        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, "No Data")))))))),
+                React.createElement("tbody", { ref: _tBody }, renderTBody))),
         React.createElement(FilterPopup, { tableContent: _tableContent, coordinate: filterButtonCoordinate, buttons: _filterButton }, filterPopupContent),
         pagination && pagination.totalRecords > pagination.perPage && (React.createElement("div", { className: "footer" },
             React.createElement("span", null,

package/package.json

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