react-pivottable-plus 1.0.18 → 1.1.1

package/dist/PivotTableUI.js

@@ -273,15 +273,112 @@ var DnDCell = function DnDCell(_ref4) {
     });
   }))));
 };
+
+// ─── Extracted Helper: Renderer Dropdown ────────────────────────────────────────
+var RendererDropdown = function RendererDropdown(_ref5) {
+  var rendererName = _ref5.rendererName,
+    renderers = _ref5.renderers,
+    isOpen = _ref5.isOpen,
+    uiState = _ref5.uiState,
+    setUiState = _ref5.setUiState;
+  return /*#__PURE__*/_react["default"].createElement("td", {
+    className: "pvtRenderers"
+  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
+    current: rendererName,
+    values: Object.keys(renderers),
+    open: isOpen('renderer'),
+    zIndex: isOpen('renderer') ? uiState.maxZIndex + 1 : 1,
+    toggle: function toggle() {
+      return setUiState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: isOpen('renderer') ? false : 'renderer'
+        });
+      });
+    },
+    setValue: function setValue(v) {
+      return rendererName._updateProp('rendererName', v);
+    }
+  }));
+};
+
+// ─── Extracted Helper: Aggregator + Sort + Vals Controls ────────────────────────
+var AggregatorControls = function AggregatorControls(_ref6) {
+  var aggregatorName = _ref6.aggregatorName,
+    aggregators = _ref6.aggregators,
+    vals = _ref6.vals,
+    pivotState = _ref6.pivotState,
+    hiddenAttributes = _ref6.hiddenAttributes,
+    hiddenFromAggregators = _ref6.hiddenFromAggregators,
+    isOpen = _ref6.isOpen,
+    uiState = _ref6.uiState,
+    setUiState = _ref6.setUiState,
+    actions = _ref6.actions,
+    rowOrder = _ref6.rowOrder,
+    colOrder = _ref6.colOrder,
+    sortIcons = _ref6.sortIcons,
+    numValsAllowed = _ref6.numValsAllowed;
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Dropdown, {
+    current: aggregatorName,
+    values: Object.keys(aggregators),
+    open: isOpen('aggregators'),
+    zIndex: isOpen('aggregators') ? uiState.maxZIndex + 1 : 1,
+    toggle: function toggle() {
+      return setUiState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: isOpen('aggregators') ? false : 'aggregators'
+        });
+      });
+    },
+    setValue: function setValue(v) {
+      return actions.updateProp('aggregatorName', v);
+    }
+  }), /*#__PURE__*/_react["default"].createElement("a", {
+    role: "button",
+    className: "pvtRowOrder",
+    onClick: function onClick() {
+      return actions.updateProp('rowOrder', sortIcons[rowOrder].next);
+    }
+  }, sortIcons[rowOrder].rowSymbol), /*#__PURE__*/_react["default"].createElement("a", {
+    role: "button",
+    className: "pvtColOrder",
+    onClick: function onClick() {
+      return actions.updateProp('colOrder', sortIcons[colOrder].next);
+    }
+  }, sortIcons[colOrder].colSymbol), numValsAllowed > 0 && /*#__PURE__*/_react["default"].createElement("br", null), new Array(numValsAllowed).fill(null).map(function (_, i) {
+    return [/*#__PURE__*/_react["default"].createElement(Dropdown, {
+      key: i,
+      current: vals[i],
+      values: Object.keys(pivotState.attrValues).filter(function (e) {
+        return !hiddenAttributes.includes(e) && !hiddenFromAggregators.includes(e);
+      }),
+      open: isOpen("val".concat(i)),
+      zIndex: isOpen("val".concat(i)) ? uiState.maxZIndex + 1 : 1,
+      toggle: function toggle() {
+        return setUiState(function (s) {
+          return _objectSpread(_objectSpread({}, s), {}, {
+            openDropdown: isOpen("val".concat(i)) ? false : "val".concat(i)
+          });
+        });
+      },
+      setValue: function setValue(value) {
+        var newVals = _toConsumableArray(vals);
+        newVals[i] = value;
+        actions.updateProp('vals', newVals);
+      }
+    }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
+      key: "br".concat(i)
+    }) : null];
+  }));
+};
 var PivotTableUI = function PivotTableUI(props) {
   var _aggregators$aggregat, _aggregators$aggregat2;
-  // ─── Headless Core: toda la lógica de datos y props fluye a través del Core ───
+  // ─── Headless Core ───
   var _usePivot = (0, _usePivot2.usePivot)(props),
     pivotProps = _usePivot.props,
     pivotState = _usePivot.state,
     actions = _usePivot.actions;
 
-  // ─── Estado local solo para UI (no pertenece al Core) ─────────────────────────
+  // ─── UI State local ───
   var _useState5 = (0, _react.useState)({
       zIndices: {},
       maxZIndex: 1000,
@@ -294,8 +391,6 @@ var PivotTableUI = function PivotTableUI(props) {
     _useState8 = _slicedToArray(_useState7, 2),
     activeId = _useState8[0],
     setActiveId = _useState8[1];
-
-  // ─── Helpers de UI local ──────────────────────────────────────────────────────
   var moveFilterBoxToTop = (0, _react.useCallback)(function (attribute) {
     setUiState(function (s) {
       return _objectSpread(_objectSpread({}, s), {}, {
@@ -305,7 +400,7 @@ var PivotTableUI = function PivotTableUI(props) {
     });
   }, []);
 
-  // ─── Derivados desde el Core ──────────────────────────────────────────────────
+  // ─── Derivados ───
   var _pivotProps$rows = pivotProps.rows,
     rows = _pivotProps$rows === void 0 ? [] : _pivotProps$rows,
     _pivotProps$cols = pivotProps.cols,
@@ -365,7 +460,7 @@ var PivotTableUI = function PivotTableUI(props) {
     return e && e.trim() !== '' && !hiddenAttributes.includes(e) && !hiddenFromDragDrop.includes(e);
   });
 
-  // ─── DnD Zones ────────────────────────────────────────────────────────────────
+  // ─── DnD ───
   var getZoneOfItem = function getZoneOfItem(id) {
     if (rowAttrs.includes(id)) return 'rows';
     if (colAttrs.includes(id)) return 'cols';
@@ -395,14 +490,14 @@ var PivotTableUI = function PivotTableUI(props) {
       distance: 5
     }
   }));
-  var handleDragStart = function handleDragStart(_ref5) {
-    var active = _ref5.active;
+  var handleDragStart = function handleDragStart(_ref7) {
+    var active = _ref7.active;
     return setActiveId(active.id);
   };
-  var handleDragOver = function handleDragOver(_ref6) {
+  var handleDragOver = function handleDragOver(_ref8) {
     var _over$data$current$so, _over$data;
-    var active = _ref6.active,
-      over = _ref6.over;
+    var active = _ref8.active,
+      over = _ref8.over;
     if (!over) return;
     var activeZone = getZoneOfItem(active.id);
     var overZone = (_over$data$current$so = (_over$data = over.data) === null || _over$data === void 0 || (_over$data = _over$data.current) === null || _over$data === void 0 || (_over$data = _over$data.sortable) === null || _over$data === void 0 ? void 0 : _over$data.containerId) !== null && _over$data$current$so !== void 0 ? _over$data$current$so : getZoneOfItem(over.id);
@@ -419,10 +514,10 @@ var PivotTableUI = function PivotTableUI(props) {
     getUpdaterByZone(activeZone)(activeList);
     getUpdaterByZone(overZone)(overList);
   };
-  var handleDragEnd = function handleDragEnd(_ref7) {
+  var handleDragEnd = function handleDragEnd(_ref9) {
     var _over$data$current$so2, _over$data2;
-    var active = _ref7.active,
-      over = _ref7.over;
+    var active = _ref9.active,
+      over = _ref9.over;
     setActiveId(null);
     if (!over) return;
     var activeZone = getZoneOfItem(active.id);
@@ -436,7 +531,7 @@ var PivotTableUI = function PivotTableUI(props) {
     }
   };
 
-  // ─── Dropdowns y controles ────────────────────────────────────────────────────
+  // ─── Controls ───
   var isOpen = function isOpen(dropdown) {
     return uiState.openDropdown === dropdown;
   };
@@ -459,8 +554,6 @@ var PivotTableUI = function PivotTableUI(props) {
       next: 'key_a_to_z'
     }
   };
-
-  // Estado combinado para DnDCell (necesita zIndices del UI local + attrValues del Core)
   var combinedState = {
     attrValues: pivotState.attrValues,
     zIndices: uiState.zIndices,
@@ -563,6 +656,43 @@ var PivotTableUI = function PivotTableUI(props) {
       }, n, " / p\xE1g");
     }))));
   };
+
+  // ─── Shared renderer/aggregator controls ───
+  var rendererDropdown = /*#__PURE__*/_react["default"].createElement(Dropdown, {
+    current: actualRendererName,
+    values: Object.keys(renderers),
+    open: isOpen('renderer'),
+    zIndex: isOpen('renderer') ? uiState.maxZIndex + 1 : 1,
+    toggle: function toggle() {
+      return setUiState(function (s) {
+        return _objectSpread(_objectSpread({}, s), {}, {
+          openDropdown: isOpen('renderer') ? false : 'renderer'
+        });
+      });
+    },
+    setValue: function setValue(v) {
+      return actions.updateProp('rendererName', v);
+    }
+  });
+  var aggControls = /*#__PURE__*/_react["default"].createElement(AggregatorControls, {
+    aggregatorName: aggregatorName,
+    aggregators: aggregators,
+    vals: vals,
+    pivotState: pivotState,
+    hiddenAttributes: hiddenAttributes,
+    hiddenFromAggregators: hiddenFromAggregators,
+    isOpen: isOpen,
+    uiState: uiState,
+    setUiState: setUiState,
+    actions: actions,
+    rowOrder: rowOrder,
+    colOrder: colOrder,
+    sortIcons: sortIcons,
+    numValsAllowed: numValsAllowed
+  });
+  var outputCell = /*#__PURE__*/_react["default"].createElement("td", {
+    className: "pvtOutput"
+  }, /*#__PURE__*/_react["default"].createElement(_PivotTable["default"], componentProps), pagination && renderFooter());
   return /*#__PURE__*/_react["default"].createElement(_core.DndContext, {
     sensors: sensors,
     collisionDetection: _core.closestCorners,
@@ -581,80 +711,14 @@ var PivotTableUI = function PivotTableUI(props) {
     }
   }, horizUnused ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtRenderers"
-  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
-    current: actualRendererName,
-    values: Object.keys(renderers),
-    open: isOpen('renderer'),
-    zIndex: isOpen('renderer') ? uiState.maxZIndex + 1 : 1,
-    toggle: function toggle() {
-      return setUiState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          openDropdown: isOpen('renderer') ? false : 'renderer'
-        });
-      });
-    },
-    setValue: function setValue(v) {
-      return actions.updateProp('rendererName', v);
-    }
-  })), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+  }, rendererDropdown), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
     id: "unused",
     items: unusedAttrs,
     classes: "pvtAxisContainer pvtUnused pvtHorizList",
     isHorizontal: true
   }, sharedCellProps))), /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtVals"
