1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import _defineProperty from 'babel-runtime/helpers/defineProperty';
export function toArray(children) {
var c = [];
children.forEach(function (child) {
if (child.data) {
c.push(child);
}
});
return c;
}
export 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;
}
export function getActiveKey(children, index) {
var c = toArray(children);
return c[index].key;
}
export function setTransform(style, v) {
style.transform = v;
style.webkitTransform = v;
style.mozTransform = v;
}
export function isTransformSupported(style) {
return 'transform' in style || 'webkitTransform' in style || 'MozTransform' in style;
}
export function setTransition(style, v) {
style.transition = v;
style.webkitTransition = v;
style.MozTransition = v;
}
export function getTransformPropValue(v) {
return {
transform: v,
WebkitTransform: v,
MozTransform: v
};
}
export function isVertical(tabBarPosition) {
return tabBarPosition === 'left' || tabBarPosition === 'right';
}
export function getTransformByIndex(index, tabBarPosition) {
var translate = isVertical(tabBarPosition) ? 'translateY' : 'translateX';
return translate + '(' + -index * 100 + '%) translateZ(0)';
}
export function getMarginStyle(index, tabBarPosition) {
var marginDirection = isVertical(tabBarPosition) ? 'marginTop' : 'marginLeft';
return _defineProperty({}, marginDirection, -index * 100 + '%');
}
export function getStyle(el, property) {
return +window.getComputedStyle(el).getPropertyValue(property).replace('px', '');
}
export function setPxStyle(el, value, vertical) {
value = vertical ? '0px, ' + value + 'px, 0px' : value + 'px, 0px, 0px';
setTransform(el.style, 'translate3d(' + value + ')');
}
export 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;
}
export function getLeft(tabNode, wrapperNode) {
return getTypeValue('left', 'offsetWidth', 'right', tabNode, wrapperNode);
}
export function getTop(tabNode, wrapperNode) {
return getTypeValue('top', 'offsetHeight', 'bottom', tabNode, wrapperNode);
}