bump react to 16.3.0 and styled-components to 4.0.0 (#118)

* bump react to 16.3.0 and styled-components to 4.0.0
ctxhou · Nov 10, 2018 · 200a64d · 200a64d
1 parent c0ad9fa
commit 200a64d
Show file tree

Hide file tree

Showing 13 changed files with 1,508 additions and 356 deletions.
diff --git a/README.md b/README.md
@@ -13,7 +13,9 @@
 ![gzip size](http://img.badgesize.io/https://unpkg.com/react-tabtab/dist/react-tabtab.min.js?compression=gzip)
 
 > A mobile support, draggable, editable and api based Tab for ReactJS. <br/>
-> *Support react v16 and v15*
+> *Support react >= `v16.3`*
+
+**Note: Since v2, we don't support v15 and old styled-components version (<4.0.0) [v15 document](https://github.com/ctxhou/react-tabtab/blob/v1.8.4/README.md)**
 
 ### [Demo](https://ctxhou.github.io/react-tabtab/)
 
@@ -64,7 +66,7 @@ Install `styled-components`. Because we put the `styled-components` to the peerD
 
 ```js
 $ npm install react-tabtab --save
-$ npm install styled-components --save
+$ npm install styled-components@^4.0.0 --save
 ```
 
 Then, import the module by module bundler like `webpack`, `browserify`
@@ -552,19 +554,19 @@ let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = styled;
 import {styled} from 'react-tabtab';
 let {TabListStyle, ActionButtonStyle, TabStyle, PanelStyle} = styled;
 
-TabListStyle = TabListStyle.extend`
+TabListStyle = styled(TabListStyle)`
   // write css
 `;
 
-TabStyle = TabStyle.extend`
+TabStyle = styled(TabStyle)`
   // write css
 `;
 
-ActionButtonStyle = ActionButtonStyle.extend`
+ActionButtonStyle = styled(ActionButtonStyle)`
   // write css
 `;
 
-PanelStyle = PanelStyle.extend`
+PanelStyle = styled(PanelStyle)`
   // write css
 `;
 

diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
   "homepage": "https://github.com/ctxhou/react-tabtab#readme",
   "dependencies": {
     "classnames": "^2.2.5",
-    "enzyme-adapter-react-15": "^1.0.5",
     "invariant": "^2.2.2",
     "prop-types": "^15.6.0",
     "react-poppop": "^1.5.0",
@@ -77,8 +76,10 @@
     "babel-runtime": "^6.11.6",
     "compression-webpack-plugin": "^1.0.1",
     "cross-env": "^5.1.1",
-    "enzyme": "^3.1.1",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-15": "^1.0.5",
     "enzyme-adapter-react-16": "^1.0.4",
+    "enzyme-adapter-react-16.3": "^1.4.0",
     "enzyme-to-json": "^3.2.2",
     "eslint": "^4.0.0",
     "eslint-config-google": "^0.4.0",
@@ -95,13 +96,13 @@
     "html-webpack-plugin": "^2.30.1",
     "husky": "^0.14.3",
     "jest": "^20.0.4",
-    "jest-styled-components": "^5.0.1",
+    "jest-styled-components": "^6.3.0",
     "noop3": "^999.999.999",
     "precommit-hook-eslint": "^3.0.0",
     "prettier": "^1.7.4",
-    "react": "^16.0.0",
+    "react": "16.3.0",
     "react-content-loader": "^3.1.1",
-    "react-dom": "^16.0.0",
+    "react-dom": "16.3.0",
     "react-icons": "^2.2.7",
     "react-select": "^1.0.0-rc.10",
     "rimraf": "^2.6.2",
@@ -114,15 +115,15 @@
     "rollup-plugin-replace": "^2.0.0",
     "rollup-plugin-uglify": "^2.0.1",
     "rollup-plugin-visualizer": "^0.3.1",
-    "styled-components": "^3.2.6",
+    "styled-components": "^4.0.0",
     "webpack": "^3.3.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-middleware": "^1.12.0",
     "webpack-hot-middleware": "^2.18.2"
   },
   "peerDependencies": {
-    "react": ">= 15.0.0 < 17.0.0-0",
-    "styled-components": "^3.2.6"
+    "react": ">= 16.3.0 < 17.0.0-0",
+    "styled-components": "^4.0.0"
   },
   "jest": {
     "setupFiles": [

diff --git a/src/Tab.js b/src/Tab.js
@@ -62,7 +62,7 @@ export default class Tab extends React.PureComponent<Props> {
     const {CustomTabStyle, active, closable, vertical, index} = this.props;
     const TabComponent = CustomTabStyle || TabStyle;
     return (
-      <TabComponent innerRef={node => this.__INTERNAL_NODE = node}
+      <TabComponent ref={node => this.__INTERNAL_NODE = node}
                     onClick={this.clickTab}
                     active={active}
                     vertical={vertical}

diff --git a/src/TabList.js b/src/TabList.js
@@ -65,7 +65,7 @@ const ActionButtonStyle = styled.div`
   }
 `;
 
-const makeScrollButton = ActionButton => ActionButton.extend`
+const makeScrollButton = ActionButton => styled(ActionButton)`
   display: inline-block;
   filter: none;
   position: absolute;
@@ -78,7 +78,7 @@ const makeScrollButton = ActionButton => ActionButton.extend`
   }
 `;
 
-const makeFoldButton = ActionButton => ActionButton.extend`
+const makeFoldButton = ActionButton => styled(ActionButton)`
   display: inline-block;
   filter: none;
   position: absolute;
@@ -299,12 +299,12 @@ export default class TabListComponent extends React.Component<Props, State> {
         <div>
           <ScrollButton left
             onClick={() => { this.handleScroll('left') }}
-            innerRef={node => this.leftArrowNode = node}
+            ref={node => this.leftArrowNode = node}
             showModalButton={this.state.showModalButton}>
             <LeftIcon />
           </ScrollButton>
           <ScrollButton onClick={() => { this.handleScroll('right') }}
-            innerRef={node => this.rightArrowNode = node}>
+            ref={node => this.rightArrowNode = node}>
             <RightIcon />
           </ScrollButton>
         </div>
@@ -334,15 +334,15 @@ export default class TabListComponent extends React.Component<Props, State> {
                  showModalButton={this.state.showModalButton}
                  showArrowButton={this.state.showArrowButton}>
           {this.state.showModalButton ?
-            <FoldButton innerRef={node => this.foldNode = node}
+            <FoldButton ref={node => this.foldNode = node}
                         onClick={this.toggleModal.bind(this, true)}
                         showArrowButton={this.state.showArrowButton}>
               <BulletIcon/>
             </FoldButton>
           : null}
           {this.renderArrowButton(ScrollButton)}
-          <ListInner innerRef={node => this.listContainer = node}>
-            <ListScroll innerRef={node => this.listScroll = node} role="tablist">
+          <ListInner ref={node => this.listContainer = node}>
+            <ListScroll ref={node => this.listScroll = node} role="tablist">
               {this.renderTabs()}
             </ListScroll>
           </ListInner>

diff --git a/test/Tab.test.js b/test/Tab.test.js
@@ -1,8 +1,10 @@
 import React from 'react';
-import Tab, {TabStyle} from '../src/Tab';
-import {shallow, mount} from 'enzyme';
+import styled from 'styled-components';
+import {mount} from 'enzyme';
 import 'jest-styled-components'
 
+import Tab, {TabStyle} from '../src/Tab';
+
 describe('Tab', () => {
   describe('render TabList', () => {
     it('render pure text', () => {
@@ -44,10 +46,10 @@ describe('Tab', () => {
   })
 
   test('custom ListStyle style', () => {
-    const CustomTabStyle = TabStyle.extend`
+    const CustomTabStyle = styled(TabStyle)`
       background-color: red;
     `;
-    const component = shallow(
+    const component = mount(
       <Tab CustomTabStyle={CustomTabStyle}>
         <span>tab</span>
       </Tab>