-  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
-    current: aggregatorName,
-    values: Object.keys(aggregators),
-    open: isOpen('aggregators'),
-    zIndex: isOpen('aggregators') ? uiState.maxZIndex + 1 : 1,
-    toggle: function toggle() {
-      return setUiState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          openDropdown: isOpen('aggregators') ? false : 'aggregators'
-        });
-      });
-    },
-    setValue: function setValue(v) {
-      return actions.updateProp('aggregatorName', v);
-    }
-  }), /*#__PURE__*/_react["default"].createElement("a", {
-    role: "button",
-    className: "pvtRowOrder",
-    onClick: function onClick() {
-      return actions.updateProp('rowOrder', sortIcons[rowOrder].next);
-    }
-  }, sortIcons[rowOrder].rowSymbol), /*#__PURE__*/_react["default"].createElement("a", {
-    role: "button",
-    className: "pvtColOrder",
-    onClick: function onClick() {
-      return actions.updateProp('colOrder', sortIcons[colOrder].next);
-    }
-  }, sortIcons[colOrder].colSymbol), numValsAllowed > 0 && /*#__PURE__*/_react["default"].createElement("br", null), new Array(numValsAllowed).fill(null).map(function (_, i) {
-    return [/*#__PURE__*/_react["default"].createElement(Dropdown, {
-      key: i,
-      current: vals[i],
-      values: Object.keys(pivotState.attrValues).filter(function (e) {
-        return !hiddenAttributes.includes(e) && !hiddenFromAggregators.includes(e);
-      }),
-      open: isOpen("val".concat(i)),
-      zIndex: isOpen("val".concat(i)) ? uiState.maxZIndex + 1 : 1,
-      toggle: function toggle() {
-        return setUiState(function (s) {
-          return _objectSpread(_objectSpread({}, s), {}, {
-            openDropdown: isOpen("val".concat(i)) ? false : "val".concat(i)
-          });
-        });
-      },
-      setValue: function setValue(value) {
-        var newVals = _toConsumableArray(vals);
-        newVals[i] = value;
-        actions.updateProp('vals', newVals);
-      }
-    }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
-      key: "br".concat(i)
-    }) : null];
-  })), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+  }, aggControls), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
     id: "cols",
     items: colAttrs,
     classes: "pvtAxisContainer pvtHorizList pvtCols",
