react-toolbox-example icon indicating copy to clipboard operation
react-toolbox-example copied to clipboard

Tabs not showing on react-toolbox-example

Open AleCaste opened this issue 8 years ago • 1 comments

Hello. I installed the react-toolbox-example project and was able to use all the components without any problems. All of them except for the "Tabs" component. This component simply doesn't show. See this trivial App.js:

import React from 'react';
import { Button } from 'react-toolbox/lib/button';
//import { Tab, Tabs } from 'react-toolbox';
import { Tabs, Tab } from "react-toolbox/lib/tabs";

class App extends React.Component {
  state = {
    index: 0
  };
  setIndex = index => {
    this.setState({ index });
  };
  render() {
    return (
      <div>
        <div>[Tabs - start]</div>
        <Tabs index={this.state.index} onChange={this.setIndex}>
          <Tab label='Primary'><small>Primary content</small></Tab>
          <Tab label='Secondary' onActive={this.handleActive}><small>Secondary content</small></Tab>
          <Tab label='Third' disabled><small>Disabled content</small></Tab>
          <Tab label='Fourth' hidden><small>Fourth content hidden</small></Tab>
          <Tab label='Fifth'><small>Fifth content</small></Tab>
        </Tabs>
        <div>[Tabs - end]</div>
        <Button label='Click on me!' raised primary />
      </div>
    );
  }
}

export default App;

All I get on the screen is something like:

[Tabs - start]
[Tabs - end]

   Click on me!

The Tabs and Tab objects are imported alright I think (at least they are not null). I tried to import them in 2 different ways (see code above) but the result is the same on both cases. I want to point out the fact that any other component I tried it worked without any issues (and I tried almost all of them!) Any ideas? Alex

AleCaste avatar Aug 16 '17 12:08 AleCaste

Ok, I found what is causing the problem. What happened is that on index.js I commented out the following lines:

// import { overrideComponentTypeChecker } from 'react-toolbox';
...
...

/*overrideComponentTypeChecker((classType, reactElement) => (
    reactElement && (
      reactElement.type === classType
      || reactElement.type.name === classType.displayName
    )
  ));*/

The reason being was that since webpack lacks of tree-shaking capabilities, the bundler was including the whole react-toolbox lib in my bundle for a final size of around 9MB (sourceMaps on). So I decided not to use the overrideComponentTypeChecker, which gave me a bundle size of 3MB. Much better!!!.... but... for some reason the Tabs component is NOT working after that (even after restarting webpack)

If I use overrideComponentTypeChecker then Tabs are working again. This ONLY happens with the Tabs component. All other components I have tried do work no matter I use overrideComponentTypeChecker or not.

Since react-toolbox-example is using v2.0.0-beta.5 or react-toolbox, I tried to upgrade it to v2.0.0-beta.11 but that did not help.

Anyone?

AleCaste avatar Aug 16 '17 15:08 AleCaste