Merge pull request #2849 from db-ui/chore-code-simplification

chore: code simplifications
db-ui · Jul 10, 2024 · c0e2e83 · c0e2e83
2 parents 866c03b + e9bb247
commit c0e2e83
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 62 deletions.
diff --git a/packages/components/src/components/tabs/tabs.lite.tsx b/packages/components/src/components/tabs/tabs.lite.tsx
@@ -83,56 +83,52 @@ export default function DBTabs(props: DBTabsProps) {
 		},
 		initTabs(init?: boolean) {
 			if (ref) {
-				const tabItems = ref.getElementsByClassName('db-tab-item');
-				if (tabItems?.length > 0) {
-					Array.from<Element>(tabItems).forEach(
-						(tabItem: Element, index: number) => {
-							const label = tabItem.querySelector('label');
-							const input = tabItem.querySelector('input');
-
-							if (input && label) {
-								if (!input.id) {
-									const tabId = `${state._name}-tab-${index}`;
-									label.setAttribute('for', tabId);
-									input.setAttribute(
-										'aria-controls',
-										`${state._name}-tab-panel-${index}`
-									);
-									input.id = tabId;
-									input.setAttribute('name', state._name);
-								}
-
-								if (init) {
-									// Auto select
-									const autoSelect =
-										!props.initialSelectedMode ||
-										props.initialSelectedMode === 'auto';
-									const shouldAutoSelect =
-										(props.initialSelectedIndex ==
-											null &&
-											index === 0) ||
-										props.initialSelectedIndex === index;
-									if (autoSelect && shouldAutoSelect) {
-										input.click();
-									}
-								}
-							}
+				const tabItems = Array.from<Element>(
+					ref.getElementsByClassName('db-tab-item')
+				);
+				for (const tabItem of tabItems) {
+					const index: number = tabItems.indexOf(tabItem);
+					const label = tabItem.querySelector('label');
+					const input = tabItem.querySelector('input');
+
+					if (input && label) {
+						if (!input.id) {
+							const tabId = `${state._name}-tab-${index}`;
+							label.setAttribute('for', tabId);
+							input.setAttribute(
+								'aria-controls',
+								`${state._name}-tab-panel-${index}`
+							);
+							input.id = tabId;
+							input.setAttribute('name', state._name);
 						}
-					);
-				}
 
-				const tabPanels = ref.getElementsByClassName('db-tab-panel');
-				if (tabPanels?.length > 0) {
-					Array.from<Element>(tabPanels).forEach(
-						(panel: Element, index: number) => {
-							if (!panel.id) {
-								panel.id = `${state._name}-tab-panel-${index}`;
-								panel.setAttribute(
-									'aria-labelledby',
-									`${state._name}-tab-${index}`
-								);
+						if (init) {
+							// Auto select
+							const autoSelect =
+								!props.initialSelectedMode ||
+								props.initialSelectedMode === 'auto';
+							const shouldAutoSelect =
+								(props.initialSelectedIndex == null &&
+									index === 0) ||
+								props.initialSelectedIndex === index;
+							if (autoSelect && shouldAutoSelect) {
+								input.click();
 							}
 						}
+					}
+				}
+
+				const tabPanels = Array.from<Element>(
+					ref.querySelectorAll('.db-tab-panel')
+				);
+				for (const panel of tabPanels) {
+					if (panel.id) continue;
+					const index: number = tabPanels.indexOf(panel);
+					panel.id = `${state._name}-tab-panel-${index}`;
+					panel.setAttribute(
+						'aria-labelledby',
+						`${state._name}-tab-${index}`
 					);
 				}
 			}

diff --git a/showcases/react-showcase/src/components/form/index.tsx b/showcases/react-showcase/src/components/form/index.tsx
@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import {
+	DBDivider,
 	DBTabList,
 	DBTabPanel,
-	DBTabs,
-	DBDivider
+	DBTabs
 } from '@db-ui/react-components/src';
 import {
 	DBAccordion,

diff --git a/showcases/vanilla-showcase/src/app-shell.js b/showcases/vanilla-showcase/src/app-shell.js
@@ -36,22 +36,18 @@ onload = () => {
 	const color = queryParameters.color ?? 'neutral-bg-lvl-1';
 	content.className = getClassName(density, color);
 
-	if (selectDensities.length > 0) {
-		for (const selectDensity of selectDensities) {
-			selectDensity.value = density;
-			selectDensity.addEventListener('change', (event) => {
-				insertParameter(queryParameters, 'density', event.target.value);
-			});
-		}
+	for (const selectDensity of selectDensities) {
+		selectDensity.value = density;
+		selectDensity.addEventListener('change', (event) => {
+			insertParameter(queryParameters, 'density', event.target.value);
+		});
 	}
 
-	if (selectColors.length > 0) {
-		for (const selectColor of selectColors) {
-			selectColor.value = color;
-			selectColor.addEventListener('change', (event) => {
-				insertParameter(queryParameters, 'color', event.target.value);
-			});
-		}
+	for (const selectColor of selectColors) {
+		selectColor.value = color;
+		selectColor.addEventListener('change', (event) => {
+			insertParameter(queryParameters, 'color', event.target.value);
+		});
 	}
 
 	if (header) {