reactjs / react-tabs Goto Github PK

Hi, whilst looking further at the component to possibly fix the serverside rendering issue I noticed the copyPropsToState - this seems like an antipattern why do this here?

https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html
getInitialState() {
return this.copyPropsToState(this.props);
},

Hi. I have an onclick event fire from one of my tabs, but on fire, it somehow reset the tab index to go back to the first tab. Say i have 2 tabs, and i'm on the second page of the tab 2, which has Griddle table, when i click on something in one of the griddle's table column ( i have an onclick on an item there ) it triggers the react tab to go back to the first tab vs staying put. I need it to stay put on tab 2 vs somehow route back to tab 1. Any ideas?

const LinkComponent = ({ data, rowData }) => {
  let result = <span></span>;
  if (data) {
    result = (
      <div>
        <span>{rowData.user}</span>&nbsp;
        <span onClick={this.props.onClickUserDetails.bind(this, rowData.user)}>
          <i className='fa fa-info-circle fa-lg'></i>
        </span>
      </div>
    );
  }
  return result;
};
const columnMeta = [
  {
    columnName: 'user',
    order: 1,
    locked: false,
    visible: true,
    customComponent: LinkComponent,
    displayName: 'User ID',
  },

in latest chrome, tab keyboard doesn't focus tabs

is it possible to support bower and npm as package managers and not only npm??

Hello! Thank you for good tabs :-)

I faced with problem when use component on server-side:

import React from 'react';
import ReactTabs from 'react-tabs';

const Tabs = ReactTabs.Tabs,
    TabList = ReactTabs.TabList,
    Tab = ReactTabs.Tab,
    TabPanel = ReactTabs.TabPanel;

export default React.createClass({
    render: function() {
        return (
            <Tabs>
                <TabList>
                    <Tab>One</Tab>
                    <Tab>Two</Tab>
                    <Tab>Three</Tab>
                </TabList>
                <TabPanel>
                    <h2>Hello from One</h2>
                </TabPanel>
                <TabPanel>
                    <h2>Hello from Two</h2>
                </TabPanel>
                <TabPanel>
                    <h2>Hello from Three</h2>
                </TabPanel>
            </Tabs>
        );
    }
});

