react-tabs - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

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

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 (

lib/tabpanel.js

@@ -34,3 +34,3 @@ /** @jsx React.DOM */
 			style = {display: this.isSelected() ? '' : 'none'},
-			ariaLabeledBy = tab ? tab.getId() : null;
+			ariaLabeledBy = tab;
 
@@ -37,0 +37,0 @@ return (

lib/tabs.js

 /** @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 @@ );

package.json

 {
   "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",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11775

increased by6.81%

Lines of code

293

increased by8.12%

No dependency changes