Skip to content

Commit

Permalink
feat: wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@QuentinLeCaignec
QuentinLeCaignec committed Oct 16, 2023
1 parent ddd3481 commit 93f8d2f
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 31 deletions.
17 changes: 11 additions & 6 deletions packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.mock.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,23 +30,28 @@ export const contents = (
</>
);

const style = {
fontSize: 16,
fontWeight: 600,
};

export const tabs = [
<Tabs.Tab key={1} value="1">
<Tabs.Tab key={1} id="tab-1" style={style} value="1">
First
</Tabs.Tab>,
<Tabs.Tab key={2} data-testid="test-tab" value="2">
<Tabs.Tab key={2} data-testid="test-tab" id="tab-1" style={style} value="2">
Second
</Tabs.Tab>,
<Tabs.Tab key={3} value="3">
<Tabs.Tab key={3} style={style} value="3">
Third
</Tabs.Tab>,
<Tabs.Tab key={4} value="4">
<Tabs.Tab key={4} style={style} value="4">
Fourth
</Tabs.Tab>,
<Tabs.Tab key={5} value="5">
<Tabs.Tab key={5} style={style} value="5">
Overflow 1
</Tabs.Tab>,
<Tabs.Tab key={6} value="6">
<Tabs.Tab key={6} style={style} value="6">
Overflow 2
</Tabs.Tab>,
];
75 changes: 68 additions & 7 deletions packages/react-front-kit/src/Components/ResponsiveTabs/ResponsiveTabs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { TabsProps } from '@mantine/core';
import type { IDropdownButtonProps } from '../DropdownButton/DropdownButton';
import type { TabsListProps, TabsProps } from '@mantine/core';
import type { ReactElement, ReactNode } from 'react';

import { ActionIcon, Tabs } from '@mantine/core';
Expand All @@ -9,11 +10,53 @@ import { useLayoutEffect, useState } from 'react';

import { DropdownButton } from '../DropdownButton/DropdownButton';

