Comparing version 7.5.0 to 8.0.0-beta.0
@@ -17,2 +17,3 @@ export default { | ||
*/ | ||
DOWN: 40 }; | ||
DOWN: 40 // also NUM_SOUTH | ||
}; |
import _extends from 'babel-runtime/helpers/extends'; | ||
import _defineProperty from 'babel-runtime/helpers/defineProperty'; | ||
import React from 'react'; | ||
import createReactClass from 'create-react-class'; | ||
import classnames from 'classnames'; | ||
import InkTabBarMixin from './InkTabBarMixin'; | ||
@@ -22,8 +24,11 @@ import SwipeableTabBarMixin from './SwipeableTabBarMixin'; | ||
var _flexWidth = 1 / props.pageSize * 100 + '%'; | ||
var tabStyle = { | ||
display: 'flex', | ||
flex: '0 0 ' + 1 / props.pageSize * 100 + '%' | ||
WebkitFlexBasis: _flexWidth, | ||
flexBasis: _flexWidth | ||
}; | ||
React.Children.forEach(children, function (child) { | ||
var _classnames; | ||
if (!child) { | ||
@@ -33,8 +38,5 @@ return; | ||
var key = child.key; | ||
var cls = activeKey === key ? prefixCls + '-tab-active' : ''; | ||
cls += ' ' + prefixCls + '-tab'; | ||
var cls = classnames(prefixCls + '-tab', (_classnames = {}, _defineProperty(_classnames, prefixCls + '-tab-active', activeKey === key), _defineProperty(_classnames, prefixCls + '-tab-disabled', child.props.disabled), _classnames)); | ||
var events = {}; | ||
if (child.props.disabled) { | ||
cls += ' ' + prefixCls + '-tab-disabled'; | ||
} else { | ||
if (!child.props.disabled) { | ||
events = { | ||
@@ -44,5 +46,5 @@ onClick: _this.onTabClick.bind(_this, key) | ||
} | ||
var ref = {}; | ||
var refProps = {}; | ||
if (activeKey === key) { | ||
ref.ref = 'activeTab'; | ||
refProps.ref = 'activeTab'; | ||
} | ||
@@ -59,3 +61,3 @@ rst.push(React.createElement( | ||
key: key | ||
}, ref), | ||
}, refProps), | ||
child.props.tab | ||
@@ -62,0 +64,0 @@ )); |
@@ -24,3 +24,4 @@ import _extends from 'babel-runtime/helpers/extends'; | ||
pageSize: 5, // per page show how many tabs | ||
speed: 5 }; | ||
speed: 10 // swipe speed, 1 to 10, more bigger more faster | ||
}; | ||
}, | ||
@@ -95,8 +96,11 @@ checkPaginationByKey: function checkPaginationByKey(activeKey) { | ||
} | ||
this.setSwipePositionByDelta(delta); | ||
this.cache.totalDelta = delta; | ||
this.setSwipePosition(); | ||
}, | ||
setSwipePositionByDelta: function setSwipePositionByDelta(value) { | ||
var relativeDirection = this.cache.relativeDirection; | ||
setSwipePosition: function setSwipePosition() { | ||
var _cache = this.cache, | ||
totalDelta = _cache.totalDelta, | ||
vertical = _cache.vertical; | ||
setPxStyle(this.swipeNode, relativeDirection, value); | ||
setPxStyle(this.swipeNode, totalDelta, vertical); | ||
}, | ||
@@ -120,3 +124,2 @@ componentDidMount: function componentDidMount() { | ||
vertical: _isVertical, | ||
relativeDirection: _isVertical ? 'top' : 'left', | ||
totalAvaliableDelta: _tabWidth * panels.length - _viewSize, | ||
@@ -133,22 +136,34 @@ tabWidth: _tabWidth | ||
onPan: function onPan(e) { | ||
var _cache = this.cache, | ||
vertical = _cache.vertical, | ||
relativeDirection = _cache.relativeDirection; | ||
var _cache2 = this.cache, | ||
vertical = _cache2.vertical, | ||
totalAvaliableDelta = _cache2.totalAvaliableDelta, | ||
totalDelta = _cache2.totalDelta; | ||
var speed = this.props.speed; | ||
// calculate touch distance | ||
var nowDelta = vertical ? e.deltaY : e.deltaX; | ||
nowDelta = nowDelta * (speed / 10); | ||
var preDelta = getStyle(this.swipeNode, relativeDirection); | ||
var nextTotalDelta = nowDelta + preDelta; | ||
var _checkPaginationByDel = this.checkPaginationByDelta(nextTotalDelta), | ||
// calculate distance dom need transform | ||
var _nextDelta = nowDelta + totalDelta; | ||
if (_nextDelta >= 0) { | ||
_nextDelta = 0; | ||
} else if (_nextDelta <= -totalAvaliableDelta) { | ||
_nextDelta = -totalAvaliableDelta; | ||
} | ||
this.cache.totalDelta = _nextDelta; | ||
this.setSwipePosition(); | ||
// calculate pagination display | ||
var _checkPaginationByDel = this.checkPaginationByDelta(this.cache.totalDelta), | ||
hasPrevPage = _checkPaginationByDel.hasPrevPage, | ||
hasNextPage = _checkPaginationByDel.hasNextPage; | ||
this.setState({ | ||
hasPrevPage: hasPrevPage, | ||
hasNextPage: hasNextPage | ||
}); | ||
if (hasPrevPage && hasNextPage) { | ||
this.setSwipePositionByDelta(nextTotalDelta); | ||
if (hasPrevPage !== this.state.hasPrevPage || hasNextPage !== this.state.hasNextPage) { | ||
this.setState({ | ||
hasPrevPage: hasPrevPage, | ||
hasNextPage: hasNextPage | ||
}); | ||
} | ||
@@ -169,8 +184,2 @@ }, | ||
var navClasses = classnames(_defineProperty({}, navClassName, true)); | ||
var direction = {}; | ||
if (isVertical(tabBarPosition)) { | ||
direction = { | ||
vertical: true | ||
}; | ||
} | ||
var events = { | ||
@@ -191,3 +200,4 @@ onPan: this.onPan | ||
Hammer, | ||
_extends({}, events, direction, { | ||
_extends({}, events, { | ||
direction: isVertical(tabBarPosition) ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL', | ||
options: hammerOptions | ||
@@ -194,0 +204,0 @@ }), |
@@ -151,8 +151,2 @@ import _extends from 'babel-runtime/helpers/extends'; | ||
var direction = {}; | ||
if (isVertical(tabBarPosition)) { | ||
direction = { | ||
vertical: true | ||
}; | ||
} | ||
var events = { | ||
@@ -170,3 +164,4 @@ onSwipe: this.onSwipe, | ||
Hammer, | ||
_extends({}, events, direction, { | ||
_extends({}, events, { | ||
direction: isVertical(tabBarPosition) ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL', | ||
options: hammerOptions | ||
@@ -173,0 +168,0 @@ }), |
@@ -71,4 +71,5 @@ import _defineProperty from 'babel-runtime/helpers/defineProperty'; | ||
export function setPxStyle(el, property, value) { | ||
el.style[property] = value + 'px'; | ||
export function setPxStyle(el, value, vertical) { | ||
value = vertical ? '0px, ' + value + 'px, 0px' : value + 'px, 0px, 0px'; | ||
setTransform(el.style, 'translate3d(' + value + ')'); | ||
} |
@@ -22,3 +22,4 @@ "use strict"; | ||
*/ | ||
DOWN: 40 }; | ||
DOWN: 40 // also NUM_SOUTH | ||
}; | ||
module.exports = exports['default']; |
@@ -11,2 +11,6 @@ 'use strict'; | ||
var _defineProperty2 = require('babel-runtime/helpers/defineProperty'); | ||
var _defineProperty3 = _interopRequireDefault(_defineProperty2); | ||
var _react = require('react'); | ||
@@ -20,2 +24,6 @@ | ||
var _classnames2 = require('classnames'); | ||
var _classnames3 = _interopRequireDefault(_classnames2); | ||
var _InkTabBarMixin = require('./InkTabBarMixin'); | ||
@@ -49,8 +57,11 @@ | ||
var _flexWidth = 1 / props.pageSize * 100 + '%'; | ||
var tabStyle = { | ||
display: 'flex', | ||
flex: '0 0 ' + 1 / props.pageSize * 100 + '%' | ||
WebkitFlexBasis: _flexWidth, | ||
flexBasis: _flexWidth | ||
}; | ||
_react2['default'].Children.forEach(children, function (child) { | ||
var _classnames; | ||
if (!child) { | ||
@@ -60,8 +71,5 @@ return; | ||
var key = child.key; | ||
var cls = activeKey === key ? prefixCls + '-tab-active' : ''; | ||
cls += ' ' + prefixCls + '-tab'; | ||
var cls = (0, _classnames3['default'])(prefixCls + '-tab', (_classnames = {}, (0, _defineProperty3['default'])(_classnames, prefixCls + '-tab-active', activeKey === key), (0, _defineProperty3['default'])(_classnames, prefixCls + '-tab-disabled', child.props.disabled), _classnames)); | ||
var events = {}; | ||
if (child.props.disabled) { | ||
cls += ' ' + prefixCls + '-tab-disabled'; | ||
} else { | ||
if (!child.props.disabled) { | ||
events = { | ||
@@ -71,5 +79,5 @@ onClick: _this.onTabClick.bind(_this, key) | ||
} | ||
var ref = {}; | ||
var refProps = {}; | ||
if (activeKey === key) { | ||
ref.ref = 'activeTab'; | ||
refProps.ref = 'activeTab'; | ||
} | ||
@@ -86,3 +94,3 @@ rst.push(_react2['default'].createElement( | ||
key: key | ||
}, ref), | ||
}, refProps), | ||
child.props.tab | ||
@@ -89,0 +97,0 @@ )); |
@@ -50,3 +50,4 @@ 'use strict'; | ||
pageSize: 5, // per page show how many tabs | ||
speed: 5 }; | ||
speed: 10 // swipe speed, 1 to 10, more bigger more faster | ||
}; | ||
}, | ||
@@ -121,8 +122,11 @@ checkPaginationByKey: function checkPaginationByKey(activeKey) { | ||
} | ||
this.setSwipePositionByDelta(delta); | ||
this.cache.totalDelta = delta; | ||
this.setSwipePosition(); | ||
}, | ||
setSwipePositionByDelta: function setSwipePositionByDelta(value) { | ||
var relativeDirection = this.cache.relativeDirection; | ||
setSwipePosition: function setSwipePosition() { | ||
var _cache = this.cache, | ||
totalDelta = _cache.totalDelta, | ||
vertical = _cache.vertical; | ||
(0, _utils.setPxStyle)(this.swipeNode, relativeDirection, value); | ||
(0, _utils.setPxStyle)(this.swipeNode, totalDelta, vertical); | ||
}, | ||
@@ -146,3 +150,2 @@ componentDidMount: function componentDidMount() { | ||
vertical: _isVertical, | ||
relativeDirection: _isVertical ? 'top' : 'left', | ||
totalAvaliableDelta: _tabWidth * panels.length - _viewSize, | ||
@@ -159,22 +162,34 @@ tabWidth: _tabWidth | ||
onPan: function onPan(e) { | ||
var _cache = this.cache, | ||
vertical = _cache.vertical, | ||
relativeDirection = _cache.relativeDirection; | ||
var _cache2 = this.cache, | ||
vertical = _cache2.vertical, | ||
totalAvaliableDelta = _cache2.totalAvaliableDelta, | ||
totalDelta = _cache2.totalDelta; | ||
var speed = this.props.speed; | ||
// calculate touch distance | ||
var nowDelta = vertical ? e.deltaY : e.deltaX; | ||
nowDelta = nowDelta * (speed / 10); | ||
var preDelta = (0, _utils.getStyle)(this.swipeNode, relativeDirection); | ||
var nextTotalDelta = nowDelta + preDelta; | ||
var _checkPaginationByDel = this.checkPaginationByDelta(nextTotalDelta), | ||
// calculate distance dom need transform | ||
var _nextDelta = nowDelta + totalDelta; | ||
if (_nextDelta >= 0) { | ||
_nextDelta = 0; | ||
} else if (_nextDelta <= -totalAvaliableDelta) { | ||
_nextDelta = -totalAvaliableDelta; | ||
} | ||
this.cache.totalDelta = _nextDelta; | ||
this.setSwipePosition(); | ||
// calculate pagination display | ||
var _checkPaginationByDel = this.checkPaginationByDelta(this.cache.totalDelta), | ||
hasPrevPage = _checkPaginationByDel.hasPrevPage, | ||
hasNextPage = _checkPaginationByDel.hasNextPage; | ||
this.setState({ | ||
hasPrevPage: hasPrevPage, | ||
hasNextPage: hasNextPage | ||
}); | ||
if (hasPrevPage && hasNextPage) { | ||
this.setSwipePositionByDelta(nextTotalDelta); | ||
if (hasPrevPage !== this.state.hasPrevPage || hasNextPage !== this.state.hasNextPage) { | ||
this.setState({ | ||
hasPrevPage: hasPrevPage, | ||
hasNextPage: hasNextPage | ||
}); | ||
} | ||
@@ -195,8 +210,2 @@ }, | ||
var navClasses = (0, _classnames4['default'])((0, _defineProperty3['default'])({}, navClassName, true)); | ||
var direction = {}; | ||
if ((0, _utils.isVertical)(tabBarPosition)) { | ||
direction = { | ||
vertical: true | ||
}; | ||
} | ||
var events = { | ||
@@ -217,3 +226,4 @@ onPan: this.onPan | ||
_rcHammerjs2['default'], | ||
(0, _extends3['default'])({}, events, direction, { | ||
(0, _extends3['default'])({}, events, { | ||
direction: (0, _utils.isVertical)(tabBarPosition) ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL', | ||
options: hammerOptions | ||
@@ -220,0 +230,0 @@ }), |
@@ -180,8 +180,2 @@ 'use strict'; | ||
var direction = {}; | ||
if ((0, _utils.isVertical)(tabBarPosition)) { | ||
direction = { | ||
vertical: true | ||
}; | ||
} | ||
var events = { | ||
@@ -199,3 +193,4 @@ onSwipe: this.onSwipe, | ||
_rcHammerjs2['default'], | ||
(0, _extends3['default'])({}, events, direction, { | ||
(0, _extends3['default'])({}, events, { | ||
direction: (0, _utils.isVertical)(tabBarPosition) ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL', | ||
options: hammerOptions | ||
@@ -202,0 +197,0 @@ }), |
@@ -97,4 +97,5 @@ 'use strict'; | ||
function setPxStyle(el, property, value) { | ||
el.style[property] = value + 'px'; | ||
function setPxStyle(el, value, vertical) { | ||
value = vertical ? '0px, ' + value + 'px, 0px' : value + 'px, 0px, 0px'; | ||
setTransform(el.style, 'translate3d(' + value + ')'); | ||
} |
{ | ||
"name": "rc-tabs", | ||
"version": "7.5.0", | ||
"version": "8.0.0-beta.0", | ||
"description": "tabs ui component for react", | ||
@@ -32,3 +32,3 @@ "keywords": [ | ||
"build": "rc-tools run build", | ||
"compile": "rc-tools run compile", | ||
"compile": "rc-tools run compile --babel-runtime", | ||
"gh-pages": "rc-tools run gh-pages", | ||
@@ -39,7 +39,7 @@ "start": "rc-tools run server", | ||
"watch": "rc-tools run watch", | ||
"karma": "rc-tools run karma", | ||
"saucelabs": "rc-tools run saucelabs", | ||
"karma": "rc-test run karma", | ||
"saucelabs": "rc-test run saucelabs", | ||
"test": "jest", | ||
"updateSn": "jest --updateSnapshot", | ||
"chrome-test": "rc-tools run chrome-test", | ||
"chrome-test": "rc-test run chrome-test", | ||
"coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls" | ||
@@ -61,2 +61,3 @@ }, | ||
"pre-commit": "1.x", | ||
"rc-test": "^6.0.1", | ||
"rc-tools": "6.x", | ||
@@ -63,0 +64,0 @@ "react": "15.x", |
@@ -157,3 +157,3 @@ # rc-tabs | ||
<th></th> | ||
<td>corresponding to activeKey</td> | ||
<td>corresponding to activeKey, should be unique</td> | ||
</tr> | ||
@@ -346,3 +346,3 @@ <tr> | ||
swipeable tab panes, in addition to lib/TabContent props, extra props: | ||
swipeable tab panes, in addition to lib/TabContent props, extra props: | ||
@@ -349,0 +349,0 @@ <table class="table table-bordered table-striped"> |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
120943
3256
14
1