fix(review): improve api

Neovici · Sep 23, 2020 · 2cf2fbe · 2cf2fbe
1 parent 0e797c1
commit 2cf2fbe
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 22 deletions.
diff --git a/lib/render.js b/lib/render.js
@@ -96,16 +96,16 @@ const style = `
 }`,
 
 	renderTab = ({
-		elected,
-		onElect,
+		selectedTab,
+		onSelect,
 		href
 	}) => tab => {
-		const isSelected = elected === tab,
+		const isSelected = selectedTab === tab,
 			icon = getIcon(tab, isSelected);
 		return html`<a class="tab" tabindex="-1" role="tab"
 			?hidden=${ tab.hidden } ?disabled=${ tab.disabled }
 			?aria-selected=${ isSelected }
-			@click=${ onElect }
+			@click=${ onSelect }
 			.tab=${ tab }
 			href=${ ifDefined(href(tab)) }
 		>

diff --git a/lib/use-tabs.js b/lib/use-tabs.js
@@ -6,7 +6,7 @@ import {
 	useHashParam, link
 } from './use-hash-param';
 import {
-	elect, getName, isValid
+	choose, getName, isValid
 } from './utils';
 
 const useTabs = host => {
@@ -16,29 +16,29 @@ const useTabs = host => {
 		[tabs, setTabs] = useState([]),
 		param = useHashParam(hashParam),
 		selection = hashParam == null || param == null && selected != null ? selected : param,
-		elected = useMemo(() => elect(tabs, selection), [tabs, selection]);
+		selectedTab = useMemo(() => choose(tabs, selection), [tabs, selection]);
 
 	useEffect(() => {
-		if (!elected) {
+		if (!selectedTab) {
 			return;
 		}
-		elected.toggleAttribute('is-selected', true);
+		selectedTab.toggleAttribute('is-selected', true);
 		const opts = {
 			bubbles: false,
 			composed: true
 		};
-		if (!elected._active) {
-			elected.dispatchEvent(new CustomEvent('tab-first-select', opts));
-			elected._active = true;
+		if (!selectedTab._active) {
+			selectedTab.dispatchEvent(new CustomEvent('tab-first-select', opts));
+			selectedTab._active = true;
 		}
 
-		elected.dispatchEvent(new CustomEvent('tab-select', opts));
+		selectedTab.dispatchEvent(new CustomEvent('tab-select', opts));
 		requestAnimationFrame(() => window.dispatchEvent(new Event('resize')));
 		return () => {
-			elected.toggleAttribute('is-selected', false);
+			selectedTab.toggleAttribute('is-selected', false);
 		};
 
-	}, [elected]);
+	}, [selectedTab]);
 
 	useEffect(() => {
 		const onTabAlter = e => {
@@ -53,9 +53,9 @@ const useTabs = host => {
 
 	return {
 		tabs,
-		elected,
+		selectedTab,
 		onSlot: useCallback(({ target }) => setTabs(target.assignedElements().filter(el => el.matches('cosmoz-tab'))), []),
-		onElect: useCallback(e => {
+		onSelect: useCallback(e => {
 			if (e.button !== 0 || e.metaKey || e.ctrlKey) {
 				return;
 			}
@@ -68,8 +68,7 @@ const useTabs = host => {
 
 			e.preventDefault();
 			window.history.pushState({}, '', href(tab));
-			queueMicrotask(() => window.dispatchEvent(new CustomEvent('hash-changed')));
-
+			requestAnimationFrame(() => window.dispatchEvent(new CustomEvent('hash-changed')));
 		}, []),
 		href
 	};

diff --git a/lib/utils.js b/lib/utils.js
@@ -24,17 +24,17 @@ const isValid = tab => !tab.hidden && !tab.disabled,
 			.join(';');
 	},
 
-	elect = (tabs, selected) => {
+	choose = (tabs, selected) => {
 		if (selected == null) {
 			return tabs.find(isValid);
 		}
-		const selection = tabs.find(tab => getName(tab) === selected);
-		return selection && isValid(selection) ? selection : tabs.find(isValid);
+		const selectedTab = tabs.find(tab => getName(tab) === selected);
+		return selectedTab && isValid(selectedTab) ? selectedTab : tabs.find(isValid);
 	};
 
 
 export {
-	elect,
+	choose,
 	isValid,
 	getIcon,
 	getIconStyle,