sheet-happens 0.0.41 → 0.0.42

package/dist/autosize.d.ts

@@ -1,2 +1,2 @@
-import { CellPropertyFunction, CellContentType, Style } from './types';
-export declare const useAutoSizeColumn: (rows: number[], displayData: CellPropertyFunction<CellContentType>, cellStyle: CellPropertyFunction<Style>) => (x: number) => number;
+import { RowOrColumnPropertyFunction, CellPropertyFunction, CellContentType, Style } from './types';
+export declare const useAutoSizeColumn: (rows: number[], displayData: CellPropertyFunction<CellContentType>, cellStyle: CellPropertyFunction<Style>, columnHeaders: RowOrColumnPropertyFunction<CellContentType>, columnHeaderStyle: RowOrColumnPropertyFunction<Style>, canvasWidth: number) => (x: number) => number;

package/dist/index.js

@@ -1690,46 +1690,73 @@ var applyAlignment = function applyAlignment(start, cellSize, style, imageWidth,
   return start;
 };
 
-var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle) {
+var useAutoSizeColumn = function useAutoSizeColumn(rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth) {
   var context = React.useMemo(function () {
     return document.createElement('canvas').getContext('2d');
   }, []);
   var getAutoSizeWidth = React.useCallback(function (x) {
     if (!context) return 0;
-    var maxWidth = 0;
 
-    for (var _iterator = _createForOfIteratorHelperLoose(rows), _step; !(_step = _iterator()).done;) {
-      var y = _step.value;
-      var cellContent = displayData(x, y);
+    var getWidth = function getWidth(cellContent, style) {
+      var finalStyle = resolveCellStyle(style, DEFAULT_CELL_STYLE);
+      context.font = finalStyle.weight + ' ' + finalStyle.fontSize + 'px ' + finalStyle.fontFamily;
+      var inlineMargin = finalStyle.marginLeft + finalStyle.marginRight;
 
-      if (cellContent != null) {
-        var style = cellStyle(x, y);
-        var finalStyle = resolveCellStyle(style, DEFAULT_CELL_STYLE);
-        context.fillStyle = finalStyle.color;
-        context.font = finalStyle.weight + ' ' + finalStyle.fontSize + 'px ' + finalStyle.fontFamily;
+      if (typeof cellContent === 'string' || typeof cellContent === 'number') {
+        var _context$measureText = context.measureText(cellContent.toString()),
+            width = _context$measureText.width;
 
-        if (typeof cellContent === 'string' || typeof cellContent === 'number') {
-          var _context$measureText = context.measureText(cellContent.toString()),
-              width = _context$measureText.width;
+        return width + inlineMargin;
+      } else if (typeof cellContent === 'object') {
+        var _maxWidth = 0;
+        var extraWidth = 0;
 
-          maxWidth = Math.max(maxWidth, width + finalStyle.marginLeft + finalStyle.marginRight);
-        } else if (typeof cellContent === 'object') {
-          for (var _iterator2 = _createForOfIteratorHelperLoose(cellContent.items), _step2; !(_step2 = _iterator2()).done;) {
-            var obj = _step2.value;
+        for (var _iterator = _createForOfIteratorHelperLoose(cellContent.items), _step; !(_step = _iterator()).done;) {
+          var obj = _step.value;
+          var _width = 0;
 
-            if (typeof obj.content === 'string' || typeof obj.content === 'number') {
-              var _context$measureText2 = context.measureText(obj.content.toString()),
-                  _width = _context$measureText2.width;
+          if (typeof obj.content === 'string' || typeof obj.content === 'number') {
+            var _context$measureText2 = context.measureText(obj.content.toString()),
+                w = _context$measureText2.width;
 
-              maxWidth = Math.max(maxWidth, obj.x + _width);
-            }
+            _width = obj.x + w + inlineMargin;
+          } else if (obj.width) {
+            _width = obj.width;
+          }
+
+          if (obj.horizontalAlign === 'right') {
+            extraWidth += _width;
+          } else {
+            _maxWidth = Math.max(_maxWidth, _width);
           }
         }
+
+        return _maxWidth + extraWidth;
+      }
+
+      return 0;
+    };
+
+    var maxWidth = SIZES.minimumWidth;
+    var headerContent = columnHeaders(x);
+
+    if (headerContent) {
+      var headerStyle = columnHeaderStyle(x);
+      maxWidth = Math.max(maxWidth, getWidth(headerContent, headerStyle));
+    }
+
+    for (var _iterator2 = _createForOfIteratorHelperLoose(rows), _step2; !(_step2 = _iterator2()).done;) {
+      var y = _step2.value;
+      var cellContent = displayData(x, y);
+
+      if (cellContent != null) {
+        var style = cellStyle(x, y);
+        maxWidth = Math.max(maxWidth, getWidth(cellContent, style));
       }
     }
 
-    return Math.ceil(maxWidth);
-  }, [context]);
+    return Math.ceil(Math.min(canvasWidth, maxWidth));
+  }, [context, displayData, cellStyle, columnHeaders, columnHeaderStyle]);
   return getAutoSizeWidth;
 };
 
@@ -3253,7 +3280,7 @@ var Sheet = React.forwardRef(function (props, ref) {
   useClipboardCopy(textAreaRef, selection, editMode, editData);
   useClipboardPaste(textAreaRef, selection, changeSelection, props.onChange, cellReadOnly);
   var onScroll = useScroll(dataOffset, maxScroll, cellLayout, setDataOffset, setMaxScroll);
-  var getAutoSizeWidth = useAutoSizeColumn(visibleCells.rows, displayData, cellStyle);
+  var getAutoSizeWidth = useAutoSizeColumn(visibleCells.rows, displayData, cellStyle, columnHeaders, columnHeaderStyle, canvasWidth);
 
   var _useMouse = useMouse(hitmapRef, selection, knobArea, editMode, editData, sourceData, cellReadOnly, canSizeColumn, canSizeRow, canOrderColumn, canOrderRow, cellLayout, visibleCells, sheetStyle, columnGroupKeys, rowGroupKeys, selectedColumnGroups, selectedRowGroups, getAutoSizeWidth, startEditingCell, commitEditingCell, setKnobArea, setDragIndices, setDragOffset, setDropTarget, changeSelection, props.cacheLayout ? columnLayout.clearAfter : undefined, props.cacheLayout ? rowLayout.clearAfter : undefined, props.onChange, props.onColumnOrderChange, props.onRowOrderChange, props.onCellWidthChange, props.onCellHeightChange, props.onRightClick, props.dontCommitEditOnSelectionChange, props.dontChangeSelectionOnOrderChange),
       mouseHandlers = _useMouse.mouseHandlers,