react-pannable - npm Package Compare versions

Comparing version 6.1.6 to 6.1.7

cjs/pad/GridContent.js

@@ -16,3 +16,3 @@ "use strict";
 
-var _excluded = ["itemWidth", "itemHeight", "itemCount", "renderItem", "direction", "rowSpacing", "columnSpacing", "width", "height", "render", "children"];
+var _excluded = ["itemWidth", "itemHeight", "itemCount", "renderItem", "direction", "rowSpacing", "columnSpacing", "insetTop", "insetRight", "insetBottom", "insetLeft", "width", "height", "render", "children"];
 
@@ -54,2 +54,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
       columnSpacing = _props$columnSpacing === void 0 ? 0 : _props$columnSpacing,
+      _props$insetTop = props.insetTop,
+      insetTop = _props$insetTop === void 0 ? 0 : _props$insetTop,
+      _props$insetRight = props.insetRight,
+      insetRight = _props$insetRight === void 0 ? 0 : _props$insetRight,
+      _props$insetBottom = props.insetBottom,
+      insetBottom = _props$insetBottom === void 0 ? 0 : _props$insetBottom,
+      _props$insetLeft = props.insetLeft,
+      insetLeft = _props$insetLeft === void 0 ? 0 : _props$insetLeft,
       width = props.width,
@@ -75,2 +83,8 @@ height = props.height,
       },
+      inset: {
+        top: insetTop,
+        right: insetRight,
+        bottom: insetBottom,
+        left: insetLeft
+      },
       itemSize: {
@@ -193,6 +207,7 @@ width: itemWidth,
       spacing = options.spacing,
+      inset = options.inset,
       itemSize = options.itemSize,
       itemCount = options.itemCount;
 
-  var _ref = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row'] : ['x', 'y', 'width', 'height', 'row', 'column'],
+  var _ref = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row', 'left', 'top', 'right', 'bottom'] : ['x', 'y', 'width', 'height', 'row', 'column', 'top', 'left', 'bottom', 'right'],
       x = _ref[0],
@@ -203,6 +218,10 @@ y = _ref[1],
       row = _ref[4],
-      column = _ref[5];
+      column = _ref[5],
+      left = _ref[6],
+      top = _ref[7],
+      right = _ref[8],
+      bottom = _ref[9];
 
   var sizeWidth = size[width];
-  var sizeHeight = 0;
+  var sizeHeight = inset[top];
   var countRow = 0;
@@ -224,2 +243,4 @@ var countColumn = 0;
     }
+
+    sizeWidth += inset[left] + inset[right];
   } else {
@@ -229,7 +250,3 @@ if (itemSize[width] === 0) {
     } else {
-      countColumn = 1;
-
-      if (itemSize[width] < sizeWidth) {
-        countColumn += Math.floor((sizeWidth - itemSize[width]) / (itemSize[width] + spacing[column]));
-      }
+      countColumn = Math.floor((sizeWidth - inset[left] - inset[right] + spacing[column]) / (itemSize[width] + spacing[column]));
     }
@@ -242,2 +259,8 @@ }
 
