next-page-transitions - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0-alpha.3

lib/PageTransition.js

@@ -98,10 +98,2 @@ "use strict";
     _this = _possibleConstructorReturn(this, (PageTransition.__proto__ || Object.getPrototypeOf(PageTransition)).call(this, props));
-    Object.defineProperty(_assertThisInitialized(_this), "onEnter", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: makeStateUpdater('enter', {
-        showLoading: false
-      }).bind(_assertThisInitialized(_this))
-    });
     Object.defineProperty(_assertThisInitialized(_this), "onEntering", {
@@ -119,8 +111,2 @@ configurable: true,
     });
-    Object.defineProperty(_assertThisInitialized(_this), "onExit", {
-      configurable: true,
-      enumerable: true,
-      writable: true,
-      value: makeStateUpdater('exit').bind(_assertThisInitialized(_this))
-    });
     Object.defineProperty(_assertThisInitialized(_this), "onExiting", {
@@ -155,2 +141,4 @@ configurable: true,
     value: function componentDidMount() {
+      var _this2 = this;
+
       if (shouldDelayEnter(this.props.children)) {
@@ -161,2 +149,18 @@ this.setState({
       }
+
+      if (this.props.monkeyPatchScrolling && typeof window !== 'undefined') {
+        // Forgive me for what I'm about to do
+        this.originalScrollTo = window.scrollTo;
+        this.disableScrolling = false;
+
+        window.scrollTo = function () {
+          if (_this2.disableScrolling) return;
+
+          for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+          }
+
+          _this2.originalScrollTo.apply(window, args);
+        };
+      }
     }
@@ -215,2 +219,30 @@ }, {
   }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.originalScrollTo && typeof window !== 'undefined') {
+        window.scrollTo = this.originalScrollTo;
+      }
+
+      if (this.state.timeoutId) clearTimeout(this.state.timeoutId);
+    }
+  }, {
+    key: "onEnter",
+    value: function onEnter() {
+      // It's safe to reenable scrolling now
+      this.disableScrolling = false;
+      this.setState({
+        state: 'enter',
+        showLoading: false
+      });
+    }
+  }, {
+    key: "onExit",
+    value: function onExit() {
+      // Disable scrolling until this component has unmounted
+      this.disableScrolling = true;
+      this.setState({
+        state: 'exit'
+      });
+    }
+  }, {
     key: "onChildLoaded",
@@ -237,6 +269,6 @@ value: function onChildLoaded() {
     value: function startEnterTimer() {
-      var _this2 = this;
+      var _this3 = this;
 
       return setTimeout(function () {
-        _this2.setState({
+        _this3.setState({
           showLoading: true
@@ -249,3 +281,3 @@ });
     value: function render() {
-      var _this3 = this;
+      var _this4 = this;
 
@@ -272,15 +304,19 @@ var _props = this.props,
         appear: true,
-        onEnter: this.onEnter,
-        onEntering: this.onEntering,
+        onEnter: function onEnter() {
+          return _this4.onEnter();
+        },
+        onEntering: function onEntering() {
+          return _this4.onEntering();
+        },
         onEntered: function onEntered() {
-          return _this3.onEntered();
+          return _this4.onEntered();
         },
         onExit: function onExit() {
-          return _this3.onExit();
+          return _this4.onExit();
         },
         onExiting: function onExiting() {
-          return _this3.onExiting();
+          return _this4.onExiting();
         },
         onExited: function onExited() {
-          return _this3.onExited();
+          return _this4.onExited();
         }
@@ -290,3 +326,3 @@ }, _react.default.createElement("div", {
       }, children && _react.default.cloneElement(children, _defineProperty({}, loadingCallbackName, function () {
-        return _this3.onChildLoaded();
+        return _this4.onChildLoaded();
       })))), hasLoadingComponent && _react.default.createElement(_CSSTransition.default, {
@@ -319,4 +355,4 @@ "in": this.state.showLoading,
 
-    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      args[_key - 1] = arguments[_key];
+    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
     }
@@ -330,10 +366,11 @@
 
-    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      args[_key2 - 1] = arguments[_key2];
+    for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) {
+      args[_key3 - 1] = arguments[_key3];
     }
 
     return pt.apply(void 0, [props].concat(args));
-  }
+  },
+
   /* eslint-enable react/require-default-props */
-
+  monkeyPatchScrolling: _propTypes.default.bool
 };
@@ -343,5 +380,6 @@ PageTransition.defaultProps = {
   loadingCallbackName: 'pageTransitionReadyToEnter',
-  loadingDelay: 500
+  loadingDelay: 500,
+  monkeyPatchScrolling: false
 };
 var _default = PageTransition;
 exports.default = _default;

package.json

 {
   "name": "next-page-transitions",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "Simple and customizable page transitions for Next.js apps",
@@ -11,7 +11,7 @@ "main": "lib/index.js",
     "build": "rimraf lib && babel src --out-dir lib",
-    "build-watch": "rimraf lib && babel src --out-dir lib --watch",
+    "build:watch": "rimraf lib && babel src --out-dir lib --watch",
     "prettier": "prettier --write \"src/**/*.js\" \"examples/**/*.js\"",
-    "prettier-diff": "prettier --list-different \"src/**/*.js\" \"examples/**/*.js\"",
-    "lint-js": "eslint --ext js src examples",
-    "fix-lint-js": "eslint --ext js . --fix"
+    "prettier:diff": "prettier --list-different \"src/**/*.js\" \"examples/**/*.js\"",
+    "lint": "eslint --ext js src examples",
+    "lint:fix": "eslint --ext js . --fix"
   },
@@ -18,0 +18,0 @@ "repository": {

README.md

 # next-page-transitions
+
 Simple and customizable page transitions for Next.js apps
@@ -38,3 +39,3 @@
 ```js
-import App, {Container} from 'next/app'
+import App, { Container } from 'next/app'
 import React from 'react'
@@ -44,3 +45,3 @@ import { PageTransition } from 'next-page-transitions'
 export default class MyApp extends App {
-  static async getInitialProps ({ Component, router, ctx }) {
+  static async getInitialProps({ Component, router, ctx }) {
     let pageProps = {}
@@ -52,10 +53,10 @@
 
-    return {pageProps}
+    return { pageProps }
   }
 
-  render () {
-    const {Component, pageProps} = this.props
+  render() {
+    const { Component, pageProps } = this.props
     return (
       <Container>
-        <PageTransition timeout={300} className="page-transition" >
+        <PageTransition timeout={300} classNames="page-transition">
           <Component {...pageProps} />
@@ -115,5 +116,5 @@ </PageTransition>
 
-*Note: make sure that your component returns `null` from its `render()` function
+_Note: make sure that your component returns `null` from its `render()` function
 until it has finished loading its content and is ready to be animated in. Your
-page will still be in the React component tree while it's loading!*
+page will still be in the React component tree while it's loading!_
 
@@ -157,5 +158,3 @@ "But my network requests are usually fast!", you'll say. "They usually take only
     if (!this.state.loaded) return null
-    return (
-      <div>Hello, world!</div>
-    )
+    return <div>Hello, world!</div>
   }
@@ -196,2 +195,35 @@ }
 
+### `PageTransition` props
+
+* **`classNames`**: Specifies the class names that will be applied to the page
+  wrapper to drive the page transition animations. Analogous to the `classNames`
+  prop of
+  [`react-transition-group`'s `CSSTranstition` component'](http://reactcommunity.org/react-transition-group/css-transition).
+  However, note that only the string form of that prop is supported at present.
+  Also, note that this library doesn't have a separate "appear" state; only
+  "enter" and "exit" classes are needed.
+ * **`timeout`**: Specifies timeouts for the page transition animations.
+  Analogous to the `timeout` prop of
+  [`react-transition-group`'s `CSSTranstition` component'](http://reactcommunity.org/react-transition-group/css-transition)
+* **`loadingComponent`**: A React element to be shown while
+* **`loadingDelay`**: The duration to wait before showing the loading
+  indicator, in milliseconds. If a page finishes loading before this duration
+  has elapsed, the loading component will never be shown. Defaults to 500ms.
+* **`loadingCallbackName`**: Specifies the name of the prop that your page will
+  receive to call when it's done loading. Defaults to `pageTransitionReadyToEnter`
+* **`loadingTimeout`**: Analogous to the `timeout` prop of
+  [`react-transition-group`'s `CSSTranstition` component'](http://reactcommunity.org/react-transition-group/css-transition).
+  If this prop is set to `0`, the loading indicator won't be animated on/off
+  the screen.
+* **`loadingClassNames`**: Specifies the class names that will be applied to the
+  loading component if one is specified. Analogous to the `classNames` prop of
+  [`react-transition-group`'s `CSSTranstition` component'](http://reactcommunity.org/react-transition-group/css-transition)
+* **`monkeyPatchScrolling`**: By default, Next's `Link` component will scroll to
+  the top of the page whenever it is clicked; this can have an undesirable
+  jumpy effect when a page is transitioning out. If this prop is set to `true`
+  when the component is mounted, then `window.scrollTo` will be monkey-patched
+  so that programmatic scrolling can be disabled while a page is transitioning
+  out. Defaults to false, since this potentially sketchy behavior should be
+  opt-in.
+
 ### Contributing
@@ -198,0 +230,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

26906

increased by13.63%

Lines of code

327

increased by10.85%

Number of lines in readme file

228

increased by16.33%

No dependency changes