Init

Preview: http://dashboards.webkom.co/react/airframe

app/components/UncontrolledTabs/UncontrolledTabs.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Provider } from './context';
+
+class UncontrolledTabs extends React.Component {
+    static propTypes = {
+        children: PropTypes.node.isRequired,
+        initialActiveTabId: PropTypes.string
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            activeTabId: this.props.initialActiveTabId || null
+        };
+    }
+
+    render() {
+        return (
+            <Provider value={{
+                setActiveTabId: (tabId) => { this.setState({ activeTabId: tabId }) },
+                activeTabId: this.state.activeTabId
+            }}>
+                { this.props.children }
+            </Provider> 
+        );        
+    }
+}
+
+export { UncontrolledTabs };

app/components/UncontrolledTabs/UncontrolledTabsNavLink.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import _ from 'lodash';
+import { NavLink } from 'reactstrap';
+
+import { Consumer } from './context';
+
+const UncontrolledTabsNavLink = (props) => (
+    <Consumer>
+    {
+        (value) => (
+            <NavLink
+                { ..._.omit(props, ['tabId']) }
+                onClick={ () => { value.setActiveTabId(props.tabId) } }
+                className={ classNames({ active: props.tabId === value.activeTabId }) }
+                href="javascript:;"
+            />
+        )
+    }
+    </Consumer>
+);
+UncontrolledTabsNavLink.propTypes = {
+    tabId: PropTypes.string.isRequired
+};
+
+export { UncontrolledTabsNavLink };
+

app/components/UncontrolledTabs/UncontrolledTabsTabContent.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TabContent } from 'reactstrap';
+
+import { Consumer } from './context';
+
+const UncontrolledTabsTabContent = (props) => (
+    <Consumer>
+    {
+        (value) => (
+            <TabContent { ...props } activeTab={ value.activeTabId } />
+        )
+    }
+    </Consumer>
+);
+
+export { UncontrolledTabsTabContent };

app/components/UncontrolledTabs/context.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const { Provider, Consumer } = React.createContext({});
+
+export {
+    Provider,
+    Consumer
+};

app/components/UncontrolledTabs/index.js

@@ -0,0 +1,8 @@
+import { UncontrolledTabs } from './UncontrolledTabs';
+import { UncontrolledTabsNavLink } from './UncontrolledTabsNavLink';
+import { UncontrolledTabsTabContent } from './UncontrolledTabsTabContent';
+
+UncontrolledTabs.NavLink = UncontrolledTabsNavLink;
+UncontrolledTabs.TabContent = UncontrolledTabsTabContent;
+
+export default UncontrolledTabs;