feat: support data-* (#92)

* feat: support data-*

* feat: use rc-util

* fix: typo

* refactor: import path in demo, test.

* fix: test

* fix:

test

Author: paranoidjk

.travis.yml

@@ -5,6 +5,7 @@ sudo: false
 notifications:
   email:
   - [email protected]
+  - [email protected]
 
 node_js:
 - 6.0.0

examples/activeKey.js

@@ -3,8 +3,8 @@ import 'rc-tabs/assets/index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
-import TabContent from '../src/SwipeableTabContent';
-import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
+import TabContent from 'rc-tabs/lib/SwipeableTabContent';
+import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
 
 const PanelContent = ({ id }) => (
   <div>{[1, 2, 3, 4].map(item => <p key={item}>{id}</p>)}</div>

examples/add.js

@@ -3,8 +3,8 @@ import 'rc-tabs/assets/index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
-import TabContent from '../src/TabContent';
-import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
+import TabContent from 'rc-tabs/lib/TabContent';
+import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
 
 let index = 1;
 

examples/antd.js

@@ -3,9 +3,9 @@ import 'rc-tabs/assets/index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
-import TabContent from '../src/TabContent';
-import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
-import InkTabBar from '../src/InkTabBar';
+import TabContent from 'rc-tabs/lib/TabContent';
+import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
+import InkTabBar from 'rc-tabs/lib/InkTabBar';
 
 class PanelContent extends React.Component {
   constructor(props) {

examples/defaultActiveKey.js

@@ -3,8 +3,8 @@ import 'rc-tabs/assets/index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
-import TabContent from '../src/TabContent';
-import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
+import TabContent from 'rc-tabs/lib/TabContent';
+import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
 
 class PanelContent extends React.Component {
   constructor(props) {

examples/destroyInactiveTabpanel.js

@@ -3,8 +3,8 @@ import 'rc-tabs/assets/index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
-import TabContent from '../src/TabContent';
-import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
+import TabContent from 'rc-tabs/lib/TabContent';
+import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
 
 class PanelContent extends React.Component {
   constructor(props) {

examples/router.js

@@ -4,8 +4,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
 import 'rc-tabs/assets/index.less';
-import TabContent from '../src/TabContent';
-import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
+import TabContent from 'rc-tabs/lib/TabContent';
+import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar';
 
 const Tab1 = () => <div>tab1</div>;
 const Tab2 = () => <div>tab2</div>;

examples/swipeInkTabBar.js

@@ -3,8 +3,8 @@ import 'rc-tabs/assets/index.less';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Tabs, { TabPane } from 'rc-tabs';
-import TabContent from '../src/SwipeableTabContent';
-import SwipeableInkTabBar from '../src/SwipeableInkTabBar';
+import TabContent from 'rc-tabs/lib/SwipeableTabContent';
+import SwipeableInkTabBar from 'rc-tabs/lib/SwipeableInkTabBar';
 
 if (process.env.DEMO_ENV === 'preact') {
   require('preact/devtools');
@@ -18,8 +18,9 @@ const contentStyle = {
   backgroundColor: '#fff',
 };
 
+const tabTitle = (key) => (<div data-extra="tab-bar-title">{`选项${key}`}</div>);
 const makeTabPane = key => (
-  <TabPane tab={`选项${key}`} key={`${key}`}>
+  <TabPane tab={tabTitle(key)} data-extra="tabpane" key={`${key}`}>
     <div style={contentStyle}>
       {`选项${key}内容`}
     </div>
@@ -39,10 +40,12 @@ const Component = () => (
     <h4>pageSize = 5, speed = 5</h4>
     <div>
       <Tabs
+        data-extra="tabs"
         renderTabBar={() =>
           <SwipeableInkTabBar
             pageSize={5}
             speed={5}
+            data-extra="tabbar"
           />
         }
         renderTabContent={() => <TabContent />}
@@ -86,9 +89,10 @@ const Component = () => (
     <div>
       <Tabs
         tabBarPosition="left"
-        pageSize={3}
         renderTabBar={() =>
-          <SwipeableInkTabBar/>
+          <SwipeableInkTabBar
+            pageSize={3}
+          />
         }
         renderTabContent={() => <TabContent/>}
         defaultActiveKey="2"
@@ -100,9 +104,10 @@ const Component = () => (
     <div>
       <Tabs
         tabBarPosition="right"
-        pageSize={3}
         renderTabBar={() =>
-          <SwipeableInkTabBar/>
+          <SwipeableInkTabBar
+            pageSize={3}
+          />
         }
         renderTabContent={() => <TabContent/>}
         defaultActiveKey="2"
@@ -135,9 +140,9 @@ const Component = () => (
     <div>
       <Tabs
         tabBarPosition="left"
-        pageSize={3}
         renderTabBar={() =>
           <SwipeableInkTabBar
+            pageSize={3}
             styles={{
               inkBar: {
                 backgroundColor: 'red',

index.js

@@ -10,6 +10,7 @@
   "files": [
     "lib",
     "es",
+    "dist",
     "assets/index.css"
   ],
   "main": "./lib/index",
@@ -25,14 +26,20 @@
   },
   "licenses": "MIT",
   "config": {
-    "port": 8002
+    "port": 8002,
+    "entry": {
+      "rc-tabs": [
+        "./src/index.js",
+        "./assets/index.less"
+      ]
+    }
   },
   "scripts": {
+    "dist": "rc-tools run dist",
     "build": "rc-tools run build",
     "compile": "rc-tools run compile --babel-runtime",
     "gh-pages": "rc-tools run gh-pages",
     "start": "rc-tools run server",
-    "start:preact": "cross-env DEMO_ENV=preact rc-tools run server",
     "pub": "rc-tools run pub --babel-runtime",
     "lint": "rc-tools run lint",
     "watch": "rc-tools run watch",
@@ -80,6 +87,7 @@
     "create-react-class": "15.x",
     "prop-types": "15.x",
     "rc-hammerjs": "~0.6.0",
+    "rc-util": "^4.0.4",
     "warning": "^3.0.0"
   }
 }

package.json

@@ -1,6 +1,7 @@
 import React, { cloneElement } from 'react';
 import classnames from 'classnames';
 import warning from 'warning';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 
 export default {
   getDefaultProps() {
@@ -12,11 +13,8 @@ export default {
     this.props.onTabClick(key);
   },
   getTabs() {
-    const props = this.props;
-    const children = props.panels;
-    const activeKey = props.activeKey;
+    const { panels: children, activeKey, prefixCls } = this.props;
     const rst = [];
-    const prefixCls = props.prefixCls;
 
     React.Children.forEach(children, (child) => {
       if (!child) {
@@ -56,7 +54,10 @@ export default {
     return rst;
   },
   getRootNode(contents) {
-    const { prefixCls, onKeyDown, className, extraContent, style, tabBarPosition } = this.props;
+    const {
+      prefixCls, onKeyDown, className, extraContent, style, tabBarPosition,
+      ...restProps,
+    } = this.props;
     const cls = classnames(`${prefixCls}-bar`, {
       [className]: !!className,
     });
@@ -85,6 +86,7 @@ export default {
         ref="root"
         onKeyDown={onKeyDown}
         style={style}
+        {...pickAttrs(restProps)}
       >
         {children}
       </div>

src/TabBarMixin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import classnames from 'classnames';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 
 const TabPane = createReactClass({
   displayName: 'TabPane',
@@ -17,10 +18,12 @@ const TabPane = createReactClass({
     return { placeholder: null };
   },
   render() {
-    const props = this.props;
-    const { className, destroyInactiveTabPane, active, forceRender } = props;
+    const {
+      className, destroyInactiveTabPane, active, forceRender,
+      rootPrefixCls, style, children, placeholder, ...restProps,
+    } = this.props;
     this._isActived = this._isActived || active;
-    const prefixCls = `${props.rootPrefixCls}-tabpane`;
+    const prefixCls = `${rootPrefixCls}-tabpane`;
     const cls = classnames({
       [prefixCls]: 1,
       [`${prefixCls}-inactive`]: !active,
@@ -30,12 +33,13 @@ const TabPane = createReactClass({
     const isRender = destroyInactiveTabPane ? active : this._isActived;
     return (
       <div
-        style={props.style}
+        style={style}
         role="tabpanel"
-        aria-hidden={props.active ? 'false' : 'true'}
+        aria-hidden={active ? 'false' : 'true'}
         className={cls}
+        {...pickAttrs(restProps)}
       >
-        {isRender || forceRender ? props.children : props.placeholder}
+        {isRender || forceRender ? children : placeholder}
       </div>
     );
   },

src/TabPane.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import pickAttrs from 'rc-util/lib/pickAttrs';
 import KeyCode from './KeyCode';
 import TabPane from './TabPane';
 import classnames from 'classnames';
@@ -117,6 +118,8 @@ export default class Tabs extends React.Component {
       tabBarPosition, className,
       renderTabContent,
       renderTabBar,
+      destroyInactiveTabPane,
+      ...restProps,
     } = props;
     const cls = classnames({
       [prefixCls]: 1,
@@ -139,7 +142,7 @@ export default class Tabs extends React.Component {
         prefixCls,
         tabBarPosition,
         activeKey: this.state.activeKey,
-        destroyInactiveTabPane: props.destroyInactiveTabPane,
+        destroyInactiveTabPane,
         children: props.children,
         onChange: this.setActiveKey,
         key: 'tabContent',
@@ -152,6 +155,7 @@ export default class Tabs extends React.Component {
       <div
         className={cls}
         style={props.style}
+        {...pickAttrs(restProps)}
       >
         {contents}
       </div>

src/Tabs.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { mount, shallow, render } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
-import Tabs, { TabPane } from '../index';
+import Tabs, { TabPane } from '../src';
 import TabContent from '../src/TabContent';
 import ScrollableInkTabBar from '../src/ScrollableInkTabBar';
 

tests/index.spec.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { mount, render } from 'enzyme';
 import { renderToJson } from 'enzyme-to-json';
-import Tabs, { TabPane } from '../index';
+import Tabs, { TabPane } from '../src/';
 import SwipeableTabContent from '../src/SwipeableTabContent';
 import SwipeableInkTabBar from '../src/SwipeableInkTabBar';