ReferenceError: document is not defined
    at injectCSS (/Users/tenorok/projects/multf/node_modules/react-tabs/node_modules/js-stylesheet/jss.js:21:17)
    at jss (/Users/tenorok/projects/multf/node_modules/react-tabs/node_modules/js-stylesheet/jss.js:6:5)
    at componentWillMount (/Users/tenorok/projects/multf/node_modules/react-tabs/lib/components/Tabs.js:66:35)
    at ReactCompositeComponentMixin.mountComponent (/Users/tenorok/projects/multf/node_modules/react/lib/ReactCompositeComponent.js:228:14)
    at wrapper [as mountComponent] (/Users/tenorok/projects/multf/node_modules/react/lib/ReactPerf.js:70:21)
    at Object.ReactReconciler.mountComponent (/Users/tenorok/projects/multf/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/tenorok/projects/multf/node_modules/react/lib/ReactMultiChild.js:192:44)
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/tenorok/projects/multf/node_modules/react/lib/ReactDOMComponent.js:289:32)
    at ReactDOMComponent.Mixin.mountComponent (/Users/tenorok/projects/multf/node_modules/react/lib/ReactDOMComponent.js:199:12)
    at Object.ReactReconciler.mountComponent (/Users/tenorok/projects/multf/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactCompositeComponentMixin.mountComponent (/Users/tenorok/projects/multf/node_modules/react/lib/ReactCompositeComponent.js:247:34)
    at wrapper [as mountComponent] (/Users/tenorok/projects/multf/node_modules/react/lib/ReactPerf.js:70:21)
    at Object.ReactReconciler.mountComponent (/Users/tenorok/projects/multf/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactCompositeComponentMixin.mountComponent (/Users/tenorok/projects/multf/node_modules/react/lib/ReactCompositeComponent.js:247:34)
    at wrapper [as mountComponent] (/Users/tenorok/projects/multf/node_modules/react/lib/ReactPerf.js:70:21)
    at Object.ReactReconciler.mountComponent (/Users/tenorok/projects/multf/node_modules/react/lib/ReactReconciler.js:38:35) [ReferenceError: document is not defined]

I can't understand how fix this, can you help me please?

This is just a placeholder for a conversation to be had about how to use the latest react-tabs in Tweed. Currently, SHA a3f400a and forward seems to be giving us grief. Possibly because of React 0.13 incompat?

There is no react dependency in package.json in the version that's pushed to npm.
This is apparently fixed in master so please push to npm.

I'm using inline styles for my app. it'd be nice if I could continue to just add style attributes to style the Tabs, etc. I tried doing this but doesn't seem they're allowed.

When testing a react-tabs component either with TestUtils.renderIntoDocument or TestUtils.createRenderer the component prints the warning:

Warning: Failed propType: There should be an equal number of `Tabs` and `TabPanels`. Received 3 `Tabs` and 0 `TabPanels`.

When running exactly the same code in the browser there is no error.

I'm using react-tabs 0.4.1 and react 0.13.3.

Hello. Can I assign my custom id to panel?
I need to have been panel ids: ['actions', 'news', 'something'].
Can I do this?

Hey @mzabriskie,

Would you accept a PR that updated this to work with React 0.13? I see there are a few open PRs and don’t want to put in the effort if it will be left neglected. What are your requirements and constraints to accept 0.13 support?

Repro:
Add <a></a> to tablist <Tab>

Notice:
Clicking on the <a></a> in the <Tab> doesn't do anything

Expect:
Click event to bubble up to trigger select

Hello! Thank you for the library! I have a question about dynamic addition of tabs. In pseudo code it's looks like this:

handleAddProfileClick() {
    this.refs.tabs.add(
     <UserProfileTab userId="123" />
    );
},
handleAddSettingsClick() {
    this.refs.tabs.add(
     <Settings  />
    );
}

It is also important that other tabs are not redrawn (kept its state).
How about tab closing?
Thanks a lot!

Server side rendering won't work. I get the same error as described in /issues/39.

Tabs.js:81 [object Object].componentWillMount
[app]/[react-tabs]/lib/components/Tabs.js:81:37

Are react-tabs supposed to work on the server side? If not, any plans on supporting them?

I think this happens because you are cloning elements outside of render?

Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs.
This usually means that you're trying to add a ref to a component that doesn't have an
owner (that is, was not created inside of another component's `render` method). Try 
rendering this component inside of a new top-level component which will hold the ref.

Using [email protected] and [email protected].

We're having some difficulty upgrading React in our application because the latest version of react-tabs limits us to 0.14.x

I can see a commit in master on package.json which bumps support - time for a new tagged release?

Cheers 😄

I found an extreme edge case bug but nevertheless it's something I believe could effect many users of this project.

It turns out Typekit's code snippet overrides Element.prototype.setAttribute as follows:

t.setAttribute = function(e, r, i, l) {
        r.match(s) && (i = new XMLHttpRequest,
        i.open("GET", r, !0),
        i.onreadystatechange = function() {
            4 === i.readyState && (l = i.responseText,
            l !== o && (n[a] = l))
        }
        ,
        i.send(null ),
        t.setAttribute = u,
        o) || u.apply(this, arguments)
    }

And in the Tab.js component we have this:

node.setAttribute('tabindex', 0);

Which is causing the following error, only in Safari:

TypeError: r.match is not a function. (In 'r.match(s)', 'r.match' is undefined)

This is happening because the "r" argument of Typekit's custom setAttribute is expected to be a string, however it's receiving an integer 0, which has no match function.

So the fix is just change the line above to:

node.setAttribute('tabindex', '0');

making it configurable would be just fine. Thanks.

So, when i try to so this.setState({}) on select, the code in handleSelected will be executed but the tabs will stop changing.

  handleSelected(index, last) {
    console.log('Selected tab: ' + index + ', Last tab: ' + last);
    if (index == 1) {

      console.log(index);
      this.setState({paymentType: 'paypal'})
    }
    else {

      this.setState({paymentType: 'creditcard'})
    }
  }

in latest chrome, tab keyboard doesn't focus tabs in online demo.

The BEM classes added to each component are super useful for applying custom styling. However, because the default styles have a high specificity (e.g. .react-tabs [role=tab][aria-selected=true]:hover), the purpose of adopting BEM is defeated slightly.

I propose using low specificity BEM classes for the default styles, so that they may be overridden more easily

I want to display the tab content above the tabs, eg:

      <Tabs>
        <TabPanel>
          This is content for tab 1
        </TabPanel>
        <TabPanel>
          This is content for tab 2
        </TabPanel>
        <TabPanel>
          This is content for tab 3
        </TabPanel>
        <TabList>
          <Tab>Tab 1</Tab>
          <Tab>Tab 2</Tab>
          <Tab>Tab 3</Tab>
        </TabList>
      </Tabs>

Unfortunately, this does not work. Clicking the tabs doesn't do anything.
Is this possible with react-tabs? If yes, how?

we would love to use this in our project. but we use webpack for our build, bundling process. As the component files are saved ending .js there is a configuration overhead (webback transforms just jsx files).

as we got multiple projects having to put special configurations to every project - so right now simplest solution would be to create a fork (renaming the files to abc.jsx or serve already transformed files in that fork.)

JedWatson/react-select#40 is an interesting discussion about the same topic.

do you consider to optimize this for webpack usage?!?

https://github.com/rackt/eslint-config-rackt contains a starting point that all org repos can build off of. This can be introduced by first using the config and overriding any rules that the repo doesn't comply with, without having to change any of the source. Then for non-controversial rules, PRs can be made to update the source to comply.

Here's the initial PR: #47

I just forked the repository. However, when execute npm test , it failed.
The log out of npm-debu.log listed below.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'test' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'pretest', 'test', 'posttest' ]
5 info pretest [email protected]
6 info test [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec test script
9 verbose stack Error: [email protected] test: `rackt test --single-run --browsers Firefox`
9 verbose stack Exit status 1
9 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:214:16)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at EventEmitter.emit (events.js:172:7)
9 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
9 verbose stack     at emitTwo (events.js:87:13)
9 verbose stack     at ChildProcess.emit (events.js:172:7)
9 verbose stack     at maybeClose (internal/child_process.js:818:16)
9 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
10 verbose pkgid [email protected]
11 verbose cwd /Users/chiehlun/Project/react/react-tabs
12 error Darwin 15.3.0
13 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "test"
14 error node v4.2.2
15 error npm  v2.14.7
16 error code ELIFECYCLE
17 error [email protected] test: `rackt test --single-run --browsers Firefox`
17 error Exit status 1
18 error Failed at the [email protected] test script 'rackt test --single-run --browsers Firefox'.
18 error This is most likely a problem with the react-tabs package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error     rackt test --single-run --browsers Firefox
18 error You can get their info via:
18 error     npm owner ls react-tabs
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

Not necessarily react-tabs's fault, but here's a scenario I encountered:

1. Page loads and my Tabs component renders. Works fine.
2. I click a link on one of my panels.
3. Turbolinks intercepts the click, caches the current page DOM and loads the new content.
4. I hit the back button. Turbolinks restored my cached page.
5. Tabs are in the exact state I left them in (yay!), but I can't tab to new panels. Eventually react throws an error.

I got around this by listening to Turbolink's page:change event and emptying out the component's container DIV every time, which means you lose state when you travel back to my first page, but at least it works.

I debugged it a bit and found that handleClick was firing, as was setSelected. State was getting updated but the component wasn't re-rendering as expected.

If you have any insight at all as to what might be going on here, that'd be awesome. But feel free to close this regardless :).

As react-tabs has react listed as peerDependencies, npm will install another copy of React that is compatible with the listed version.

If the application requires another incompatible version, it will cause two copies of React to be loaded. As React does not support loading multiple versions on the same page, the application will break.

I propose that the peerDependencies in package.json should be moved to devDependencies.

The tabs I'm using are in a div which has an onClick event, which triggers whenever I click on a tab (since it's in the div). I want to suppress this, and have been using the code onClick={(evt) => this.suppressClick(evt)} to accomplish this elsewhere. However, it doesn't work (as in, it won't enter the suppressClick function at all) in the tab code, no matter where I put it; I've tried to put it as a property in the <TabList> and <Tab> tags to no avail. I know it works in <div>s so I put one around the <tab> tags but that disabled clicking on the tabs entirely. What's the recommended method to disable click event propagation for these tabs?