+  var cWidth = sizeWidth - inset[left] - inset[right];
+
+  if (countColumn > 1) {
+    cWidth = (cWidth - itemSize[width]) / (countColumn - 1);
+  }
+
   for (var rowIndex = 0; rowIndex < countRow; rowIndex++) {
@@ -252,9 +275,4 @@ if (rowIndex > 0) {
       var itemIndex = columnIndex + rowIndex * countColumn;
-      var attrX = 0;
 
-      if (countColumn > 1) {
-        attrX += Math.round(columnIndex * ((sizeWidth - itemSize[width]) / (countColumn - 1)));
-      }
-
-      if (itemIndex >= itemCount) {
+      if (itemCount <= itemIndex) {
         break;
@@ -264,3 +282,3 @@ }
       layoutList.push((_layoutList$push = {
-        rect: (_rect = {}, _rect[x] = attrX, _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect)
+        rect: (_rect = {}, _rect[x] = inset[left] + Math.round(columnIndex * cWidth), _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect)
       }, _layoutList$push[row + 'Index'] = rowIndex, _layoutList$push[column + 'Index'] = columnIndex, _layoutList$push.itemIndex = itemIndex, _layoutList$push));
@@ -272,2 +290,3 @@ }
 
+  sizeHeight += inset[bottom];
   return {
@@ -274,0 +293,0 @@ size: (_size = {}, _size[width] = sizeWidth, _size[height] = sizeHeight, _size),

es/pad/GridContent.js

@@ -1,2 +0,2 @@
-var _excluded = ["itemWidth", "itemHeight", "itemCount", "renderItem", "direction", "rowSpacing", "columnSpacing", "width", "height", "render", "children"];
+var _excluded = ["itemWidth", "itemHeight", "itemCount", "renderItem", "direction", "rowSpacing", "columnSpacing", "insetTop", "insetRight", "insetBottom", "insetLeft", "width", "height", "render", "children"];
 
@@ -35,2 +35,10 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
       columnSpacing = _props$columnSpacing === void 0 ? 0 : _props$columnSpacing,
+      _props$insetTop = props.insetTop,
+      insetTop = _props$insetTop === void 0 ? 0 : _props$insetTop,
+      _props$insetRight = props.insetRight,
+      insetRight = _props$insetRight === void 0 ? 0 : _props$insetRight,
+      _props$insetBottom = props.insetBottom,
+      insetBottom = _props$insetBottom === void 0 ? 0 : _props$insetBottom,
+      _props$insetLeft = props.insetLeft,
+      insetLeft = _props$insetLeft === void 0 ? 0 : _props$insetLeft,
       width = props.width,
@@ -56,2 +64,8 @@ height = props.height,
       },
+      inset: {
+        top: insetTop,
+        right: insetRight,
+        bottom: insetBottom,
+        left: insetLeft
+      },
       itemSize: {
@@ -171,6 +185,7 @@ width: itemWidth,
       spacing = options.spacing,
+      inset = options.inset,
       itemSize = options.itemSize,
       itemCount = options.itemCount;
 
-  var _ref = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row'] : ['x', 'y', 'width', 'height', 'row', 'column'],
+  var _ref = direction === 'x' ? ['y', 'x', 'height', 'width', 'column', 'row', 'left', 'top', 'right', 'bottom'] : ['x', 'y', 'width', 'height', 'row', 'column', 'top', 'left', 'bottom', 'right'],
       x = _ref[0],
@@ -181,6 +196,10 @@ y = _ref[1],
       row = _ref[4],
-      column = _ref[5];
+      column = _ref[5],
+      left = _ref[6],
+      top = _ref[7],
+      right = _ref[8],
+      bottom = _ref[9];
 
   var sizeWidth = size[width];
-  var sizeHeight = 0;
+  var sizeHeight = inset[top];
   var countRow = 0;
@@ -202,2 +221,4 @@ var countColumn = 0;
     }
+
+    sizeWidth += inset[left] + inset[right];
   } else {
@@ -207,7 +228,3 @@ if (itemSize[width] === 0) {
     } else {
-      countColumn = 1;
-
-      if (itemSize[width] < sizeWidth) {
-        countColumn += Math.floor((sizeWidth - itemSize[width]) / (itemSize[width] + spacing[column]));
-      }
+      countColumn = Math.floor((sizeWidth - inset[left] - inset[right] + spacing[column]) / (itemSize[width] + spacing[column]));
     }
@@ -220,2 +237,8 @@ }
 
+  var cWidth = sizeWidth - inset[left] - inset[right];
+
+  if (countColumn > 1) {
+    cWidth = (cWidth - itemSize[width]) / (countColumn - 1);
+  }
+
   for (var rowIndex = 0; rowIndex < countRow; rowIndex++) {
@@ -230,9 +253,4 @@ if (rowIndex > 0) {
       var itemIndex = columnIndex + rowIndex * countColumn;
-      var attrX = 0;
 
-      if (countColumn > 1) {
-        attrX += Math.round(columnIndex * ((sizeWidth - itemSize[width]) / (countColumn - 1)));
-      }
-
-      if (itemIndex >= itemCount) {
+      if (itemCount <= itemIndex) {
         break;
@@ -242,3 +260,3 @@ }
       layoutList.push((_layoutList$push = {
-        rect: (_rect = {}, _rect[x] = attrX, _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect)
+        rect: (_rect = {}, _rect[x] = inset[left] + Math.round(columnIndex * cWidth), _rect[y] = sizeHeight, _rect[width] = itemSize[width], _rect[height] = itemSize[height], _rect)
       }, _layoutList$push[row + 'Index'] = rowIndex, _layoutList$push[column + 'Index'] = columnIndex, _layoutList$push.itemIndex = itemIndex, _layoutList$push));
@@ -250,2 +268,3 @@ }
 
+  sizeHeight += inset[bottom];
   return {
@@ -252,0 +271,0 @@ size: (_size = {}, _size[width] = sizeWidth, _size[height] = sizeHeight, _size),

lib/pad/GridContent.js

@@ -9,3 +9,3 @@ import PadContext from './PadContext';
 export const GridContent = React.memo((props) => {
-    const { itemWidth, itemHeight, itemCount, renderItem, direction = 'y', rowSpacing = 0, columnSpacing = 0, width, height, render, children, ...divProps } = props;
+    const { itemWidth, itemHeight, itemCount, renderItem, direction = 'y', rowSpacing = 0, columnSpacing = 0, insetTop = 0, insetRight = 0, insetBottom = 0, insetLeft = 0, width, height, render, children, ...divProps } = props;
     const context = useContext(PadContext);
@@ -18,2 +18,8 @@ const fixedWidth = width ?? context.width;
         spacing: { row: rowSpacing, column: columnSpacing },
+        inset: {
+            top: insetTop,
+            right: insetRight,
+            bottom: insetBottom,
+            left: insetLeft,
+        },
         itemSize: { width: itemWidth, height: itemHeight },
@@ -107,8 +113,30 @@ itemCount,
 function calculateLayout(options) {
-    const { direction, size, spacing, itemSize, itemCount } = options;
-    const [x, y, width, height, row, column] = direction === 'x'
-        ? ['y', 'x', 'height', 'width', 'column', 'row']
-        : ['x', 'y', 'width', 'height', 'row', 'column'];
+    const { direction, size, spacing, inset, itemSize, itemCount } = options;
+    const [x, y, width, height, row, column, left, top, right, bottom] = direction === 'x'
+        ? [
+            'y',
+            'x',
+            'height',
+            'width',
+            'column',
+            'row',
+            'left',
+            'top',
+            'right',
+            'bottom',
+        ]
+        : [
+            'x',
+            'y',
+            'width',
+            'height',
+            'row',
+            'column',
+            'top',
+            'left',
+            'bottom',
+            'right',
+        ];
     let sizeWidth = size[width];
-    let sizeHeight = 0;
+    let sizeHeight = inset[top];
     let countRow = 0;
@@ -128,2 +156,3 @@ let countColumn = 0;
         }
+        sizeWidth += inset[left] + inset[right];
     }
@@ -135,6 +164,4 @@ else {
         else {
-            countColumn = 1;
-            if (itemSize[width] < sizeWidth) {
-                countColumn += Math.floor((sizeWidth - itemSize[width]) / (itemSize[width] + spacing[column]));
-            }
+            countColumn = Math.floor((sizeWidth - inset[left] - inset[right] + spacing[column]) /
+                (itemSize[width] + spacing[column]));
         }
@@ -145,2 +172,6 @@ }
     }
+    let cWidth = sizeWidth - inset[left] - inset[right];
+    if (countColumn > 1) {
+        cWidth = (cWidth - itemSize[width]) / (countColumn - 1);
+    }
     for (let rowIndex = 0; rowIndex < countRow; rowIndex++) {
@@ -152,7 +183,3 @@ if (rowIndex > 0) {
             const itemIndex = columnIndex + rowIndex * countColumn;
-            let attrX = 0;
-            if (countColumn > 1) {
-                attrX += Math.round(columnIndex * ((sizeWidth - itemSize[width]) / (countColumn - 1)));
-            }
-            if (itemIndex >= itemCount) {
+            if (itemCount <= itemIndex) {
                 break;
@@ -162,3 +189,3 @@ }
                 rect: {
-                    [x]: attrX,
+                    [x]: inset[left] + Math.round(columnIndex * cWidth),
                     [y]: sizeHeight,
@@ -175,2 +202,3 @@ [width]: itemSize[width],
     }
+    sizeHeight += inset[bottom];
     return {
@@ -177,0 +205,0 @@ size: { [width]: sizeWidth, [height]: sizeHeight },

package.json

 {
   "name": "react-pannable",
-  "version": "6.1.6",
+  "version": "6.1.7",
   "description": "Flexible and Customizable Layouts for Scrolling Content with React",
@@ -5,0 +5,0 @@ "keywords": [

types/pad/GridContent.d.ts

@@ -34,2 +34,6 @@ import { XY, RC, Rect, Size } from '../interfaces';
     columnSpacing?: number;
+    insetTop?: number;
+    insetRight?: number;
+    insetBottom?: number;
+    insetLeft?: number;
     render?: (layout: GridLayout) => React.ReactNode;
@@ -36,0 +40,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

736231

increased by0.65%

Lines of code

16805

increased by0.8%

No dependency changes