1 |
|
2 |
|
3 |
|
4 |
|
5 | import React from 'react';
|
6 |
|
7 | export function toArray(children) {
|
8 |
|
9 | const c = [];
|
10 | React.Children.forEach(children, child => {
|
11 | if (child) {
|
12 | c.push(child);
|
13 | }
|
14 | });
|
15 | return c;
|
16 | }
|
17 |
|
18 | export function getActiveIndex(children, activeKey) {
|
19 | const c = toArray(children);
|
20 | for (let i = 0; i < c.length; i++) {
|
21 | if (c[i].key === activeKey) {
|
22 | return i;
|
23 | }
|
24 | }
|
25 | return -1;
|
26 | }
|
27 |
|
28 | export function getActiveKey(children, index) {
|
29 | const c = toArray(children);
|
30 | return c[index].key;
|
31 | }
|
32 |
|
33 | export function setTransform(style, v) {
|
34 | style.transform = v;
|
35 | style.webkitTransform = v;
|
36 | style.mozTransform = v;
|
37 | }
|
38 |
|
39 | export function isTransformSupported(style) {
|
40 | return 'transform' in style ||
|
41 | 'webkitTransform' in style ||
|
42 | 'MozTransform' in style;
|
43 | }
|
44 |
|
45 | export function setTransition(style, v) {
|
46 | style.transition = v;
|
47 | style.webkitTransition = v;
|
48 | style.MozTransition = v;
|
49 | }
|
50 | export function getTransformPropValue(v) {
|
51 | return {
|
52 | transform: v,
|
53 | WebkitTransform: v,
|
54 | MozTransform: v,
|
55 | };
|
56 | }
|
57 |
|
58 | export function isVertical(tabBarPosition) {
|
59 | return tabBarPosition === 'left' || tabBarPosition === 'right';
|
60 | }
|
61 |
|
62 | export function getTransformByIndex(index, tabBarPosition) {
|
63 | const translate = isVertical(tabBarPosition) ? 'translateY' : 'translateX';
|
64 | return `${translate}(${-index * 100}%) translateZ(0)`;
|
65 | }
|
66 |
|
67 | export function getMarginStyle(index, tabBarPosition) {
|
68 | const marginDirection = isVertical(tabBarPosition) ? 'marginTop' : 'marginLeft';
|
69 | return {
|
70 | [marginDirection]: `${-index * 100}%`,
|
71 | };
|
72 | }
|
73 |
|
74 | export function getStyle(el, property) {
|
75 | return +getComputedStyle(el).getPropertyValue(property).replace('px', '');
|
76 | }
|
77 |
|
78 | export function setPxStyle(el, property, value) {
|
79 | el.style[property] = `${value}px`;
|
80 | }
|
81 |
|
82 | function toNum(style, property) {
|
83 | return +style.getPropertyValue(property).replace('px', '');
|
84 | }
|
85 |
|
86 | function getTypeValue(start, current, end, tabNode, wrapperNode) {
|
87 | let total = getStyle(wrapperNode, `padding-${start}`);
|
88 | if (!tabNode || !tabNode.parentNode) {
|
89 | return total;
|
90 | }
|
91 |
|
92 | const { childNodes } = tabNode.parentNode;
|
93 | Array.prototype.some.call(childNodes, (node) => {
|
94 | const style = window.getComputedStyle(node);
|
95 |
|
96 | if (node !== tabNode) {
|
97 | total += toNum(style, `margin-${start}`);
|
98 | total += node[current];
|
99 | total += toNum(style, `margin-${end}`);
|
100 |
|
101 | if (style.boxSizing === 'content-box') {
|
102 | total += toNum(style, `border-${start}-width`) + toNum(style, `border-${end}-width`);
|
103 | }
|
104 | return false;
|
105 | }
|
106 |
|
107 |
|
108 |
|
109 | total += toNum(style, `margin-${start}`);
|
110 |
|
111 | return true;
|
112 | });
|
113 |
|
114 | return total;
|
115 | }
|
116 |
|
117 | export function getLeft(tabNode, wrapperNode) {
|
118 | return getTypeValue('left', 'offsetWidth', 'right', tabNode, wrapperNode);
|
119 | }
|
120 |
|
121 | export function getTop(tabNode, wrapperNode) {
|
122 | return getTypeValue('top', 'offsetHeight', 'bottom', tabNode, wrapperNode);
|
123 | }
|
124 |
|
125 | export function getDataAttr(props) {
|
126 | return Object.keys(props).reduce((prev, key) => {
|
127 | if (key.substr(0, 5) === 'aria-' || key.substr(0, 5) === 'data-' || key === 'role') {
|
128 | prev[key] = props[key];
|
129 | }
|
130 | return prev;
|
131 | }, {});
|
132 | } |
\ | No newline at end of file |