155 lines
4.2 KiB
JavaScript
155 lines
4.2 KiB
JavaScript
'use strict';
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
|
|
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
|
|
|
|
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
|
|
|
|
exports.toArray = toArray;
|
|
exports.getActiveIndex = getActiveIndex;
|
|
exports.getActiveKey = getActiveKey;
|
|
exports.setTransform = setTransform;
|
|
exports.isTransform3dSupported = isTransform3dSupported;
|
|
exports.setTransition = setTransition;
|
|
exports.getTransformPropValue = getTransformPropValue;
|
|
exports.isVertical = isVertical;
|
|
exports.getTransformByIndex = getTransformByIndex;
|
|
exports.getMarginStyle = getMarginStyle;
|
|
exports.getStyle = getStyle;
|
|
exports.setPxStyle = setPxStyle;
|
|
exports.getDataAttr = getDataAttr;
|
|
exports.getLeft = getLeft;
|
|
exports.getTop = getTop;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
|
|
|
|
function toArray(children) {
|
|
var c = [];
|
|
children.forEach(function (child) {
|
|
if (child.data) {
|
|
c.push(child);
|
|
}
|
|
});
|
|
return c;
|
|
}
|
|
|
|
function getActiveIndex(children, activeKey) {
|
|
var c = toArray(children);
|
|
for (var i = 0; i < c.length; i++) {
|
|
if (c[i].key === activeKey) {
|
|
return i;
|
|
}
|
|
}
|
|
return -1;
|
|
}
|
|
|
|
function getActiveKey(children, index) {
|
|
var c = toArray(children);
|
|
return c[index].key;
|
|
}
|
|
|
|
function setTransform(style, v) {
|
|
style.transform = v;
|
|
style.webkitTransform = v;
|
|
style.mozTransform = v;
|
|
}
|
|
|
|
function isTransform3dSupported(style) {
|
|
return ('transform' in style || 'webkitTransform' in style || 'MozTransform' in style) && window.atob;
|
|
}
|
|
|
|
function setTransition(style, v) {
|
|
style.transition = v;
|
|
style.webkitTransition = v;
|
|
style.MozTransition = v;
|
|
}
|
|
function getTransformPropValue(v) {
|
|
return {
|
|
transform: v,
|
|
WebkitTransform: v,
|
|
MozTransform: v
|
|
};
|
|
}
|
|
|
|
function isVertical(tabBarPosition) {
|
|
return tabBarPosition === 'left' || tabBarPosition === 'right';
|
|
}
|
|
|
|
function getTransformByIndex(index, tabBarPosition) {
|
|
var direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'ltr';
|
|
|
|
var translate = isVertical(tabBarPosition) ? 'translateY' : 'translateX';
|
|
if (!isVertical(tabBarPosition) && direction === 'rtl') {
|
|
return translate + '(' + index * 100 + '%) translateZ(0)';
|
|
}
|
|
return translate + '(' + -index * 100 + '%) translateZ(0)';
|
|
}
|
|
|
|
function getMarginStyle(index, tabBarPosition) {
|
|
var marginDirection = isVertical(tabBarPosition) ? 'marginTop' : 'marginLeft';
|
|
return (0, _defineProperty3['default'])({}, marginDirection, -index * 100 + '%');
|
|
}
|
|
|
|
function getStyle(el, property) {
|
|
return +window.getComputedStyle(el).getPropertyValue(property).replace('px', '');
|
|
}
|
|
|
|
function setPxStyle(el, value, vertical) {
|
|
value = vertical ? '0px, ' + value + 'px, 0px' : value + 'px, 0px, 0px';
|
|
setTransform(el.style, 'translate3d(' + value + ')');
|
|
}
|
|
|
|
function getDataAttr(props) {
|
|
return Object.keys(props).reduce(function (prev, key) {
|
|
if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
|
|
prev[key] = props[key];
|
|
}
|
|
return prev;
|
|
}, {});
|
|
}
|
|
|
|
function toNum(style, property) {
|
|
return +style.getPropertyValue(property).replace('px', '');
|
|
}
|
|
|
|
function getTypeValue(start, current, end, tabNode, wrapperNode) {
|
|
var total = getStyle(wrapperNode, 'padding-' + start);
|
|
if (!tabNode || !tabNode.parentNode) {
|
|
return total;
|
|
}
|
|
|
|
var childNodes = tabNode.parentNode.childNodes;
|
|
|
|
Array.prototype.some.call(childNodes, function (node) {
|
|
var style = window.getComputedStyle(node);
|
|
if (node !== tabNode) {
|
|
total += toNum(style, 'margin-' + start);
|
|
total += node[current];
|
|
total += toNum(style, 'margin-' + end);
|
|
|
|
if (style.boxSizing === 'content-box') {
|
|
total += toNum(style, 'border-' + start + '-width') + toNum(style, 'border-' + end + '-width');
|
|
}
|
|
return false;
|
|
}
|
|
|
|
// We need count current node margin
|
|
// ref: https://github.com/react-component/tabs/pull/139#issuecomment-431005262
|
|
total += toNum(style, 'margin-' + start);
|
|
|
|
return true;
|
|
});
|
|
|
|
return total;
|
|
}
|
|
|
|
function getLeft(tabNode, wrapperNode) {
|
|
return getTypeValue('left', 'offsetWidth', 'right', tabNode, wrapperNode);
|
|
}
|
|
|
|
function getTop(tabNode, wrapperNode) {
|
|
return getTypeValue('top', 'offsetHeight', 'bottom', tabNode, wrapperNode);
|
|
} |