aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/Tabs.tsx
diff options
context:
space:
mode:
authorAugust Skare <post@augustskare.no>2018-10-18 19:28:44 +0800
committerAugust Skare <post@augustskare.no>2018-10-18 19:28:44 +0800
commitb158a6d7226fb50ecedcc07da8ef30e5e5690e46 (patch)
tree3cab0f55e7f8961be4f6ecc49f5a3f503cd21bc9 /packages/dev-tools-pages/ts/components/Tabs.tsx
parentc616b53c9c95edcc9da34aaaee3b91f5f1787636 (diff)
downloaddexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.gz
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.bz2
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.lz
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.xz
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.tar.zst
dexon-sol-tools-b158a6d7226fb50ecedcc07da8ef30e5e5690e46.zip
initial commit
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Tabs.tsx')
-rw-r--r--packages/dev-tools-pages/ts/components/Tabs.tsx79
1 files changed, 79 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx
new file mode 100644
index 000000000..1efbe1f61
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Tabs.tsx
@@ -0,0 +1,79 @@
+import * as React from 'react';
+import styled from 'styled-components';
+import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs'
+
+import {withContext, Props} from './withContext';
+
+const StyledTabList = styled(TabList)`
+ text-transform: uppercase;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ overflow: hidden;
+`;
+
+const StyledTab = styled(Tab)`
+ height: 2.5rem;
+ padding-left: 1rem;
+ padding-right: 1rem;
+ display: flex;
+ justify-content: space-around;
+ align-items: center;
+ float: left;
+ &:not(:first-of-type) {
+ margin-left: .25rem;
+ }
+ &:focus, &:hover {
+ color: red;
+ outline: 0;
+ }
+`;
+
+const Root = styled.div<{primaryColor: string;}>`
+ ${StyledTab} {
+ background-color: ${props => props.primaryColor};
+ }
+ ${StyledTab}[aria-selected="true"] {
+ background-color: #F1F2F7;
+ }
+`;
+
+interface TabsProps extends Props {
+ children: React.ReactNode;
+}
+
+function Tabs(props: TabsProps) {
+ return (
+ <Root primaryColor={props.colors.secondary}>
+ <ReactTabs>
+ <StyledTabList>
+ { React.Children.map(props.children, child => {
+ const {props} = React.cloneElement(child as React.ReactElement<any>);
+ return <StyledTab>{props.title}</StyledTab>
+ }) }
+ </StyledTabList>
+
+ { React.Children.map(props.children, child => (
+ <TabPanel>{child}</TabPanel>
+ )) }
+ </ReactTabs>
+ </Root>
+ )
+}
+
+interface TabBlockProps {
+ title: string;
+ children: React.ReactNode;
+}
+
+function TabBlock(props: TabBlockProps) {
+ return (
+ <React.Fragment>
+ {props.children}
+ </React.Fragment>
+ )
+}
+
+const ContextTabs = withContext(Tabs);
+
+export {ContextTabs as Tabs, TabBlock}; \ No newline at end of file