Merge pull request #2055 from spotify/freben/fix-tab-chunking

fix(core): chunk up tabs better

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,

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;
+}