fix: className doesn't work with tabPanel (#420)

docs/examples/basic.tsx

@@ -8,7 +8,7 @@ export default () => {
     <TabPane key="light" tab="light">
       Light
     </TabPane>,
-    <TabPane key="bamboo" tab="bamboo">
+    <TabPane className='panda' key="bamboo" tab="bamboo">
       Bamboo
     </TabPane>,
     <TabPane key="cute" tab="cute" disabled>

package.json

@@ -34,6 +34,7 @@
     "docs:deploy": "gh-pages -d .doc",
     "compile": "father build && npm run compile:style",
     "test": "father test",
+    "test:update": "father test --u",
     "coverage": "father test --coverage",
     "now-build": "npm run build",
     "lint": "eslint src/ docs/examples/ --ext .tsx,.ts,.jsx,.js",
@@ -67,7 +68,7 @@
     "react-dnd": "^10.0.0",
     "react-dnd-html5-backend": "^10.0.0",
     "react-dom": "^16.0.0",
-    "react-router": "^3.0.0",
+    "react-router": "^5.0.0",
     "react-sticky": "^6.0.3",
     "react-test-renderer": "^16.0.0",
     "sortablejs": "^1.7.0",

src/TabNavList/TabNode.tsx

@@ -18,6 +18,7 @@ export interface TabNodeProps {
   onRemove: () => void;
   onFocus: React.FocusEventHandler;
   style?: React.CSSProperties;
+  className?: string;
 }
 
 function TabNode(
@@ -34,6 +35,7 @@ function TabNode(
     onRemove,
     onFocus,
     style,
+    className,
   }: TabNodeProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
@@ -63,7 +65,7 @@ function TabNode(
     <div
       key={key}
       ref={ref}
-      className={classNames(tabPrefix, {
+      className={classNames(tabPrefix, className, {
         [`${tabPrefix}-with-remove`]: removable,
         [`${tabPrefix}-active`]: active,
         [`${tabPrefix}-disabled`]: disabled,

src/TabNavList/index.tsx

@@ -283,7 +283,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
   }
 
   const tabNodes: React.ReactElement[] = tabs.map((tab, i) => {
-    const { key } = tab;
+    const { key, className: tabClassName } = tab;
     return (
       <TabNode
         id={id}
@@ -292,6 +292,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
         tab={tab}
         /* first node should not have margin left */
         style={i === 0 ? undefined : tabNodeStyle}
+        className={tabClassName}
         closable={tab.closable}
         editable={editable}
         active={key === activeKey}

tests/__snapshots__/index.test.tsx.snap

@@ -30,7 +30,7 @@ exports[`Tabs.Basic Normal 1`] = `
           </div>
         </div>
         <div
-          class="rc-tabs-tab rc-tabs-tab-active"
+          class="rc-tabs-tab panda rc-tabs-tab-active"
         >
           <div
             aria-controls="rc-tabs-test-panel-bamboo"
@@ -98,7 +98,7 @@ exports[`Tabs.Basic Normal 1`] = `
       <div
         aria-hidden="false"
         aria-labelledby="rc-tabs-test-tab-bamboo"
-        class="rc-tabs-tabpane rc-tabs-tabpane-active"
+        class="rc-tabs-tabpane rc-tabs-tabpane-active panda"
         id="rc-tabs-test-panel-bamboo"
         role="tabpanel"
         tabindex="0"

tests/index.test.tsx

@@ -12,7 +12,7 @@ describe('Tabs.Basic', () => {
         <TabPane tab="light" key="light">
           Light
         </TabPane>,
-        <TabPane tab="bamboo" key="bamboo">
+        <TabPane tab="bamboo" className="panda" key="bamboo">
           Bamboo
         </TabPane>,
         <TabPane tab="cute" key="cute">