const useStyles = createStyles(() => ({
const useStyles = createStyles((theme) => ({
button: {
'&[data-expanded]': {
backgroundColor:
theme.colorScheme === 'light'
? theme.colors.gray[0]
: theme.colors.dark[6],
},
':hover': {
background:
theme.colorScheme === 'light'
? theme.colors.gray[0]
: theme.colors.dark[6],
},
alignSelf: 'center',
marginBottom: 6,
marginLeft: 'auto',
},
container: {
position: 'relative',
},
dropdown: {
background:
theme.colorScheme === 'light' ? theme.white : theme.colors.dark[0],
borderColor:
theme.colorScheme === 'light' ? theme.white : theme.colors.dark[0],
borderRadius: 4,
padding: '20px',
},
dropdownContainer: {
'> .mantine-Tabs-tab': {
'&[data-active]': {
background: theme.colors.gray[0],
border: 'none',
},
':hover': {
backgroundColor: theme.colors.gray[0],
border: 'none',
},
'> span': {
color: theme.colorScheme === 'light' ? theme.black : theme.white,
fontWeight: 'initial',
},
border: 'none',
borderRadius: 4,
padding: '10px',
},
display: 'flex',
flexDirection: 'column',
},
Expand All @@ -26,18 +69,27 @@ const useStyles = createStyles(() => ({
visibility: 'hidden',
width: '100%',
},
tab: {
'&[data-active]': {
color: theme.colorScheme === 'light' ? theme.black : theme.colors.dark[0],
},
paddingBottom: 16,
},
tabs: {
flexWrap: 'nowrap',
},
}));

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

export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
const { children, tabs, ...tabsProps } = props;
const { children, tabs, tabsListProps, dropdownButtonProps, ...tabsProps } =
props;
const { ref, width } = useElementSize<HTMLDivElement>();
const overflowButtonId = useId();
const [overflowIndex, setOverflowIndex] = useState(tabs.length);
Expand All @@ -57,22 +109,31 @@ export function ResponsiveTabs(props: IResponsiveTabs): ReactNode {
}, [overflowButtonId, ref, tabs.length, width]);

return (
<Tabs {...tabsProps} className={classes.container}>
<Tabs
className={classes.container}
classNames={{ tab: classes.tab }}
radius="sm"
{...tabsProps}
>
<div ref={ref} className={classes.hidden}>
{tabs}
</div>
<Tabs.List className={classes.tabs}>
<Tabs.List className={classes.tabs} grow {...tabsListProps}>
{tabs.slice(0, overflowIndex)}
{Boolean(overflowIndex < tabs.length) && (
<DropdownButton
buttonComponent={
<ActionIcon>
<ActionIcon className={classes.button} radius="sm">
<CaretDoubleRight />
</ActionIcon>
}
classNames={{ dropdown: classes.dropdown }}
id={overflowButtonId}
offset={4}
position="bottom-end"
{...dropdownButtonProps}
>
<div className={classes.dropdown}>
<div className={classes.dropdownContainer}>
{tabs.slice(overflowIndex, tabs.length)}
</div>
</DropdownButton>
Expand Down
131 changes: 113 additions & 18 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 @@ -3,20 +3,115 @@
exports[`ResponsiveTabs matches snapshot 1`] = `
<div>
<div
class="mantine-Tabs-root mantine-ro6hk9"
style="overflow: hidden;"
class="mantine-Tabs-root mantine-1w1w6vj"
id="responsive-tabs"
>
<div
class="mantine-cdxve1"
>
<button
aria-selected="false"
class="mantine-UnstyledButton-root mantine-Tabs-tab mantine-1kjub9k"
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-1kjub9k"
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-1kjub9k"
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-1kjub9k"
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-1kjub9k"
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-1kjub9k"
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
aria-orientation="horizontal"
class="mantine-Tabs-tabsList mantine-i7gwaj"
class="mantine-Tabs-tabsList mantine-1c0ih2u"
role="tablist"
>
<button
aria-controls="mantine-xj4wuvfjs-dropdown"
aria-controls="responsive-tabs-overflow-button-dropdown"
aria-expanded="false"
aria-haspopup="menu"
class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-3zan65"
id="mantine-xj4wuvfjs-target"
class="mantine-UnstyledButton-root mantine-ActionIcon-root mantine-1wqogov"
id="responsive-tabs-overflow-button-target"
type="button"
>
<svg
Expand All @@ -33,9 +128,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
</button>
</div>
<div
aria-labelledby="mantine-ocee5lhcn-tab-1"
aria-labelledby="responsive-tabs-tab-1"
class="mantine-Tabs-panel mantine-18ozoug"
id="mantine-ocee5lhcn-panel-1"
id="responsive-tabs-panel-1"
role="tabpanel"
>
<div
Expand All @@ -45,9 +140,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
</div>
</div>
<div
aria-labelledby="mantine-ocee5lhcn-tab-2"
aria-labelledby="responsive-tabs-tab-2"
class="mantine-Tabs-panel mantine-18ozoug"
id="mantine-ocee5lhcn-panel-2"
id="responsive-tabs-panel-2"
role="tabpanel"
>
<div
Expand All @@ -57,9 +152,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
</div>
</div>
<div
aria-labelledby="mantine-ocee5lhcn-tab-3"
aria-labelledby="responsive-tabs-tab-3"
class="mantine-Tabs-panel mantine-18ozoug"
id="mantine-ocee5lhcn-panel-3"
id="responsive-tabs-panel-3"
role="tabpanel"
>
<div
Expand All @@ -69,9 +164,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
</div>
</div>
<div
aria-labelledby="mantine-ocee5lhcn-tab-4"
aria-labelledby="responsive-tabs-tab-4"
class="mantine-Tabs-panel mantine-18ozoug"
id="mantine-ocee5lhcn-panel-4"
id="responsive-tabs-panel-4"
role="tabpanel"
>
<div
Expand All @@ -81,9 +176,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
</div>
</div>
<div
aria-labelledby="mantine-ocee5lhcn-tab-5"
aria-labelledby="responsive-tabs-tab-5"
class="mantine-Tabs-panel mantine-18ozoug"
id="mantine-ocee5lhcn-panel-5"
id="responsive-tabs-panel-5"
role="tabpanel"
>
<div
Expand All @@ -93,9 +188,9 @@ exports[`ResponsiveTabs matches snapshot 1`] = `
</div>
</div>
<div
aria-labelledby="mantine-ocee5lhcn-tab-6"
aria-labelledby="responsive-tabs-tab-6"
class="mantine-Tabs-panel mantine-18ozoug"
id="mantine-ocee5lhcn-panel-6"
id="responsive-tabs-panel-6"
role="tabpanel"
>
<div
Expand Down

0 comments on commit 93f8d2f

Please sign in to comment.