ehscan-react-components 0.1.43 → 0.1.45

package/dist/Components.d.ts

@@ -3,4 +3,5 @@ export { Window } from './Window';
 export { TextArea } from './TextArea';
 export { TextAreaDropDown } from './TextAreaDropDown';
 export { AddBox } from './AddBox';
+export { DragAndDrop } from './dnd/DragAndDrop';
 export { useChangeAddBox } from './tools/useChangeAddBox';

package/dist/Components.js

@@ -4,4 +4,5 @@ export { Window } from './Window';
 export { TextArea } from './TextArea';
 export { TextAreaDropDown } from './TextAreaDropDown';
 export { AddBox } from './AddBox';
+export { DragAndDrop } from './dnd/DragAndDrop';
 export { useChangeAddBox } from './tools/useChangeAddBox';

package/dist/Window.js

@@ -8,7 +8,6 @@ export const Window = ({ trackMove, open, initialPosition = { x: 600, y: 100 },
     const resizeHandleRef = useRef(null);
     const bodyRef = useRef(null);
     const footerRef = useRef(null);
-    const [maxHeight] = useState("auto");
     const [bodyPadding] = useState(initialBodyPadding);
     const [windowWidth] = useState(initialWidth);
     useDraggable(open, targetRef, headerRef, bodyRef, resizeHandleRef, bodyPadding, trackMove);

package/dist/dnd/ChecklistItemSquare.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+type Props = {
+    checked: boolean;
+};
+declare const ChecklistItemSquare: React.FC<Props>;
+export default ChecklistItemSquare;

package/dist/dnd/ChecklistItemSquare.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
+import styles from '../style/dnd.module.css';
+const ChecklistItemSquare = ({ checked }) => {
+    const buttonRef = useRef(null);
+    const CheckBoxItemSquare = ({ selected }) => {
+        return (_jsx(_Fragment, { children: _jsxs("svg", { className: styles.checkboxSvg, width: "60", height: "60", version: "1.1", viewBox: "0 -960 2400 2400", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { className: styles.checkboxSvgPath, d: "m1200-692.58c-767.96 0-932.58 164.63-932.58 932.58 0 767.98 164.63 932.58 932.58 932.58 767.98 0 932.58-164.63 932.58-932.58 0-767.96-164.63-932.58-932.58-932.58z", fill: "white" }), selected && _jsx("path", { className: styles.checkboxSvgCheck, d: "m1566.4-147.66c-33.43-0.026-66.888 12.734-92.524 38.331l-421.88 421.25-125.8-126.04c-51.193-51.272-133.7-51.348-184.97-0.1555-51.272 51.193-51.348 133.7-0.15551 184.97l218.09 218.48c38.437 38.497 94.554 48.106 141.82 28.846 15.829-6.3918 30.738-15.985 43.618-28.846l514.09-513.39c51.272-51.193 51.348-133.7 0.1554-184.97-25.596-25.636-59.014-38.46-92.446-38.486z", fill: "#666" })] }) }));
+    };
+    return (_jsx(_Fragment, { children: _jsx("div", { ref: buttonRef, children: _jsx(CheckBoxItemSquare, { selected: checked }) }) }));
+};
+export default ChecklistItemSquare;

package/dist/dnd/DragAndDrop.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface Item {
+    id: number;
+    label: string;
+    selected?: boolean;
+}
+interface Props {
+    items: Item[];
+    setItems: React.Dispatch<React.SetStateAction<Item[]>>;
+    changeItemsAction: (updatedItems: Item[]) => void;
+}
+export declare const DragAndDrop: React.FC<Props>;
+export {};

package/dist/dnd/DragAndDrop.js

