-
-
Notifications
You must be signed in to change notification settings - Fork 303
/
SwipeableTabs.tsx
34 lines (30 loc) · 961 Bytes
/
SwipeableTabs.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { ReactElement } from "react";
import { TabPanels, Tabs, TabsManager } from "@react-md/tabs";
import SwipeablePanel from "./SwipeablePanel";
import useSwipeableIndexes from "./useSwipeableIndexes";
const tabs = ["Tab One", "Tab Two", "Tab Three", "Tab Four"];
export default function SwipeableTabs(): ReactElement {
const { activeIndex, distance, handlers, swiping, onActiveIndexChange } =
useSwipeableIndexes(tabs.length - 1);
return (
<TabsManager
tabs={tabs}
tabsId="swipeable-tabs"
activeIndex={activeIndex}
onActiveIndexChange={onActiveIndexChange}
>
<Tabs />
<TabPanels persistent {...handlers} disableTransition={swiping}>
{tabs.map((_, i) => (
<SwipeablePanel
key={i}
index={i}
distance={distance}
activeIndex={activeIndex}
swiping={swiping}
/>
))}
</TabPanels>
</TabsManager>
);
}