Programatically control active tab for tabbar

[r1cs1]

Hi guys,

I'm trying to programatically control active tab for tabbar, however neither activeTabIndex on TabBar, nor active prop on Tab is working.

Am I missing something or that's expected?

Thanks,
Richard

[cromefire]

Can you share how you try to do this? I think I know what's going wrong and if so a fix is on the way.

[replaysMike]

Oh man I just came here to ask that exact question as well. I'll show you what I did, it's an awful solution in my opinion but the docs here are pretty scarce in detail.

handleTabChange = (e) => {
	// todo: this feels old school, do Tabs component handle content selection?
	const targetName=e.toElement.getAttribute('tab');
	const panelsContainer = document.getElementById('panels');
	var panels = panelsContainer.getElementsByTagName('*');
	for(var i=0,len=panels.length; i<len; i++){
		panels[i].style = 'display: none;'
	const target = document.getElementById(targetName);
	target.style = 'display: block';
	};
}

render(props, state) {
	return (
		<div>
			<Tabs onClick={this.handleTabChange}>
				<Tabs.Tab tab="panel-1" active={true}><Icon>favorite</Icon>Tab 1</Tabs.Tab>
				<Tabs.Tab tab="panel-2">Tab 2</Tabs.Tab>
				<Tabs.Tab tab="panel-3">Tab 3</Tabs.Tab>
			</Tabs>
			<section id="panels">
				<p id="panel-1">Tab 1 Content</p>
				<p id="panel-2" hidden={true}>Tab 2 Content</p>
				<p id="panel-3" hidden={true}>Tab 3 Content</p>
			</section>
		</div>
	);
}

I hope someone else can chime in and indicate the proper way to do things, I've spent a few hours looking at the examples and source with no answer.

[replaysMike]

In addition to that, for me I get this when trying to use the TabBar (since Tabs is marked as deprecated):

Module not found: Error: Can't resolve 'preact-material-components/TabBar'
¯\_(ツ)_/¯

[r1cs1]

Here's a dummy example, because my code too complex to paste here. I hope I didn't mess it up .

Also, I'm using 1.5.1-beta1 because that's the only one that compiles with little mods with my typescript setup

handleClick = event => {
  this.setState({ active: +event.target.dataset.index });
}

render() {
  return (
    <TabBar>
      <TabBar.Tab onClick={this.handleClick } data-index="0" active={this.state.active === 0}>A</TabBar.Tab>
      <TabBar.Tab onClick={this.handleClick } data-index="1" active={this.state.active === 1}>B</TabBar.Tab>
      <TabBar.Tab onClick={this.handleClick } data-index="2" active={this.state.active === 2}>C</TabBar.Tab>
    </TabBar>
  )
}

[cromefire]

Yes I think it's a thing that is linked to #931

[cromefire]

@replaysMike I think your version is too old for TabBar

[cromefire]

@r1cs1 your example seems fine, as long as that +event.target.dataset.index line works fine. I will look into getting that fixed.

[replaysMike]

@cromefire indeed you seem to be right, I'm running 1.5.0 (default installed for npm install preact-material-components)

[cromefire]

Yes the docs are already representing the beta version and there is currently no good way to see the older docs

[cromefire]

@r1cs1 Also there is the activeTabIndex on TabBar, which is one of the many features left to be documented. Give it a number and it sets that one active (according to the docs).

[cromefire]

@r1cs1 Please try 1.5.1-experimental7 it should fix both activeTabIndex and active

[cromefire]

I'm not sure, if active is working, it seems to have problems, I don't even know if that's supported anymore or there may be a problem with Tab in general.

[r1cs1]

@cromefire now active seems to be working when it's set outside of TabBar. I mean if I set the state NOT via onclick event on the Tab elements. Basically what I want to achieve is to cancel tab switching based on some conditions. However it seems internal click handlers are more powerful :)

[r1cs1]

@cromefire On the other hand, I always get the following error since 1.5.1-xxx

ERROR in [at-loader] ./node_modules/preact-material-components/Base/types.d.ts:2:11
    TS2322: Type 'T' is not assignable to type 'string'.
  Type 'string | number | symbol' is not assignable to type 'string'.
    Type 'number' is not assignable to type 'string'.

ERROR in [at-loader] ./node_modules/preact-material-components/Base/types.d.ts:4:11
    TS2322: Type 'U' is not assignable to type 'string'.
  Type 'string | number | symbol' is not assignable to type 'string'.
    Type 'number' is not assignable to type 'string'.

Replacing it by this code seems to solve it, but not sure if it causes any other issues or if it's correct liek that:

export declare type OmitAttrs<T extends {
    [attr: string]: any;
}, O extends {
    [attr: string]: any;
}> = Pick<T, keyof { [K in Exclude<keyof T, keyof O>]: T[K] }>

[cromefire]

Yes that's something that needs to be changed, doing that tomorrow (CEST).

[cromefire]

@r1cs1 I would try activeTabIndex anyway as it seems simpler for you and I don't really get, what you changed and mean with

internal click handlers

[prateekbh]

Yeah tabBar isn't really a prop friendly underneath.
Please use .MDComponent.setActive() on the ref of tabbar

[prateekbh]

Also same for Tabs

[prateekbh]

Example: https://1040718yoq.codesandbox.io

P.s. swipe left right for active tabs

[r1cs1]

@prateekbh Thanks, man! .MDComponent.activateTab(index) on the TabBar works like a charm

[cromefire]

So as it seems to work like this I'll close it.

[thadeu]

Example: https://1040718yoq.codesandbox.io

P.s. swipe left right for active tabs

what is this repository?

[prateekbh]

nuka carousel

[thadeu]

@prateekbh I'd like see the code TabBar full component

[cromefire]

https://codesandbox.io/s/1040718yoq
That looks like something that would be nice to include in the 2.0 Tabs (in like a subclass)

[thadeu]

@cromefire thanks so much!