react-tabs - npm Package Compare versions

Comparing version 0.5.3 to 0.5.4

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

lib/components/TabList.js

 '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 @@ },

lib/components/TabPanel.js

 '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 @@ }),

lib/components/Tabs.js

 '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
-    };
   }
 });

lib/helpers/childrenPropType.js

 '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 @@

lib/helpers/styles.js

@@ -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'
   }
 };

lib/helpers/uuid.js

@@ -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++;
 };

lib/main.js

 '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 }; }

package.json

 {
   "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"
+    ]
   }
 }

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

159126

increased by302.77%

Lines of code

1283

increased by36.93%

Worsened metrics

Dev dependency count

21

increased byInfinity%

Number of low quality alerts

2

increased by100%

Number of medium quality alerts

1

increased byInfinity%

Number of lines in readme file

0

decreased by-100%

Number of medium supply chain risk alerts

2

increased byInfinity%

No dependency changes