@@ -0,0 +1,119 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import styles from '../style/dnd.module.css';
+import DragItem from './DragItem';
+import { debounce } from "../tools/Debounce";
+export const DragAndDrop = ({ items, setItems, changeItemsAction }) => {
+    const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+    const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
+    const [popItem, setPopItem] = useState(null);
+    const containerRef = useRef(null);
+    const draggingIndexRef = useRef(null);
+    const hoverIndexRef = useRef(0);
+    useEffect(() => {
+        console.log(hoverIndexRef.current, draggingIndexRef.current);
+    }, [draggingIndexRef, hoverIndexRef]);
+    const onMouseDown = (e, index) => {
+        const el = document.getElementById(`item-${index}`);
+        if (!el)
+            return;
+        const rect = el.getBoundingClientRect();
+        draggingIndexRef.current = index;
+        setDragOffset({
+            x: e.clientX - rect.left,
+            y: e.clientY - rect.top,
+        });
+        setDragPosition({
+            x: rect.left,
+            y: rect.top,
+        });
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+    };
+    const onMouseMove = (e) => {
+        setDragPosition({
+            x: e.clientX - dragOffset.x,
+            y: e.clientY - dragOffset.y,
+        });
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const rects = Array.from(container.children)
+            .filter((_, idx) => idx !== draggingIndexRef.current) // skip placeholder
+            .map((child) => child.getBoundingClientRect());
+        const mouseY = e.clientY;
+        let newHoverIndex = items.length - 1; // default to last
+        for (let i = 0; i < rects.length; i++) {
+            const r = rects[i];
+            if (mouseY < r.top + r.height / 2) {
+                newHoverIndex = i;
+                break;
+            }
+        }
+        if (newHoverIndex !== hoverIndexRef.current)
+            hoverIndexRef.current = newHoverIndex;
+    };
+    const onMouseUp = () => {
+        if (draggingIndexRef.current !== null &&
+            hoverIndexRef.current !== null &&
+            draggingIndexRef.current !== hoverIndexRef.current) {
+            const copy = [...items];
+            const dragged = copy[draggingIndexRef.current];
+            copy[draggingIndexRef.current] = copy[hoverIndexRef.current];
+            copy[hoverIndexRef.current] = dragged;
+            setItems(copy);
+            changeItemsAction(copy);
+            debouncedSave.current(copy); // your existing debounce
+        }
+        setPopItem(hoverIndexRef.current);
+        draggingIndexRef.current = null;
+        hoverIndexRef.current = 0;
+        setDragPosition({ x: 0, y: 0 });
+        setTimeout(() => { setPopItem(null); }, 300);
+        window.removeEventListener("mousemove", onMouseMove);
+        window.removeEventListener("mouseup", onMouseUp);
+    };
+    const debouncedSave = useRef(debounce((copy) => {
+        const doSave = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                yield fixRows(copy);
+            }
+            catch (err) {
+                console.error('Autosave failed:', err);
+            }
+        });
+        doSave();
+    }, 800));
+    const fixRows = (copy) => __awaiter(void 0, void 0, void 0, function* () {
+        const sortedCopy = [...copy]
+            .map(item => (Object.assign(Object.assign({}, item), { selected: !!item.selected })))
+            .sort((a, b) => Number(b.selected) - Number(a.selected));
+        setItems(sortedCopy);
+    });
+    const clickDragItem = (targetId) => {
+        const copy = items.map(item => item.id === targetId ? Object.assign(Object.assign({}, item), { selected: !item.selected }) : item);
+        setItems(copy);
+        changeItemsAction(copy);
+        debouncedSave.current(copy); // your existing debounce
+    };
+    if (!items)
+        return null;
+    return (_jsxs("div", { ref: containerRef, className: styles.dndcontainer, children: [items.map((item, index) => {
+                const isPoping = index === popItem;
+                const isDragging = index === draggingIndexRef.current;
+                return (_jsx("div", { style: { width: "100%" }, children: _jsxs("div", { id: `item-${index}`, className: `${styles.listItem} ${isDragging ? styles.placeholder : ''} ${hoverIndexRef.current === index ? styles.hovered : ''} ${isPoping ? styles.pop : ''} ${item.selected ? styles.selected : ''}`, children: [_jsx("div", { className: styles.dragHandle, onMouseDown: (e) => onMouseDown(e, index), children: "\u283F" }), _jsx(DragItem, { item: item, click: clickDragItem })] }) }, item.id));
+            }), draggingIndexRef.current !== null && (_jsx("div", { className: styles.dragGhost, style: {
+                    top: dragPosition.y,
+                    left: dragPosition.x,
+                    position: "fixed",
+                }, children: items[draggingIndexRef.current].label }))] }));
+};

