react-pannable - npm Package Compare versions

Comparing version 6.1.10 to 6.1.11

cjs/pad/PadInner.js

@@ -99,3 +99,2 @@ "use strict";
         bound: bound,
-        contentInset: contentInset,
         pagingEnabled: pagingEnabled,
@@ -105,4 +104,12 @@ directionalLockEnabled: directionalLockEnabled
     });
-  }, [size, bound, contentInset, pagingEnabled, directionalLockEnabled]);
+  }, [size, bound, pagingEnabled, directionalLockEnabled]);
   (0, _hooks.useIsomorphicLayoutEffect)(function () {
+    dispatch({
+      type: 'changeContentInset',
+      payload: {
+        contentInset: contentInset
+      }
+    });
+  }, [contentInset]);
+  (0, _hooks.useIsomorphicLayoutEffect)(function () {
     var prevState = prevStateRef.current;
@@ -109,0 +116,0 @@ prevStateRef.current = state;

cjs/pad/padReducer.js

@@ -75,2 +75,5 @@ "use strict";
 
+    case 'changeContentInset':
+      return validateReducer(changeContentInsetReducer(state, action), action);
+
     case 'scrollTo':
@@ -283,2 +286,30 @@ return validateReducer(scrollToReducer(state, action), action);
 
+var changeContentInsetReducer = function changeContentInsetReducer(state, action) {
+  var contentInset = state.contentInset,
+      contentOffset = state.contentOffset;
+  var nextContentInset = action.payload.contentInset;
+  var dTop = nextContentInset.top - contentInset.top;
+  var dLeft = nextContentInset.left - contentInset.left;
+
+  if (dTop === 0 && dLeft === 0) {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      contentInset: nextContentInset
+    });
+  }
+
+  var offset = {
+    x: contentOffset.x - dLeft,
+    y: contentOffset.y - dTop
+  };
+  return setContentOffsetReducer(_objectSpread(_objectSpread({}, state), {}, {
+    contentInset: nextContentInset
+  }), {
+    type: 'setContentOffset',
+    payload: {
+      offset: offset,
+      animated: -1
+    }
+  });
+};
+
 var scrollToReducer = function scrollToReducer(state, action) {
@@ -383,9 +414,3 @@ var drag = state.drag,
 
-    var _decelerationEndOffset2 = (0, _motion.getDecelerationEndOffset)({
-      x: deceleration.endOffset.x + offset.x - contentOffset.x,
-      y: deceleration.endOffset.y + offset.y - contentOffset.y
-    }, {
-      x: 0,
-      y: 0
-    }, size, pagingEnabled, deceleration.rate);
+    var _decelerationEndOffset2 = (0, _motion.getDecelerationEndOffset)(offset, contentVelocity, size, pagingEnabled, deceleration.rate);
 
@@ -392,0 +417,0 @@ return _objectSpread(_objectSpread({}, state), {}, {

es/pad/PadInner.js

@@ -84,3 +84,2 @@ 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; }
         bound: bound,
-        contentInset: contentInset,
         pagingEnabled: pagingEnabled,
@@ -90,4 +89,12 @@ directionalLockEnabled: directionalLockEnabled
     });
