Skip to content

Instantly share code, notes, and snippets.

@11111000000
Created January 24, 2016 17:40
Show Gist options
  • Save 11111000000/c570a5a3d60aa62d7918 to your computer and use it in GitHub Desktop.
Save 11111000000/c570a5a3d60aa62d7918 to your computer and use it in GitHub Desktop.
import { element } from 'deku'
import stateful from 'deku-stateful'
import './styles'
const log = debug('app:Tabs')
function initialState() {
return {
activeTab: 0
}
}
function onCreate({ props, state, setState }) {
const {items} = props
log('onCreate', props, state)
items.forEach((el, i) => {
if (el.active === true) {
setState({ activeTab: i })
}
})
}
function render({ props, state, setState }) {
log('render',props,state)
const { items } = props
const { activeTab } = state
function getHeadings() {
return items.map(({ heading }, i) => (
<div class={['tabs-heading', {'tabs-heading-active': activeTab === i}]}
onClick={() => setState({ activeTab: i })}>
<span>{heading}</span>
</div>
));
}
function getTabs() {
return items.map(({content}, i) => (
<div class={['tab', {'tab-active': activeTab === i}]}>
{content}
</div>
));
}
return (
<div class={['tabs', props.class]}>
<div class='tabs-headings'>
{getHeadings()}
</div>
<div class='tabs-content'>
{getTabs()}
</div>
</div>
);
}
export default stateful({ initialState, onCreate, render })
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment