KeepAtBottom: check if render is a result of external change, and if …

…it us, update position to bottom. fixes #30
rommguy · Nov 8, 2017 · 86b7bc2 · 86b7bc2
1 parent e94f965
commit 86b7bc2
Show file tree

Hide file tree

Showing 11 changed files with 5,051 additions and 63 deletions.
diff --git a/dist/customScroll.css b/dist/customScroll.css
@@ -6,8 +6,7 @@
     position: relative; }
     .custom-scroll .outer-container:hover .custom-scrollbar {
       opacity: 1;
-      -webkit-transition-duration: 0.2s;
-              transition-duration: 0.2s; }
+      transition-duration: 0.2s; }
   .custom-scroll .inner-container {
     overflow-x: hidden;
     overflow-y: scroll; }
@@ -18,15 +17,12 @@
       right: 0;
       left: 0;
       height: 0;
-      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
       background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
       pointer-events: none;
-      -webkit-transition: height 0.1s ease-in;
       transition: height 0.1s ease-in;
       will-change: height; }
     .custom-scroll .inner-container.content-scrolled:after {
       height: 5px;
-      -webkit-transition: height 0.15s ease-out;
       transition: height 0.15s ease-out; }
   .custom-scroll.scroll-handle-dragged .inner-container {
     -webkit-user-select: none;
@@ -40,7 +36,6 @@
     right: 3px;
     opacity: 0;
     z-index: 1;
-    -webkit-transition: opacity 0.4s ease-out;
     transition: opacity 0.4s ease-out;
     padding: 6px 0;
     box-sizing: border-box;

diff --git a/dist/reactCustomScroll.js b/dist/reactCustomScroll.js
diff --git a/example/example.js b/example/example.js
diff --git a/example/example.js.map b/example/example.js.map
diff --git a/example/firstComp/firstComp.js b/example/firstComp/firstComp.js
@@ -1,5 +1,5 @@
 'use strict';
-const React = require('react');
+const createReactClass = require('create-react-class')
 const _ = require('lodash');
 const demoText = require('./demoText');
 const template = require('./firstComp.rt.js');
@@ -19,7 +19,7 @@ function getParameterByName(name) {
 }
 
 
-module.exports = React.createClass({
+module.exports = createReactClass({
     displayName: 'firstComp',
     getInitialState() {
         return {

diff --git a/example/styles.css b/example/styles.css
@@ -361,8 +361,7 @@ th {
     position: relative; }
     .custom-scroll .outer-container:hover .custom-scrollbar {
       opacity: 1;
-      -webkit-transition-duration: 0.2s;
-              transition-duration: 0.2s; }
+      transition-duration: 0.2s; }
   .custom-scroll .inner-container {
     overflow-x: hidden;
     overflow-y: scroll; }
@@ -373,15 +372,12 @@ th {
       right: 0;
       left: 0;
       height: 0;
-      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
       background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
       pointer-events: none;
-      -webkit-transition: height 0.1s ease-in;
       transition: height 0.1s ease-in;
       will-change: height; }
     .custom-scroll .inner-container.content-scrolled:after {
       height: 5px;
-      -webkit-transition: height 0.15s ease-out;
       transition: height 0.15s ease-out; }
   .custom-scroll.scroll-handle-dragged .inner-container {
     -webkit-user-select: none;
@@ -395,7 +391,6 @@ th {
     right: 3px;
     opacity: 0;
     z-index: 1;
-    -webkit-transition: opacity 0.4s ease-out;
     transition: opacity 0.4s ease-out;
     padding: 6px 0;
     box-sizing: border-box;
@@ -439,7 +434,6 @@ body {
     font-size: 18px; }
 
 .scroll-creator {
-  background: -webkit-linear-gradient(top, #BDEAFC, #FCBDC9);
   background: linear-gradient(to bottom, #BDEAFC, #FCBDC9); }
 
 .panel {
@@ -514,7 +508,6 @@ body {
   height: 36px;
   line-height: 36px;
   border-radius: 2px;
-  -webkit-transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
   transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
   background-color: #00bcd4;
   text-align: center;

diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "babel-loader": "6.2.4",
     "babel-preset-es2015": "6.13.2",
     "babel-preset-react": "6.11.1",
+    "create-react-class": "^15.6.2",
     "css-loader": "0.23.1",
     "eslint": "^3.6.11",
     "eslint-config-wix-editor": "^0.2.3",

diff --git a/src/main/customScroll.css b/src/main/customScroll.css
@@ -6,8 +6,7 @@
     position: relative; }
     .custom-scroll .outer-container:hover .custom-scrollbar {
       opacity: 1;
-      -webkit-transition-duration: 0.2s;
-              transition-duration: 0.2s; }
+      transition-duration: 0.2s; }
   .custom-scroll .inner-container {
     overflow-x: hidden;
     overflow-y: scroll; }
@@ -18,15 +17,12 @@
       right: 0;
       left: 0;
       height: 0;
-      background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
       background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.05) 60%, transparent 100%);
       pointer-events: none;
-      -webkit-transition: height 0.1s ease-in;
       transition: height 0.1s ease-in;
       will-change: height; }
     .custom-scroll .inner-container.content-scrolled:after {
       height: 5px;
-      -webkit-transition: height 0.15s ease-out;
       transition: height 0.15s ease-out; }
   .custom-scroll.scroll-handle-dragged .inner-container {
     -webkit-user-select: none;
@@ -40,7 +36,6 @@
     right: 3px;
     opacity: 0;
     z-index: 1;
-    -webkit-transition: opacity 0.4s ease-out;
     transition: opacity 0.4s ease-out;
     padding: 6px 0;
     box-sizing: border-box;

diff --git a/src/main/customScroll.js b/src/main/customScroll.js
@@ -69,6 +69,10 @@ class CustomScroll extends React.Component {
         }
     }
 
+    componentWillReceiveProps() {
+        this.externalRender = true;
+    }
+
     componentDidUpdate(prevProps, prevState) {
         const prevContentHeight = this.contentHeight
         const prevVisibleHeight = this.visibleHeight
@@ -79,21 +83,22 @@ class CustomScroll extends React.Component {
         this.scrollbarYWidth = innerContainer.offsetWidth - innerContainer.clientWidth
         this.visibleHeight = innerContainer.clientHeight
         this.scrollRatio = this.contentHeight ? this.visibleHeight / this.contentHeight : 1
-        const reachedBottomOnCurrentRender = this.state.scrollPos >= this.contentHeight - this.visibleHeight
-        const contentResized = prevContentHeight !== this.contentHeight
 
         this.toggleScrollIfNeeded()
 
-
-
         if (this.props.freezePosition || prevProps.freezePosition) {
             this.adjustFreezePosition(prevProps)
         }
         if (typeof this.props.scrollTo !== 'undefined' && this.props.scrollTo !== prevProps.scrollTo) {
             this.updateScrollPosition(this.props.scrollTo)
-        } else if (this.props.keepAtBottom && contentResized && reachedBottomOnPrevRender && !reachedBottomOnCurrentRender) {
+        } else if (
+            this.props.keepAtBottom &&
+            this.externalRender &&
+            reachedBottomOnPrevRender
+        ) {
             this.updateScrollPosition(this.contentHeight - this.visibleHeight)
         }
+        this.externalRender = false
     }
 
     componentWillUnmount() {