From 19db25eac700058c48ee28bc60f0e0adacfa9cb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Thu, 20 Aug 2020 22:16:19 +0200
Subject: [PATCH] fix(core): chunk up tabs better

---
 packages/core/src/components/Tabs/Tabs.tsx |  8 ++++----
 packages/core/src/components/Tabs/utils.ts | 21 +++++++++++----------
 2 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/packages/core/src/components/Tabs/Tabs.tsx b/packages/core/src/components/Tabs/Tabs.tsx
index 54369de473..336ed2b93b 100644
--- a/packages/core/src/components/Tabs/Tabs.tsx
+++ b/packages/core/src/components/Tabs/Tabs.tsx
@@ -48,7 +48,7 @@ export interface TabsProps {
   tabs: TabProps[];
 }
 
-const useStyles = makeStyles<BackstageTheme>((theme: BackstageTheme) => ({
+const useStyles = makeStyles<BackstageTheme>(theme => ({
   root: {
     flexGrow: 1,
     width: '100%',
@@ -66,7 +66,7 @@ const useStyles = makeStyles<BackstageTheme>((theme: BackstageTheme) => ({
 
 export const Tabs: FC<TabsProps> = ({ tabs }) => {
   const classes = useStyles();
-  const [value, setValue] = useState([0, 0]); // [selectedChunckedNavIndex, selectedIndex]
+  const [value, setValue] = useState([0, 0]); // [selectedChunkedNavIndex, selectedIndex]
   const [navIndex, setNavIndex] = useState(0);
   const [numberOfChunkedElement, setNumberOfChunkedElement] = useState(0);
   const [chunkedTabs, setChunkedTabs] = useState<TabProps[][]>([[]]);
@@ -89,7 +89,7 @@ export const Tabs: FC<TabsProps> = ({ tabs }) => {
   const hasNextNavIndex = () => navIndex + 1 < chunkedTabs.length;
 
   useEffect(() => {
-    // Each time the window is resized we calculate how many tabs wwe can render given the window width
+    // Each time the window is resized we calculate how many tabs we can render given the window width
     const padding = 20; // The AppBar padding
 
     const numberOfTabIcons = navIndex === 0 ? 1 : 2;
@@ -99,7 +99,7 @@ export const Tabs: FC<TabsProps> = ({ tabs }) => {
     const newChunkedElementSize = Math.floor(wrapperWidth / 170);
 
     setNumberOfChunkedElement(newChunkedElementSize);
-    setChunkedTabs(chunkArray([...tabs], newChunkedElementSize));
+    setChunkedTabs(chunkArray(tabs, newChunkedElementSize));
     setValue([
       Math.floor(flattenIndex / newChunkedElementSize),
       flattenIndex % newChunkedElementSize,
diff --git a/packages/core/src/components/Tabs/utils.ts b/packages/core/src/components/Tabs/utils.ts
index 3e0ab6f2c3..8d6a3be5f3 100644
--- a/packages/core/src/components/Tabs/utils.ts
+++ b/packages/core/src/components/Tabs/utils.ts
@@ -13,15 +13,16 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TabProps } from './Tabs';
 
-export const chunkArray = (
-  myArray: TabProps[],
-  chunkSize: number,
-): TabProps[][] => {
-  const results = [];
-  while (myArray.length) {
-    results.push(myArray.splice(0, chunkSize));
+export function chunkArray<T>(array: T[], chunkSize: number): T[][] {
+  if (chunkSize <= 0) {
+    return [array];
   }
-  return results;
-};
+
+  const result: T[][] = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize));
+  }
+
+  return result;
+}