So I believe this is related to #23 and #15.

I can't figure out why all of React is bundled inside of dist/react-tabs.js and dist/react-tabs.min.js. As far as I can tell this makes it impossible to include react-tabs on a project that already has React as a dependency. Ideally we wouldn't be dependent on a single plugin to provide the version of React that everything in a project would use. This seems to be a particular problem when using bower. As far as this warning:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

Am I missing something? Or would it be possible to include a /dist version of react-tabs that doesn't include React itself?

I mean, if the passed model has not an active tab, why should we open one by default?
Doesn't it leads to inconsistence with the data model and the view?

Thanks.

This will require some changes to the build.

Need to move React to peerDependencies. This solves the following error:

Uncaught Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

here

hide it?
maybe we should just generate the selected panel html.

These are warnings when using React 0.10.0, but are fatal errors using 0.11.0.

The three references are:

• setState
• setSelected
• getId

I do it as this, but the first tab seems not clickable.

getInitialState() {
return {
      selectedIndex: 0
    };
},
handleSelect(index, last) {
    this.setState({
       selectedIndex: index
    });
}

tabs:

<Tabs
onSelect={this.handleSelect}
selectedIndex={0}
 >
  <TabList>
     <Tab>
      <div className={
cx({"bg-color-w": (this.state.selectedIndex == 0?true:false)
                            })}>涨幅榜
</div>
...

please give me a hint~~thanks very much. 😃

Any plans for react 15 support? I tried forking and getting started to upgrade but npm start has some other errors..

