diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..d9ec7523 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,22 @@ +const base = require('@umijs/fabric/dist/eslint'); + +module.exports = { + ...base, + rules: { + ...base.rules, + 'react/sort-comp': 0, + 'react/no-array-index-key': 0, + 'react/no-access-state-in-setstate': 0, + 'no-plusplus': 0, + 'no-param-reassign': 0, + 'react/require-default-props': 0, + 'react/require-default-props': 0, + 'no-underscore-dangle': 0, + 'react/no-find-dom-node': 0, + 'no-mixed-operators': 0, + 'prefer-destructuring': 0, + 'react/no-unused-prop-types': 0, + 'max-len': 0, + 'brace-style': 0, + }, +}; diff --git a/.fatherrc.js b/.fatherrc.js new file mode 100644 index 00000000..81cd0147 --- /dev/null +++ b/.fatherrc.js @@ -0,0 +1,8 @@ +export default { + cjs: "babel", + esm: { type: "babel", importLibToEs: true }, + preCommit: { + eslint: true, + prettier: true + } +}; diff --git a/.gitignore b/.gitignore index 7ff37080..7cd61296 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.storybook *.iml *.log *.log.* diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..84d393d1 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,14 @@ +{ + "singleQuote": true, + "trailingComma": "all", + "printWidth": 100, + "proseWrap": "never", + "overrides": [ + { + "files": ".prettierrc", + "options": { + "parser": "json" + } + } + ] +} diff --git a/.travis.yml b/.travis.yml index 8d424325..b50415fb 100644 --- a/.travis.yml +++ b/.travis.yml @@ -8,7 +8,7 @@ notifications: - hust2012jiangkai@gmail.com node_js: -- 6.0.0 +- 10 before_install: - | @@ -30,11 +30,6 @@ env: - TEST_TYPE=lint - TEST_TYPE=test - TEST_TYPE=coverage - - TEST_TYPE=saucelabs global: - secure: S1VwbaPzLnSH/IUT/wlJulxAX5VHRIDmSt53h/ycHcZsszUpWcLCJRQAe0fTVB2dAx5MdBbSZ+o+tr3tRwVB5TRAYm0oTCsYAkOZaWOB28RuUQtdGt3wf9xxTG1UiPiaLLUW3waX9zAaf3yqKBcJGf1op0RD8dksxbCFw/7xVbU= - secure: EBEDg8k///IlEsnx0AE8X3mbFl0QE5+xGKbG4AxXlGZda12uTIPUSMKJzdZQ2hVbZXduTzf1cQl9rcu9nGoSnkL/DWnIax9cvHi+1orx5+YPlxPHNWAwWByTnHosBn2MJhfy1s5paJfHC9cUzmmEL6x4fYthWxjsPUo+irEZH6E= - -matrix: - allow_failures: - - env: "TEST_TYPE=saucelabs" diff --git a/examples/activeKey.html b/examples/activeKey.html deleted file mode 100755 index b3a42524..00000000 --- a/examples/activeKey.html +++ /dev/null @@ -1 +0,0 @@ -placeholder \ No newline at end of file diff --git a/examples/activeKey.js b/examples/activeKey.js index cc93c853..424fe9ca 100755 --- a/examples/activeKey.js +++ b/examples/activeKey.js @@ -1,13 +1,16 @@ -/* eslint react/no-multi-comp:0, no-console:0, react/prop-types:0 */ -import 'rc-tabs/assets/index.less'; +/* eslint-disable no-console,react/button-has-type */ +import '../assets/index.less'; import React from 'react'; -import ReactDOM from 'react-dom'; -import Tabs, { TabPane } from 'rc-tabs'; -import TabContent from 'rc-tabs/lib/SwipeableTabContent'; -import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar'; +import Tabs, { TabPane } from '../src'; +import TabContent from '../src/SwipeableTabContent'; +import ScrollableInkTabBar from '../src/ScrollableInkTabBar'; const PanelContent = ({ id }) => ( -
{[1, 2, 3, 4].map(item =>

{id}

)}
+
+ {[1, 2, 3, 4].map(item => ( +

{id}

+ ))} +
); class Demo extends React.Component { @@ -16,41 +19,41 @@ class Demo extends React.Component { start: 0, }; - onChange = (activeKey) => { + onChange = activeKey => { console.log(`onChange ${activeKey}`); this.setState({ activeKey, }); - } + }; - onTabClick = (key) => { + onTabClick = key => { console.log(`onTabClick ${key}`); if (key === this.state.activeKey) { this.setState({ activeKey: '', }); } - } + }; tick = () => { this.setState({ start: this.state.start + 10, }); - } + }; handleNotExistKey = () => { this.setState({ activeKey: '-1', }); - } + }; render() { - const start = this.state.start; + const { start } = this.state; return (

Simple Tabs

} + renderTabBar={() => } renderTabContent={() => } activeKey={this.state.activeKey} onChange={this.onChange} @@ -69,14 +72,11 @@ class Demo extends React.Component { -
); } } - -ReactDOM.render(, document.getElementById('__react-content')); +export default Demo; diff --git a/examples/add.html b/examples/add.html deleted file mode 100755 index b3a42524..00000000 --- a/examples/add.html +++ /dev/null @@ -1 +0,0 @@ -placeholder \ No newline at end of file diff --git a/examples/add.js b/examples/add.js index 0ab8e2f6..dfe321fa 100755 --- a/examples/add.js +++ b/examples/add.js @@ -1,59 +1,70 @@ -/* eslint react/no-multi-comp:0, no-console:0, no-alert:0, no-undef: 0 */ -import 'rc-tabs/assets/index.less'; +/* eslint-disable no-console,react/button-has-type,no-alert,no-plusplus */ +import '../assets/index.less'; import React from 'react'; -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 Tabs, { TabPane } from '../src'; +import TabContent from '../src/TabContent'; +import ScrollableInkTabBar from '../src/ScrollableInkTabBar'; let index = 1; class Demo extends React.Component { state = { - tabs: [{ - title: '初始', - content: '初始内容', - }], + tabs: [ + { + title: '初始', + content: '初始内容', + }, + ], activeKey: '初始', }; - onTabChange = (activeKey) => { + onTabChange = activeKey => { this.setState({ activeKey, }); - } + }; construct() { const disabled = true; - return this.state.tabs.map((t) => { - return ({t.title} - { - this.remove(t.title, e) - }} - >x - } - key={t.title} - > -
- {t.content} -
- ); - }).concat([ - + 添加} - disabled={disabled} - key="__add" - />, - ]); + return this.state.tabs + .map(t => ( + + {t.title} + { + this.remove(t.title, e); + }} + > + x + + + } + key={t.title} + > +
{t.content}
+ + )) + .concat([ + + {' '} + + 添加 + + } + disabled={disabled} + key="__add" + />, + ]); } remove = (title, e) => { @@ -70,7 +81,8 @@ class Demo extends React.Component { foundIndex = i; return false; }); - let activeKey = this.state.activeKey; + + let { activeKey } = this.state; if (activeKey === title) { if (foundIndex) { foundIndex--; @@ -81,9 +93,9 @@ class Demo extends React.Component { tabs: after, activeKey, }); - } + }; - add = (e) => { + add = e => { e.stopPropagation(); index++; const newTab = { @@ -94,7 +106,7 @@ class Demo extends React.Component { tabs: this.state.tabs.concat(newTab), activeKey: `名称: ${index}`, }); - } + }; render() { const tabStyle = { @@ -107,13 +119,9 @@ class Demo extends React.Component {
( - +添加 - } - /> + +添加} /> )} - renderTabContent={() => } + renderTabContent={() => } activeKey={this.state.activeKey} onChange={this.onTabChange} > @@ -125,4 +133,4 @@ class Demo extends React.Component { } } -ReactDOM.render(, document.getElementById('__react-content')); +export default Demo; diff --git a/examples/antd.html b/examples/antd.html deleted file mode 100755 index b3a42524..00000000 --- a/examples/antd.html +++ /dev/null @@ -1 +0,0 @@ -placeholder \ No newline at end of file diff --git a/examples/antd.js b/examples/antd.js index b8d3e1f9..b0e5d0d5 100755 --- a/examples/antd.js +++ b/examples/antd.js @@ -1,39 +1,41 @@ -/* eslint react/no-multi-comp:0, no-console:0, react/prop-types:0 */ -import 'rc-tabs/assets/index.less'; +/* eslint-disable no-console,react/button-has-type,no-plusplus */ +import '../assets/index.less'; import React from 'react'; -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'; - -const arrowPath = 'M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h' + +import Tabs, { TabPane } from '../src'; +import TabContent from '../src/TabContent'; +import ScrollableInkTabBar from '../src/ScrollableInkTabBar'; +import ScrollableTabBar from '../src/ScrollableTabBar'; +import InkTabBar from '../src/InkTabBar'; +import TabBar from '../src/TabBar'; + +const arrowPath = + 'M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h' + '-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v' + '60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91' + '.5c1.9 0 3.8-0.7 5.2-2L869 536.2c14.7-12.8 14.7-35.6 0-48.4z'; -const getSvg = (path, style = {}, svgStyle = {}) => { - return ( - - - - - - ); -}; +const getSvg = (path, style = {}, svgStyle = {}) => ( + + + + + +); const next = getSvg(arrowPath); -const prev = getSvg(arrowPath, {}, { - transform: 'scaleX(-1)', -}); +const prev = getSvg( + arrowPath, + {}, + { + transform: 'scaleX(-1)', + }, +); class PanelContent extends React.Component { constructor(props) { @@ -46,15 +48,13 @@ class PanelContent extends React.Component { } render() { - const length = Math.round(10 * (Math.random()) + 4); - const count = new Array(length);// new Array(4) skip forEach .... + const length = Math.round(10 * Math.random() + 4); + const count = new Array(length); // new Array(4) skip forEach .... for (let i = 0; i < length; i++) { count[i] = 1; } - const content = new Array(Math.round(100 * (Math.random())) + 4).join(` ${this.props.id}`); - const els = count.map((c, i) => { - return

