osjs-gui icon indicating copy to clipboard operation
osjs-gui copied to clipboard

Provide a non-nestable version of Tabs component

Open andersevenrud opened this issue 6 years ago • 0 comments

Currently the Tabs component is using hyperapp-nestable, which is great, but when you update a component property, it will not react to this unless you specify a key.

The downside to this is that it will force you to re-render the component.

To get around this, a slightly different version of the tabs component could be added:

app({
  selectedTab: -1,
  tabs: ['My Tab']
}, {
  setSelectedTab: selectedTab => ({selectedTab})
}, (state, actions) => {
  return h(Tabs, {
    selectedIndex: state.selectedTab,
    labels: state.tabs,
    onchange: (ev, index) => actions.setSelectedTab(index)
  }, [
    h(Box, {}, 'Tab contents'}
  ]);
}, $content);

This requires developer to wire up the tab switch event.

andersevenrud avatar Feb 24 '19 22:02 andersevenrud