children lazy rendering, cleaning not implemented

oleks-fedotov · oleks-fedotov · commit 4c7ec2831d6d · 2018-11-02T22:18:02.000+01:00
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -21,7 +21,8 @@ module.exports = {
         "react/jsx-indent-props": ["error", 4],
         "no-nested-ternary": "off",
         "no-use-before-define": "off",
-        "react/no-find-dom-node": "off"
+        "react/no-find-dom-node": "off",
+        "no-debugger": "off"
     },
     "plugins": ["react", "flowtype", "eslint-plugin-jest", "jest"]
 };
diff --git a/package.json b/package.json
@@ -1,112 +1,112 @@
 {
-  "name": "react-tv-navigation-playground",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "autoprefixer": "7.1.6",
-    "babel-core": "6.26.0",
-    "babel-eslint": "7.2.3",
-    "babel-jest": "20.0.3",
-    "babel-loader": "7.1.2",
-    "babel-plugin-rewire": "^1.2.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-react-app": "^3.1.2",
-    "babel-runtime": "6.26.0",
-    "case-sensitive-paths-webpack-plugin": "2.1.1",
-    "chalk": "1.1.3",
-    "classnames": "^2.2.6",
-    "css-loader": "0.28.7",
-    "dotenv": "4.0.0",
-    "dotenv-expand": "4.2.0",
-    "eslint": "4.10.0",
-    "eslint-config-react-app": "^2.1.0",
-    "eslint-loader": "1.9.0",
-    "eslint-plugin-flowtype": "2.39.1",
-    "eslint-plugin-import": "2.8.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.5",
-    "fs-extra": "3.0.1",
-    "html-webpack-plugin": "2.29.0",
-    "jest": "20.0.4",
-    "lodash": "^4.17.10",
-    "object-assign": "4.1.1",
-    "postcss-flexbugs-fixes": "3.2.0",
-    "postcss-loader": "2.0.8",
-    "promise": "8.0.1",
-    "prop-types": "^15.6.2",
-    "raf": "3.4.0",
-    "react": "^16.5.1",
-    "react-dev-utils": "^5.0.2",
-    "react-dom": "^16.4.1",
-    "react-redux": "^5.0.7",
-    "redux": "^4.0.0",
-    "redux-logger": "^3.0.6",
-    "resolve": "1.6.0",
-    "style-loader": "0.19.0",
-    "sw-precache-webpack-plugin": "0.11.4",
-    "url-loader": "0.6.2",
-    "webpack": "3.8.1",
-    "webpack-dev-server": "2.11.3",
-    "webpack-manifest-plugin": "1.3.2",
-    "whatwg-fetch": "2.0.3"
-  },
-  "scripts": {
-    "start": "PORT=9100 node scripts/start.js",
-    "build": "node scripts/build.js",
-    "test": "jest",
-    "fix-eslint": "eslint src/** --fix"
-  },
-  "devDependencies": {
-    "babel-eslint": "^8.1.1",
-    "eslint": "^5.6.0",
-    "eslint-config-airbnb-base": "^13.1.0",
-    "eslint-plugin-flowtype": "^2.50.1",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.26.2",
-    "eslint-plugin-react": "^7.11.1",
-    "flow-bin": "^0.81.0"
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,mjs}"
-    ],
-    "setupFiles": [
-      "<rootDir>/config/polyfills.js"
-    ],
-    "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
-    ],
-    "testEnvironment": "node",
-    "testURL": "http://localhost",
-    "transform": {
-      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+    "name": "react-tv-navigation-playground",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "autoprefixer": "7.1.6",
+        "babel-core": "6.26.0",
+        "babel-eslint": "7.2.3",
+        "babel-jest": "20.0.3",
+        "babel-loader": "7.1.2",
+        "babel-plugin-rewire": "^1.2.0",
+        "babel-polyfill": "^6.26.0",
+        "babel-preset-react-app": "^3.1.2",
+        "babel-runtime": "6.26.0",
+        "case-sensitive-paths-webpack-plugin": "2.1.1",
+        "chalk": "1.1.3",
+        "classnames": "^2.2.6",
+        "css-loader": "0.28.7",
+        "dotenv": "4.0.0",
+        "dotenv-expand": "4.2.0",
+        "eslint": "4.10.0",
+        "eslint-config-react-app": "^2.1.0",
+        "eslint-loader": "1.9.0",
+        "eslint-plugin-flowtype": "2.39.1",
+        "eslint-plugin-import": "2.8.0",
+        "eslint-plugin-jsx-a11y": "5.1.1",
+        "extract-text-webpack-plugin": "3.0.2",
+        "file-loader": "1.1.5",
+        "fs-extra": "3.0.1",
+        "html-webpack-plugin": "2.29.0",
+        "jest": "20.0.4",
+        "lodash": "^4.17.10",
+        "object-assign": "4.1.1",
+        "postcss-flexbugs-fixes": "3.2.0",
+        "postcss-loader": "2.0.8",
+        "promise": "8.0.1",
+        "prop-types": "^15.6.2",
+        "raf": "3.4.0",
+        "react": "^16.5.1",
+        "react-dev-utils": "^5.0.2",
+        "react-dom": "^16.4.1",
+        "react-redux": "^5.0.7",
+        "redux": "^4.0.0",
+        "redux-logger": "^3.0.6",
+        "resolve": "1.6.0",
+        "style-loader": "0.19.0",
+        "sw-precache-webpack-plugin": "0.11.4",
+        "url-loader": "0.6.2",
+        "webpack": "3.8.1",
+        "webpack-dev-server": "2.11.3",
+        "webpack-manifest-plugin": "1.3.2",
+        "whatwg-fetch": "2.0.3"
     },
