Skip to content

Commit 88b9014

Browse files
mzabriskiemzabriskie
committed
Adding js-stylesheet
1 parent c7161fd commit 88b9014

File tree

5 files changed

+76
-28
lines changed

5 files changed

+76
-28
lines changed

‎examples/basic/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<!doctype html>
22
<meta charset="utf-8"/>
33
<title>React Tabs</title>
4-
<link rel="stylesheet" type="text/css" href="../../lib/styles.css"/>
54
<style type="text/css">
65
body {
76
color: #222;

‎lib/components/Tabs.js‎

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
11
/** @jsx React.DOM */
2-
var React = require('react/addons'),
3-
invariant = require('react/lib/invariant');
2+
var React = require('react/addons');
3+
var invariant = require('react/lib/invariant');
4+
var jss = require('js-stylesheet');
5+
var uuid = require('../helpers/uuid');
46

57
// Determine if a node from event.target is a Tab element
68
function isTabNode(node) {
79
return node.nodeName === 'LI' && node.getAttribute('role') === 'tab';
810
}
911

10-
// Get a universally unique identifier
11-
var uuid = (function () {
12-
var count = 0;
13-
return function () {
14-
return 'react-tabs-' + count++;
15-
}
16-
})();
17-
1812
module.exports = React.createClass({
1913
displayName: 'Tabs',
2014

@@ -32,8 +26,8 @@ module.exports = React.createClass({
3226
},
3327

3428
getInitialState: function () {
35-
var tabIds = [],
36-
panelIds = [];
29+
var tabIds = [];
30+
var panelIds = [];
3731

3832
// Setup tab/panel ids
3933
React.Children.forEach(this.props.children[0].props.children, function () {
@@ -50,8 +44,8 @@ module.exports = React.createClass({
5044
},
5145

5246
componentWillMount: function () {
53-
var tabsCount = this.getTabsCount(),
54-
panelsCount = this.getPanelsCount();
47+
var tabsCount = this.getTabsCount();
48+
var panelsCount = this.getPanelsCount();
5549

5650
invariant(
5751
tabsCount === panelsCount,
@@ -61,6 +55,10 @@ module.exports = React.createClass({
6155
);
6256
},
6357

58+
componentDidMount: function () {
59+
jss(require('../helpers/styles.js'));
60+
},
61+
6462
setSelected: function (index, focus) {
6563
// Don't do anything if nothing has changed
6664
if (index === this.state.selectedIndex) return;
@@ -147,10 +145,10 @@ module.exports = React.createClass({
147145
},
148146

149147
render: function () {
150-
var index = 0,
151-
count = 0,
152-
children,
153-
state = this.state;
148+
var index = 0;
149+
var count = 0;
150+
var children;
151+
var state = this.state;
154152

155153
// Map children to dynamically setup refs
156154
children = React.Children.map(this.props.children, function (child) {
@@ -161,11 +159,11 @@ module.exports = React.createClass({
161159
result = React.addons.cloneWithProps(child, {
162160
ref: 'tablist',
163161
children: React.Children.map(child.props.children, function (tab) {
164-
var ref = 'tabs-' + index,
165-
id = state.tabIds[index],
166-
panelId = state.panelIds[index],
167-
selected = state.selectedIndex === index,
168-
focus = selected && state.focus;
162+
var ref = 'tabs-' + index;
163+
var id = state.tabIds[index];
164+
var panelId = state.panelIds[index];
165+
var selected = state.selectedIndex === index;
166+
var focus = selected && state.focus;
169167

170168
index++;
171169

@@ -184,10 +182,10 @@ module.exports = React.createClass({
184182
}
185183
// Clone TabPanel components to have refs
186184
else {
187-
var ref = 'panels-' + index,
188-
id = state.panelIds[index],
189-
tabId = state.tabIds[index],
190-
selected = state.selectedIndex === index;
185+
var ref = 'panels-' + index;
186+
var id = state.panelIds[index];
187+
var tabId = state.tabIds[index];
188+
var selected = state.selectedIndex === index;
191189

192190
index ++;
193191

‎lib/helpers/styles.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
module.exports = {
2+
'.react-tabs [role=tablist]': {
3+
'border-bottom': '1px solid #aaa',
4+
'margin': '0 0 10px',
5+
'padding': '0'
6+
},
7+
8+
'.react-tabs [role=tab]': {
9+
'display': 'inline-block',
10+
'border': '1px solid transparent',
11+
'border-bottom': 'none',
12+
'bottom': '-1px',
13+
'position': 'relative',
14+
'list-style': 'none',
15+
'padding': '6px 12px',
16+
'cursor': 'pointer',
17+
'position': 'relative'
18+
},
19+
20+
'.react-tabs [role=tab][aria-selected=true]': {
21+
'background': '#fff',
22+
'border-color': '#aaa',
23+
'border-radius': '5px 5px 0 0',
24+
'-moz-border-radius': '5px 5px 0 0',
25+
'-webkit-border-radius': '5px 5px 0 0'
26+
},
27+
28+
'.react-tabs [role=tab]:focus': {
29+
'box-shadow': '0 0 5px hsl(208, 99%, 50%)',
30+
'border-color': 'hsl(208, 99%, 50%)',
31+
'outline': 'none'
32+
},
33+
34+
'.react-tabs [role=tab]:focus:after': {
35+
'content': '""',
36+
'position': 'absolute',
37+
'height': '5px',
38+
'left': '-4px',
39+
'right': '-4px',
40+
'bottom': '-5px',
41+
'background': '#fff'
42+
}
43+
};

‎lib/helpers/uuid.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Get a universally unique identifier
2+
module.exports = (function () {
3+
var count = 0;
4+
return function () {
5+
return 'react-tabs-' + count++;
6+
}
7+
})();

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"reactify": "^0.17.1"
3535
},
3636
"dependencies": {
37+
"js-stylesheet": "0.0.1",
3738
"react": "^0.12.1"
3839
}
3940
}

0 commit comments

Comments
 (0)