package/dist/dnd/DragItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type DragItemData = {
+    id: number | string;
+    label: string;
+    selected?: boolean;
+};
+type DragItemProps = {
+    item: DragItemData;
+    click: (id: number | string) => void;
+};
+declare const DragItem: React.FC<DragItemProps>;
+export default DragItem;

package/dist/dnd/DragItem.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from '../style/dnd.module.css';
+import ChecklistItemSquare from "./ChecklistItemSquare";
+const DragItem = ({ item, click }) => {
+    var _a;
+    const selected = (_a = item.selected) !== null && _a !== void 0 ? _a : false;
+    return (_jsxs("div", { className: styles.itemBody, children: [_jsx("div", { className: styles.dndSelect, onClick: () => click(item.id), children: _jsx(ChecklistItemSquare, { checked: selected }) }), _jsx("div", { children: item.label })] }));
+};
+export default DragItem;

package/dist/style/dnd.module.css

@@ -0,0 +1,109 @@
+.dndcontainer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+}
+
+.horizontal {
+  flex-direction: row;
+}
+
+.listItem {
+  display: flex;
+  align-items: center;
+  background-color: var(--ext-dnd-item-bck-clr, darkblue);
+  border-radius: var(--ext-dnd-item-border-radius, 4px);
+  padding: var(--ext-dnd-item-padding, 10px);
+  transition: transform 0.5s ease;
+  color: var(--ext-dnd-item-clr, white);
+  height: var(--ext-dnd-item-height, 40px);
+}
+
+svg.checkboxSvg {
+  width: var(--ext-dnd-svg-width, 30px);
+  height: var(--ext-dnd-svg-height, 30px);
+}
+
+.checkboxSvgPath {
+  fill: var(--ext-dnd-svg-fill, white);
+}
+
+.checkboxSvgCheck {
+  fill: var(--ext-dnd-svg-fill-check, lightslategrey);
+}
+
+.listItem:hover {
+  filter: brightness(.9);
+  cursor: pointer;
+}
+
+.selected {
+  background-color: var(--ext-dnd-item-selected-bck-clr,darkviolet);
+}
+
+.hovered {
+  background-color: var(--ext-dnd-item-selected-bck-hvr-clr, darkgreen);
+  transform: scale(1.03);
+}
+
+.dragHandle {
+  cursor: grab;
+  padding-right: 5px;
+  user-select: none;
+  color: var(--ext-dnd-item-handle-clr, #6c8cff);
+}
+
+.dragHandle:active {
+  cursor: grabbing;
+}
+
+.itemBody {
+  flex: 1;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+}
+
+.dndSelect {
+  cursor: pointer;
+}
+
+.placeholder {
+  border: 1px dashed #6c8cff;
+}
+
+.dragGhost {
+  padding: var(--ext-dnd-item-ghost-padding, 10px);
+  background: var(--ext-dnd-item-ghost-bck-clr, white);
+  border: var(--ext-dnd-item-ghost-border, 1px solid #6c8cff);
+  color: var(--ext-dnd-item-ghost-clr, lightslategrey);
+  border-radius: var(--ext-dnd-item-ghost-border-radius, 6px);
+  opacity: 0.9;
+  pointer-events: none;
+  z-index: 9999;
+}
+
+@keyframes popAnimation {
+  0% {
+    transform: scale(1);
+    border-color: #6c8cff;
+    box-shadow: 0 0 0 rgba(108, 140, 255, 0);
+  }
+
+  50% {
+    transform: scale(1.05);
+    border-color: #5a7fff;
+    box-shadow: 0 0 5px rgba(90, 127, 255, 0.3);
+  }
+
+  100% {
+    transform: scale(1);
+    border-color: #6c8cff;
+    box-shadow: 0 0 0 rgba(108, 140, 255, 0);
+  }
+}
+
+.pop {
+  animation: popAnimation 0.2s ease forwards;
+}

package/dist/tools/Debounce.d.ts

@@ -0,0 +1 @@
+export declare function debounce<T extends (...args: any[]) => void>(func: T, delay: number): T;

package/dist/tools/Debounce.js

@@ -0,0 +1,8 @@
+// utils/debounce.ts (optional to keep code organized)
+export function debounce(func, delay) {
+    let timeoutId;
+    return function (...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func.apply(this, args), delay);
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.43",
+  "version": "0.1.45",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",