material-ui-scrollable-tabs - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

@@ -1,1 +0,13 @@
-## HEAD
+## HEAD
+
+## 0.2.0
+
+###### _Mar 23, 2017_
+
+###### Component Fixes / Enhancements
+
+- Corrected `fixed` width tabs so that no scrolling behavior occurs. Previously, selecting a partially out of view tab would scroll that tab into view. @shawnmcknight
+
+###### Examples
+
+- Created `/examples` directory with a webpack-dev-server based site that will show interactive examples and code for various tab permutations. Docs for use are [here](https://github.com/STORIS/material-ui-scrollable-tabs/blob/master/examples/README.md). @shawnmcknight

package.json

 {
   "name": "material-ui-scrollable-tabs",
   "author": "STORIS",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "A Scrollable Tabs extension for material-ui.",
@@ -6,0 +6,0 @@ "main": "./index.js",

README.md

@@ -28,3 +28,5 @@ # Material-UI-Scrollable-Tabs
 
-````$ npm install --save material-ui-scrollable-tabs````
+```sh
+$ npm install --save material-ui-scrollable-tabs
+```
 
@@ -34,10 +36,12 @@ ## Documentation
 
+Live samples and documentation are available by following the instructions located [here](https://github.com/STORIS/material-ui-scrollable-tabs/blob/master/examples/README.md).
+
 To use this extension, simply import from the appropriate module folder:
-````
+```js
 import { Tabs, Tab } from 'material-ui-scrollable-tabs/Tabs';
-````
+```
 To use the scrollable tabs module at the same time as the standard Material-UI tabs module, import as an alias:
-````
+```js
 import { Tabs as ScrollTabs, Tab as ScrollTab } from 'material-ui-scrollable-tabs/Tabs';
-````
+```
 
@@ -44,0 +48,0 @@ In addition to those documented by Material-UI, this package offers the following additional props:

Tabs/ScrollButton.js

@@ -0,0 +0,0 @@ 'use strict';

Tabs/Tab.js

@@ -230,3 +230,3 @@ 'use strict';
   /**
-   * Are there multiple lines of text?
+   * Indicates that the tab should render with the mutliple lines of text styling.
    */
@@ -233,0 +233,0 @@ isMultiLine: _react.PropTypes.bool,

Tabs/Tabs.js

@@ -85,3 +85,3 @@ 'use strict';
     scrollButtonIcon: {
-      color: tabs.textColor,
+      color: tabs.selectedTextColor,
       fontSize: 24
@@ -164,10 +164,12 @@ },
 
-      if (selectedButtonLeft < tabItemContainerLeft) {
-        // left side of button is out of view
-        var scrollLeft = _this.tabItemContainerNode.scrollLeft + (selectedButtonLeft - tabItemContainerLeft);
-        _scroll2.default.left(_this.tabItemContainerNode, scrollLeft);
-      } else if (selectedButtonRight > tabItemContainerRight) {
-        // right side of button is out of view
-        var _scrollLeft = _this.tabItemContainerNode.scrollLeft + (selectedButtonRight - tabItemContainerRight);
-        _scroll2.default.left(_this.tabItemContainerNode, _scrollLeft);
+      if (_this.props.tabType !== 'fixed') {
+        if (selectedButtonLeft < tabItemContainerLeft) {
+          // left side of button is out of view
+          var scrollLeft = _this.tabItemContainerNode.scrollLeft + (selectedButtonLeft - tabItemContainerLeft);
+          _scroll2.default.left(_this.tabItemContainerNode, scrollLeft);
+        } else if (selectedButtonRight > tabItemContainerRight) {
+          // right side of button is out of view
+          var _scrollLeft = _this.tabItemContainerNode.scrollLeft + (selectedButtonRight - tabItemContainerRight);
+          _scroll2.default.left(_this.tabItemContainerNode, _scrollLeft);
+        }
       }
@@ -438,3 +440,3 @@ }, _temp), (0, _possibleConstructorReturn3.default)(_this, _ret);
   /**
-   * Is the tab rendered on a large display?
+   * Indicates that the tab bar is rendered on a large view and should use the wider stylings.
    */
@@ -463,3 +465,9 @@ isLargeView: _react.PropTypes.bool,
   /**
-   * What type of tab component is this?
+   * The type of tab component:
+   *
+   * `fixed` will fill the container and each tab will be the same size.
+   *
+   * `scrollable` will invoke scrolling properties and allow for horizontally scrolling (or swiping) the tab bar.
+   *
+   * `scrollable-buttons` adds clickable buttons to a scrollable tab bar.
    */
@@ -466,0 +474,0 @@ tabType: _react.PropTypes.oneOf(['fixed', 'scrollable', 'scrollable-buttons']),

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

43138

increased by3.04%

Lines of code

891

increased by0.91%

Number of lines in readme file

98

increased by4.26%

No dependency changes