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

rc-tabs

Package Overview
Dependencies
Maintainers
1
Versions
228
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rc-tabs - npm Package Compare versions

Comparing version 7.5.0 to 8.0.0-beta.0

3

es/KeyCode.js

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

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