Merge ab1c88e into 0c8ed2d

react-component · Oct 11, 2019 · eafacab · eafacab
2 parents 0c8ed2d + ab1c88e
commit eafacab
Show file tree

Hide file tree

Showing 19 changed files with 746 additions and 271 deletions.
diff --git a/package.json b/package.json
@@ -97,14 +97,11 @@
     "lint"
   ],
   "dependencies": {
-    "@ant-design/create-react-context": "^0.2.4",
     "babel-runtime": "6.x",
     "classnames": "2.x",
     "lodash": "^4.17.5",
     "prop-types": "15.x",
-    "raf": "^3.4.1",
     "rc-hammerjs": "~0.6.0",
-    "rc-util": "^4.0.4",
     "react-lifecycles-compat": "^3.0.4",
     "resize-observer-polyfill": "^1.5.1",
     "warning": "^4.0.3"

diff --git a/src/InkTabBar.js b/src/InkTabBar.js
@@ -11,7 +11,7 @@ export default class InkTabBar extends React.Component {
     return (
       <SaveRef>
         {(saveRef, getRef) => (
-          <TabBarRootNode saveRef={saveRef} {...this.props}>
+          <TabBarRootNode saveRef={saveRef} getRef={getRef} {...this.props}>
             <TabBarTabsNode onTabClick={this.props.onTabClick} saveRef={saveRef} {...this.props} />
             <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />
           </TabBarRootNode>

diff --git a/src/ScrollableInkTabBar.js b/src/ScrollableInkTabBar.js
@@ -14,7 +14,7 @@ export default class ScrollableInkTabBar extends React.Component {
     return (
       <SaveRef>
         {(saveRef, getRef) => (
-          <TabBarRootNode saveRef={saveRef} {...restProps}>
+          <TabBarRootNode saveRef={saveRef} getRef={getRef} {...restProps}>
             <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...restProps}>
               <TabBarTabsNode saveRef={saveRef} renderTabBarNode={renderTabBarNode} {...restProps} />
               <InkTabBarNode saveRef={saveRef} getRef={getRef} {...restProps} />

diff --git a/src/ScrollableTabBar.js b/src/ScrollableTabBar.js
@@ -10,7 +10,7 @@ export default class ScrollableTabBar extends React.Component {
     return (
       <SaveRef>
         {(saveRef, getRef) => (
-          <TabBarRootNode saveRef={saveRef} {...this.props}>
+          <TabBarRootNode saveRef={saveRef} getRef={getRef} {...this.props}>
             <ScrollableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
               <TabBarTabsNode saveRef={saveRef} {...this.props} />
             </ScrollableTabBarNode>

diff --git a/src/Sentinel.jsx b/src/Sentinel.jsx
diff --git a/src/SwipeableInkTabBar.js b/src/SwipeableInkTabBar.js
@@ -11,7 +11,7 @@ export default class SwipeableInkTabBar extends React.Component {
     return (
       <SaveRef>
         {(saveRef, getRef) => (
-          <TabBarRootNode saveRef={saveRef} {...this.props}>
+          <TabBarRootNode saveRef={saveRef} getRef={getRef} {...this.props}>
             <SwipeableTabBarNode saveRef={saveRef} getRef={getRef} {...this.props}>
               <TabBarSwipeableTabs saveRef={saveRef} {...this.props} />
               <InkTabBarNode saveRef={saveRef} getRef={getRef} {...this.props} />

diff --git a/src/TabBar.js b/src/TabBar.js
@@ -8,8 +8,8 @@ export default class TabBar extends React.Component {
   render() {
     return (
       <SaveRef>
-        {(saveRef) => (
-          <TabBarRootNode saveRef={saveRef} {...this.props}>
+        {(saveRef, getRef) => (
+          <TabBarRootNode saveRef={saveRef} getRef={getRef} {...this.props}>
             <TabBarTabsNode saveRef={saveRef} {...this.props} />
           </TabBarRootNode>
         )}

diff --git a/src/TabBarRootNode.js b/src/TabBarRootNode.js
@@ -4,6 +4,14 @@ import classnames from 'classnames';
 import { getDataAttr } from './utils';
 
 export default class TabBarRootNode extends React.Component {
+
+  componentDidUpdate() { 
+    const activeTab = this.props.getRef('activeTab');
+    if (activeTab) {
+      activeTab.focus();
+    }
+  }
+
   render() {
     const {
       prefixCls, onKeyDown, className, extraContent, style, tabBarPosition, children,
@@ -32,8 +40,8 @@ export default class TabBarRootNode extends React.Component {
     return (
       <div
         role="tablist"
+        tabIndex={-1}
         className={cls}
-        tabIndex="0"
         ref={this.props.saveRef('root')}
         onKeyDown={onKeyDown}
         style={style}
@@ -54,6 +62,7 @@ TabBarRootNode.propTypes = {
   extraContent: PropTypes.node,
   onKeyDown: PropTypes.func,
   saveRef: PropTypes.func,
+  getRef: PropTypes.func,
 };
 
 TabBarRootNode.defaultProps = {
@@ -65,4 +74,5 @@ TabBarRootNode.defaultProps = {
   children: null,
   onKeyDown: () => {},
   saveRef: () => {},
+  getRef: () => {},
 };
diff --git a/src/TabBarSwipeableTabs.js b/src/TabBarSwipeableTabs.js
@@ -35,14 +35,18 @@ export default class TabBarSwipeableTabs extends React.Component {
       if (activeKey === key) {
         refProps.ref = this.props.saveRef('activeTab');
       }
+      const id = this.props.id ? `${key}-${this.props.id}` : key;
       rst.push(<div
         role="tab"
         style={tabStyle}
         aria-disabled={child.props.disabled ? 'true' : 'false'}
         aria-selected={activeKey === key ? 'true' : 'false'}
+        tabIndex={activeKey === key ? 0 : -1}
         {...events}
         className={cls}
         key={key}
+        id={`tab-${id}`}
+        aria-controls={`tabpane-${id}`}
         {...refProps}
       >
         {child.props.tab}
@@ -61,6 +65,7 @@ TabBarSwipeableTabs.propTypes = {
   prefixCls: PropTypes.string,
   activeKey: PropTypes.string,
   panels: PropTypes.node,
+  id: PropTypes.string
 };
 
 TabBarSwipeableTabs.defaultProps = {

diff --git a/src/TabBarTabsNode.js b/src/TabBarTabsNode.js
@@ -42,15 +42,20 @@ export default class TabBarTabsNode extends React.Component {
       };
       warning('tab' in child.props, 'There must be `tab` property on children of Tabs.');
 
+      const id = this.props.id ? `${key}-${this.props.id}` : key;
+
       let node = (
         <div
           role="tab"
           aria-disabled={child.props.disabled ? 'true' : 'false'}
           aria-selected={activeKey === key ? 'true' : 'false'}
+          tabIndex={activeKey === key ? 0 : -1}
           {...events}
           className={cls}
           key={key}
           style={ style }
+          id={`tab-${id}`}
+          aria-controls={`tabpane-${id}`}
           {...ref}
         >
           {child.props.tab}
@@ -81,6 +86,7 @@ TabBarTabsNode.propTypes = {
   saveRef: PropTypes.func,
   renderTabBarNode: PropTypes.func,
   tabBarPosition: PropTypes.string,
+  id: PropTypes.string
 };
 
 TabBarTabsNode.defaultProps = {

diff --git a/src/TabContent.js b/src/TabContent.js
@@ -25,6 +25,7 @@ export default class TabContent extends React.Component {
         active,
         destroyInactiveTabPane: props.destroyInactiveTabPane,
         rootPrefixCls: props.prefixCls,
+        id: props.id
       }));
     });
 
@@ -82,6 +83,7 @@ TabContent.propTypes = {
   tabBarPosition: PropTypes.string,
   className: PropTypes.string,
   destroyInactiveTabPane: PropTypes.bool,
+  id: PropTypes.string
 };
 
 TabContent.defaultProps = {

diff --git a/src/TabPane.js b/src/TabPane.js
@@ -2,13 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { getDataAttr } from './utils';
-import Sentinel, { SentinelConsumer } from './Sentinel';
 
 export default class TabPane extends React.Component {
   render() {
     const {
       id, className, destroyInactiveTabPane, active, forceRender,
-      rootPrefixCls, style, children, placeholder,
+      rootPrefixCls, style, children, placeholder, tabKey,
       ...restProps
     } = this.props;
     this._isActived = this._isActived || active;
@@ -21,44 +20,22 @@ export default class TabPane extends React.Component {
     });
     const isRender = destroyInactiveTabPane ? active : this._isActived;
     const shouldRender = isRender || forceRender;
-
+
+    const tabKeyExists = tabKey && String(tabKey).length > 0;
+    const uuid = tabKeyExists && (id ? `${tabKey}-${id}` : `${tabKey}`);
     return (
-      <SentinelConsumer>
-        {({ sentinelStart, sentinelEnd, setPanelSentinelStart, setPanelSentinelEnd }) => {
-          // Create sentinel
-          let panelSentinelStart;
-          let panelSentinelEnd;
-          if (active && shouldRender) {
-            panelSentinelStart = (
-              <Sentinel
-                setRef={setPanelSentinelStart}
-                prevElement={sentinelStart}
-              />
-            );
-            panelSentinelEnd = (
-              <Sentinel
-                setRef={setPanelSentinelEnd}
-                nextElement={sentinelEnd}
-              />
-            );
-          }
-
-          return (
-            <div
-              style={style}
-              role="tabpanel"
-              aria-hidden={active ? 'false' : 'true'}
-              className={cls}
-              id={id}
-              {...getDataAttr(restProps)}
-            >
-              {panelSentinelStart}
-              {shouldRender ? children : placeholder}
-              {panelSentinelEnd}
-            </div>
-          );
-        }}
-      </SentinelConsumer>
+      <div
+        style={{ ...style, visibility: active ? 'visible' : 'hidden' }}
+        role="tabpanel"
+        aria-hidden={active ? 'false' : 'true'}
+        tabIndex={active ? 0 : -1}
+        className={cls}
+        id={uuid && `tabpane-${uuid}`}
+        aria-labelledby={uuid && `tab-${uuid}`}
+        {...getDataAttr(restProps)}
+      >
+        {shouldRender ? children : placeholder}
+      </div>
     );
   }
 }
@@ -73,6 +50,7 @@ TabPane.propTypes = {
   rootPrefixCls: PropTypes.string,
   children: PropTypes.node,
   id: PropTypes.string,
+  tabKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 
 TabPane.defaultProps = {