Eg <ReactTabs.Tab className="foobar"> would result in the class foobar ending up on the resulting tab wrapper element

Hi there is a checksum error when using serverside rendering..
(client) tab" id="react-tabs-0" aria-selected="tr
(server) tab" id="react-tabs-4" aria-selected="tr

Any ideas what it could be?

If we define a custom class name for the tab component, we shouldn't add --selected and --disabled classes with the custom class?

https://github.com/rackt/react-tabs/blob/master/lib/components/Tab.js#L56-L60

Hi,
Very small issue here: when there are (presumably temporarily) no child elements for the tabs elements, then the page doesn't load due to the following code:

                // Setup tab/panel ids
        React.Children.forEach(this.props.children[0].props.children, function () {
            tabIds.push(uuid());
            panelIds.push(uuid());
        });

Uncaught TypeError: Cannot read property 'children' of undefined 

This will make react-tabs show up on http://react-components.com and make it easier for people to find. Thanks!

Hey @mzabriskie,

Since this component is of such high quality, have you considered transferring it to the https://github.com/rackt org to build up that list of quality components?

i tried using react-tabs as a "controlled component", a la https://facebook.github.io/react/docs/forms.html#controlled-components

for react-tabs to behave as a proper controlled component, the behavior i would expect is as such:

if you pass <Tabs> a selectedIndex property, then it will ALWAYS be respected. i.e., the prop is not used merely to determine which tab to render initially, it's used to determine which tab to render all the time. so even if a user clicks a tab, that tab won't be selected unless the parent component reacts to the click by changing the selectedIndex. therefore, onSelect gets invoked when a Tab is clicked or keyboard-navigated to, which allows the developer to update selectedIndex appropriately.

a minimal example is as follows:

var MyComponent = React.createComponent({
  getInitialState () {
    return { currentTab: 0 };
  },
  handleTabSelect (index) {
    this.setState({ currentTab: index });
  },
  render () {
    return (
      <Tabs
        selectedIndex={ this.state.currentTab },
        onSelect={ this.handleTabSelect }
      >
        <TabList><Tab>One</Tab><Tab>Two</Tab></TabList>
        <TabPanel><p>Content of first tab</p></TabPanel>
        <TabPanel><p>Content of second tab</p></TabPanel>
      </Tabs>
    );
  }
});

If you try it, this minimal example actually mostly behaves as expected, but the problem I discovered is if you focus one of the tabs and then use the arrow key to navigate to the other, the other tab gets selected but your focus is immediately lost. If you remove both of those props from <Tabs>, then this issue goes away, but now MyComponent isn't keeping track of the selected tab in its state. (In our particular case, we want MyComponent to keep track of that index because we sometimes programmatically select a different tab based on other things going on in the component.)

Also, if you change the example such that handleTabSelect doesn't update this.state.currentTab, then react-tabs still changes its selected tab anyway -- i.e. it ignores its selectedIndex prop.

So, what do you think? Does controlled component behavior make sense for react-tabs? Is it perhaps something that's already on the roadmap?

Warning: cloneWithProps(...) is deprecated. Please use React.cloneElement instead.
Warning: Tab.getDOMNode(...) is deprecated. Please use ReactDOM.findDOMNode(instance) instead.

<Tabs selectedIndex={1}>
              <TabList>
                <Tab>Disclosure Req.</Tab>
                <Tab>Page Instructions</Tab>
              </TabList>
              <TabPanel>
                <Instructions sectionName="DisclosuresRequirements" source="disclosures/instruction" />
              </TabPanel>
              <TabPanel>
                <Tabs selectedIndex={1}>
                  <TabList>
                    <Tab>Disclosure Req.</Tab>
                    <Tab>Page Instructions</Tab>
                 </TabList>
                  <TabPanel>
                    <Instructions sectionName="DisclosuresRequirements" source="disclosures/instruction" />
                  </TabPanel>
                  <TabPanel>
                    <Instructions sectionName="EffortSummary" source="effort/instruction" />
                  </TabPanel>
                </Tabs>
              </TabPanel>
            </Tabs>

When I click on inner second Tab it change parent second tab.
Who can help me with this problem?

If you use a ternary condition to return a null instead of a Tab react-tabs you get a "Uncaught TypeError: Cannot read property 'ref' of null".

Example

<div>
  <Tabs>
    { shouldShowTabA ? <Tab>Tab A</Tab> : null }
    { shouldShowTabB ? <Tab>Tab B</Tab> : null }
  </Tabs>
  { shouldShowTabA ? <TabPanel>{contentForA}</TabPanel> : null }
  { shouldShowTabB ? <TabPanel>{contentForB}</TabPanel> : null }
</div>

The assumption here is of course that at least one of the tabs will be displayed. I am not sure what will happen if you don't define any Tab elements.