-    "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
-    ],
-    "moduleNameMapper": {
-      "^react-native$": "react-native-web"
+    "scripts": {
+        "start": "PORT=9100 node scripts/start.js",
+        "build": "node scripts/build.js",
+        "test": "jest",
+        "fix-eslint": "eslint src/** --fix"
     },
-    "moduleFileExtensions": [
-      "web.js",
-      "js",
-      "json",
-      "web.jsx",
-      "jsx",
-      "node",
-      "mjs"
-    ]
-  },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  }
+    "devDependencies": {
+        "babel-eslint": "^8.1.1",
+        "eslint": "^5.6.0",
+        "eslint-config-airbnb-base": "^13.1.0",
+        "eslint-plugin-flowtype": "^2.50.1",
+        "eslint-plugin-import": "^2.14.0",
+        "eslint-plugin-jest": "^21.26.2",
+        "eslint-plugin-react": "^7.11.1",
+        "flow-bin": "^0.81.0"
+    },
+    "jest": {
+        "collectCoverageFrom": [
+            "src/**/*.{js,jsx,mjs}"
+        ],
+        "setupFiles": [
+            "<rootDir>/config/polyfills.js"
+        ],
+        "testMatch": [
+            "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
+            "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
+        ],
+        "testEnvironment": "node",
+        "testURL": "http://localhost",
+        "transform": {
+            "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
+            "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
+            "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
+        },
+        "transformIgnorePatterns": [
+            "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
+        ],
+        "moduleNameMapper": {
+            "^react-native$": "react-native-web"
+        },
+        "moduleFileExtensions": [
+            "web.js",
+            "js",
+            "json",
+            "web.jsx",
+            "jsx",
+            "node",
+            "mjs"
+        ]
+    },
+    "babel": {
+        "presets": [
+            "react-app"
+        ]
+    },
+    "eslintConfig": {
+        "extends": "react-app"
+    }
 }
