starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-19 16:21:25 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Better tab dropdown handling

Browse Source
This commit is contained in:
Gregory Schier
2023-03-20 14:14:30 -07:00
parent ec8bec32ba
commit c5ca3daab3
3 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src-web/components/core/Tabs/Tabs.tsx
View File

@@ -41,7 +41,7 @@ export const Tabs = memo(function Tabs({
for (const tab of tabs ?? []) {
const v = tab.getAttribute('data-tab');
if (v === value) {
tab.setAttribute('tabindex', '0');
tab.setAttribute('tabindex', '-1');
tab.setAttribute('data-state', 'active');
} else {
tab.setAttribute('data-state', 'inactive');
@@ -67,7 +67,7 @@ export const Tabs = memo(function Tabs({
<HStack space={1}>
{tabs.map((t) => {
const isActive = t.value === value;
if (t.options && isActive) {
if (t.options) {
return (
<RadioDropdown
key={t.value}
@@ -78,7 +78,7 @@ export const Tabs = memo(function Tabs({
<Button
color="custom"
size="sm"
onClick={(e) => e.stopPropagation()}
onClick={isActive ? undefined : () => handleTabChange(t.value)}
className={classnames(
isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
)}
@@ -88,21 +88,6 @@ export const Tabs = memo(function Tabs({
</Button>
</RadioDropdown>
);
} else if (t.options && !isActive) {
return (
<Button
key={t.value}
color="custom"
size="sm"
onClick={() => handleTabChange(t.value)}
className={classnames(
isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
)}
>
{t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
<Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
</Button>
);
} else {
return (
<Button