react-component / tabs / 458

pending completion

Build # 458

Build Type

Pull #115

travis-ci

Committed by

web-flow

Commit Message

Fix wrong active tab offset

close ant-design/ant-design#9371

related with ant-design/ant-design#8861

Pull Request Pull Request #115: Fix tab offset

Run Details

219 of 487 branches covered (44.97%)

7 of 7 new or added lines in 1 file covered. (100.0%)

379 of 598 relevant lines covered (63.38%)

9.39 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

48.87

/src/ScrollableTabBarMixin.js

import classnames from 'classnames';
import { setTransform, isTransformSupported } from './utils';
import React from 'react';
import addEventListener from 'rc-util/lib/Dom/addEventListener';
import debounce from 'lodash/debounce';

export default {
  getDefaultProps() {
    return {
      scrollAnimated: true,
      onPrevClick() {},
      onNextClick() {},
    };
  },

  getInitialState() {
    this.offset = 0;
    return {
      next: false,
      prev: false,
    };
  },

  componentDidMount() {
    this.componentDidUpdate();
    this.debouncedResize = debounce(() => {
      this.setNextPrev();
      this.scrollToActiveTab();
    }, 200);
    this.resizeEvent = addEventListener(window, 'resize', this.debouncedResize);
  },

  componentDidUpdate(prevProps) {
    const props = this.props;
    if (prevProps && prevProps.tabBarPosition !== props.tabBarPosition) {
      this.setOffset(0);
      return;
    }
    const nextPrev = this.setNextPrev();
    // wait next, prev show hide
    /* eslint react/no-did-update-set-state:0 */
    if (this.isNextPrevShown(this.state) !== this.isNextPrevShown(nextPrev)) {
      this.setState({}, this.scrollToActiveTab);
    } else if (!prevProps || props.activeKey !== prevProps.activeKey) {
      // can not use props.activeKey
      this.scrollToActiveTab();
    }
  },

  componentWillUnmount() {
    if (this.resizeEvent) {
      this.resizeEvent.remove();
    }
    if (this.debouncedResize && this.debouncedResize.cancel) {
      this.debouncedResize.cancel();
    }
  },

  setNextPrev() {
    const navNode = this.nav;
    const navNodeWH = this.getScrollWH(navNode);
    const containerWH = this.getOffsetWH(this.container);
    const navWrapNodeWH = this.getOffsetWH(this.navWrap);
    let { offset } = this;
    const minOffset = containerWH - navNodeWH;
    let { next, prev } = this.state;
    if (minOffset >= 0) {
      next = false;
      this.setOffset(0, false);
      offset = 0;
    } else if (minOffset < offset) {
      next = (true);
    } else {
      next = (false);
      // Fix https://github.com/ant-design/ant-design/issues/8861
      // Test with container offset which is stable
      // and set the offset of the nav wrap node
      const realOffset = navWrapNodeWH - navNodeWH;
      this.setOffset(realOffset, false);
      offset = realOffset;
    }

    if (offset < 0) {
      prev = (true);
    } else {
      prev = (false);
    }

    this.setNext(next);
    this.setPrev(prev);
    return {
      next,
      prev,
    };
  },

  getOffsetWH(node) {
    const tabBarPosition = this.props.tabBarPosition;
    let prop = 'offsetWidth';
    if (tabBarPosition === 'left' || tabBarPosition === 'right') {
      prop = 'offsetHeight';
    }
    return node[prop];
  },

  getScrollWH(node) {
    const tabBarPosition = this.props.tabBarPosition;
    let prop = 'scrollWidth';
    if (tabBarPosition === 'left' || tabBarPosition === 'right') {
      prop = 'scrollHeight';
    }
    return node[prop];
  },


  getOffsetLT(node) {
    const tabBarPosition = this.props.tabBarPosition;
    let prop = 'left';
    if (tabBarPosition === 'left' || tabBarPosition === 'right') {
      prop = 'top';
    }
    return node.getBoundingClientRect()[prop];
  },

  setOffset(offset, checkNextPrev = true) {
    const target = Math.min(0, offset);
    if (this.offset !== target) {
      this.offset = target;
      let navOffset = {};
      const tabBarPosition = this.props.tabBarPosition;
      const navStyle = this.nav.style;
      const transformSupported = isTransformSupported(navStyle);
      if (tabBarPosition === 'left' || tabBarPosition === 'right') {
        if (transformSupported) {
          navOffset = {
            value: `translate3d(0,${target}px,0)`,
          };
        } else {
          navOffset = {
            name: 'top',
            value: `${target}px`,
          };
        }
      } else {
        if (transformSupported) {
          navOffset = {
            value: `translate3d(${target}px,0,0)`,
          };
        } else {
          navOffset = {
            name: 'left',
            value: `${target}px`,
          };
        }
      }
      if (transformSupported) {
        setTransform(navStyle, navOffset.value);
      } else {
        navStyle[navOffset.name] = navOffset.value;
      }
      if (checkNextPrev) {
        this.setNextPrev();
      }
    }
  },

  setPrev(v) {
    if (this.state.prev !== v) {
      this.setState({
        prev: v,
      });
    }
  },

  setNext(v) {
    if (this.state.next !== v) {
      this.setState({
        next: v,
      });
    }
  },

  isNextPrevShown(state) {
    if (state) {
      return state.next || state.prev;
    }
    return this.state.next || this.state.prev;
  },

  prevTransitionEnd(e) {
    if (e.propertyName !== 'opacity') {
      return;
    }
    const { container } = this;
    this.scrollToActiveTab({
      target: container,
      currentTarget: container,
    });
  },

  scrollToActiveTab(e) {
    const { activeTab, navWrap } = this;
    if (e && e.target !== e.currentTarget || !activeTab) {
      return;
    }

    // when not scrollable or enter scrollable first time, don't emit scrolling
    const needToSroll = this.isNextPrevShown() && this.lastNextPrevShown;
    this.lastNextPrevShown = this.isNextPrevShown();
    if (!needToSroll) {
      return;
    }

    const activeTabWH = this.getScrollWH(activeTab);
    const navWrapNodeWH = this.getOffsetWH(navWrap);
    let { offset } = this;
    const wrapOffset = this.getOffsetLT(navWrap);
    const activeTabOffset = this.getOffsetLT(activeTab);
    if (wrapOffset > activeTabOffset) {
      offset += (wrapOffset - activeTabOffset);
      this.setOffset(offset);
    } else if ((wrapOffset + navWrapNodeWH) < (activeTabOffset + activeTabWH)) {
      offset -= (activeTabOffset + activeTabWH) - (wrapOffset + navWrapNodeWH);
      this.setOffset(offset);
    }
  },

  prev(e) {
    this.props.onPrevClick(e);
    const navWrapNode = this.navWrap;
    const navWrapNodeWH = this.getOffsetWH(navWrapNode);
    const { offset } = this;
    this.setOffset(offset + navWrapNodeWH);
  },

  next(e) {
    this.props.onNextClick(e);
    const navWrapNode = this.navWrap;
    const navWrapNodeWH = this.getOffsetWH(navWrapNode);
    const { offset } = this;
    this.setOffset(offset - navWrapNodeWH);
  },

  getScrollBarNode(content) {
    const { next, prev } = this.state;
    const { prefixCls, scrollAnimated } = this.props;
    const showNextPrev = prev || next;

    const prevButton = (
      <span
        onClick={prev ? this.prev : null}
        unselectable="unselectable"
        className={classnames({
          [`${prefixCls}-tab-prev`]: 1,
          [`${prefixCls}-tab-btn-disabled`]: !prev,
          [`${prefixCls}-tab-arrow-show`]: showNextPrev,
        })}
        onTransitionEnd={this.prevTransitionEnd}
      >
        <span className={`${prefixCls}-tab-prev-icon`} />
      </span>
    );

    const nextButton = (
      <span
        onClick={next ? this.next : null}
        unselectable="unselectable"
        className={classnames({
          [`${prefixCls}-tab-next`]: 1,
          [`${prefixCls}-tab-btn-disabled`]: !next,
          [`${prefixCls}-tab-arrow-show`]: showNextPrev,
        })}
      >
        <span className={`${prefixCls}-tab-next-icon`} />
      </span>
    );

    const navClassName = `${prefixCls}-nav`;
    const navClasses = classnames({
      [navClassName]: true,
      [
        scrollAnimated ?
          `${navClassName}-animated` :
          `${navClassName}-no-animated`
        ]: true,
    });

    return (
      <div
        className={classnames({
          [`${prefixCls}-nav-container`]: 1,
          [`${prefixCls}-nav-container-scrolling`]: showNextPrev,
        })}
        key="container"
        ref={this.saveRef('container')}
      >
        {prevButton}
        {nextButton}
        <div className={`${prefixCls}-nav-wrap`} ref={this.saveRef('navWrap')}>
          <div className={`${prefixCls}-nav-scroll`}>
            <div className={navClasses} ref={this.saveRef('nav')}>
              {content}
            </div>
          </div>
        </div>
      </div>
    );
  },
};

