Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-tabs

Package Overview
Dependencies
Maintainers
1
Versions
53
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-tabs - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

7

CHANGELOG.md

@@ -5,2 +5,7 @@ # Changelog

- Initial release
- Initial release
### 0.1.1 (Jul 19, 2014)
- Fixing warning: Invalid access to component property
- Fixing style weirdness in Firefox

2

lib/tab.js

@@ -54,3 +54,3 @@ /** @jsx React.DOM */

ariaExpanded = this.isSelected() ? 'true' : 'false',
ariaControls = panel ? panel.getId() : null;
ariaControls = panel;

@@ -57,0 +57,0 @@ return (

@@ -34,3 +34,3 @@ /** @jsx React.DOM */

style = {display: this.isSelected() ? '' : 'none'},
ariaLabeledBy = tab ? tab.getId() : null;
ariaLabeledBy = tab;

@@ -37,0 +37,0 @@ return (

/** @jsx React.DOM */
var React = require('react');
var React = require('react/addons');

@@ -46,18 +46,20 @@ function isTabNode(node) {

getPanels: function () {
return this.props.children.slice(1);
getTab: function (index) {
return this.refs['tabs-' + index];
},
getPanel: function (index) {
return this.refs['panels-' + index];
},
componentDidMount: function () {
var selectedIndex = parseInt(this.props.selectedIndex, 10) || 0,
tabs = this.getTabs(),
panels = this.getPanels();
var selectedIndex = parseInt(this.props.selectedIndex, 10) || 0;
// Hook up relation between tabs and panels
for (var i=0, l=tabs.length; i<l; i++) {
var tab = tabs[i],
panel = panels[i];
for (var i=0, l=this.getTabs().length; i<l; i++) {
var tab = this.getTab(i),
panel = this.getPanel(i);
tab.setState({ panel: panel });
panel.setState({ tab: tab });
tab.setState({ panel: panel.getId() });
panel.setState({ tab: tab.getId() });
}

@@ -69,5 +71,3 @@

componentDidUpdate: function () {
var tabs = this.getTabs(),
panels = this.getPanels(),
index = this.getSelectedIndex(),
var index = this.getSelectedIndex(),
last = this.__lastSelectedIndex;

@@ -77,4 +77,4 @@

if (typeof last !== 'undefined' && last > -1) {
tabs[last].setSelected(false);
panels[last].setSelected(false);
this.getTab(last).setSelected(false);
this.getPanel(last).setSelected(false);
delete this.__lastSelectedIndex;

@@ -84,4 +84,4 @@ }

// Update selected
tabs[index].setSelected(true, this.__needsFocus);
panels[index].setSelected(true);
this.getTab(index).setSelected(true, this.__needsFocus);
this.getPanel(index).setSelected(true);
delete this.__needsFocus;

@@ -140,2 +140,28 @@

render: function () {
var index = 0,
children = [],
list = this.props.children[0],
panels = this.props.children.slice(1);
// Clone TabList and Tab components to have refs
children[0] = React.addons.cloneWithProps(list, {
key: 'tablist',
children: list.props.children.map(function (tab) {
var key = 'tabs-' + (index++);
return React.addons.cloneWithProps(tab, {
ref: key,
key: key
});
})
});
// Clone TabPanel components to have refs
for (var i=0, l=panels.length; i<l; i++) {
var key = 'panels-' + (i);
children[i + 1] = React.addons.cloneWithProps(panels[i], {
ref: key,
key: key
});
}
return (

@@ -145,3 +171,3 @@ <div className="react-tabs"

onKeyDown={this.handleKeyDown}>
{this.props.children}
{children}
</div>

@@ -148,0 +174,0 @@ );

{
"name": "react-tabs",
"version": "0.1.0",
"version": "0.1.1",
"description": "React tabs component",

@@ -21,3 +21,3 @@ "main": "lib/main.js",

"devDependencies": {
"react": "^0.10.0",
"react": "^0.11.0",
"jsx-loader": "^0.10.2",

@@ -24,0 +24,0 @@ "karma": "^0.12.17",

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc