npm - @smallwebco/tinypivot-react - Versions diffs - 1.0.10 → 1.0.12 - Mend

@smallwebco/tinypivot-react 1.0.10 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.d.cts CHANGED Viewed

@@ -111,7 +111,7 @@ interface PivotSkeletonProps {
     onReorderRowFields: (fields: string[]) => void;
     onReorderColumnFields: (fields: string[]) => void;
 }
-declare function PivotSkeleton({ rowFields, columnFields, valueFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function PivotSkeleton({ rowFields, columnFields, valueFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
 interface ExcelGridOptions<T> {
     data: T[];

package/dist/index.d.ts CHANGED Viewed

@@ -111,7 +111,7 @@ interface PivotSkeletonProps {
     onReorderRowFields: (fields: string[]) => void;
     onReorderColumnFields: (fields: string[]) => void;
 }
-declare function PivotSkeleton({ rowFields, columnFields, valueFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
+declare function PivotSkeleton({ rowFields, columnFields, valueFields, isConfigured, draggingField, pivotResult, fontSize, activeFilters, totalRowCount, filteredRowCount, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField, onReorderRowFields, onReorderColumnFields, }: PivotSkeletonProps): react_jsx_runtime.JSX.Element;
 interface ExcelGridOptions<T> {
     data: T[];

package/dist/index.js CHANGED Viewed

@@ -105,6 +105,7 @@ function useExcelGrid(options) {
       const column = table.getColumn(columnId);
       if (column) {
         column.setFilterValue(values.length === 0 ? void 0 : values);
+        setColumnFilters(table.getState().columnFilters);
       }
     },
     [table]
@@ -112,6 +113,7 @@ function useExcelGrid(options) {
   const clearAllFilters = useCallback(() => {
     table.resetColumnFilters();
     setGlobalFilter("");
+    setColumnFilters([]);
   }, [table]);
   const getColumnFilterValues = useCallback(
     (columnId) => {
@@ -1245,10 +1247,14 @@ function PivotSkeleton({
   onAddColumnField,
   onRemoveColumnField,
   onAddValueField,
-  onRemoveValueField
+  onRemoveValueField,
+  onReorderRowFields,
+  onReorderColumnFields
 }) {
   const { showWatermark, canUsePivot, isDemo } = useLicense();
   const [dragOverArea, setDragOverArea] = useState7(null);
+  const [reorderDragSource, setReorderDragSource] = useState7(null);
+  const [reorderDropTarget, setReorderDropTarget] = useState7(null);
   const [sortDirection, setSortDirection] = useState7("asc");
   const [sortTarget, setSortTarget] = useState7("row");
   const toggleSort = useCallback7((target = "row") => {
@@ -1353,6 +1359,72 @@ function PivotSkeleton({
     },
     [rowFields, columnFields, valueFields, onAddRowField, onRemoveRowField, onAddColumnField, onRemoveColumnField, onAddValueField, onRemoveValueField]
   );
+  const handleChipDragStart = useCallback7(
+    (zone, index, event) => {
+      setReorderDragSource({ zone, index });
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("text/plain", `reorder:${zone}:${index}`);
+      requestAnimationFrame(() => {
+        setDragOverArea(null);
+      });
+    },
+    []
+  );
+  const handleChipDragEnd = useCallback7(() => {
+    setReorderDragSource(null);
+    setReorderDropTarget(null);
+  }, []);
+  const handleChipDragOver = useCallback7(
+    (zone, index, event) => {
+      event.preventDefault();
+      if (reorderDragSource && reorderDragSource.zone === zone) {
+        event.dataTransfer.dropEffect = "move";
+        setReorderDropTarget({ zone, index });
+      }
+    },
+    [reorderDragSource]
+  );
+  const handleChipDragLeave = useCallback7(() => {
+    setReorderDropTarget(null);
+  }, []);
+  const handleChipDrop = useCallback7(
+    (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 = useCallback7(
+    (zone, index) => {
+      return reorderDragSource?.zone === zone && reorderDragSource?.index === index;
+    },
+    [reorderDragSource]
+  );
+  const isChipDropTarget = useCallback7(
+    (zone, index) => {
+      return reorderDropTarget?.zone === zone && reorderDropTarget?.index === index;
+    },
+    [reorderDropTarget]
+  );
   const currentFontSize = fontSize;
   return /* @__PURE__ */ jsxs3(
     "div",
@@ -1451,17 +1523,34 @@ function PivotSkeleton({
                     /* @__PURE__ */ jsx3("span", { className: "vpg-zone-label", children: "Rows" })
                   ] }),
                   /* @__PURE__ */ jsxs3("div", { className: "vpg-zone-chips", children: [
-                    rowFields.map((field) => /* @__PURE__ */ jsxs3("div", { className: "vpg-mini-chip vpg-row-chip", children: [
-                      /* @__PURE__ */ jsx3("span", { className: "vpg-mini-name", children: field }),
-                      /* @__PURE__ */ jsx3(
-                        "button",
-                        {
-                          className: "vpg-mini-remove",
-                          onClick: () => onRemoveRowField(field),
-                          children: "\xD7"
-                        }
-                      )
-                    ] }, field)),
+                    rowFields.map((field, idx) => /* @__PURE__ */ jsxs3(
+                      "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__ */ jsx3("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ jsx3("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ jsx3(
+                            "button",
+                            {
+                              className: "vpg-mini-remove",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onRemoveRowField(field);
+                              },
+                              children: "\xD7"
+                            }
+                          )
+                        ]
+                      },
+                      field
+                    )),
                     rowFields.length === 0 && /* @__PURE__ */ jsx3("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
@@ -1480,17 +1569,34 @@ function PivotSkeleton({
                     /* @__PURE__ */ jsx3("span", { className: "vpg-zone-label", children: "Columns" })
                   ] }),
                   /* @__PURE__ */ jsxs3("div", { className: "vpg-zone-chips", children: [
-                    columnFields.map((field) => /* @__PURE__ */ jsxs3("div", { className: "vpg-mini-chip vpg-column-chip", children: [
-                      /* @__PURE__ */ jsx3("span", { className: "vpg-mini-name", children: field }),
-                      /* @__PURE__ */ jsx3(
-                        "button",
-                        {
-                          className: "vpg-mini-remove",
-                          onClick: () => onRemoveColumnField(field),
-                          children: "\xD7"
-                        }
-                      )
-                    ] }, field)),
+                    columnFields.map((field, idx) => /* @__PURE__ */ jsxs3(
+                      "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__ */ jsx3("span", { className: "vpg-drag-handle", children: "\u22EE\u22EE" }),
+                          /* @__PURE__ */ jsx3("span", { className: "vpg-mini-name", children: field }),
+                          /* @__PURE__ */ jsx3(
+                            "button",
+                            {
+                              className: "vpg-mini-remove",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                onRemoveColumnField(field);
+                              },
+                              children: "\xD7"
+                            }
+                          )
+                        ]
+                      },
+                      field
+                    )),
                     columnFields.length === 0 && /* @__PURE__ */ jsx3("span", { className: "vpg-zone-hint", children: "Drop here" })
                   ] })
                 ]
@@ -1721,7 +1827,7 @@ function DataGrid({
   const filteredDataForPivot = useMemo8(() => {
     const filteredRows = table.getFilteredRowModel().rows;
     return filteredRows.map((row) => row.original);
-  }, [table]);
+  }, [table, columnFilters]);
   const {
     rowFields: pivotRowFields,
     columnFields: pivotColumnFields,
@@ -1753,7 +1859,7 @@ function DataGrid({
       values: f.values || []
     }));
   }, [activeFilters]);
-  const rows = useMemo8(() => table.getRowModel().rows, [table]);
+  const rows = useMemo8(() => table.getFilteredRowModel().rows, [table, columnFilters]);
   const searchFilteredData = useMemo8(() => {
     if (!globalSearchTerm.trim() || !enableSearch) {
       return rows;