1	import classnames from 'classnames';	1✔
2	import { setTransform, isTransformSupported } from './utils';	1✔
3	import React from 'react';	1✔
4	import addEventListener from 'rc-util/lib/Dom/addEventListener';	1✔
5	import debounce from 'lodash/debounce';	60!
6
7	export default {
8	getDefaultProps() {
9	return {	1✔
10	scrollAnimated: true,
11	onPrevClick() {},
12	onNextClick() {},
13	};
14	},
15
16	getInitialState() {
17	this.offset = 0;	5✔
18	return {	5✔
19	next: false,
20	prev: false,
21	};
22	},
23
24	componentDidMount() {	4✔
25	this.componentDidUpdate();	4✔
26	this.debouncedResize = debounce(() => {	4✔
27	this.setNextPrev();	×
28	this.scrollToActiveTab();	×
29	}, 200);
30	this.resizeEvent = addEventListener(window, 'resize', this.debouncedResize);	4✔
31	},
32
33	componentDidUpdate(prevProps) {
34	const props = this.props;	5✔
35	if (prevProps && prevProps.tabBarPosition !== props.tabBarPosition) {	5!
36	this.setOffset(0);	×
37	return;	×
38	}
39	const nextPrev = this.setNextPrev();	5✔
40	// wait next, prev show hide
41	/* eslint react/no-did-update-set-state:0 */
42	if (this.isNextPrevShown(this.state) !== this.isNextPrevShown(nextPrev)) {	5!
43	this.setState({}, this.scrollToActiveTab);	×
44	} else if (!prevProps \|\| props.activeKey !== prevProps.activeKey) {	5!
45	// can not use props.activeKey
46	this.scrollToActiveTab();	5✔
47	}
48	},
49
50	componentWillUnmount() {
51	if (this.resizeEvent) {	×
52	this.resizeEvent.remove();	×
53	}
54	if (this.debouncedResize && this.debouncedResize.cancel) {	×
55	this.debouncedResize.cancel();	×
56	}
57	},
58
59	setNextPrev() {
60	const navNode = this.nav;	5✔
61	const navNodeWH = this.getScrollWH(navNode);	5✔
62	const containerWH = this.getOffsetWH(this.container);	5✔
63	const navWrapNodeWH = this.getOffsetWH(this.navWrap);	5✔
64	let { offset } = this;	5✔
65	const minOffset = containerWH - navNodeWH;	5✔
66	let { next, prev } = this.state;	5✔
67	if (minOffset >= 0) {	5!
68	next = false;	5✔
69	this.setOffset(0, false);	5✔
70	offset = 0;	5✔
71	} else if (minOffset < offset) {	×
72	next = (true);	×
73	} else {
74	next = (false);	×
75	// Fix https://github.com/ant-design/ant-design/issues/8861
76	// Test with container offset which is stable
77	// and set the offset of the nav wrap node
78	const realOffset = navWrapNodeWH - navNodeWH;	×
79	this.setOffset(realOffset, false);	×
80	offset = realOffset;	×
81	}
82
83	if (offset < 0) {	5!
84	prev = (true);	×
85	} else {
86	prev = (false);	5✔
87	}
88
89	this.setNext(next);	5✔
90	this.setPrev(prev);	5✔
91	return {	5✔
92	next,
93	prev,
94	};
95	},
96
97	getOffsetWH(node) {
98	const tabBarPosition = this.props.tabBarPosition;	10✔
99	let prop = 'offsetWidth';	10✔
100	if (tabBarPosition === 'left' \|\| tabBarPosition === 'right') {	10!
101	prop = 'offsetHeight';	×
102	}
103	return node[prop];	10✔
104	},
105
106	getScrollWH(node) {
107	const tabBarPosition = this.props.tabBarPosition;	5✔
108	let prop = 'scrollWidth';	5✔
109	if (tabBarPosition === 'left' \|\| tabBarPosition === 'right') {	5!
110	prop = 'scrollHeight';	×
111	}
112	return node[prop];	5✔
113	},
114
115
116	getOffsetLT(node) {
117	const tabBarPosition = this.props.tabBarPosition;	×
118	let prop = 'left';	×
119	if (tabBarPosition === 'left' \|\| tabBarPosition === 'right') {	×
120	prop = 'top';	×
121	}
122	return node.getBoundingClientRect()[prop];	×
123	},
124
125	setOffset(offset, checkNextPrev = true) {	5!
126	const target = Math.min(0, offset);	5✔
127	if (this.offset !== target) {	5!
128	this.offset = target;	×
129	let navOffset = {};	×
130	const tabBarPosition = this.props.tabBarPosition;	×
131	const navStyle = this.nav.style;	×
132	const transformSupported = isTransformSupported(navStyle);	×
133	if (tabBarPosition === 'left' \|\| tabBarPosition === 'right') {	×
134	if (transformSupported) {	×
135	navOffset = {	×
136	value: `translate3d(0,${target}px,0)`,
137	};
138	} else {
139	navOffset = {	×
140	name: 'top',
141	value: `${target}px`,
142	};
143	}
144	} else {
145	if (transformSupported) {	×
146	navOffset = {	×
147	value: `translate3d(${target}px,0,0)`,
148	};
149	} else {
150	navOffset = {	×
151	name: 'left',
152	value: `${target}px`,
153	};
154	}
155	}
156	if (transformSupported) {	×
157	setTransform(navStyle, navOffset.value);	×
158	} else {
159	navStyle[navOffset.name] = navOffset.value;	×
160	}
161	if (checkNextPrev) {	×
162	this.setNextPrev();	×
163	}
164	}
165	},
166
167	setPrev(v) {
168	if (this.state.prev !== v) {	5!
169	this.setState({	×
170	prev: v,
171	});
172	}
173	},
174
175	setNext(v) {
176	if (this.state.next !== v) {	5!
177	this.setState({	×
178	next: v,
179	});
180	}
181	},
182
183	isNextPrevShown(state) {
184	if (state) {	20✔
185	return state.next \|\| state.prev;	10✔
186	}
187	return this.state.next \|\| this.state.prev;	10✔
188	},
189
190	prevTransitionEnd(e) {
191	if (e.propertyName !== 'opacity') {	×
192	return;	×
193	}
194	const { container } = this;	×
195	this.scrollToActiveTab({	×
196	target: container,
197	currentTarget: container,
198	});
199	},
200
201	scrollToActiveTab(e) {
202	const { activeTab, navWrap } = this;	5✔
203	if (e && e.target !== e.currentTarget \|\| !activeTab) {	5!
204	return;	×
205	}
206
207	// when not scrollable or enter scrollable first time, don't emit scrolling
208	const needToSroll = this.isNextPrevShown() && this.lastNextPrevShown;	5!
209	this.lastNextPrevShown = this.isNextPrevShown();	5✔
210	if (!needToSroll) {	5!
211	return;	5✔
212	}
213
214	const activeTabWH = this.getScrollWH(activeTab);	×
215	const navWrapNodeWH = this.getOffsetWH(navWrap);	×
216	let { offset } = this;	×
217	const wrapOffset = this.getOffsetLT(navWrap);	×
218	const activeTabOffset = this.getOffsetLT(activeTab);	×
219	if (wrapOffset > activeTabOffset) {	×
220	offset += (wrapOffset - activeTabOffset);	×
221	this.setOffset(offset);	×
222	} else if ((wrapOffset + navWrapNodeWH) < (activeTabOffset + activeTabWH)) {	×
223	offset -= (activeTabOffset + activeTabWH) - (wrapOffset + navWrapNodeWH);	×
224	this.setOffset(offset);	×
225	}
226	},
227
228	prev(e) {
229	this.props.onPrevClick(e);	×
230	const navWrapNode = this.navWrap;	×
231	const navWrapNodeWH = this.getOffsetWH(navWrapNode);	×
232	const { offset } = this;	×
233	this.setOffset(offset + navWrapNodeWH);	×
234	},
235
236	next(e) {
237	this.props.onNextClick(e);	×
238	const navWrapNode = this.navWrap;	×
239	const navWrapNodeWH = this.getOffsetWH(navWrapNode);	×
240	const { offset } = this;	×
241	this.setOffset(offset - navWrapNodeWH);	×
242	},
243
244	getScrollBarNode(content) {
245	const { next, prev } = this.state;	6✔
246	const { prefixCls, scrollAnimated } = this.props;	6✔
247	const showNextPrev = prev \|\| next;	6✔
248
249	const prevButton = (
250	<span	6✔
251	onClick={prev ? this.prev : null}	6!
252	unselectable="unselectable"
253	className={classnames({
254	[`${prefixCls}-tab-prev`]: 1,
255	[`${prefixCls}-tab-btn-disabled`]: !prev,
256	[`${prefixCls}-tab-arrow-show`]: showNextPrev,
257	})}
258	onTransitionEnd={this.prevTransitionEnd}
259	>
260	<span className={`${prefixCls}-tab-prev-icon`} />
261	</span>
262	);
263
264	const nextButton = (
265	<span	6✔
266	onClick={next ? this.next : null}	6!
267	unselectable="unselectable"
268	className={classnames({
269	[`${prefixCls}-tab-next`]: 1,
270	[`${prefixCls}-tab-btn-disabled`]: !next,
271	[`${prefixCls}-tab-arrow-show`]: showNextPrev,
272	})}
273	>
274	<span className={`${prefixCls}-tab-next-icon`} />
275	</span>
276	);
277
278	const navClassName = `${prefixCls}-nav`;	6✔
279	const navClasses = classnames({	6✔
280	[navClassName]: true,
281	[
282	scrollAnimated ?	6!
283	`${navClassName}-animated` :
284	`${navClassName}-no-animated`
285	]: true,
286	});
287
288	return (	6✔
289	<div
290	className={classnames({
291	[`${prefixCls}-nav-container`]: 1,
292	[`${prefixCls}-nav-container-scrolling`]: showNextPrev,
293	})}
294	key="container"
295	ref={this.saveRef('container')}
296	>
297	{prevButton}
298	{nextButton}
299	<div className={`${prefixCls}-nav-wrap`} ref={this.saveRef('navWrap')}>
300	<div className={`${prefixCls}-nav-scroll`}>
301	<div className={navClasses} ref={this.saveRef('nav')}>
302	{content}
303	</div>
304	</div>
305	</div>
306	</div>
307	);
308	},	1✔
309	};

react-component / tabs / 458

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous