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