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

react-tabs

Package Overview
Dependencies
Maintainers
2
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.5.3 to 0.5.4

CHANGELOG.md

13

lib/components/Tab.js
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = require('react');

@@ -15,2 +13,4 @@

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function syncNodeAttributes(node, props) {

@@ -29,3 +29,3 @@ if (props.selected) {

module.exports = _react2['default'].createClass({
module.exports = _react2.default.createClass({
displayName: 'Tab',

@@ -50,16 +50,13 @@

},
componentDidMount: function componentDidMount() {
syncNodeAttributes((0, _reactDom.findDOMNode)(this), this.props);
},
componentDidUpdate: function componentDidUpdate() {
syncNodeAttributes((0, _reactDom.findDOMNode)(this), this.props);
},
render: function render() {
return _react2['default'].createElement(
return _react2.default.createElement(
'li',
{
className: (0, _classnames2['default'])('ReactTabs__Tab', this.props.className, {
className: (0, _classnames2.default)('ReactTabs__Tab', this.props.className, {
'ReactTabs__Tab--selected': this.props.selected,

@@ -66,0 +63,0 @@ 'ReactTabs__Tab--disabled': this.props.disabled

'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = require('react');

@@ -13,3 +11,5 @@

module.exports = _react2['default'].createClass({
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = _react2.default.createClass({
displayName: 'TabList',

@@ -23,6 +23,6 @@

render: function render() {
return _react2['default'].createElement(
return _react2.default.createElement(
'ul',
{
className: (0, _classnames2['default'])('ReactTabs__TabList', this.props.className),
className: (0, _classnames2.default)('ReactTabs__TabList', this.props.className),
role: 'tablist'

@@ -29,0 +29,0 @@ },

'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = require('react');

@@ -13,3 +11,5 @@

module.exports = _react2['default'].createClass({
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = _react2.default.createClass({
displayName: 'TabPanel',

@@ -36,10 +36,9 @@

},
render: function render() {
var children = this.context.forceRenderTabPanel || this.props.selected ? this.props.children : null;
return _react2['default'].createElement(
return _react2.default.createElement(
'div',
{
className: (0, _classnames2['default'])('ReactTabs__TabPanel', this.props.className, {
className: (0, _classnames2.default)('ReactTabs__TabPanel', this.props.className, {
'ReactTabs__TabPanel--selected': this.props.selected

@@ -46,0 +45,0 @@ }),

'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = require('react');

@@ -19,10 +17,12 @@

var _helpersUuid = require('../helpers/uuid');
var _uuid = require('../helpers/uuid');
var _helpersUuid2 = _interopRequireDefault(_helpersUuid);
var _uuid2 = _interopRequireDefault(_uuid);
var _helpersChildrenPropType = require('../helpers/childrenPropType');
var _childrenPropType = require('../helpers/childrenPropType');
var _helpersChildrenPropType2 = _interopRequireDefault(_helpersChildrenPropType);
var _childrenPropType2 = _interopRequireDefault(_childrenPropType);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// Determine if a node from event.target is a Tab element

@@ -40,3 +40,3 @@ function isTabNode(node) {

module.exports = _react2['default'].createClass({
module.exports = _react2.default.createClass({
displayName: 'Tabs',

@@ -49,3 +49,3 @@

focus: _react.PropTypes.bool,
children: _helpersChildrenPropType2['default'],
children: _childrenPropType2.default,
forceRenderTabPanel: _react.PropTypes.bool

@@ -71,7 +71,5 @@ },

},
getInitialState: function getInitialState() {
return this.copyPropsToState(this.props);
},
getChildContext: function getChildContext() {

@@ -82,54 +80,10 @@ return {

},
componentDidMount: function componentDidMount() {
if (useDefaultStyles) {
(0, _jsStylesheet2['default'])(require('../helpers/styles.js'));
(0, _jsStylesheet2.default)(require('../helpers/styles.js')); // eslint-disable-line global-require
}
},
componentWillReceiveProps: function componentWillReceiveProps(newProps) {
this.setState(this.copyPropsToState(newProps));
},
handleClick: function handleClick(e) {
var node = e.target;
do {
if (isTabNode(node)) {
if (isTabDisabled(node)) {
return;
}
var index = [].slice.call(node.parentNode.children).indexOf(node);
this.setSelected(index);
return;
}
} while ((node = node.parentNode) !== null);
},
handleKeyDown: function handleKeyDown(e) {
if (isTabNode(e.target)) {
var index = this.state.selectedIndex;
var preventDefault = false;
// Select next tab to the left
if (e.keyCode === 37 || e.keyCode === 38) {
index = this.getPrevTab(index);
preventDefault = true;
}
// Select next tab to the right
/* eslint brace-style:0 */
else if (e.keyCode === 39 || e.keyCode === 40) {
index = this.getNextTab(index);
preventDefault = true;
}
// This prevents scrollbars from moving around
if (preventDefault) {
e.preventDefault();
}
this.setSelected(index, true);
}
},
setSelected: function setSelected(index, focus) {

@@ -152,3 +106,2 @@ // Don't do anything if nothing has changed

},
getNextTab: function getNextTab(index) {

@@ -166,6 +119,6 @@ var count = this.getTabsCount();

// If no tab found, continue searching from first on left to index
for (var i = 0; i < index; i++) {
var tab = this.getTab(i);
if (!isTabDisabled((0, _reactDom.findDOMNode)(tab))) {
return i;
for (var _i = 0; _i < index; _i++) {
var _tab = this.getTab(_i);
if (!isTabDisabled((0, _reactDom.findDOMNode)(_tab))) {
return _i;
}

@@ -177,3 +130,2 @@ }

},
getPrevTab: function getPrevTab(index) {

@@ -193,4 +145,4 @@ var i = index;

while (i-- > index) {
var tab = this.getTab(i);
if (!isTabDisabled((0, _reactDom.findDOMNode)(tab))) {
var _tab2 = this.getTab(i);
if (!isTabDisabled((0, _reactDom.findDOMNode)(_tab2))) {
return i;

@@ -203,23 +155,17 @@ }

},
getTabsCount: function getTabsCount() {
return this.props.children && this.props.children[0] ? _react2['default'].Children.count(this.props.children[0].props.children) : 0;
return this.props.children && this.props.children[0] ? _react2.default.Children.count(this.props.children[0].props.children) : 0;
},
getPanelsCount: function getPanelsCount() {
return _react2['default'].Children.count(this.props.children.slice(1));
return _react2.default.Children.count(this.props.children.slice(1));
},
getTabList: function getTabList() {
return this.refs.tablist;
},
getTab: function getTab(index) {
return this.refs['tabs-' + index];
},
getPanel: function getPanel(index) {
return this.refs['panels-' + index];
},
getChildren: function getChildren() {

@@ -238,8 +184,8 @@ var index = 0;

while (diff++ < 0) {
tabIds.push((0, _helpersUuid2['default'])());
panelIds.push((0, _helpersUuid2['default'])());
tabIds.push((0, _uuid2.default)());
panelIds.push((0, _uuid2.default)());
}
// Map children to dynamically setup refs
return _react2['default'].Children.map(children, function (child) {
return _react2.default.Children.map(children, function (child) {
// null happens when conditionally rendering TabPanel/Tab

@@ -258,3 +204,3 @@ // see https://github.com/rackt/react-tabs/issues/37

ref: 'tablist',
children: _react2['default'].Children.map(child.props.children, function (tab) {
children: _react2.default.Children.map(child.props.children, function (tab) {
// null happens when conditionally rendering TabPanel/Tab

@@ -307,3 +253,69 @@ // see https://github.com/rackt/react-tabs/issues/37

},
handleKeyDown: function handleKeyDown(e) {
if (isTabNode(e.target)) {
var index = this.state.selectedIndex;
var preventDefault = false;
// Select next tab to the left
if (e.keyCode === 37 || e.keyCode === 38) {
index = this.getPrevTab(index);
preventDefault = true;
}
// Select next tab to the right
/* eslint brace-style:0 */
else if (e.keyCode === 39 || e.keyCode === 40) {
index = this.getNextTab(index);
preventDefault = true;
}
// This prevents scrollbars from moving around
if (preventDefault) {
e.preventDefault();
}
this.setSelected(index, true);
}
},
handleClick: function handleClick(e) {
var node = e.target;
do {
// eslint-disable-line no-cond-assign
if (isTabNode(node)) {
if (isTabDisabled(node)) {
return;
}
var index = [].slice.call(node.parentNode.children).indexOf(node);
this.setSelected(index);
return;
}
} while ((node = node.parentNode) !== null);
},
// This is an anti-pattern, so sue me
copyPropsToState: function copyPropsToState(props) {
var selectedIndex = props.selectedIndex;
// If no selectedIndex prop was supplied, then try
// preserving the existing selectedIndex from state.
// If the state has not selectedIndex, default
// to the first tab in the TabList.
//
// TODO: Need automation testing around this
// Manual testing can be done using examples/focus
// See 'should preserve selectedIndex when typing' in specs/Tabs.spec.js
if (selectedIndex === -1) {
if (this.state && this.state.selectedIndex) {
selectedIndex = this.state.selectedIndex;
} else {
selectedIndex = 0;
}
}
return {
selectedIndex: selectedIndex,
focus: props.focus
};
},
render: function render() {

@@ -331,6 +343,6 @@ var _this = this;

return _react2['default'].createElement(
return _react2.default.createElement(
'div',
{
className: (0, _classnames2['default'])('ReactTabs', 'react-tabs', this.props.className),
className: (0, _classnames2.default)('ReactTabs', 'react-tabs', this.props.className),
onClick: this.handleClick,

@@ -341,29 +353,3 @@ onKeyDown: this.handleKeyDown

);
},
// This is an anti-pattern, so sue me
copyPropsToState: function copyPropsToState(props) {
var selectedIndex = props.selectedIndex;
// If no selectedIndex prop was supplied, then try
// preserving the existing selectedIndex from state.
// If the state has not selectedIndex, default
// to the first tab in the TabList.
//
// TODO: Need automation testing around this
// Manual testing can be done using examples/focus
// See 'should preserve selectedIndex when typing' in specs/Tabs.spec.js
if (selectedIndex === -1) {
if (this.state && this.state.selectedIndex) {
selectedIndex = this.state.selectedIndex;
} else {
selectedIndex = 0;
}
}
return {
selectedIndex: selectedIndex,
focus: props.focus
};
}
});
'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var _react = require('react');

@@ -9,12 +7,14 @@

var _componentsTab = require('../components/Tab');
var _Tab = require('../components/Tab');
var _componentsTab2 = _interopRequireDefault(_componentsTab);
var _Tab2 = _interopRequireDefault(_Tab);
var _componentsTabList = require('../components/TabList');
var _TabList = require('../components/TabList');
var _componentsTabList2 = _interopRequireDefault(_componentsTabList);
var _TabList2 = _interopRequireDefault(_TabList);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
module.exports = function childrenPropTypes(props, propName) {
var error = undefined;
var error = void 0;
var tabsCount = 0;

@@ -24,3 +24,3 @@ var panelsCount = 0;

_react2['default'].Children.forEach(children, function (child) {
_react2.default.Children.forEach(children, function (child) {
// null happens when conditionally rendering TabPanel/Tab

@@ -32,4 +32,4 @@ // see https://github.com/rackt/react-tabs/issues/37

if (child.type === _componentsTabList2['default']) {
_react2['default'].Children.forEach(child.props.children, function (c) {
if (child.type === _TabList2.default) {
_react2.default.Children.forEach(child.props.children, function (c) {
// null happens when conditionally rendering TabPanel/Tab

@@ -41,6 +41,6 @@ // see https://github.com/rackt/react-tabs/issues/37

if (c.type === _componentsTab2['default']) {
if (c.type === _Tab2.default) {
tabsCount++;
} else {
error = new Error('Expected `Tab` but found `' + (c.type.displayName || c.type) + '`');
error = new Error('Expected \'Tab\' but found \'' + (c.type.displayName || c.type) + '\'');
}

@@ -51,3 +51,3 @@ });

} else {
error = new Error('Expected `TabList` or `TabPanel` but found `' + (child.type.displayName || child.type) + '`');
error = new Error('Expected \'TabList\' or \'TabPanel\' but found \'' + (child.type.displayName || child.type) + '\'');
}

@@ -57,3 +57,3 @@ });

if (tabsCount !== panelsCount) {
error = new Error('There should be an equal number of `Tabs` and `TabPanels`. ' + 'Received ' + tabsCount + ' `Tabs` and ' + panelsCount + ' `TabPanels`.');
error = new Error("There should be an equal number of 'Tabs' and 'TabPanels'." + ('Received ' + tabsCount + ' \'Tabs\' and ' + panelsCount + ' \'TabPanels\'.'));
}

@@ -60,0 +60,0 @@

@@ -6,21 +6,21 @@ 'use strict';

'border-bottom': '1px solid #aaa',
'margin': '0 0 10px',
'padding': '0'
margin: '0 0 10px',
padding: '0'
},
'.react-tabs [role=tab]': {
'display': 'inline-block',
'border': '1px solid transparent',
display: 'inline-block',
border: '1px solid transparent',
'border-bottom': 'none',
'bottom': '-1px',
'position': 'relative',
bottom: '-1px',
position: 'relative',
'list-style': 'none',
'padding': '6px 12px',
'cursor': 'pointer'
padding: '6px 12px',
cursor: 'pointer'
},
'.react-tabs [role=tab][aria-selected=true]': {
'background': '#fff',
background: '#fff',
'border-color': '#aaa',
'color': 'black',
color: 'black',
'border-radius': '5px 5px 0 0',

@@ -32,4 +32,4 @@ '-moz-border-radius': '5px 5px 0 0',

'.react-tabs [role=tab][aria-disabled=true]': {
'color': 'GrayText',
'cursor': 'default'
color: 'GrayText',
cursor: 'default'
},

@@ -40,14 +40,14 @@

'border-color': 'hsl(208, 99%, 50%)',
'outline': 'none'
outline: 'none'
},
'.react-tabs [role=tab]:focus:after': {
'content': '""',
'position': 'absolute',
'height': '5px',
'left': '-4px',
'right': '-4px',
'bottom': '-5px',
'background': '#fff'
content: '""',
position: 'absolute',
height: '5px',
left: '-4px',
right: '-4px',
bottom: '-5px',
background: '#fff'
}
};

@@ -0,7 +1,7 @@

"use strict";
// Get a universally unique identifier
'use strict';
var count = 0;
module.exports = function uuid() {
return 'react-tabs-' + count++;
return "react-tabs-" + count++;
};
'use strict';
module.exports = {
Tabs: require('./components/Tabs'),
TabList: require('./components/TabList'),
Tab: require('./components/Tab'),
TabPanel: require('./components/TabPanel')
};
Object.defineProperty(exports, "__esModule", {
value: true
});
var _Tabs = require('./components/Tabs');
Object.defineProperty(exports, 'Tabs', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Tabs).default;
}
});
var _TabList = require('./components/TabList');
Object.defineProperty(exports, 'TabList', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_TabList).default;
}
});
var _Tab = require('./components/Tab');
Object.defineProperty(exports, 'Tab', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Tab).default;
}
});
var _TabPanel = require('./components/TabPanel');
Object.defineProperty(exports, 'TabPanel', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_TabPanel).default;
}
});
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
{
"name": "react-tabs",
"version": "0.5.3",
"version": "0.5.4",
"description": "React tabs component",
"main": "lib/main.js",
"scripts": {
"clean": "rimraf lib",
"build:commonjs": "babel src/ --out-dir lib/ --ignore __tests__,__mocks__",
"build:umd": "webpack --devtool source-map --config webpack.build.js",
"build:umd:min": "cross-env MINIFY=1 webpack --devtool source-map --config webpack.build.js",
"build": "npm run clean && npm run build:commonjs",
"bundle": "mkdir -p dist && npm run build:umd && npm run build:umd:min",
"lint": "eslint src",
"preversion": "npm run lint && npm test && npm run bundle && git add dist/ && git commit -m 'Publish: build bower distribution'",
"prepublish": "npm run build",
"test": "jest",
"start": "webpack-dev-server --inline --content-base examples/"
},
"repository": {
"type": "git",
"url": "https://github.com/rackt/react-tabs.git"
"url": "https://github.com/reactjs/react-tabs.git"
},

@@ -13,5 +26,9 @@ "author": "Matt Zabriskie",

"bugs": {
"url": "https://github.com/rackt/react-tabs/issues"
"url": "https://github.com/reactjs/react-tabs/issues"
},
"homepage": "https://github.com/rackt/react-tabs",
"files": [
"dist",
"lib"
],
"homepage": "https://github.com/reactjs/react-tabs",
"keywords": [

@@ -24,9 +41,42 @@ "react",

"peerDependencies": {
"react": "^0.14.7",
"react-dom": "^0.14.7"
"react": "^0.14.7 || ^15.0.0",
"react-dom": "^0.14.7 || ^15.0.0"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.9.1",
"babel-jest": "^12.1.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"cross-env": "^1.0.8",
"enzyme": "^2.3.0",
"eslint": "^2.11.1",
"eslint-config-airbnb": "^9.0.1",
"eslint-plugin-import": "^1.8.0",
"eslint-plugin-jsx-a11y": "^1.2.2",
"eslint-plugin-react": "^5.1.1",
"jest-cli": "^12.1.1",
"react": "^15.0.0",
"react-addons-test-utils": "^15.0.0",
"react-dom": "^15.0.0",
"react-modal": "^1.3.0",
"rimraf": "^2.5.2",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1"
},
"dependencies": {
"classnames": "^2.2",
"js-stylesheet": "^0.0.1"
},
"jest": {
"automock": false,
"testPathDirs": [
"src"
],
"unmockedModulePathPatterns": [
"node_modules",
"babel"
]
}
}
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