diff --git a/src/components/Layout/Columns/ColumnsComponent.js b/src/components/Layout/Columns/ColumnsComponent.js
@@ -518,18 +518,22 @@ export const getElementLeftRight = (
 export const recalculateChildrenStyles = (
     childrenRefs: Array<{ current: React.ElementRef }>,
     childrenStyles: Array<ChildStyle>,
-    positionShift: number = 0,
 ) => {
-    const { updatedChildrenStyles: result } = childrenRefs.reduce(
-        ({ accumulatedWidth, updatedChildrenStyles }, { current: childRef }, index) => {
+    const { updatedChildrenStyles: newChildrenStyles } = childrenRefs.reduce(
+        (
+            { accumulatedWidth, updatedChildrenStyles },
+            { current: childRef },
+            index,
+        ) => {
             // for right element calculate width and add it to the prev elemenent right
             // for left element put 0, calculate width, increase accumuldatedWidth
             const childStyles = childrenStyles[index];
             if (childStyles.shouldCalculatePositionAfterRender) {
+                const prevChildRight = getPreviousChildRight(updatedChildrenStyles, index);
                 const recalculatedChildStyles = getRecalculatedChildStyle(
                     childRef,
                     childStyles,
-                    positionShift,
+                    prevChildRight,
                 );
                 return {
                     accumulatedWidth: recalculatedChildStyles.right,
@@ -549,19 +553,29 @@ export const recalculateChildrenStyles = (
             updatedChildrenStyles: [],
         },
     );
-    return result;
+    return newChildrenStyles;
 };
 
+const getPreviousChildRight = (
+    childrenStyles: ChildStyle[],
+    currentIndex: number,
+) => (
+    currentIndex > 0
+        ? childrenStyles[currentIndex - 1].right || 0
+        : 0
+);
+
 export const getRecalculatedChildStyle = (
     childRef: React.ElementRef<typeof FocusableComponent>,
     { shouldPositionOutside, shouldCalculatePositionAfterRender, ...rest } : ChildStyle,
-    shift: number,
+    prevElementRight: number,
 ) => {
     const { left, right } = getElementLeftRight(childRef);
+    const width = right - left;
     return {
         ...rest,
-        left: left + shift,
-        right: right + shift,
+        left: prevElementRight,
+        right: prevElementRight + width,
     };
 };
 
diff --git a/src/components/Layout/LazyCollectionRenderer/index.js b/src/components/Layout/LazyCollectionRenderer/index.js
@@ -50,15 +50,14 @@ class LazyCollectionRenderer extends PureComponent {
                 rangeStart,
                 rangeEnd,
             });
-        }, 1);
+        }, 500);
     }
 
     fetchDataForFocusedIndex = (newIndex) => {
         const {
             minVisibleAmountOnRight,
             minVisibleAmountOnLeft,
             totalAmount,
-            shrinkRange,
         } = this.props;
 
         const {
@@ -80,26 +79,12 @@ class LazyCollectionRenderer extends PureComponent {
                 rangeStart: newRangeStart,
                 rangeEnd: newRangeEnd,
             } = shouldRenderMoreOnLeft
-                ? shrinkRange(
-                    getIncreaseRangeOnLeft(rangeStart, rangeEnd, minVisibleAmountOnLeft),
-                    {
-                        leftBuffer: minVisibleAmountOnLeft,
-                        rightBuffer: minVisibleAmountOnRight,
-                    },
-                    -1,
-                )
-                : shrinkRange(
-                    getIncreaseRangeOnRight(
-                        rangeStart,
-                        rangeEnd,
-                        minVisibleAmountOnRight,
-                        totalAmount,
-                    ),
-                    {
-                        leftBuffer: minVisibleAmountOnLeft,
-                        rightBuffer: minVisibleAmountOnRight,
-                    },
-                    1,
+                ? getIncreaseRangeOnLeft(rangeStart, rangeEnd, minVisibleAmountOnLeft)
+                : getIncreaseRangeOnRight(
+                    rangeStart,
+                    rangeEnd,
+                    minVisibleAmountOnRight,
+                    totalAmount,
                 );
 
             const shouldRerenderElements = isRangeDifferent(
