Skip to content

Commit

Permalink
fix: code review
Browse files Browse the repository at this point in the history
  • Loading branch information
@QuentinLeCaignec
QuentinLeCaignec committed Oct 18, 2023
1 parent 500a324 commit 41e0220
Show file tree
Hide file tree
Showing 2 changed files with 148 additions and 11 deletions.
36 changes: 31 additions & 5 deletions packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,24 +84,43 @@ const dropdownButtonWidth = 30;

export interface IResponsiveTabs extends TabsProps {
children: ReactNode;
dropdownButtonAriaLabel?: string;
dropdownButtonProps?: IDropdownButtonProps;
tabs: ReactElement[];
tabs: ReactElement<HTMLButtonElement>[];
tabsListProps?: TabsListProps;
}

export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
const { children, tabs, tabsListProps, dropdownButtonProps, ...tabsProps } =
props;
const {
children,
dropdownButtonAriaLabel = 'Overflow Button',
dropdownButtonProps,
tabs,
tabsListProps,
...tabsProps
} = props;
const { ref, width } = useElementSize<HTMLDivElement>();
const generatedId = useId();
const overflowButtonId = tabsProps.id
? `${tabsProps.id}-overflow-button`
: generatedId;
const [overflowIndex, setOverflowIndex] = useState(tabs.length);
const [opened, setOpened] = useState(false);
const { classes } = useStyles();

function handleTabChange(value: string): void {
if (overflowIndex < tabs.length) {
const activeIndex = tabs.findIndex((tab) => tab.props.value === value);
if (activeIndex >= overflowIndex) {
setOpened(true);
}
}
}

useLayoutEffect(() => {
const tabElements = Array.from(ref.current.children) as HTMLElement[];
// Remove ids of hidden tabs to prevent duplicate ids
tabElements.forEach((el) => el.removeAttribute('id'));
const index = tabElements.findIndex(
// calculate which elements overflow out of parent width, include width of potential dropdown button in the calculation except on last element
(el, i) =>
Expand All @@ -118,25 +137,32 @@ export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
<Tabs
className={classes.container}
classNames={{ tab: classes.tab }}
onTabChange={handleTabChange}
radius="sm"
{...tabsProps}
>
<div ref={ref} className={classes.hidden}>
<div ref={ref} aria-hidden className={classes.hidden} hidden>
{tabs}
</div>
<Tabs.List className={classes.tabs} grow {...tabsListProps}>
{tabs.slice(0, overflowIndex)}
{Boolean(overflowIndex < tabs.length) && (
<DropdownButton
buttonComponent={
<ActionIcon className={classes.button} radius="sm">
<ActionIcon
aria-label={dropdownButtonAriaLabel}
className={classes.button}
radius="sm"
>
<CaretDoubleRight />
</ActionIcon>
}
classNames={{ dropdown: classes.dropdown }}
id={overflowButtonId}
keepMounted
offset={4}
onChange={setOpened}
opened={opened}
position="bottom-end"
{...dropdownButtonProps}
>
Expand Down
123 changes: 117 additions & 6 deletions .../react-front-kit/src/Components/ResponsiveTabs/__snapshots__/ResponsiveTabs.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
id="responsive-tabs"
>
<div
aria-hidden="true"
class="mantine-cdxve1"
hidden=""
>
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
id="responsive-tabs-tab-1"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
Expand All @@ -28,7 +29,6 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
data-testid="test-tab"
id="responsive-tabs-tab-2"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
Expand All @@ -43,7 +43,6 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
id="responsive-tabs-tab-3"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
Expand All @@ -58,7 +57,6 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
id="responsive-tabs-tab-4"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
Expand All @@ -73,7 +71,6 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
id="responsive-tabs-tab-5"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
Expand All @@ -88,7 +85,6 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
id="responsive-tabs-tab-6"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
Expand All @@ -110,6 +106,7 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
aria-controls="responsive-tabs-overflow-button-dropdown"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Overflow Button"
class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1i00min"
id="responsive-tabs-overflow-button-target"
type="button"
Expand All @@ -126,6 +123,120 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
/>
</svg>
</button>
<div
aria-labelledby="responsive-tabs-overflow-button-target"
aria-orientation="vertical"
class="mantine-Menu-dropdown mantine-34g9l4"
data-position="bottom-end"
data-testid="dropdown"
id="responsive-tabs-overflow-button-dropdown"
role="menu"
style="display: none; z-index: 300; top: 0px; left: 0px;"
tabindex="-1"
>
<div
data-autofocus="true"
data-menu-dropdown="true"
style="outline: 0;"
tabindex="-1"
>
<div
class="mantine-rocuxk"
>
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
id="responsive-tabs-tab-1"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
type="button"
>
<span
class="mantine-480qv8 mantine-Tabs-tabLabel"
>
First
</span>
</button>
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
data-testid="test-tab"
id="responsive-tabs-tab-2"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
type="button"
>
<span
class="mantine-480qv8 mantine-Tabs-tabLabel"
>
Second
</span>
</button>
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
id="responsive-tabs-tab-3"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
type="button"
>
<span
class="mantine-480qv8 mantine-Tabs-tabLabel"
>
Third
</span>
</button>
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
id="responsive-tabs-tab-4"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
type="button"
>
<span
class="mantine-480qv8 mantine-Tabs-tabLabel"
>
Fourth
</span>
</button>
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
id="responsive-tabs-tab-5"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
type="button"
>
<span
class="mantine-480qv8 mantine-Tabs-tabLabel"
>
Overflow 1
</span>
</button>
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1d12h3a"
id="responsive-tabs-tab-6"
role="tab"
style="font-size: 16px; font-weight: 600;"
tabindex="0"
type="button"
>
<span
class="mantine-480qv8 mantine-Tabs-tabLabel"
>
Overflow 2
</span>
</button>
</div>
</div>
</div>
</div>
<div
aria-labelledby="responsive-tabs-tab-1"
Expand Down

0 comments on commit 41e0220

Please sign in to comment.