From f019ea098c27df4ebcd7c3cf8a64494fe81c3685 Mon Sep 17 00:00:00 2001 From: picodoth Date: Sun, 5 Aug 2018 22:14:27 +0800 Subject: [PATCH 1/3] fix: cannot find parent container error in prod mode --- src/TabBarRootNode.js | 33 +++- tests/__snapshots__/index.spec.js.snap | 96 +++++++---- tests/__snapshots__/swipe.spec.js.snap | 215 +++++++------------------ tests/index.spec.js | 8 +- tests/swipe.spec.js | 10 +- 5 files changed, 157 insertions(+), 205 deletions(-) diff --git a/src/TabBarRootNode.js b/src/TabBarRootNode.js index 1b4c6fac..34261d2e 100644 --- a/src/TabBarRootNode.js +++ b/src/TabBarRootNode.js @@ -1,17 +1,23 @@ +/* eslint-disable react/no-did-mount-set-state */ import React, { cloneElement } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { getDataAttr } from './utils'; export default class TabBarRootNode extends React.Component { - render() { + componentDidMount() { + // child inktabbar depends on parent ref + // so in mounting phase, we render parent first and then children + this.hasMounted = true; + + // ref https://github.com/airbnb/javascript/issues/684#issuecomment-264094930 + this.setState({}); + } + getChildren() { const { - prefixCls, onKeyDown, className, extraContent, style, tabBarPosition, children, - ...restProps, + extraContent, tabBarPosition, children, } = this.props; - const cls = classnames(`${prefixCls}-bar`, { - [className]: !!className, - }); + const topOrBottom = (tabBarPosition === 'top' || tabBarPosition === 'bottom'); const tabBarExtraContentStyle = topOrBottom ? { float: 'right' } : {}; const extraContentStyle = (extraContent && extraContent.props) ? extraContent.props.style : {}; @@ -29,6 +35,21 @@ export default class TabBarRootNode extends React.Component { ]; newChildren = topOrBottom ? newChildren : newChildren.reverse(); } + + return newChildren; + } + hasMounted = false; + render() { + const { + prefixCls, onKeyDown, className, extraContent, style, tabBarPosition, children, + ...restProps, + } = this.props; + + const cls = classnames(`${prefixCls}-bar`, { + [className]: !!className, + }); + const newChildren = this.hasMounted ? this.getChildren() : null; + return (
- - + className="rc-tabs-tab-prev-icon" + /> - - + className="rc-tabs-tab-next-icon" + />
- -
+ className="rc-tabs-ink-bar rc-tabs-ink-bar-animated" + key="inkBar" + />
+ />
second
+ />
`; diff --git a/tests/__snapshots__/swipe.spec.js.snap b/tests/__snapshots__/swipe.spec.js.snap index eb7b879f..0e00f636 100644 --- a/tests/__snapshots__/swipe.spec.js.snap +++ b/tests/__snapshots__/swipe.spec.js.snap @@ -2,222 +2,127 @@ exports[`rc-swipeable-tabs should render Slider with correct DOM structure 1`] = `
+ - - - - - - - - - - -
- -
+ className="rc-tabs-ink-bar rc-tabs-ink-bar-animated" + key="inkBar" + />
+ /> + /> + /> + /> + /> + /> + /> + />
选项8内容
+ /> + />
diff --git a/tests/index.spec.js b/tests/index.spec.js index de94c2f7..b86185e3 100755 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -1,7 +1,7 @@ /* eslint-disable no-undef */ import React, { Component } from 'react'; -import { mount, shallow, render } from 'enzyme'; -import { renderToJson } from 'enzyme-to-json'; +import { mount, shallow } from 'enzyme'; +import { mountToJson } from 'enzyme-to-json'; import Tabs, { TabPane } from '../src'; import TabContent from '../src/TabContent'; import ScrollableInkTabBar from '../src/ScrollableInkTabBar'; @@ -29,8 +29,8 @@ class NormoalTabs extends Component { describe('rc-tabs', () => { it('should render Tabs with correct DOM structure', () => { - const wrapper = render(); - expect(renderToJson(wrapper)).toMatchSnapshot(); + const wrapper = mount(); + expect(mountToJson(wrapper, { mode: 'deep' })).toMatchSnapshot(); }); it('create and nav should work', () => { diff --git a/tests/swipe.spec.js b/tests/swipe.spec.js index 439b98e6..6c957cb4 100644 --- a/tests/swipe.spec.js +++ b/tests/swipe.spec.js @@ -1,7 +1,7 @@ /* eslint-disable no-undef */ import React, { Component } from 'react'; -import { mount, render } from 'enzyme'; -import { renderToJson } from 'enzyme-to-json'; +import { mount } from 'enzyme'; +import { mountToJson } from 'enzyme-to-json'; import Tabs, { TabPane } from '../src/'; import SwipeableTabContent from '../src/SwipeableTabContent'; import SwipeableInkTabBar from '../src/SwipeableInkTabBar'; @@ -50,12 +50,12 @@ class NormoalTabs extends Component { describe('rc-swipeable-tabs', () => { it('should render Slider with correct DOM structure', () => { - const wrapper = render(); - expect(renderToJson(wrapper)).toMatchSnapshot(); + const wrapper = mount(); + expect(mountToJson(wrapper, { mode: 'deep' })).toMatchSnapshot(); }); it('create and nav should works', () => { - const wrapper = render(); + const wrapper = mount(); expect(wrapper.find('.rc-tabs').length).toBe(1); expect(wrapper.find('.rc-tabs-tab').length).toBe(11); }); From a3e4af61b86bc721b5add6f22cedac4741446da9 Mon Sep 17 00:00:00 2001 From: picodoth Date: Mon, 6 Aug 2018 10:24:46 +0800 Subject: [PATCH 2/3] Revert "fix: cannot find parent container error in prod mode" This reverts commit f019ea098c27df4ebcd7c3cf8a64494fe81c3685. --- src/TabBarRootNode.js | 33 +--- tests/__snapshots__/index.spec.js.snap | 96 ++++------- tests/__snapshots__/swipe.spec.js.snap | 215 ++++++++++++++++++------- tests/index.spec.js | 8 +- tests/swipe.spec.js | 10 +- 5 files changed, 205 insertions(+), 157 deletions(-) diff --git a/src/TabBarRootNode.js b/src/TabBarRootNode.js index 34261d2e..1b4c6fac 100644 --- a/src/TabBarRootNode.js +++ b/src/TabBarRootNode.js @@ -1,23 +1,17 @@ -/* eslint-disable react/no-did-mount-set-state */ import React, { cloneElement } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { getDataAttr } from './utils'; export default class TabBarRootNode extends React.Component { - componentDidMount() { - // child inktabbar depends on parent ref - // so in mounting phase, we render parent first and then children - this.hasMounted = true; - - // ref https://github.com/airbnb/javascript/issues/684#issuecomment-264094930 - this.setState({}); - } - getChildren() { + render() { const { - extraContent, tabBarPosition, children, + prefixCls, onKeyDown, className, extraContent, style, tabBarPosition, children, + ...restProps, } = this.props; - + const cls = classnames(`${prefixCls}-bar`, { + [className]: !!className, + }); const topOrBottom = (tabBarPosition === 'top' || tabBarPosition === 'bottom'); const tabBarExtraContentStyle = topOrBottom ? { float: 'right' } : {}; const extraContentStyle = (extraContent && extraContent.props) ? extraContent.props.style : {}; @@ -35,21 +29,6 @@ export default class TabBarRootNode extends React.Component { ]; newChildren = topOrBottom ? newChildren : newChildren.reverse(); } - - return newChildren; - } - hasMounted = false; - render() { - const { - prefixCls, onKeyDown, className, extraContent, style, tabBarPosition, children, - ...restProps, - } = this.props; - - const cls = classnames(`${prefixCls}-bar`, { - [className]: !!className, - }); - const newChildren = this.hasMounted ? this.getChildren() : null; - return (
+ class="rc-tabs-tab-prev-icon" + > + + + class="rc-tabs-tab-next-icon" + > + +
+ class="rc-tabs-ink-bar rc-tabs-ink-bar-animated" + > + +
second
`; diff --git a/tests/__snapshots__/swipe.spec.js.snap b/tests/__snapshots__/swipe.spec.js.snap index 0e00f636..eb7b879f 100644 --- a/tests/__snapshots__/swipe.spec.js.snap +++ b/tests/__snapshots__/swipe.spec.js.snap @@ -2,127 +2,222 @@ exports[`rc-swipeable-tabs should render Slider with correct DOM structure 1`] = `
-
+ aria-disabled="false" + aria-selected="false" + class="rc-tabs-tab" + role="tab" + style="-webkit-flex-basis:20%;flex-basis:20%" + > + 选项0 +
+ + + + + + + + + + +
+ +
选项8内容
diff --git a/tests/index.spec.js b/tests/index.spec.js index b86185e3..de94c2f7 100755 --- a/tests/index.spec.js +++ b/tests/index.spec.js @@ -1,7 +1,7 @@ /* eslint-disable no-undef */ import React, { Component } from 'react'; -import { mount, shallow } from 'enzyme'; -import { mountToJson } from 'enzyme-to-json'; +import { mount, shallow, render } from 'enzyme'; +import { renderToJson } from 'enzyme-to-json'; import Tabs, { TabPane } from '../src'; import TabContent from '../src/TabContent'; import ScrollableInkTabBar from '../src/ScrollableInkTabBar'; @@ -29,8 +29,8 @@ class NormoalTabs extends Component { describe('rc-tabs', () => { it('should render Tabs with correct DOM structure', () => { - const wrapper = mount(); - expect(mountToJson(wrapper, { mode: 'deep' })).toMatchSnapshot(); + const wrapper = render(); + expect(renderToJson(wrapper)).toMatchSnapshot(); }); it('create and nav should work', () => { diff --git a/tests/swipe.spec.js b/tests/swipe.spec.js index 6c957cb4..439b98e6 100644 --- a/tests/swipe.spec.js +++ b/tests/swipe.spec.js @@ -1,7 +1,7 @@ /* eslint-disable no-undef */ import React, { Component } from 'react'; -import { mount } from 'enzyme'; -import { mountToJson } from 'enzyme-to-json'; +import { mount, render } from 'enzyme'; +import { renderToJson } from 'enzyme-to-json'; import Tabs, { TabPane } from '../src/'; import SwipeableTabContent from '../src/SwipeableTabContent'; import SwipeableInkTabBar from '../src/SwipeableInkTabBar'; @@ -50,12 +50,12 @@ class NormoalTabs extends Component { describe('rc-swipeable-tabs', () => { it('should render Slider with correct DOM structure', () => { - const wrapper = mount(); - expect(mountToJson(wrapper, { mode: 'deep' })).toMatchSnapshot(); + const wrapper = render(); + expect(renderToJson(wrapper)).toMatchSnapshot(); }); it('create and nav should works', () => { - const wrapper = mount(); + const wrapper = render(); expect(wrapper.find('.rc-tabs').length).toBe(1); expect(wrapper.find('.rc-tabs-tab').length).toBe(11); }); From a43ab517a9ebd65c376009d7a7167570d5f7b7ea Mon Sep 17 00:00:00 2001 From: picodoth Date: Mon, 6 Aug 2018 10:33:11 +0800 Subject: [PATCH 3/3] fix: use setTimeout as a quick fix to do calculation after parent mounted --- src/InkTabBarNode.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/InkTabBarNode.js b/src/InkTabBarNode.js index 669d57ac..b1668159 100644 --- a/src/InkTabBarNode.js +++ b/src/InkTabBarNode.js @@ -3,8 +3,6 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { setTransform, isTransformSupported } from './utils'; -const isDev = process.env.NODE_ENV !== 'production'; - export function getScroll(w, top) { let ret = w[`page${top ? 'Y' : 'X'}Offset`]; const method = `scroll${top ? 'Top' : 'Left'}`; @@ -109,14 +107,15 @@ function componentDidUpdate(component, init) { export default class InkTabBarNode extends React.Component { componentDidMount() { - if (isDev) { - // https://github.com/ant-design/ant-design/issues/8678 - this.timeout = setTimeout(() => { - componentDidUpdate(this, true); - }, 0); - } else { + // ref https://github.com/ant-design/ant-design/issues/8678 + // ref https://github.com/ant-design/ant-design/issues/11612 + // InkTabBarNode need parent/root ref for calculating position + // since parent componentDidMount triggered after child componentDidMount + // we're doing a quick fix here to use setTimeout to calculate position + // after parent/root component mounted + this.timeout = setTimeout(() => { componentDidUpdate(this, true); - } + }, 0); } componentDidUpdate() {