{content}

; - }); + const content = new Array(Math.round(100 * Math.random()) + 4).join(` ${this.props.id}`); + const els = count.map((c, i) =>

{content}

); return
{els}
; } } @@ -63,14 +63,11 @@ function construct(start, num) { const ends = []; let index = 1; for (let i = start; i < start + num; i++) { - ends.push( - - ); + ends.push( + + + , + ); index++; } return ends; @@ -84,57 +81,56 @@ class Demo extends React.Component { useIcon: false, }; - onChange = (key) => { + onChange = key => { console.log(`onChange ${key}`); - } + }; - onChange2 = (activeKey) => { + onChange2 = activeKey => { this.setState({ activeKey }); - } + }; - onTabClick = (key) => { + onTabClick = key => { console.log(`onTabClick ${key}`); - } + }; tick = () => { this.setState({ start: this.state.start + 10, }); - } + }; toggleCustomIcon = () => { this.setState({ useIcon: !this.state.useIcon, }); - } + }; - changeTabPosition = (e) => { + changeTabPosition = e => { this.setState({ tabBarPosition: e.target.value, }); - } + }; scrollToActive = () => { this.bar.scrollToActiveTab(); - } + }; - switchToLast = (ends) => { + switchToLast = ends => { if (this.state.activeKey !== ends[ends.length - 1].key) { this.setState({ activeKey: ends[ends.length - 1].key }, this.scrollToActive); } else { this.scrollToActive(); } - } + }; - saveBar = (bar) => { + saveBar = bar => { this.bar = bar; - } + }; render() { - const start = this.state.start; + const { start, tabBarPosition } = this.state; const ends = construct(start, 9); const ends2 = construct(start, 3); - const tabBarPosition = this.state.tabBarPosition; let style; const contentStyle = { height: 400, @@ -147,12 +143,14 @@ class Demo extends React.Component { }; } - const cls = this.state.useIcon && 'rc-tabs-custom-icon' || undefined; + const cls = (this.state.useIcon && 'rc-tabs-custom-icon') || undefined; - const iconProps = this.state.useIcon ? { - nextIcon: next, - prevIcon: prev, - } : {}; + const iconProps = this.state.useIcon + ? { + nextIcon: next, + prevIcon: prev, + } + : {}; return (
@@ -193,12 +191,7 @@ class Demo extends React.Component { defaultActiveKey="3" style={style} tabBarPosition={this.state.tabBarPosition} - renderTabBar={() => ( - - )} + renderTabBar={() => } renderTabContent={() => } onChange={this.onChange} > @@ -207,24 +200,18 @@ class Demo extends React.Component {

Scroll Tabs

- +
- - is using icon: {this.state.useIcon && 'true' || 'false'} + + is using icon: {(this.state.useIcon && 'true') || 'false'} } + renderTabBar={() => ( + + )} renderTabContent={() => } onChange={this.onChange2} > @@ -234,19 +221,15 @@ class Demo extends React.Component {

Scroll Tabs with inkBar

- + } + renderTabBar={() => ( + + )} renderTabContent={() => } onChange={this.onChange2} > @@ -259,4 +242,4 @@ class Demo extends React.Component { } } -ReactDOM.render(, document.getElementById('__react-content')); +export default Demo; diff --git a/examples/defaultActiveKey.html b/examples/defaultActiveKey.html deleted file mode 100755 index b3a42524..00000000 --- a/examples/defaultActiveKey.html +++ /dev/null @@ -1 +0,0 @@ -placeholder \ No newline at end of file diff --git a/examples/defaultActiveKey.js b/examples/defaultActiveKey.js index d23a2922..2d70b9e2 100755 --- a/examples/defaultActiveKey.js +++ b/examples/defaultActiveKey.js @@ -1,10 +1,9 @@ -/* eslint react/no-multi-comp:0, no-console:0, react/prop-types:0 */ -import 'rc-tabs/assets/index.less'; +/* eslint-disable no-console,react/button-has-type */ +import '../assets/index.less'; import React from 'react'; -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 Tabs, { TabPane } from '../src'; +import TabContent from '../src/TabContent'; +import ScrollableInkTabBar from '../src/ScrollableInkTabBar'; class PanelContent extends React.Component { constructor(props) { @@ -17,12 +16,12 @@ class PanelContent extends React.Component { } render() { - const count = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1];// new Array(4) skip forEach .... - const els = count.map((c, i) => { - return (

+ const count = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; // new Array(4) skip forEach .... + const els = count.map((c, i) => ( +

-

); - }); +

+ )); return
{els}
; } } @@ -39,57 +38,57 @@ class Component extends React.Component { tabKey: defaultTabKey, }; - onTabClick = (key) => { + onTabClick = key => { console.log(`onTabClick ${key}`); this.setState({ tabKey: key, }); - } + }; tick = () => { this.setState({ start: this.state.start + 10, }); - } + }; render() { - const start = this.state.start; + const { start } = this.state; return (

Simple Tabs

current: {this.state.tabKey}

} - renderTabContent={() => } + renderTabBar={() => } + renderTabContent={() => } onChange={onChange} > - + - + - + - + - + - + - + - + - + @@ -98,4 +97,4 @@ class Component extends React.Component { } } -ReactDOM.render(, document.getElementById('__react-content')); +export default Component; diff --git a/examples/destroyInactiveTabpanel.html b/examples/destroyInactiveTabpanel.html deleted file mode 100755 index b3a42524..00000000 --- a/examples/destroyInactiveTabpanel.html +++ /dev/null @@ -1 +0,0 @@ -placeholder \ No newline at end of file diff --git a/examples/destroyInactiveTabpanel.js b/examples/destroyInactiveTabpanel.js index fff22ff0..7ed510c9 100755 --- a/examples/destroyInactiveTabpanel.js +++ b/examples/destroyInactiveTabpanel.js @@ -1,10 +1,9 @@ -/* eslint react/no-multi-comp:0, no-console:0, react/prop-types:0 */ -import 'rc-tabs/assets/index.less'; +/* eslint-disable no-console,react/button-has-type */ +import '../assets/index.less'; import React from 'react'; -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 Tabs, { TabPane } from '../src'; +import TabContent from '../src/TabContent'; +import ScrollableInkTabBar from '../src/ScrollableInkTabBar'; class PanelContent extends React.Component { constructor(props) { @@ -17,10 +16,8 @@ class PanelContent extends React.Component { } render() { - const count = [1, 1, 1, 1];// new Array(4) skip forEach .... - const els = count.map((c, i) => { - return

{this.props.id}

; - }); + const count = [1, 1, 1, 1]; // new Array(4) skip forEach .... + const els = count.map((c, i) =>

{this.props.id}

); return
{els}
; } } @@ -30,22 +27,22 @@ class Demo extends React.Component { start: 0, }; - onChange = (key) => { + onChange = key => { console.log(`onChange ${key}`); - } + }; - onTabClick = (key) => { + onTabClick = key => { console.log(`onTabClick ${key}`); - } + }; tick = () => { this.setState({ start: this.state.start + 10, }); - } + }; render() { - const start = this.state.start; + const { start } = this.state; const disabled = true; return (
@@ -53,21 +50,21 @@ class Demo extends React.Component { } - renderTabContent={() => } + renderTabBar={() => } + renderTabContent={() => } onChange={this.onChange} > - + - + - + - + @@ -76,4 +73,4 @@ class Demo extends React.Component { } } -ReactDOM.render(, document.getElementById('__react-content')); +export default Demo; diff --git a/examples/dnd.html b/examples/dnd.html deleted file mode 100755 index b3a42524..00000000 --- a/examples/dnd.html +++ /dev/null @@ -1 +0,0 @@ -placeholder \ No newline at end of file diff --git a/examples/dnd.js b/examples/dnd.js index d3391dfd..a62889a6 100755 --- a/examples/dnd.js +++ b/examples/dnd.js @@ -1,31 +1,20 @@ -/* eslint react/no-multi-comp:0, no-console:0, react/prop-types:0 */ -import 'rc-tabs/assets/index.less'; +/* eslint-disable no-console,react/button-has-type */ +import '../assets/index.less'; import React from 'react'; -import HTML5Backend from 'react-dnd-html5-backend' -import ReactDOM from 'react-dom'; -import Tabs, { TabPane } from 'rc-tabs'; +import HTML5Backend from 'react-dnd-html5-backend'; +import { DragSource, DropTarget, DragDropContextProvider } from 'react-dnd'; import update from 'immutability-helper'; -import TabContent from 'rc-tabs/lib/SwipeableTabContent'; -import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar'; -import { - DragSource, - DropTarget, - DragDropContextProvider, -} from 'react-dnd'; +import ScrollableInkTabBar from '../src/ScrollableInkTabBar'; +import TabContent from '../src/SwipeableTabContent'; +import Tabs, { TabPane } from '../src'; // Drag & Drop node class TabNode extends React.Component { render() { - const { - connectDragSource, - connectDropTarget, - children, - } = this.props + const { connectDragSource, connectDropTarget, children } = this.props; - return connectDragSource( - connectDropTarget(children), - ); - } + return connectDragSource(connectDropTarget(children)); + } } const cardTarget = { @@ -43,29 +32,21 @@ const cardTarget = { }; const cardSource = { - beginDrag(props) { - return { - id: props.id, - index: props.index, - } - }, + beginDrag(props) { + return { + id: props.id, + index: props.index, + }; + }, }; -const WrapTabNode = DropTarget( - 'DND_NODE', - cardTarget, - (connect) => ({ - connectDropTarget: connect.dropTarget(), - }), -)( - DragSource( - 'DND_NODE', - cardSource, - (connect, monitor) => ({ - connectDragSource: connect.dragSource(), - isDragging: monitor.isDragging(), - }), - )(TabNode), +const WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({ + connectDropTarget: connect.dropTarget(), +}))( + DragSource('DND_NODE', cardSource, (connect, monitor) => ({ + connectDragSource: connect.dragSource(), + isDragging: monitor.isDragging(), + }))(TabNode), ); // Demo @@ -75,21 +56,21 @@ class Demo extends React.Component { tabs: ['1', '2', '3'], }; - onChange = (activeKey) => { + onChange = activeKey => { console.log(`onChange ${activeKey}`); this.setState({ activeKey, }); - } + }; - onTabClick = (key) => { + onTabClick = key => { console.log(`onTabClick ${key}`); if (key === this.state.activeKey) { this.setState({ activeKey: '', }); } - } + }; moveTabNode = (dragKey, hoverKey) => { const { tabs } = this.state; @@ -97,20 +78,20 @@ class Demo extends React.Component { const hoverIndex = tabs.indexOf(hoverKey); const dragTab = this.state.tabs[dragIndex]; this.setState( - update(this.state, { - tabs: { - $splice: [[dragIndex, 1], [hoverIndex, 0, dragTab]], - }, - }), - ); - }; - - renderTabBarNode = (node) => { - return ( - {node} + update(this.state, { + tabs: { + $splice: [[dragIndex, 1], [hoverIndex, 0, dragTab]], + }, + }), ); }; + renderTabBarNode = node => ( + + {node} + + ); + render() { return ( @@ -138,4 +119,4 @@ class Demo extends React.Component { } } -ReactDOM.render(, document.getElementById('__react-content')); +export default Demo; diff --git a/examples/router.html b/examples/router.html deleted file mode 100644 index e69de29b..00000000 diff --git a/examples/router.js b/examples/router.js index 595c56a9..8817f0b7 100644 --- a/examples/router.js +++ b/examples/router.js @@ -1,34 +1,38 @@ -/* eslint react/no-multi-comp:0, no-console:0, react/prop-types:0 */ +/* eslint-disable no-console,react/button-has-type */ import { Router, Route, IndexRoute, hashHistory } from 'react-router'; import React from 'react'; -import ReactDOM from 'react-dom'; -import Tabs, { TabPane } from 'rc-tabs'; -import 'rc-tabs/assets/index.less'; -import TabContent from 'rc-tabs/lib/TabContent'; -import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar'; +import Tabs, { TabPane } from '../src'; +import '../assets/index.less'; +import TabContent from '../src/TabContent'; +import ScrollableInkTabBar from '../src/ScrollableInkTabBar'; const Tab1 = () =>
tab1
; const Tab2 = () =>
tab2
; class App extends React.Component { componentWillMount() { - this.data = [{ - key: 'tab1', - component: , - }, { - key: 'tab2', - component: , - }]; + this.data = [ + { + key: 'tab1', + component: , + }, + { + key: 'tab2', + component: , + }, + ]; } - onChange = (key) => { + + onChange = key => { // for demo, better use router api window.location.hash = key; - } + }; + render() { let activeKey = 'tab1'; const { children } = this.props; if (children) { - this.data.forEach((d) => { + this.data.forEach(d => { if (d.component.type === children.type) { // for demo, better immutable d.component = children; @@ -36,13 +40,17 @@ class App extends React.Component { } }); } - const tabs = this.data.map(d => {d.component}); + const tabs = this.data.map(d => ( + + {d.component} + + )); return ( } - renderTabContent={() => } + renderTabBar={() => } + renderTabContent={() => } > {tabs} @@ -50,12 +58,16 @@ class App extends React.Component { } } -ReactDOM.render( - - - - - - - -, document.getElementById('__react-content')); +function Demo() { + return ( + + + + + + + + ); +} + +export default Demo; diff --git a/examples/rtl.html b/examples/rtl.html deleted file mode 100644 index b3a42524..00000000 --- a/examples/rtl.html +++ /dev/null @@ -1 +0,0 @@ -placeholder \ No newline at end of file diff --git a/examples/rtl.js b/examples/rtl.js index d5dcbf2f..49d8ca08 100644 --- a/examples/rtl.js +++ b/examples/rtl.js @@ -1,37 +1,39 @@ -/* eslint react/no-multi-comp:0, no-console:0, react/prop-types:0 */ -import 'rc-tabs/assets/index.less'; +/* eslint-disable no-console,react/button-has-type,no-plusplus */ +import '../assets/index.less'; import React from 'react'; -import ReactDOM from 'react-dom'; -import Tabs, { TabPane } from 'rc-tabs'; -import TabContent from 'rc-tabs/lib/TabContent'; -import SwipeableInkTabBar from 'rc-tabs/lib/SwipeableInkTabBar'; -import ScrollableTabBar from 'rc-tabs/lib/ScrollableTabBar'; -import InkTabBar from 'rc-tabs/lib/InkTabBar'; - -const arrowPath = 'M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h' + +import Tabs, { TabPane } from '../src'; +import TabContent from '../src/TabContent'; +import SwipeableInkTabBar from '../src/SwipeableInkTabBar'; +import ScrollableTabBar from '../src/ScrollableTabBar'; +import InkTabBar from '../src/InkTabBar'; + +const arrowPath = + 'M869 487.8L491.2 159.9c-2.9-2.5-6.6-3.9-10.5-3.9h' + '-88.5c-7.4 0-10.8 9.2-5.2 14l350.2 304H152c-4.4 0-8 3.6-8 8v' + '60c0 4.4 3.6 8 8 8h585.1L386.9 854c-5.6 4.9-2.2 14 5.2 14h91' + '.5c1.9 0 3.8-0.7 5.2-2L869 536.2c14.7-12.8 14.7-35.6 0-48.4z'; -const getSvg = (path, style = {}, svgStyle = {}) => { - return ( - - - - - - ); -}; +const getSvg = (path, style = {}, svgStyle = {}) => ( + + + + + +); -const next = getSvg(arrowPath, {}, { - transform: 'scaleX(-1)', -}); +const next = getSvg( + arrowPath, + {}, + { + transform: 'scaleX(-1)', + }, +); const prev = getSvg(arrowPath); const contentStyle = { @@ -41,16 +43,14 @@ const contentStyle = { height: '100px', backgroundColor: '#fff', }; -const tabTitle = (key) => (
{`تب ${key}`}
); +const tabTitle = key =>
{`تب ${key}`}
; const makeTabPane = key => ( -
- {`مطالب داخل تب ${key}`} -
+
{`مطالب داخل تب ${key}`}
 ); -const makeMultiTabPane = (count) => { +const makeMultiTabPane = count => { const result = []; for (let i = 0; i < count; i++) { result.push(makeTabPane(i)); @@ -68,15 +68,13 @@ class PanelContent extends React.Component { } render() { - const length = Math.round(10 * (Math.random()) + 4); - const count = new Array(length);// new Array(4) skip forEach .... + const length = Math.round(10 * Math.random() + 4); + const count = new Array(length); // new Array(4) skip forEach .... for (let i = 0; i < length; i++) { count[i] = 1; } - const content = new Array(Math.round(100 * (Math.random())) + 4).join(` ${this.props.id}`); - const els = count.map((c, i) => { - return

{content}

; - }); + const content = new Array(Math.round(100 * Math.random()) + 4).join(` ${this.props.id}`); + const els = count.map((c, i) =>

{content}

); return
{els}
; } } @@ -85,13 +83,11 @@ function construct(start, num) { const ends = []; let index = 1; for (let i = start; i < start + num; i++) { - ends.push( - - ); + ends.push( + + + , + ); index++; } return ends; @@ -105,57 +101,56 @@ class Demo extends React.Component { useIcon: false, }; - onChange = (key) => { + onChange = key => { console.log(`onChange ${key}`); - } + }; - onChange2 = (activeKey) => { + onChange2 = activeKey => { this.setState({ activeKey }); - } + }; - onTabClick = (key) => { + onTabClick = key => { console.log(`onTabClick ${key}`); - } + }; tick = () => { this.setState({ start: this.state.start + 10, }); - } + }; toggleCustomIcon = () => { this.setState({ useIcon: !this.state.useIcon, }); - } + }; - changeTabPosition = (e) => { + changeTabPosition = e => { this.setState({ tabBarPosition: e.target.value, }); - } + }; scrollToActive = () => { this.bar.scrollToActiveTab(); - } + }; - switchToLast = (ends) => { + switchToLast = ends => { if (this.state.activeKey !== ends[ends.length - 1].key) { this.setState({ activeKey: ends[ends.length - 1].key }, this.scrollToActive); } else { this.scrollToActive(); } - } + }; - saveBar = (bar) => { + saveBar = bar => { this.bar = bar; - } + }; render() { - const start = this.state.start; + const { start, tabBarPosition } = this.state; const ends = construct(start, 9); const ends2 = construct(start, 3); - const tabBarPosition = this.state.tabBarPosition; let style; const contentStyleSwipeable = { height: 400, @@ -170,12 +165,14 @@ class Demo extends React.Component { }; } - const cls = this.state.useIcon && 'rc-tabs-custom-icon' || undefined; + const cls = (this.state.useIcon && 'rc-tabs-custom-icon') || undefined; - const iconProps = this.state.useIcon ? { - nextIcon: next, - prevIcon: prev, - } : {}; + const iconProps = this.state.useIcon + ? { + nextIcon: next, + prevIcon: prev, + } + : {}; return (
@@ -194,42 +191,31 @@ class Demo extends React.Component { defaultActiveKey="3" style={style} tabBarPosition={this.state.tabBarPosition} - renderTabBar={() => ( - - )} + renderTabBar={() => } renderTabContent={() => } onChange={this.onChange} - direction='rtl' + direction="rtl" > {ends2}

Scroll Tabs

- +
- - is using icon: {this.state.useIcon && 'true' || 'false'} + + is using icon: {(this.state.useIcon && 'true') || 'false'} } + renderTabBar={() => ( + + )} renderTabContent={() => } onChange={this.onChange2} - direction='rtl' + direction="rtl" > {ends} @@ -240,13 +226,7 @@ class Demo extends React.Component { - - } + renderTabBar={() => } renderTabContent={() => } defaultActiveKey="2" > @@ -259,4 +239,4 @@ class Demo extends React.Component { } } -ReactDOM.render(, document.getElementById('__react-content')); +export default Demo; diff --git a/examples/swipeInkTabBar.html b/examples/swipeInkTabBar.html deleted file mode 100644 index b3a42524..00000000 --- a/examples/swipeInkTabBar.html +++ /dev/null @@ -1 +0,0 @@ -placeholder \ No newline at end of file diff --git a/examples/swipeInkTabBar.js b/examples/swipeInkTabBar.js index 2ce43cf6..7b6bf1b8 100644 --- a/examples/swipeInkTabBar.js +++ b/examples/swipeInkTabBar.js @@ -1,10 +1,9 @@ -/* eslint react/no-multi-comp:0, no-console:0, react/no-unescaped-entities: 0, global-require: 0, react/no-unescaped-entities: 0 */ -import 'rc-tabs/assets/index.less'; +/* eslint-disable no-console,react/button-has-type,no-plusplus,global-require,react/no-unescaped-entities,max-len */ +import '../assets/index.less'; import React from 'react'; -import ReactDOM from 'react-dom'; -import Tabs, { TabPane } from 'rc-tabs'; -import TabContent from 'rc-tabs/lib/SwipeableTabContent'; -import SwipeableInkTabBar from 'rc-tabs/lib/SwipeableInkTabBar'; +import Tabs, { TabPane } from '../src'; +import TabContent from '../src/SwipeableTabContent'; +import SwipeableInkTabBar from '../src/SwipeableInkTabBar'; if (process.env.DEMO_ENV === 'preact') { require('preact/devtools'); @@ -18,16 +17,14 @@ const contentStyle = { backgroundColor: '#fff', }; -const tabTitle = (key) => (
{`选项${key}`}
); +const tabTitle = key =>
{`选项${key}`}
; const makeTabPane = key => ( -
- {`选项${key}内容`} -
+
{`选项${key}内容`}
 ); -const makeMultiTabPane = (count) => { +const makeMultiTabPane = count => { const result = []; for (let i = 0; i < count; i++) { result.push(makeTabPane(i)); @@ -41,13 +38,7 @@ const Component = () => (
- - } + renderTabBar={() => } renderTabContent={() => } defaultActiveKey="8" > @@ -57,13 +48,8 @@ const Component = () => (

pageSize = 3, speed = 10

- - } - renderTabContent={() => } + renderTabBar={() => } + renderTabContent={() => } defaultActiveKey="2" > {makeMultiTabPane(7)} @@ -73,13 +59,8 @@ const Component = () => (
- - } - renderTabContent={() => } + renderTabBar={() => } + renderTabContent={() => } defaultActiveKey="2" > {makeMultiTabPane(7)} @@ -89,12 +70,8 @@ const Component = () => (
- - } - renderTabContent={() => } + renderTabBar={() => } + renderTabContent={() => } defaultActiveKey="2" > {makeMultiTabPane(11)} @@ -104,12 +81,8 @@ const Component = () => (
- - } - renderTabContent={() => } + renderTabBar={() => } + renderTabContent={() => } defaultActiveKey="2" > {makeMultiTabPane(11)} @@ -118,7 +91,7 @@ const Component = () => (

custom inkBar style

+ renderTabBar={() => ( ( }, }} /> - } + )} renderTabContent={() => } defaultActiveKey="8" > @@ -140,7 +113,7 @@ const Component = () => (
+ renderTabBar={() => ( ( }, }} /> - } - renderTabContent={() => } + )} + renderTabContent={() => } defaultActiveKey="2" > {makeMultiTabPane(11)} @@ -160,4 +133,4 @@ const Component = () => (
); -ReactDOM.render(, document.getElementById('__react-content')); +export default Component; diff --git a/now.json b/now.json index 63c3428c..09eab0de 100644 --- a/now.json +++ b/now.json @@ -5,7 +5,7 @@ { "src": "package.json", "use": "@now/static-build", - "config": { "distDir": "build" } + "config": { "distDir": ".doc" } } ] } diff --git a/package.json b/package.json index ebf33e64..4dcfeb00 100644 --- a/package.json +++ b/package.json @@ -28,47 +28,17 @@ "url": "http://github.com/react-component/tabs/issues" }, "license": "MIT", - "config": { - "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", - "pub": "rc-tools run pub --babel-runtime", - "prepublish": "rc-tools run guard", - "lint": "rc-tools run lint", - "watch": "rc-tools run watch", - "karma": "rc-test run karma", - "saucelabs": "rc-test run saucelabs", - "test": "jest", - "updateSn": "jest --updateSnapshot", + "start": "father doc dev --storybook", + "build": "father doc build --storybook", + "compile": "father build && npm run compile:style", + "test": "father test", "chrome-test": "rc-test run chrome-test", - "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls", - "now-build": "npm run build" - }, - "jest": { - "setupFiles": [ - "./tests/setup.js" - ], - "collectCoverageFrom": [ - "src/*" - ], - "transform": { - "\\.tsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js", - "\\.jsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js" - }, - "globals": { - "__JEST__DEV__": true - } + "coverage": "father test --coverage", + "now-build": "npm run build", + "lint": "eslint src/ examples/ --ext .tsx,.ts,.jsx,.js", + "compile:style": "lessc --js assets/index.less assets/index.css", + "prepublishOnly": "npm run lint && npm run test && npm run compile && np --no-cleanup --yolo --no-publish" }, "devDependencies": { "coveralls": "^3.0.6", @@ -79,16 +49,13 @@ "fastclick": "~1.0.6", "history": "^1.17.0", "immutability-helper": "^3.0.1", - "jest": "^23.6.0", - "pre-commit": "1.x", + "less-loader": "^5.0.0", + "np": "^6.2.0", "preact": "^8.2.1", "preact-compat": "^3.16.0", - "rc-test": "^6.0.1", - "rc-tools": "8.x", "react": "^16.0.0", "react-dnd": "^7.0.2", "react-dnd-html5-backend": "^7.0.2", - "react-dom": "^16.0.0", "react-router": "^3.0.0", "react-test-renderer": "^16.0.0", "sortablejs": "^1.7.0" @@ -96,18 +63,17 @@ "peerDependencies": { "react": ">=15.0.0" }, - "pre-commit": [ - "lint" - ], "dependencies": { - "babel-runtime": "6.x", + "@umijs/fabric": "^1.1.9", "classnames": "2.x", + "father": "^2.29.2", "lodash": "^4.17.5", "prop-types": "15.x", "raf": "^3.4.1", "rc-hammerjs": "~0.6.0", "rc-util": "^4.0.4", "resize-observer-polyfill": "^1.5.1", - "warning": "^4.0.3" + "warning": "^4.0.3", + "react-dom": "^16.0.0" } } diff --git a/src/InkTabBarNode.js b/src/InkTabBarNode.js index 85553ff3..78efd25c 100644 --- a/src/InkTabBarNode.js +++ b/src/InkTabBarNode.js @@ -1,7 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { setTransform, isTransform3dSupported, getLeft, getStyle, getTop, getActiveIndex } from './utils'; +import { + setTransform, + isTransform3dSupported, + getLeft, + getStyle, + getTop, + getActiveIndex, +} from './utils'; function componentDidUpdate(component, init) { const { styles, panels, activeKey, direction } = component.props; @@ -10,7 +17,7 @@ function componentDidUpdate(component, init) { const inkBarNode = component.props.getRef('inkBar'); const activeTab = component.props.getRef('activeTab'); const inkBarNodeStyle = inkBarNode.style; - const tabBarPosition = component.props.tabBarPosition; + const { tabBarPosition } = component.props; const activeIndex = getActiveIndex(panels, activeKey); if (init) { // prevent mount animation @@ -101,11 +108,7 @@ export default class InkTabBarNode extends React.Component { const className = `${prefixCls}-ink-bar`; const classes = classnames({ [className]: true, - [ - inkBarAnimated ? - `${className}-animated` : - `${className}-no-animated` - ]: true, + [inkBarAnimated ? `${className}-animated` : `${className}-no-animated`]: true, }); return (
{ }, + saveRef: () => {}, }; diff --git a/src/SaveRef.js b/src/SaveRef.js index a5c201fb..c0acc201 100644 --- a/src/SaveRef.js +++ b/src/SaveRef.js @@ -2,17 +2,13 @@ import React from 'react'; import PropTypes from 'prop-types'; export default class SaveRef extends React.Component { - getRef = (name) => { - return this[name]; - } + getRef = name => this[name]; - saveRef = (name) => { - return (node) => { - if (node) { - this[name] = node; - } - }; - } + saveRef = name => node => { + if (node) { + this[name] = node; + } + }; render() { return this.props.children(this.saveRef, this.getRef); diff --git a/src/ScrollableTabBarNode.js b/src/ScrollableTabBarNode.js index fd4d5225..caafb408 100755 --- a/src/ScrollableTabBarNode.js +++ b/src/ScrollableTabBarNode.js @@ -27,7 +27,7 @@ export default class ScrollableTabBarNode extends React.Component { } componentDidUpdate(prevProps) { - const props = this.props; + const { props } = this; if (prevProps && prevProps.tabBarPosition !== props.tabBarPosition) { this.setOffset(0); return; @@ -94,7 +94,7 @@ export default class ScrollableTabBarNode extends React.Component { } getOffsetWH(node) { - const tabBarPosition = this.props.tabBarPosition; + const { tabBarPosition } = this.props; let prop = 'offsetWidth'; if (tabBarPosition === 'left' || tabBarPosition === 'right') { prop = 'offsetHeight'; @@ -103,7 +103,7 @@ export default class ScrollableTabBarNode extends React.Component { } getScrollWH(node) { - const tabBarPosition = this.props.tabBarPosition; + const { tabBarPosition } = this.props; let prop = 'scrollWidth'; if (tabBarPosition === 'left' || tabBarPosition === 'right') { prop = 'scrollHeight'; @@ -111,9 +111,8 @@ export default class ScrollableTabBarNode extends React.Component { return node[prop]; } - getOffsetLT(node) { - const tabBarPosition = this.props.tabBarPosition; + const { tabBarPosition } = this.props; let prop = 'left'; if (tabBarPosition === 'left' || tabBarPosition === 'right') { prop = 'top'; @@ -126,7 +125,7 @@ export default class ScrollableTabBarNode extends React.Component { if (this.offset !== target) { this.offset = target; let navOffset = {}; - const tabBarPosition = this.props.tabBarPosition; + const { tabBarPosition } = this.props; const navStyle = this.props.getRef('nav').style; const transformSupported = isTransform3dSupported(navStyle); if (tabBarPosition === 'left' || tabBarPosition === 'right') { @@ -187,7 +186,7 @@ export default class ScrollableTabBarNode extends React.Component { return this.state.next || this.state.prev; } - prevTransitionEnd = (e) => { + prevTransitionEnd = e => { if (e.propertyName !== 'opacity') { return; } @@ -196,12 +195,12 @@ export default class ScrollableTabBarNode extends React.Component { target: container, currentTarget: container, }); - } + }; - scrollToActiveTab = (e) => { + scrollToActiveTab = e => { const activeTab = this.props.getRef('activeTab'); const navWrap = this.props.getRef('navWrap'); - if (e && e.target !== e.currentTarget || !activeTab) { + if ((e && e.target !== e.currentTarget) || !activeTab) { return; } @@ -218,38 +217,33 @@ export default class ScrollableTabBarNode extends React.Component { const wrapOffset = this.getOffsetLT(navWrap); const activeTabOffset = this.getOffsetLT(activeTab); if (wrapOffset > activeTabOffset) { - offset += (wrapOffset - activeTabOffset); + offset += wrapOffset - activeTabOffset; this.setOffset(offset); - } else if ((wrapOffset + navWrapNodeWH) < (activeTabOffset + activeTabWH)) { - offset -= (activeTabOffset + activeTabWH) - (wrapOffset + navWrapNodeWH); + } else if (wrapOffset + navWrapNodeWH < activeTabOffset + activeTabWH) { + offset -= activeTabOffset + activeTabWH - (wrapOffset + navWrapNodeWH); this.setOffset(offset); } - } + }; - prev = (e) => { + prev = e => { this.props.onPrevClick(e); const navWrapNode = this.props.getRef('navWrap'); const navWrapNodeWH = this.getOffsetWH(navWrapNode); const { offset } = this; this.setOffset(offset + navWrapNodeWH); - } + }; - next = (e) => { + next = e => { this.props.onNextClick(e); const navWrapNode = this.props.getRef('navWrap'); const navWrapNodeWH = this.getOffsetWH(navWrapNode); const { offset } = this; this.setOffset(offset - navWrapNodeWH); - } + }; render() { const { next, prev } = this.state; - const { prefixCls, - scrollAnimated, - navWrapper, - prevIcon, - nextIcon, - } = this.props; + const { prefixCls, scrollAnimated, navWrapper, prevIcon, nextIcon } = this.props; const showNextPrev = prev || next; const prevButton = ( @@ -284,11 +278,7 @@ export default class ScrollableTabBarNode extends React.Component { const navClassName = `${prefixCls}-nav`; const navClasses = classnames({ [navClassName]: true, - [ - scrollAnimated ? - `${navClassName}-animated` : - `${navClassName}-no-animated` - ]: true, + [scrollAnimated ? `${navClassName}-animated` : `${navClassName}-no-animated`]: true, }); return ( @@ -334,7 +324,7 @@ ScrollableTabBarNode.defaultProps = { tabBarPosition: 'left', prefixCls: '', scrollAnimated: true, - onPrevClick: () => { }, - onNextClick: () => { }, - navWrapper: (ele) => ele, + onPrevClick: () => {}, + onNextClick: () => {}, + navWrapper: ele => ele, }; diff --git a/src/SwipeableTabBarNode.js b/src/SwipeableTabBarNode.js index e6669dbd..d36c1058 100755 --- a/src/SwipeableTabBarNode.js +++ b/src/SwipeableTabBarNode.js @@ -3,11 +3,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import Hammer from 'rc-hammerjs'; import ReactDOM from 'react-dom'; -import { - isVertical, - getStyle, - setPxStyle, -} from './utils'; +import { isVertical, getStyle, setPxStyle } from './utils'; export default class SwipeableTabBarNode extends React.Component { constructor(props) { @@ -32,33 +28,34 @@ export default class SwipeableTabBarNode extends React.Component { componentDidUpdate(prevProps) { this.setCache(); - if ((this.props.activeKey && this.props.activeKey !== prevProps.activeKey) - || this.props.panels.length !== prevProps.panels.length - || this.props.pageSize !== prevProps.pageSize + if ( + (this.props.activeKey && this.props.activeKey !== prevProps.activeKey) || + this.props.panels.length !== prevProps.panels.length || + this.props.pageSize !== prevProps.pageSize ) { this.setSwipePositionByKey(this.props.activeKey); } } - onPan = (e) => { + onPan = e => { const { vertical, totalAvaliableDelta, totalDelta } = this.cache; const { speed } = this.props; // calculate touch distance let nowDelta = vertical ? e.deltaY : e.deltaX; - nowDelta *= (speed / 10); + nowDelta *= speed / 10; // calculate distance dom need transform let _nextDelta = nowDelta + totalDelta; if (this.isRtl()) { - // calculate distance from right when direction is right-to-left + // calculate distance from right when direction is right-to-left if (_nextDelta <= 0) { _nextDelta = 0; } else if (_nextDelta >= totalAvaliableDelta) { _nextDelta = totalAvaliableDelta; } } - // calculate distance from left when direction is left-to-right + // calculate distance from left when direction is left-to-right else if (_nextDelta >= 0) { _nextDelta = 0; } else if (_nextDelta <= -totalAvaliableDelta) { @@ -76,7 +73,7 @@ export default class SwipeableTabBarNode extends React.Component { hasNextPage, }); } - } + }; setCache() { const { tabBarPosition, pageSize, panels } = this.props; @@ -100,7 +97,7 @@ export default class SwipeableTabBarNode extends React.Component { const centerTabCount = Math.floor(pageSize / 2); const { tabWidth } = this.cache; let delta = (index - centerTabCount) * tabWidth; - // in rtl direction tabs are ordered from right to left, so delta should be positive in order to + // in rtl direction tabs are ordered from right to left, so delta should be positive in order to // push swiped element to righ side (start of view) if (!this.isRtl()) { delta *= -1; @@ -110,7 +107,7 @@ export default class SwipeableTabBarNode extends React.Component { getIndexByKey(activeKey) { const { panels } = this.props; - const length = panels.length; + const { length } = panels; for (let i = 0; i < length; i++) { if (panels[i].key === activeKey) { return i; @@ -164,9 +161,11 @@ export default class SwipeableTabBarNode extends React.Component { hasNextPage: -delta < totalAvaliableDelta, }; } + isRtl() { return this.props.direction === 'rtl'; } + render() { const { prefixCls, hammerOptions, tabBarPosition } = this.props; const { hasPrevPage, hasNextPage } = this.state; @@ -229,6 +228,6 @@ SwipeableTabBarNode.defaultProps = { hammerOptions: {}, pageSize: 5, // per page show how many tabs speed: 7, // swipe speed, 1 to 10, more bigger more faster - saveRef: () => { }, - getRef: () => { }, + saveRef: () => {}, + getRef: () => {}, }; diff --git a/src/SwipeableTabContent.js b/src/SwipeableTabContent.js index 0876deeb..0b647d64 100755 --- a/src/SwipeableTabContent.js +++ b/src/SwipeableTabContent.js @@ -15,12 +15,7 @@ import { const RESISTANCE_COEF = 0.6; -function computeIndex({ - maxIndex, - startIndex, - delta, - viewSize, -}) { +function computeIndex({ maxIndex, startIndex, delta, viewSize }) { let index = startIndex + -delta / viewSize; if (index < 0) { index = Math.exp(index * RESISTANCE_COEF) - 1; @@ -62,7 +57,7 @@ export default class SwipeableTabContent extends React.Component { onPanStart = () => { const { tabBarPosition, children, activeKey, animated } = this.props; this.startIndex = getActiveIndex(children, activeKey); - const startIndex = this.startIndex; + const { startIndex } = this; if (startIndex === -1) { return; } @@ -72,12 +67,12 @@ export default class SwipeableTabContent extends React.Component { this.startDrag = true; this.children = toArray(children); this.maxIndex = this.children.length - 1; - this.viewSize = isVertical(tabBarPosition) ? - this.rootNode.offsetHeight : - this.rootNode.offsetWidth; - } + this.viewSize = isVertical(tabBarPosition) + ? this.rootNode.offsetHeight + : this.rootNode.offsetWidth; + }; - onPan = (e) => { + onPan = e => { if (!this.startDrag) { return; } @@ -86,18 +81,18 @@ export default class SwipeableTabContent extends React.Component { if (currentIndex !== undefined) { setTransform(this.rootNode.style, getTransformByIndex(currentIndex, tabBarPosition)); } - } + }; - onPanEnd = (e) => { + onPanEnd = e => { if (!this.startDrag) { return; } this.end(e); - } + }; - onSwipe = (e) => { + onSwipe = e => { this.end(e, true); - } + }; end = (e, swipe) => { const { tabBarPosition, animated } = this.props; @@ -129,13 +124,15 @@ export default class SwipeableTabContent extends React.Component { } if (this.startIndex === finalIndex) { if (animated) { - setTransform(this.rootNode.style, - getTransformByIndex(finalIndex, this.props.tabBarPosition)); + setTransform( + this.rootNode.style, + getTransformByIndex(finalIndex, this.props.tabBarPosition), + ); } } else { this.props.onChange(getActiveKey(this.props.children, finalIndex)); } - } + }; render() { const { tabBarPosition, hammerOptions, animated } = this.props; @@ -156,7 +153,7 @@ export default class SwipeableTabContent extends React.Component { direction={isVertical(tabBarPosition) ? 'DIRECTION_ALL' : 'DIRECTION_HORIZONTAL'} options={hammerOptions} > - + ); } diff --git a/src/TabBar.js b/src/TabBar.js index 76d48554..e98920f1 100644 --- a/src/TabBar.js +++ b/src/TabBar.js @@ -8,7 +8,7 @@ export default class TabBar extends React.Component { render() { return ( - {(saveRef) => ( + {saveRef => ( diff --git a/src/TabBarRootNode.js b/src/TabBarRootNode.js index 4abf7663..9385a2c9 100644 --- a/src/TabBarRootNode.js +++ b/src/TabBarRootNode.js @@ -4,26 +4,32 @@ import classnames from 'classnames'; import { getDataAttr } from './utils'; export default class TabBarRootNode extends React.Component { - getExtraContentStyle = () => { const { tabBarPosition, direction } = this.props; - const topOrBottom = (tabBarPosition === 'top' || tabBarPosition === 'bottom'); + const topOrBottom = tabBarPosition === 'top' || tabBarPosition === 'bottom'; if (direction === 'rtl') { return topOrBottom ? { float: 'left' } : {}; } return topOrBottom ? { float: 'right' } : {}; - } + }; render() { const { - prefixCls, onKeyDown, className, extraContent, style, tabBarPosition, children, direction, + prefixCls, + onKeyDown, + className, + extraContent, + style, + tabBarPosition, + children, + direction, ...restProps } = this.props; const cls = classnames(`${prefixCls}-bar`, { [className]: !!className, }); - const topOrBottom = (tabBarPosition === 'top' || tabBarPosition === 'bottom'); - const extraContentStyle = (extraContent && extraContent.props) ? extraContent.props.style : {}; + const topOrBottom = tabBarPosition === 'top' || tabBarPosition === 'bottom'; + const extraContentStyle = extraContent && extraContent.props ? extraContent.props.style : {}; let newChildren = children; if (extraContent) { newChildren = [ @@ -73,6 +79,6 @@ TabBarRootNode.defaultProps = { tabBarPosition: 'top', extraContent: null, children: null, - onKeyDown: () => { }, - saveRef: () => { }, + onKeyDown: () => {}, + saveRef: () => {}, }; diff --git a/src/TabBarSwipeableTabs.js b/src/TabBarSwipeableTabs.js index 8b9bf64e..b2cdd425 100644 --- a/src/TabBarSwipeableTabs.js +++ b/src/TabBarSwipeableTabs.js @@ -4,23 +4,23 @@ import classnames from 'classnames'; export default class TabBarSwipeableTabs extends React.Component { render() { - const props = this.props; + const { props } = this; const children = props.panels; - const activeKey = props.activeKey; + const { activeKey } = props; const rst = []; - const prefixCls = props.prefixCls; + const { prefixCls } = props; - const _flexWidth = `${1 / props.pageSize * 100}%`; + const _flexWidth = `${(1 / props.pageSize) * 100}%`; const tabStyle = { WebkitFlexBasis: _flexWidth, flexBasis: _flexWidth, }; - React.Children.forEach(children, (child) => { + React.Children.forEach(children, child => { if (!child) { return; } - const key = child.key; + const { key } = child; const cls = classnames(`${prefixCls}-tab`, { [`${prefixCls}-tab-active`]: activeKey === key, [`${prefixCls}-tab-disabled`]: child.props.disabled, @@ -35,18 +35,20 @@ export default class TabBarSwipeableTabs extends React.Component { if (activeKey === key) { refProps.ref = this.props.saveRef('activeTab'); } - rst.push(
- {child.props.tab} -
); + rst.push( +
+ {child.props.tab} +
, + ); }); return rst; diff --git a/src/TabBarTabsNode.js b/src/TabBarTabsNode.js index e66689f5..c12531d2 100644 --- a/src/TabBarTabsNode.js +++ b/src/TabBarTabsNode.js @@ -21,7 +21,7 @@ export default class TabBarTabsNode extends React.Component { if (!child) { return; } - const key = child.key; + const { key } = child; let cls = activeKey === key ? `${prefixCls}-tab-active` : ''; cls += ` ${prefixCls}-tab`; let events = {}; @@ -67,11 +67,7 @@ export default class TabBarTabsNode extends React.Component { rst.push(node); }); - return ( -
- {rst} -
- ); + return
{rst}
; } } @@ -91,6 +87,6 @@ TabBarTabsNode.defaultProps = { panels: [], prefixCls: [], tabBarGutter: null, - onTabClick: () => { }, - saveRef: () => { }, + onTabClick: () => {}, + saveRef: () => {}, }; diff --git a/src/TabContent.js b/src/TabContent.js index 5474c566..a7dfaf2b 100755 --- a/src/TabContent.js +++ b/src/TabContent.js @@ -10,22 +10,24 @@ import { export default class TabContent extends React.Component { getTabPanes() { - const props = this.props; - const activeKey = props.activeKey; - const children = props.children; + const { props } = this; + const { activeKey } = props; + const { children } = props; const newChildren = []; - React.Children.forEach(children, (child) => { + React.Children.forEach(children, child => { if (!child) { return; } - const key = child.key; + const { key } = child; const active = activeKey === key; - newChildren.push(React.cloneElement(child, { - active, - destroyInactiveTabPane: props.destroyInactiveTabPane, - rootPrefixCls: props.prefixCls, - })); + newChildren.push( + React.cloneElement(child, { + active, + destroyInactiveTabPane: props.destroyInactiveTabPane, + rootPrefixCls: props.prefixCls, + }), + ); }); return newChildren; @@ -34,23 +36,29 @@ export default class TabContent extends React.Component { render() { const { props } = this; const { - prefixCls, children, activeKey, className, - tabBarPosition, animated, animatedWithMargin, + prefixCls, + children, + activeKey, + className, + tabBarPosition, + animated, + animatedWithMargin, direction, } = props; let { style } = props; - const classes = classnames({ - [`${prefixCls}-content`]: true, - [animated ? - `${prefixCls}-content-animated` : - `${prefixCls}-content-no-animated`]: true, - }, className); + const classes = classnames( + { + [`${prefixCls}-content`]: true, + [animated ? `${prefixCls}-content-animated` : `${prefixCls}-content-no-animated`]: true, + }, + className, + ); if (animated) { const activeIndex = getActiveIndex(children, activeKey); if (activeIndex !== -1) { - const animatedStyle = animatedWithMargin ? - getMarginStyle(activeIndex, tabBarPosition, direction) : - getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition, direction)); + const animatedStyle = animatedWithMargin + ? getMarginStyle(activeIndex, tabBarPosition, direction) + : getTransformPropValue(getTransformByIndex(activeIndex, tabBarPosition, direction)); style = { ...style, ...animatedStyle, @@ -63,10 +71,7 @@ export default class TabContent extends React.Component { } } return ( -
+
{this.getTabPanes()}
); diff --git a/src/Tabs.js b/src/Tabs.js index 82f456f6..b69c2672 100755 --- a/src/Tabs.js +++ b/src/Tabs.js @@ -7,12 +7,11 @@ import TabPane from './TabPane'; import { getDataAttr } from './utils'; import Sentinel, { SentinelProvider } from './Sentinel'; -function noop() { -} +function noop() {} function getDefaultActiveKey(props) { let activeKey; - React.Children.forEach(props.children, (child) => { + React.Children.forEach(props.children, child => { if (child && !activeKey && !child.props.disabled) { activeKey = child.key; } @@ -66,9 +65,9 @@ class Tabs extends React.Component { this.tabBar.props.onTabClick(activeKey, e); } this.setActiveKey(activeKey); - } + }; - onNavKeyDown = (e) => { + onNavKeyDown = e => { const eventKeyCode = e.keyCode; if (eventKeyCode === KeyCode.RIGHT || eventKeyCode === KeyCode.DOWN) { e.preventDefault(); @@ -79,7 +78,7 @@ class Tabs extends React.Component { const previousKey = this.getNextActiveKey(false); this.onTabClick(previousKey); } - } + }; onScroll = ({ target, currentTarget }) => { if (target === currentTarget && target.scrollLeft > 0) { @@ -88,29 +87,29 @@ class Tabs extends React.Component { }; // Sentinel for tab index - setSentinelStart = (node) => { + setSentinelStart = node => { this.sentinelStart = node; }; - setSentinelEnd = (node) => { + setSentinelEnd = node => { this.sentinelEnd = node; }; - setPanelSentinelStart = (node) => { + setPanelSentinelStart = node => { if (node !== this.panelSentinelStart) { this.updateSentinelContext(); } this.panelSentinelStart = node; }; - setPanelSentinelEnd = (node) => { + setPanelSentinelEnd = node => { if (node !== this.panelSentinelEnd) { this.updateSentinelContext(); } this.panelSentinelEnd = node; }; - setActiveKey = (activeKey) => { + setActiveKey = activeKey => { if (this.state.activeKey !== activeKey) { if (!('activeKey' in this.props)) { this.setState({ @@ -119,12 +118,12 @@ class Tabs extends React.Component { } this.props.onChange(activeKey); } - } + }; - getNextActiveKey = (next) => { - const activeKey = this.state.activeKey; + getNextActiveKey = next => { + const { activeKey } = this.state; const children = []; - React.Children.forEach(this.props.children, (c) => { + React.Children.forEach(this.props.children, c => { if (c && !c.props.disabled) { if (next) { children.push(c); @@ -133,7 +132,7 @@ class Tabs extends React.Component { } } }); - const length = children.length; + const { length } = children; let ret = length && children[0].key; children.forEach((child, i) => { if (child.key === activeKey) { @@ -145,7 +144,7 @@ class Tabs extends React.Component { } }); return ret; - } + }; updateSentinelContext() { if (this.destroy) return; @@ -158,11 +157,12 @@ class Tabs extends React.Component { } render() { - const props = this.props; + const { props } = this; const { prefixCls, navWrapper, - tabBarPosition, className, + tabBarPosition, + className, renderTabContent, renderTabBar, destroyInactiveTabPane, diff --git a/src/utils.js b/src/utils.js index c9095e3c..4ae4c94f 100755 --- a/src/utils.js +++ b/src/utils.js @@ -33,10 +33,9 @@ export function setTransform(style, v) { } export function isTransform3dSupported(style) { - return ('transform' in style || - 'webkitTransform' in style || - 'MozTransform' in style) && - window.atob; + return ( + ('transform' in style || 'webkitTransform' in style || 'MozTransform' in style) && window.atob + ); } export function setTransition(style, v) { @@ -80,7 +79,10 @@ export function getMarginStyle(index, tabBarPosition, direction = 'ltr') { } export function getStyle(el, property) { - return +window.getComputedStyle(el).getPropertyValue(property).replace('px', ''); + return +window + .getComputedStyle(el) + .getPropertyValue(property) + .replace('px', ''); } export function setPxStyle(el, value, vertical) { @@ -108,7 +110,7 @@ function getTypeValue(start, current, end, tabNode, wrapperNode) { } const { childNodes } = tabNode.parentNode; - Array.prototype.some.call(childNodes, (node) => { + Array.prototype.some.call(childNodes, node => { const style = window.getComputedStyle(node); if (node !== tabNode) {