@@ -664,79 +728,11 @@ var PivotTableUI = function PivotTableUI(props) {
     items: rowAttrs,
     classes: "pvtAxisContainer pvtVertList pvtRows",
     isHorizontal: false
-  }, sharedCellProps)), /*#__PURE__*/_react["default"].createElement("td", {
-    className: "pvtOutput"
-  }, /*#__PURE__*/_react["default"].createElement(_PivotTable["default"], componentProps), pagination && renderFooter()))) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
+  }, sharedCellProps)), outputCell)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("tr", null, /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtRenderers"
-  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
-    current: actualRendererName,
-    values: Object.keys(renderers),
-    open: isOpen('renderer'),
-    zIndex: isOpen('renderer') ? uiState.maxZIndex + 1 : 1,
-    toggle: function toggle() {
-      return setUiState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          openDropdown: isOpen('renderer') ? false : 'renderer'
-        });
-      });
-    },
-    setValue: function setValue(v) {
-      return actions.updateProp('rendererName', v);
-    }
-  })), /*#__PURE__*/_react["default"].createElement("td", {
+  }, rendererDropdown), /*#__PURE__*/_react["default"].createElement("td", {
     className: "pvtVals"
-  }, /*#__PURE__*/_react["default"].createElement(Dropdown, {
-    current: aggregatorName,
-    values: Object.keys(aggregators),
-    open: isOpen('aggregators'),
-    zIndex: isOpen('aggregators') ? uiState.maxZIndex + 1 : 1,
-    toggle: function toggle() {
-      return setUiState(function (s) {
-        return _objectSpread(_objectSpread({}, s), {}, {
-          openDropdown: isOpen('aggregators') ? false : 'aggregators'
-        });
-      });
-    },
-    setValue: function setValue(v) {
-      return actions.updateProp('aggregatorName', v);
-    }
-  }), /*#__PURE__*/_react["default"].createElement("a", {
-    role: "button",
-    className: "pvtRowOrder",
-    onClick: function onClick() {
-      return actions.updateProp('rowOrder', sortIcons[rowOrder].next);
-    }
-  }, sortIcons[rowOrder].rowSymbol), /*#__PURE__*/_react["default"].createElement("a", {
-    role: "button",
-    className: "pvtColOrder",
-    onClick: function onClick() {
-      return actions.updateProp('colOrder', sortIcons[colOrder].next);
-    }
-  }, sortIcons[colOrder].colSymbol), numValsAllowed > 0 && /*#__PURE__*/_react["default"].createElement("br", null), new Array(numValsAllowed).fill(null).map(function (_, i) {
-    return [/*#__PURE__*/_react["default"].createElement(Dropdown, {
-      key: i,
-      current: vals[i],
-      values: Object.keys(pivotState.attrValues).filter(function (e) {
-        return !hiddenAttributes.includes(e) && !hiddenFromAggregators.includes(e);
-      }),
-      open: isOpen("val".concat(i)),
-      zIndex: isOpen("val".concat(i)) ? uiState.maxZIndex + 1 : 1,
-      toggle: function toggle() {
-        return setUiState(function (s) {
-          return _objectSpread(_objectSpread({}, s), {}, {
-            openDropdown: isOpen("val".concat(i)) ? false : "val".concat(i)
-          });
-        });
-      },
-      setValue: function setValue(value) {
-        var newVals = _toConsumableArray(vals);
-        newVals[i] = value;
-        actions.updateProp('vals', newVals);
-      }
-    }), i + 1 !== numValsAllowed ? /*#__PURE__*/_react["default"].createElement("br", {
-      key: "br".concat(i)
-    }) : null];
-  })), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
+  }, aggControls), /*#__PURE__*/_react["default"].createElement(DnDCell, _extends({
     id: "cols",
     items: colAttrs,
     classes: "pvtAxisContainer pvtHorizList pvtCols",
@@ -751,9 +747,7 @@ var PivotTableUI = function PivotTableUI(props) {
     items: rowAttrs,
     classes: "pvtAxisContainer pvtVertList pvtRows",
     isHorizontal: false
-  }, sharedCellProps)), /*#__PURE__*/_react["default"].createElement("td", {
-    className: "pvtOutput"
-  }, /*#__PURE__*/_react["default"].createElement(_PivotTable["default"], componentProps), pagination && renderFooter()))))), /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, null, activeId ? /*#__PURE__*/_react["default"].createElement("ul", {
+  }, sharedCellProps)), outputCell)))), /*#__PURE__*/_react["default"].createElement(_core.DragOverlay, null, activeId ? /*#__PURE__*/_react["default"].createElement("ul", {
     style: {
       listStyle: 'none',
       padding: 0,