import {component$, useClientEffect$, useStore, useTask$, $} from '@builder.io/qwik';
import {Tabset, Tab, ITab} from 'ngx-bootstrap';
import {demoComponentContent} from "~/routes/components/tabs/tabs-section.list";
import ExampleComponent from "~/components/example-component/example-component";
export type IState = {
tabsList: ITab[]
};
export default component$(() => {
const state = useStore<IState>({
tabsList: []
});
const customId = 'dynamicTabs';
useTask$(() => {
state.tabsList = [
{
heading: 'basic',
id: 'tabs-dynamic-1'
},
{
heading: 'basic1',
id: 'tabs-dynamic-2'
},
{
heading: 'basic2',
id: 'tabs-dynamic-3'
}
]
});
const addTab = $(() => {
const tab = {
heading: `basic${state.tabsList.length + 1}`,
id: `tabs-dynamic-${state.tabsList.length + 1}`,
removable: true
}
state.tabsList.push(tab);
state.tabsList = Array.from(state.tabsList);
window.dispatchEvent(new CustomEvent('addTabBs', {'detail': {
tabsetId: customId,
tab
}}))
});
const removeAllTabs = $(() => {
const removedTabs = state.tabsList.splice(1, state.tabsList.length - 1);
state.tabsList = Array.from(state.tabsList);
window.dispatchEvent(new CustomEvent('removeTabBs', {'detail': {
tabsetId: customId,
tabs: removedTabs || []
}}))
})
return (
<>
<p>Change quantity of tabs by manipulating tabs array</p>
<button class="btn btn-primary" onClick$={() => addTab()}>Add tab</button>
{state.tabsList.length > 1 ?
(<button className="btn btn-primary" onClick$={() => removeAllTabs()}> Remove all tabs </button>) : ''
}
<hr/>
<Tabset customId={customId}>
{state.tabsList.map((item: ITab, index) => {
return(
<Tab heading={item.heading} id={item.id} key={`key-${item.id}`} removable={item.removable}>Basic content {index}</Tab>
)
})}
</Tabset>
</>
);
});