parent
5ff2fbbc39
commit
5bb4ab3a21
@ -1,11 +0,0 @@ |
|||||||
import React from 'react' |
|
||||||
|
|
||||||
export interface ContextInterface { |
|
||||||
tabCount: number, |
|
||||||
tab: number, |
|
||||||
setTab: (number: number) => void, |
|
||||||
} |
|
||||||
|
|
||||||
const Context = React.createContext({} as ContextInterface) |
|
||||||
export const Provider = Context.Provider |
|
||||||
export default Context |
|
@ -1,20 +0,0 @@ |
|||||||
import React, {PropsWithChildren, useContext} from "react"; |
|
||||||
import TabContext, {Mode} from '../../tab-context' |
|
||||||
import TabsContext from "../../context"; |
|
||||||
|
|
||||||
const TabSection = ({children}: PropsWithChildren<any>) => { |
|
||||||
const {tab: activeTab} = useContext(TabsContext) |
|
||||||
const {tab, mode} = useContext(TabContext) |
|
||||||
|
|
||||||
if (Mode.SECTIONS !== mode) { |
|
||||||
return <></> |
|
||||||
} |
|
||||||
|
|
||||||
if (activeTab !== tab) { |
|
||||||
return <></> |
|
||||||
} |
|
||||||
|
|
||||||
return <>{children}</> |
|
||||||
} |
|
||||||
|
|
||||||
export default TabSection |
|
@ -1,20 +0,0 @@ |
|||||||
import React, {PropsWithChildren, useContext} from "react"; |
|
||||||
import TabsContext from '../../context' |
|
||||||
import TabContext, {Mode} from '../../tab-context' |
|
||||||
|
|
||||||
const TabTitle = ({children, className}: PropsWithChildren<any>) => { |
|
||||||
const {setTab} = useContext(TabsContext) |
|
||||||
const {tab, mode} = useContext(TabContext) |
|
||||||
|
|
||||||
if (Mode.TABS !== mode) { |
|
||||||
return <></> |
|
||||||
} |
|
||||||
|
|
||||||
return ( |
|
||||||
<span className={className} onClick={() => {setTab(tab)}}> |
|
||||||
{children} |
|
||||||
</span> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default TabTitle |
|
@ -1,20 +0,0 @@ |
|||||||
import React, {Fragment} from "react"; |
|
||||||
|
|
||||||
interface Props { |
|
||||||
children: React.ReactNode[]; |
|
||||||
} |
|
||||||
|
|
||||||
const Tab = ({children}: Props) => { |
|
||||||
return ( |
|
||||||
<> |
|
||||||
{children.map((child: React.ReactNode, index: number) => { |
|
||||||
return ( |
|
||||||
<Fragment key={index}>{child}</Fragment> |
|
||||||
) |
|
||||||
})} |
|
||||||
</> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default Tab |
|
||||||
|
|
@ -1,46 +0,0 @@ |
|||||||
import React, {FC, Fragment, useState} from "react"; |
|
||||||
import {Provider} from './context' |
|
||||||
import {Mode, Provider as TabProvider} from './tab-context' |
|
||||||
|
|
||||||
interface ITabs { |
|
||||||
children: React.ReactNode[]; |
|
||||||
tabsClassName?: string; |
|
||||||
sectionsClassName?: string; |
|
||||||
} |
|
||||||
|
|
||||||
const Tabs: FC<ITabs> = ({children, tabsClassName, sectionsClassName}) => { |
|
||||||
const [tab, setTab] = useState<number>(0) |
|
||||||
const tabCount = children.length |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<Provider value={{tabCount, tab, setTab}}> |
|
||||||
<div className={tabsClassName}> |
|
||||||
{children.map((child: React.ReactNode, index: number) => { |
|
||||||
return ( |
|
||||||
<Fragment key={index}> |
|
||||||
<TabProvider value={{tab:index, mode: Mode.TABS}}> |
|
||||||
{child} |
|
||||||
</TabProvider> |
|
||||||
</Fragment> |
|
||||||
) |
|
||||||
})} |
|
||||||
</div> |
|
||||||
<div className={sectionsClassName}> |
|
||||||
{children.map((child: React.ReactNode, index: number) => { |
|
||||||
return ( |
|
||||||
<Fragment key={index}> |
|
||||||
<TabProvider value={{tab:index, mode: Mode.SECTIONS }}> |
|
||||||
{child} |
|
||||||
</TabProvider> |
|
||||||
</Fragment> |
|
||||||
) |
|
||||||
})} |
|
||||||
</div> |
|
||||||
</Provider> |
|
||||||
</div> |
|
||||||
) |
|
||||||
} |
|
||||||
|
|
||||||
export default Tabs |
|
||||||
|
|
@ -1,15 +0,0 @@ |
|||||||
import React from 'react' |
|
||||||
|
|
||||||
export enum Mode { |
|
||||||
TABS, |
|
||||||
SECTIONS |
|
||||||
} |
|
||||||
|
|
||||||
export interface ContextInterface { |
|
||||||
tab: number, |
|
||||||
mode: Mode, |
|
||||||
} |
|
||||||
|
|
||||||
const Context = React.createContext({} as ContextInterface) |
|
||||||
export const Provider = Context.Provider |
|
||||||
export default Context |
|
Loading…
Reference in new issue