Merge pull request #123 from react-component/rm-mixin2

chore: rm mixin and react-create-class

examples/antd.js

@@ -5,7 +5,9 @@ import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
 import TabContent from 'rc-tabs/lib/TabContent';
 import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
+import ScrollableTabBar from 'rc-tabs/lib/ScrollableTabBar';
 import InkTabBar from 'rc-tabs/lib/InkTabBar';
+import TabBar from 'rc-tabs/lib/TabBar';
 
 class PanelContent extends React.Component {
   constructor(props) {
@@ -115,7 +117,29 @@ class Demo extends React.Component {
 
     return (
       <div style={{ margin: 20 }}>
-        <h2>Simple Tabs</h2>
+        <h2>Basic Tabs</h2>
+        <p>
+          tabBarPosition:
+          <select value={this.state.tabBarPosition} onChange={this.changeTabPosition}>
+            <option value="top">top</option>
+            <option value="bottom">bottom</option>
+            <option value="left">left</option>
+            <option value="right">right</option>
+          </select>
+        </p>
+        <div>
+          <Tabs
+            defaultActiveKey="3"
+            style={style}
+            tabBarPosition={this.state.tabBarPosition}
+            renderTabBar={() => <TabBar onTabClick={this.onTabClick}/>}
+            renderTabContent={() => <TabContent style={contentStyle}/>}
+            onChange={this.onChange}
+          >
+            {ends2}
+          </Tabs>
+        </div>
+        <h2>Basic Tabs With Ink Bar</h2>
         <p>
           tabBarPosition:
           <select value={this.state.tabBarPosition} onChange={this.changeTabPosition}>
@@ -138,6 +162,26 @@ class Demo extends React.Component {
           </Tabs>
         </div>
         <h2>Scroll Tabs</h2>
+        <div>
+          <button onClick={() => this.switchToLast(ends)}>
+            switch to last tab
+          </button>
+          <Tabs
+            activeKey={this.state.activeKey}
+            style={style}
+            tabBarPosition={this.state.tabBarPosition}
+            renderTabBar={() => <ScrollableTabBar
+              ref={this.saveBar}
+              onTabClick={this.onTabClick}
+            />}
+            renderTabContent={() => <TabContent style={contentStyle}/>}
+            onChange={this.onChange2}
+          >
+            {ends}
+          </Tabs>
+        </div>
+        <button onClick={this.tick}>rerender</button>
+        <h2>Scroll Tabs with inkBar</h2>
         <div>
           <button onClick={() => this.switchToLast(ends)}>
             switch to last tab

package.json

@@ -91,7 +91,6 @@
   "dependencies": {
     "babel-runtime": "6.x",
     "classnames": "2.x",
-    "create-react-class": "15.x",
     "lodash": "^4.17.5",
     "prop-types": "15.x",
     "rc-hammerjs": "~0.6.0",

src/InkTabBar.js

@@ -1,16 +1,29 @@
-import createReactClass from 'create-react-class';
-import InkTabBarMixin from './InkTabBarMixin';
-import TabBarMixin from './TabBarMixin';
-import RefMixin from './RefMixin';
+import React from 'react';
+import PropTypes from 'prop-types';
+import InkTabBarNode from './InkTabBarNode';
+import TabBarTabsNode from './TabBarTabsNode';
+import TabBarRootNode from './TabBarRootNode';
+import SaveRef from './SaveRef';
 
-const InkTabBar = createReactClass({
-  displayName: 'InkTabBar',
-  mixins: [RefMixin, TabBarMixin, InkTabBarMixin],
+export default class InkTabBar extends React.Component {
   render() {
-    const inkBarNode = this.getInkBarNode();
-    const tabs = this.getTabs();
-    return this.getRootNode([inkBarNode, tabs]);
-  },
-});
+    return (
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <TabBarTabsNode onTabClick={this.props.onTabClick} saveRef={saveRef} {...this.props} />
+            <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
+          </TabBarRootNode>
+        )}
+      </SaveRef>
+    );
+  }
+}
 
-export default InkTabBar;
+InkTabBar.propTypes = {
+  onTabClick: PropTypes.func,
+};
+
+InkTabBar.defaultProps = {
+  onTabClick: () => {},
+};

src/InkTabBarMixin.js → src/InkTabBarNode.js

@@ -1,6 +1,7 @@
-import { setTransform, isTransformSupported } from './utils';
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import { setTransform, isTransformSupported } from './utils';
 
 const isDev = process.env.NODE_ENV !== 'production';
 
@@ -41,11 +42,11 @@ function offset(elem) {
 
 function componentDidUpdate(component, init) {
   const { styles } = component.props;
-  const rootNode = component.root;
-  const wrapNode = component.nav || rootNode;
+  const rootNode = component.props.getRef('root');
+  const wrapNode = component.props.getRef('nav') || rootNode;
   const containerOffset = offset(wrapNode);
-  const inkBarNode = component.inkBar;
-  const activeTab = component.activeTab;
+  const inkBarNode = component.props.getRef('inkBar');
+  const activeTab = component.props.getRef('activeTab');
   const inkBarNodeStyle = inkBarNode.style;
   const tabBarPosition = component.props.tabBarPosition;
   if (init) {
@@ -106,17 +107,7 @@ function componentDidUpdate(component, init) {
   inkBarNodeStyle.display = activeTab ? 'block' : 'none';
 }
 
-export default {
-  getDefaultProps() {
-    return {
-      inkBarAnimated: true,
-    };
-  },
-
-  componentDidUpdate() {
-    componentDidUpdate(this);
-  },
-
+export default class InkTabBarNode extends React.Component {
   componentDidMount() {
     if (isDev) {
       // https://github.com/ant-design/ant-design/issues/8678
@@ -126,13 +117,17 @@ export default {
     } else {
       componentDidUpdate(this, true);
     }
-  },
+  }
+
+  componentDidUpdate() {
+    componentDidUpdate(this);
+  }
 
   componentWillUnmount() {
     clearTimeout(this.timeout);
-  },
+  }
 
-  getInkBarNode() {
+  render() {
     const { prefixCls, styles, inkBarAnimated } = this.props;
     const className = `${prefixCls}-ink-bar`;
     const classes = classnames({
@@ -148,8 +143,22 @@ export default {
         style={styles.inkBar}
         className={classes}
         key="inkBar"
-        ref={this.saveRef('inkBar')}
+        ref={this.props.saveRef('inkBar')}
       />
     );
-  },
+  }
+}
+
+InkTabBarNode.propTypes = {
+  prefixCls: PropTypes.string,
+  styles: PropTypes.object,
+  inkBarAnimated: PropTypes.bool,
+  saveRef: PropTypes.func,
+};
+
+InkTabBarNode.defaultProps = {
+  prefixCls: '',
+  inkBarAnimated: true,
+  styles: {},
+  saveRef: () => {},
 };

src/SaveRef.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class SaveRef extends React.Component {
+  getRef = (name) => {
+    return this[name];
+  }
+
+  saveRef = (name) => {
+    return (node) => {
+      if (node) {
+        this[name] = node;
+      }
+    };
+  }
+
+  render() {
+    return this.props.children(this.saveRef, this.getRef);
+  }
+}
+
+SaveRef.propTypes = {
+  children: PropTypes.func,
+};
+
+SaveRef.defaultProps = {
+  children: () => null,
+};

src/ScrollableInkTabBar.js

@@ -1,18 +1,23 @@
-import createReactClass from 'create-react-class';
-import InkTabBarMixin from './InkTabBarMixin';
-import ScrollableTabBarMixin from './ScrollableTabBarMixin';
-import TabBarMixin from './TabBarMixin';
-import RefMixin from './RefMixin';
+import React from 'react';
+import InkTabBarNode from './InkTabBarNode';
+import TabBarTabsNode from './TabBarTabsNode';
+import TabBarRootNode from './TabBarRootNode';
+import ScrollableTabBarNode from './ScrollableTabBarNode';
+import SaveRef from './SaveRef';
 
-const ScrollableInkTabBar = createReactClass({
-  displayName: 'ScrollableInkTabBar',
-  mixins: [RefMixin, TabBarMixin, InkTabBarMixin, ScrollableTabBarMixin],
+export default class ScrollableInkTabBar extends React.Component {
   render() {
-    const inkBarNode = this.getInkBarNode();
-    const tabs = this.getTabs();
-    const scrollbarNode = this.getScrollBarNode([inkBarNode, tabs]);
-    return this.getRootNode(scrollbarNode);
-  },
-});
-
-export default ScrollableInkTabBar;
+    return (
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
+              <TabBarTabsNode saveRef={saveRef} {...this.props} />
+              <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
+            </ScrollableTabBarNode>
+          </TabBarRootNode>
+        )}
+      </SaveRef>
+    );
+  }
+}

src/ScrollableTabBar.js

@@ -1,17 +1,21 @@
-import createReactClass from 'create-react-class';
-import ScrollableTabBarMixin from './ScrollableTabBarMixin';
-import TabBarMixin from './TabBarMixin';
-import RefMixin from './RefMixin';
+import React from 'react';
+import ScrollableTabBarNode from './ScrollableTabBarNode';
+import TabBarRootNode from './TabBarRootNode';
+import TabBarTabsNode from './TabBarTabsNode';
+import SaveRef from './SaveRef';
 
-const ScrollableTabBar = createReactClass({
-  displayName: 'ScrollableTabBar',
-  mixins: [RefMixin, TabBarMixin, ScrollableTabBarMixin],
+export default class ScrollableTabBar extends React.Component {
   render() {
-    const inkBarNode = this.getInkBarNode();
-    const tabs = this.getTabs();
-    const scrollbarNode = this.getScrollBarNode([inkBarNode, tabs]);
-    return this.getRootNode(scrollbarNode);
-  },
-});
-
-export default ScrollableTabBar;
+    return (
+      <SaveRef>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} {...this.props}>
+            <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
+              <TabBarTabsNode saveRef={saveRef} {...this.props} />
+            </ScrollableTabBarNode>
+          </TabBarRootNode>
+        )}
+      </SaveRef>
+    );
+  }
+}