-  }, [size, bound, contentInset, pagingEnabled, directionalLockEnabled]);
+  }, [size, bound, pagingEnabled, directionalLockEnabled]);
   useIsomorphicLayoutEffect(function () {
+    dispatch({
+      type: 'changeContentInset',
+      payload: {
+        contentInset: contentInset
+      }
+    });
+  }, [contentInset]);
+  useIsomorphicLayoutEffect(function () {
     var prevState = prevStateRef.current;
@@ -94,0 +101,0 @@ prevStateRef.current = state;

es/pad/padReducer.js

@@ -65,2 +65,5 @@ 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; }
 
+    case 'changeContentInset':
+      return validateReducer(changeContentInsetReducer(state, action), action);
+
     case 'scrollTo':
@@ -272,2 +275,30 @@ return validateReducer(scrollToReducer(state, action), action);
 
+var changeContentInsetReducer = function changeContentInsetReducer(state, action) {
+  var contentInset = state.contentInset,
+      contentOffset = state.contentOffset;
+  var nextContentInset = action.payload.contentInset;
+  var dTop = nextContentInset.top - contentInset.top;
+  var dLeft = nextContentInset.left - contentInset.left;
+
+  if (dTop === 0 && dLeft === 0) {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      contentInset: nextContentInset
+    });
+  }
+
+  var offset = {
+    x: contentOffset.x - dLeft,
+    y: contentOffset.y - dTop
+  };
+  return setContentOffsetReducer(_objectSpread(_objectSpread({}, state), {}, {
+    contentInset: nextContentInset
+  }), {
+    type: 'setContentOffset',
+    payload: {
+      offset: offset,
+      animated: -1
+    }
+  });
+};
+
 var scrollToReducer = function scrollToReducer(state, action) {
@@ -372,9 +403,3 @@ var drag = state.drag,
 
-    var _decelerationEndOffset2 = getDecelerationEndOffset({
-      x: deceleration.endOffset.x + offset.x - contentOffset.x,
-      y: deceleration.endOffset.y + offset.y - contentOffset.y
-    }, {
-      x: 0,
-      y: 0
-    }, size, pagingEnabled, deceleration.rate);
+    var _decelerationEndOffset2 = getDecelerationEndOffset(offset, contentVelocity, size, pagingEnabled, deceleration.rate);
 
@@ -381,0 +406,0 @@ return _objectSpread(_objectSpread({}, state), {}, {

lib/pad/PadInner.js

@@ -44,3 +44,2 @@ import PadContext from './PadContext';
                 bound,
-                contentInset,
                 pagingEnabled,
@@ -50,4 +49,7 @@ directionalLockEnabled,
         });
-    }, [size, bound, contentInset, pagingEnabled, directionalLockEnabled]);
+    }, [size, bound, pagingEnabled, directionalLockEnabled]);
     useIsomorphicLayoutEffect(() => {
+        dispatch({ type: 'changeContentInset', payload: { contentInset } });
+    }, [contentInset]);
+    useIsomorphicLayoutEffect(() => {
         const prevState = prevStateRef.current;
@@ -54,0 +56,0 @@ prevStateRef.current = state;

lib/pad/padReducer.js

@@ -32,2 +32,4 @@ import { initialPannableState } from '../pannableReducer';
             return validateReducer(decelerateReducer(state, action), action);
+        case 'changeContentInset':
+            return validateReducer(changeContentInsetReducer(state, action), action);
         case 'scrollTo':
@@ -188,2 +190,22 @@ return validateReducer(scrollToReducer(state, action), action);
 };
+const changeContentInsetReducer = (state, action) => {
+    const { contentInset, contentOffset } = state;
+    const nextContentInset = action.payload.contentInset;
+    const dTop = nextContentInset.top - contentInset.top;
+    const dLeft = nextContentInset.left - contentInset.left;
+    if (dTop === 0 && dLeft === 0) {
+        return {
+            ...state,
+            contentInset: nextContentInset,
+        };
+    }
+    const offset = { x: contentOffset.x - dLeft, y: contentOffset.y - dTop };
+    return setContentOffsetReducer({
+        ...state,
+        contentInset: nextContentInset,
+    }, {
+        type: 'setContentOffset',
+        payload: { offset, animated: -1 },
+    });
+};
 const scrollToReducer = (state, action) => {
@@ -250,6 +272,3 @@ const { drag, contentOffset, size } = state;
         }
-        const decelerationEndOffset = getDecelerationEndOffset({
-            x: deceleration.endOffset.x + offset.x - contentOffset.x,
-            y: deceleration.endOffset.y + offset.y - contentOffset.y,
-        }, { x: 0, y: 0 }, size, pagingEnabled, deceleration.rate);
+        const decelerationEndOffset = getDecelerationEndOffset(offset, contentVelocity, size, pagingEnabled, deceleration.rate);
         return {
@@ -256,0 +275,0 @@ ...state,

package.json

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

src/pad/padReducer.ts

@@ -102,2 +102,4 @@ import {
       return validateReducer(decelerateReducer(state, action), action);
+    case 'changeContentInset':
+      return validateReducer(changeContentInsetReducer(state, action), action);
     case 'scrollTo':
@@ -389,2 +391,32 @@ return validateReducer(scrollToReducer(state, action), action);
 
+const changeContentInsetReducer: Reducer<
+  PadState,
+  Action<{ contentInset: Inset }>
+> = (state, action) => {
+  const { contentInset, contentOffset } = state;
+  const nextContentInset = action.payload!.contentInset;
+  const dTop = nextContentInset.top - contentInset.top;
+  const dLeft = nextContentInset.left - contentInset.left;
+
+  if (dTop === 0 && dLeft === 0) {
+    return {
+      ...state,
+      contentInset: nextContentInset,
+    };
+  }
+
+  const offset = { x: contentOffset.x - dLeft, y: contentOffset.y - dTop };
+
+  return setContentOffsetReducer(
+    {
+      ...state,
+      contentInset: nextContentInset,
+    },
+    {
+      type: 'setContentOffset',
+      payload: { offset, animated: -1 },
+    }
+  );
+};
+
 const scrollToReducer: Reducer<PadState, Action<PadScrollTo>> = (
@@ -496,7 +528,4 @@ state,
     const decelerationEndOffset = getDecelerationEndOffset(
-      {
-        x: deceleration.endOffset.x + offset.x - contentOffset.x,
-        y: deceleration.endOffset.y + offset.y - contentOffset.y,
-      },
-      { x: 0, y: 0 },
+      offset,
+      contentVelocity,
       size,
@@ -503,0 +532,0 @@ pagingEnabled,

No alert changes

Improved metrics

Total package byte prevSize

742176

increased by0.63%

Lines of code

16973

increased by0.8%

No dependency changes