diff --git a/lib/render.js b/lib/render.js index d7e1068..3ba1dec 100644 --- 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` diff --git a/lib/use-tabs.js b/lib/use-tabs.js index f2893bb..dde9b19 100644 --- 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 index 8313580..a7fab0f 100644 --- 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,