rc-tabs - npm Package Compare versions

Comparing version 7.0.4 to 7.0.5

lib/InkTabBarMixin.js

@@ -66,6 +66,7 @@ 'use strict';
   var activeTab = refs.activeTab;
+  var inkBarNodeStyle = inkBarNode.style;
   var tabBarPosition = component.props.tabBarPosition;
   if (init) {
     // prevent mount animation
-    inkBarNode.style.display = 'none';
+    inkBarNodeStyle.display = 'none';
   }
@@ -75,31 +76,31 @@ if (activeTab) {
     var tabOffset = offset(tabNode);
-    var transformPropertyName = (0, _utils.getTransformPropertyName)();
+    var transformSupported = (0, _utils.isTransformSupported)(inkBarNodeStyle);
     if (tabBarPosition === 'top' || tabBarPosition === 'bottom') {
       var left = tabOffset.left - containerOffset.left;
       // use 3d gpu to optimize render
-      if (transformPropertyName) {
-        inkBarNode.style[transformPropertyName] = 'translate3d(' + left + 'px,0,0)';
-        inkBarNode.style.width = tabNode.offsetWidth + 'px';
-        inkBarNode.style.height = '';
+      if (transformSupported) {
+        (0, _utils.setTransform)(inkBarNodeStyle, 'translate3d(' + left + 'px,0,0)');
+        inkBarNodeStyle.width = tabNode.offsetWidth + 'px';
+        inkBarNodeStyle.height = '';
       } else {
-        inkBarNode.style.left = left + 'px';
-        inkBarNode.style.top = '';
-        inkBarNode.style.bottom = '';
-        inkBarNode.style.right = wrapNode.offsetWidth - left - tabNode.offsetWidth + 'px';
+        inkBarNodeStyle.left = left + 'px';
+        inkBarNodeStyle.top = '';
+        inkBarNodeStyle.bottom = '';
+        inkBarNodeStyle.right = wrapNode.offsetWidth - left - tabNode.offsetWidth + 'px';
       }
     } else {
       var top = tabOffset.top - containerOffset.top;
-      if (transformPropertyName) {
-        inkBarNode.style[transformPropertyName] = 'translate3d(0,' + top + 'px,0)';
-        inkBarNode.style.height = tabNode.offsetHeight + 'px';
-        inkBarNode.style.width = '';
+      if (transformSupported) {
+        (0, _utils.setTransform)(inkBarNodeStyle, 'translate3d(0,' + top + 'px,0)');
+        inkBarNodeStyle.height = tabNode.offsetHeight + 'px';
+        inkBarNodeStyle.width = '';
       } else {
-        inkBarNode.style.left = '';
-        inkBarNode.style.right = '';
-        inkBarNode.style.top = top + 'px';
-        inkBarNode.style.bottom = wrapNode.offsetHeight - top - tabNode.offsetHeight + 'px';
+        inkBarNodeStyle.left = '';
+        inkBarNodeStyle.right = '';
+        inkBarNodeStyle.top = top + 'px';
+        inkBarNodeStyle.bottom = wrapNode.offsetHeight - top - tabNode.offsetHeight + 'px';
       }
     }
   }
-  inkBarNode.style.display = activeTab ? 'block' : 'none';
+  inkBarNodeStyle.display = activeTab ? 'block' : 'none';
 }
@@ -106,0 +107,0 @@

lib/ScrollableTabBarMixin.js

@@ -118,7 +118,7 @@ 'use strict';
       var tabBarPosition = this.props.tabBarPosition;
-      var transformProperty = (0, _utils.getTransformPropertyName)();
+      var navStyle = this.refs.nav.style;
+      var transformSupported = (0, _utils.isTransformSupported)(navStyle);
       if (tabBarPosition === 'left' || tabBarPosition === 'right') {
-        if (transformProperty) {
+        if (transformSupported) {
           navOffset = {
-            name: transformProperty,
             value: 'translate3d(0,' + target + 'px,0)'
@@ -133,5 +133,4 @@ };
       } else {
-        if (transformProperty) {
+        if (transformSupported) {
           navOffset = {
-            name: transformProperty,
             value: 'translate3d(' + target + 'px,0,0)'
@@ -146,3 +145,7 @@ };
       }
-      this.refs.nav.style[navOffset.name] = navOffset.value;
+      if (transformSupported) {
+        (0, _utils.setTransform)(navStyle, navOffset.value);
+      } else {
+        navStyle[navOffset.name] = navOffset.value;
+      }
       if (checkNextPrev) {
@@ -149,0 +152,0 @@ this.setNextPrev();

lib/SwipeableTabContent.js

@@ -100,3 +100,3 @@ 'use strict';
     if (animated) {
-      this.rootNode.style[(0, _utils.getTransitionPropertyName)() + 'Property'] = 'none';
+      (0, _utils.setTransition)(this.rootNode.style, 'none');
     }
@@ -116,3 +116,3 @@ this.startDrag = true;
     if (currentIndex !== undefined) {
-      (0, _utils.assign)(this.rootNode.style, (0, _utils.getTranslateByIndex)(currentIndex, tabBarPosition));
+      (0, _utils.setTransform)(this.rootNode.style, (0, _utils.getTransformByIndex)(currentIndex, tabBarPosition));
     }
@@ -136,3 +136,3 @@ },
     if (animated) {
-      this.rootNode.style[(0, _utils.getTransitionPropertyName)() + 'Property'] = '';
+      (0, _utils.setTransition)(this.rootNode.style, '');
     }
@@ -163,3 +163,3 @@ var currentIndex = getIndexByDelta.call(this, e);
       if (animated) {
-        (0, _utils.assign)(this.rootNode.style, (0, _utils.getTranslateByIndex)(finalIndex, this.props.tabBarPosition));
+        (0, _utils.setTransform)(this.rootNode.style, (0, _utils.getTransformByIndex)(finalIndex, this.props.tabBarPosition));
       }
@@ -166,0 +166,0 @@ } else {

lib/TabContent.js

@@ -15,2 +15,6 @@ 'use strict';
 
+var _typeof2 = require('babel-runtime/helpers/typeof');
+
+var _typeof3 = _interopRequireDefault(_typeof2);
+
 var _react = require('react');
@@ -28,4 +32,19 @@
 
-/* eslint react/no-did-mount-set-state:0 */
+var added = void 0;
 
+// or user modernizr inside <head> for server render
+function detectCssTransition() {
+  if (!added && (typeof window === 'undefined' ? 'undefined' : (0, _typeof3["default"])(window)) !== undefined && window.document && window.document.documentElement) {
+    var documentElement = window.document.documentElement;
+
+    var NO_CSS_TRANSITION = 'no-csstransitions';
+    if (!(0, _utils.isTransitionSupported)(documentElement.style) && documentElement.className.indexOf(NO_CSS_TRANSITION) === -1) {
+      documentElement.className += ' ' + NO_CSS_TRANSITION;
+    }
+    added = true;
+  }
+}
+
+detectCssTransition();
+
 var TabContent = _react2["default"].createClass({
@@ -42,3 +61,2 @@ displayName: 'TabContent',
   },
-
   getDefaultProps: function getDefaultProps() {
@@ -49,17 +67,4 @@ return {
   },
-  getInitialState: function getInitialState() {
-    return {
-      transformName: 'transform'
-    };
-  },
   componentDidMount: function componentDidMount() {
-    if (this.props.animated) {
-      var transformName = (0, _utils.getTransformPropertyName)();
-      // support server render
-      if (transformName !== this.state.transformName) {
-        this.setState({
-          transformName: transformName
-        });
-      }
-    }
+    detectCssTransition();
   },
@@ -94,9 +99,8 @@ getTabPanes: function getTabPanes() {
     var style = props.style;
-    var transformName = this.state.transformName;
 
-    var classes = (0, _classnames3["default"])((_classnames = {}, (0, _defineProperty3["default"])(_classnames, prefixCls + '-content', true), (0, _defineProperty3["default"])(_classnames, animated && transformName ? prefixCls + '-content-animated' : prefixCls + '-content-no-animated', true), _classnames));
-    if (animated && transformName) {
+    var classes = (0, _classnames3["default"])((_classnames = {}, (0, _defineProperty3["default"])(_classnames, prefixCls + '-content', true), (0, _defineProperty3["default"])(_classnames, animated ? prefixCls + '-content-animated' : prefixCls + '-content-no-animated', true), _classnames));
+    if (animated) {
       var activeIndex = (0, _utils.getActiveIndex)(children, activeKey);
       if (activeIndex !== -1) {
-        style = (0, _extends3["default"])({}, style, (0, _utils.getTranslateByIndex)(activeIndex, tabBarPosition, transformName));
+        style = (0, _extends3["default"])({}, style, (0, _utils.getTransformPropValue)((0, _utils.getTransformByIndex)(activeIndex, tabBarPosition)));
       } else {
@@ -103,0 +107,0 @@ style = (0, _extends3["default"])({}, style, {

lib/utils.js

@@ -6,16 +6,12 @@ 'use strict';
 });
-
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
 exports.toArray = toArray;
 exports.getActiveIndex = getActiveIndex;
 exports.getActiveKey = getActiveKey;
-exports.getPropertyName = getPropertyName;
-exports.getTransformPropertyName = getTransformPropertyName;
-exports.getTransitionPropertyName = getTransitionPropertyName;
+exports.setTransform = setTransform;
+exports.isTransitionSupported = isTransitionSupported;
+exports.isTransformSupported = isTransformSupported;
+exports.setTransition = setTransition;
+exports.getTransformPropValue = getTransformPropValue;
 exports.isVertical = isVertical;
-exports.getTranslateByIndex = getTranslateByIndex;
-exports.assign = assign;
+exports.getTransformByIndex = getTransformByIndex;
 
@@ -54,35 +50,28 @@ var _react = require('react');
 
-var names = {};
+function setTransform(style, v) {
+  style.transform = v;
+  style.webkitTransform = v;
+  style.mozTransform = v;
+}
 
-function getPropertyName(name) {
-  var _transforms;
-
-  if (!window.getComputedStyle) {
-    return false;
-  }
-  if (names[name] !== undefined) {
-    return names[name];
-  }
-  var Name = name.charAt(0).toUpperCase() + name.substring(1);
-  var el = document.createElement('p');
-  var transforms = (_transforms = {}, (0, _defineProperty3["default"])(_transforms, 'webkit' + Name, '-webkit-' + name), (0, _defineProperty3["default"])(_transforms, 'ms' + Name, '-ms-' + name), (0, _defineProperty3["default"])(_transforms, 'Moz' + Name, '-moz-' + name), (0, _defineProperty3["default"])(_transforms, '' + name, '-webkit-' + name), _transforms);
-  var transformPropertyName = '';
-  // Add it to the body to get the computed style.
-  document.body.insertBefore(el, null);
-  for (var t in transforms) {
-    if (el.style[t] !== undefined) {
-      transformPropertyName = t;
-    }
-  }
-  document.body.removeChild(el);
-  return transformPropertyName;
+function isTransitionSupported(style) {
+  return 'transition' in style || 'webkitTransition' in style || 'MozTransition' in style;
 }
 
-function getTransformPropertyName() {
-  return getPropertyName('transform');
+function isTransformSupported(style) {
+  return 'transform' in style || 'webkitTransform' in style || 'MozTransform' in style;
 }
 
-function getTransitionPropertyName() {
-  return getPropertyName('transition');
+function setTransition(style, v) {
+  style.transition = v;
+  style.webkitTransition = v;
+  style.MozTransition = v;
 }
+function getTransformPropValue(v) {
+  return {
+    transform: v,
+    WebkitTransform: v,
+    MozTransform: v
+  };
+}
 
@@ -93,14 +82,5 @@ function isVertical(tabBarPosition) {
 
-function getTranslateByIndex(index, tabBarPosition) {
-  var transformName = arguments.length <= 2 || arguments[2] === undefined ? getTransformPropertyName() : arguments[2];
-
+function getTransformByIndex(index, tabBarPosition) {
   var translate = isVertical(tabBarPosition) ? 'translateY' : 'translateX';
-  return (0, _defineProperty3["default"])({}, transformName, translate + '(' + -index * 100 + '%) translateZ(0)');
-}
-function assign(o1, o2) {
-  for (var i in o2) {
-    if (o2.hasOwnProperty(i)) {
-      o1[i] = o2[i];
-    }
-  }
+  return translate + '(' + -index * 100 + '%) translateZ(0)';
 }

package.json

 {
   "name": "rc-tabs",
-  "version": "7.0.4",
+  "version": "7.0.5",
   "description": "tabs ui component for react",
@@ -42,2 +42,3 @@ "keywords": [
     "expect.js": "~0.3.1",
+    "fastclick": "~1.0.6",
     "history": "^1.17.0",
@@ -44,0 +45,0 @@ "pre-commit": "1.x",

README.md

@@ -247,3 +247,3 @@ # rc-tabs
       <tr>
-          <td>animation</td>
+          <td>animated</td>
           <td>true</td>
@@ -250,0 +250,0 @@ <th></th>

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

Worsened metrics

Total package byte prevSize

56412

decreased by-0.69%

Dev dependency count

9

increased by12.5%

Lines of code

1511

decreased by-0.53%

No dependency changes