@smallwebco/tinypivot-react 1.0.9 → 1.0.11

package/dist/index.cjs

@@ -146,6 +146,7 @@ function useExcelGrid(options) {
       const column = table.getColumn(columnId);
       if (column) {
         column.setFilterValue(values.length === 0 ? void 0 : values);
+        setColumnFilters(table.getState().columnFilters);
       }
     },
     [table]
@@ -153,6 +154,7 @@ function useExcelGrid(options) {
   const clearAllFilters = (0, import_react.useCallback)(() => {
     table.resetColumnFilters();
     setGlobalFilter("");
+    setColumnFilters([]);
   }, [table]);
   const getColumnFilterValues = (0, import_react.useCallback)(
     (columnId) => {
@@ -1262,10 +1264,14 @@ function PivotSkeleton({
   onAddColumnField,
   onRemoveColumnField,
   onAddValueField,
-  onRemoveValueField
+  onRemoveValueField,
+  onReorderRowFields,
+  onReorderColumnFields
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
   const [dragOverArea, setDragOverArea] = (0, import_react7.useState)(null);
+  const [reorderDragSource, setReorderDragSource] = (0, import_react7.useState)(null);
+  const [reorderDropTarget, setReorderDropTarget] = (0, import_react7.useState)(null);
   const [sortDirection, setSortDirection] = (0, import_react7.useState)("asc");
   const [sortTarget, setSortTarget] = (0, import_react7.useState)("row");
   const toggleSort = (0, import_react7.useCallback)((target = "row") => {
@@ -1370,6 +1376,72 @@ function PivotSkeleton({
     },
     [rowFields, columnFields, valueFields, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField]
   );
+  const handleChipDragStart = (0, import_react7.useCallback)(
+    (zone, index, event) => {
+      setReorderDragSource({ zone, index });
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", `reorder:${zone}:${index}`);
+      requestAnimationFrame(() => {
+        setDragOverArea(null);
+      });
+    },
+    []
+  );
+  const handleChipDragEnd = (0, import_react7.useCallback)(() => {
+    setReorderDragSource(null);
+    setReorderDropTarget(null);
+  }, []);
+  const handleChipDragOver = (0, import_react7.useCallback)(
+    (zone, index, event) => {
+      event.preventDefault();
+      if (reorderDragSource && reorderDragSource.zone === zone) {
+        event.dataTransfer.dropEffect = "move";
+        setReorderDropTarget({ zone, index });
+      }
+    },
+    [reorderDragSource]
+  );
+  const handleChipDragLeave = (0, import_react7.useCallback)(() => {
+    setReorderDropTarget(null);
+  }, []);
+  const handleChipDrop = (0, import_react7.useCallback)(
+    (zone, targetIndex, event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!reorderDragSource || reorderDragSource.zone !== zone) {
+        return;
+      }
+      const sourceIndex = reorderDragSource.index;
+      if (sourceIndex === targetIndex) {
+        setReorderDragSource(null);
+        setReorderDropTarget(null);
+        return;
+      }
+      const fields = zone === "row" ? [...rowFields] : [...columnFields];
+      const [movedField] = fields.splice(sourceIndex, 1);
+      fields.splice(targetIndex, 0, movedField);
+      if (zone === "row") {
+        onReorderRowFields(fields);
+      } else {
+        onReorderColumnFields(fields);
+      }
+      setReorderDragSource(null);
+      setReorderDropTarget(null);
+    },
+    [reorderDragSource, rowFields, columnFields, onReorderRowFields, onReorderColumnFields]
+  );
+  const isChipDragSource = (0, import_react7.useCallback)(
+    (zone, index) => {
+      return reorderDragSource?.zone === zone && reorderDragSource?.index === index;
+    },
+    [reorderDragSource]
+  );
+  const isChipDropTarget = (0, import_react7.useCallback)(
+    (zone, index) => {
+      return reorderDropTarget?.zone === zone && reorderDropTarget?.index === index;
+    },
+    [reorderDropTarget]
+  );
   const currentFontSize = fontSize;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
@@ -1468,17 +1540,34 @@ function PivotSkeleton({
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-label", children: "Rows" })
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-zone-chips", children: [
-                    rowFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-mini-chip vpg-row-chip", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-mini-name", children: field }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "button",
-                        {
-                          className: "vpg-mini-remove",
-                          onClick: () => onRemoveRowField(field),
-                          children: "\xD7"
-                        }
-                      )
-                    ] }, field)),
+                    rowFields.map((field, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      "div",
+                      {
+                        className: `vpg-mini-chip vpg-row-chip ${isChipDragSource("row", idx) ? "vpg-chip-dragging" : ""} ${isChipDropTarget("row", idx) ? "vpg-chip-drop-target" : ""}`,
+                        draggable: true,
+                        onDragStart: (e) => handleChipDragStart("row", idx, e),
+                        onDragEnd: handleChipDragEnd,
+                        onDragOver: (e) => handleChipDragOver("row", idx, e),
+                        onDragLeave: handleChipDragLeave,
+                        onDrop: (e) => handleChipDrop("row", idx, e),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "button",
+                            {
+                              className: "vpg-mini-remove",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onRemoveRowField(field);
+                              },
+                              children: "\xD7"
+                            }
+                          )
+                        ]
+                      },
+                      field
+                    )),
                     rowFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
@@ -1497,17 +1586,34 @@ function PivotSkeleton({
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-label", children: "Columns" })
                   ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-zone-chips", children: [
-                    columnFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "vpg-mini-chip vpg-column-chip", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-mini-name", children: field }),
-                      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                        "button",
-                        {
-                          className: "vpg-mini-remove",
-                          onClick: () => onRemoveColumnField(field),
-                          children: "\xD7"
-                        }
-                      )
-                    ] }, field)),
+                    columnFields.map((field, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                      "div",
+                      {
+                        className: `vpg-mini-chip vpg-column-chip ${isChipDragSource("column", idx) ? "vpg-chip-dragging" : ""} ${isChipDropTarget("column", idx) ? "vpg-chip-drop-target" : ""}`,
+                        draggable: true,
+                        onDragStart: (e) => handleChipDragStart("column", idx, e),
+                        onDragEnd: handleChipDragEnd,
+                        onDragOver: (e) => handleChipDragOver("column", idx, e),
+                        onDragLeave: handleChipDragLeave,
+                        onDrop: (e) => handleChipDrop("column", idx, e),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                            "button",
+                            {
+                              className: "vpg-mini-remove",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onRemoveColumnField(field);
+                              },
+                              children: "\xD7"
+                            }
+                          )
+                        ]
+                      },
+                      field
+                    )),
                     columnFields.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]