refactor: TabPane is a element (#279)

* refactor: TabPane is a element * clean up
react-component · Jun 3, 2020 · d124a62 · d124a62 · vercel · Jun 3, 2020
1 parent 80af6ad
commit d124a62
Show file tree

Hide file tree

Showing 11 changed files with 153 additions and 82 deletions.
diff --git a/src/TabPanelList/TabPane.tsx b/src/TabPanelList/TabPane.tsx
@@ -1,23 +1,36 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Tab } from '../interface';
 
 export interface TabPaneProps {
-  prefixCls: string;
-  id: string;
-  tab: Tab;
-  animated: boolean;
-  active: boolean;
+  tab?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+  children?: React.ReactNode;
+  forceRender?: boolean;
+  closable?: boolean;
+  closeIcon?: React.ReactNode;
+
+  // Pass by TabPaneList
+  prefixCls?: string;
+  tabKey?: string;
+  id?: string;
+  animated?: boolean;
+  active?: boolean;
   destroyInactiveTabPane?: boolean;
 }
 
 export default function TabPane({
   prefixCls,
+  forceRender,
+  className,
+  style,
   id,
   active,
   animated,
   destroyInactiveTabPane,
-  tab: { key, children, forceRender, className, style },
+  tabKey,
+  children,
 }: TabPaneProps) {
   const [visited, setVisited] = React.useState(forceRender);
 
@@ -40,10 +53,10 @@ export default function TabPane({
 
   return (
     <div
-      id={id && `${id}-panel-${key}`}
+      id={id && `${id}-panel-${tabKey}`}
       role="tabpanel"
       tabIndex={active ? 0 : -1}
-      aria-labelledby={id && `${id}-tab-${key}`}
+      aria-labelledby={id && `${id}-tab-${tabKey}`}
       aria-hidden={!active}
       style={{ ...mergedStyle, ...style }}
       className={classNames(

diff --git a/src/TabPanelList/index.tsx b/src/TabPanelList/index.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import TabPane from './TabPane';
 import TabContext from '../TabContext';
 import { TabPosition, AnimatedConfig } from '../interface';
 
@@ -37,17 +36,15 @@ export default function TabPanelList({
         }
       >
         {tabs.map(tab => {
-          return (
-            <TabPane
-              prefixCls={prefixCls}
-              id={id}
-              animated={tabPaneAnimated}
-              destroyInactiveTabPane={destroyInactiveTabPane}
-              active={tab.key === activeKey}
-              key={tab.key}
-              tab={tab}
-            />
-          );
+          return React.cloneElement(tab.node, {
+            key: tab.key,
+            prefixCls,
+            tabKey: tab.key,
+            id,
+            animated: tabPaneAnimated,
+            active: tab.key === activeKey,
+            destroyInactiveTabPane,
+          });
         })}
       </div>
     </div>

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
@@ -4,17 +4,17 @@ import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import TabPane, { TabPaneProps } from './sugar/TabPane';
 import TabNavList from './TabNavList';
 import TabPanelList from './TabPanelList';
+import TabPane, { TabPaneProps } from './TabPanelList/TabPane';
 import {
-  Tab,
   TabPosition,
   RenderTabBar,
   TabsLocale,
   EditableConfig,
   AnimatedConfig,
   OnTabScroll,
+  Tab,
 } from './interface';
 import TabContext from './TabContext';
 import { isMobile } from './hooks/useTouchMove';
@@ -66,14 +66,20 @@ export interface TabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'o
 }
 
 function parseTabList(children: React.ReactNode): Tab[] {
-  return toArray(children).map((node: React.ReactElement<TabPaneProps>) =>
-    React.isValidElement(node)
-      ? {
-          key: node.key !== undefined ? String(node.key) : undefined,
+  return toArray(children)
+    .map((node: React.ReactElement<TabPaneProps>) => {
+      if (React.isValidElement(node)) {
+        const key = node.key !== undefined ? String(node.key) : undefined;
+        return {
+          key,
           ...node.props,
-        }
-      : null,
-  );
+          node,
+        };
+      }
+
+      return null;
+    })
+    .filter(tab => tab);
 }
 
 function Tabs(
@@ -156,7 +162,7 @@ function Tabs(
   // Async generate id to avoid ssr mapping failed
   useEffect(() => {
     if (!id) {
-      setMergedId(`rc-tabs-${uuid}`);
+      setMergedId(`rc-tabs-${process.env.NODE_ENV === 'test' ? 'test' : uuid}`);
       uuid += 1;
     }
   }, []);

diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,6 @@
 import Tabs, { TabsProps } from './Tabs';
-import TabPane from './sugar/TabPane';
+import TabPane, { TabPaneProps } from './TabPanelList/TabPane';
 
-export { TabPane, TabsProps };
+export { TabPane, TabsProps, TabPaneProps };
 
 export default Tabs;
diff --git a/src/interface.ts b/src/interface.ts
@@ -1,4 +1,4 @@
-import { TabPaneProps } from './sugar/TabPane';
+import { TabPaneProps } from './TabPanelList/TabPane';
 
 export type TabSizeMap = Map<
   React.Key,
@@ -17,10 +17,8 @@ export type TabOffsetMap = Map<React.Key, TabOffset>;
 export type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 
 export interface Tab extends TabPaneProps {
-  tab?: React.ReactNode;
-  children?: React.ReactNode;
-  forceRender?: boolean;
   key: string;
+  node: React.ReactElement;
 }
 
 export type RenderTabBar = (props: any, DefaultTabBar: React.ComponentType) => React.ReactElement;

diff --git a/src/sugar/TabPane.tsx b/src/sugar/TabPane.tsx
diff --git a/tests/__snapshots__/index.test.tsx.snap b/tests/__snapshots__/index.test.tsx.snap
@@ -16,32 +16,32 @@ exports[`Tabs.Basic Normal 1`] = `
         style="transform: translate(0px, 0px);"
       >
         <button
-          aria-controls="rc-tabs-0-panel-light"
+          aria-controls="rc-tabs-test-panel-light"
           aria-selected="false"
           class="rc-tabs-tab"
-          id="rc-tabs-0-tab-light"
+          id="rc-tabs-test-tab-light"
           role="tab"
           tabindex="0"
           type="button"
         >
           light
         </button>
         <button
-          aria-controls="rc-tabs-0-panel-bamboo"
+          aria-controls="rc-tabs-test-panel-bamboo"
           aria-selected="true"
           class="rc-tabs-tab rc-tabs-tab-active"
-          id="rc-tabs-0-tab-bamboo"
+          id="rc-tabs-test-tab-bamboo"
           role="tab"
           tabindex="0"
           type="button"
         >
           bamboo
         </button>
         <button
-          aria-controls="rc-tabs-0-panel-cute"
+          aria-controls="rc-tabs-test-panel-cute"
           aria-selected="false"
           class="rc-tabs-tab"
-          id="rc-tabs-0-tab-cute"
+          id="rc-tabs-test-tab-cute"
           role="tab"
           tabindex="0"
           type="button"
@@ -57,12 +57,12 @@ exports[`Tabs.Basic Normal 1`] = `
       class="rc-tabs-nav-operations rc-tabs-nav-operations-hidden"
     >
       <button
-        aria-controls="rc-tabs-0-more-popup"
+        aria-controls="rc-tabs-test-more-popup"
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-hidden="true"
         class="rc-tabs-nav-more"
-        id="rc-tabs-0-more"
+        id="rc-tabs-test-more"
         style="visibility: hidden; order: 1;"
         tabindex="-1"
         type="button"
@@ -79,28 +79,28 @@ exports[`Tabs.Basic Normal 1`] = `
     >
       <div
         aria-hidden="true"
-        aria-labelledby="rc-tabs-0-tab-light"
+        aria-labelledby="rc-tabs-test-tab-light"
         class="rc-tabs-tabpane"
-        id="rc-tabs-0-panel-light"
+        id="rc-tabs-test-panel-light"
         role="tabpanel"
         style="display: none;"
         tabindex="-1"
       />
       <div
         aria-hidden="false"
-        aria-labelledby="rc-tabs-0-tab-bamboo"
+        aria-labelledby="rc-tabs-test-tab-bamboo"
         class="rc-tabs-tabpane rc-tabs-tabpane-active"
-        id="rc-tabs-0-panel-bamboo"
+        id="rc-tabs-test-panel-bamboo"
         role="tabpanel"
         tabindex="0"
       >
         Bamboo
       </div>
       <div
         aria-hidden="true"
-        aria-labelledby="rc-tabs-0-tab-cute"
+        aria-labelledby="rc-tabs-test-tab-cute"
         class="rc-tabs-tabpane"
-        id="rc-tabs-0-panel-cute"
+        id="rc-tabs-test-panel-cute"
         role="tabpanel"
         style="display: none;"
         tabindex="-1"
@@ -109,3 +109,73 @@ exports[`Tabs.Basic Normal 1`] = `
   </div>
 </div>
 `;
+
+exports[`Tabs.Basic Skip invalidate children 1`] = `
+<div
+  class="rc-tabs rc-tabs-top"
+>
+  <div
+    class="rc-tabs-nav"
+    role="tablist"
+  >
+    <div
+      class="rc-tabs-nav-wrap"
+    >
+      <div
+        class="rc-tabs-nav-list"
+        style="transform: translate(0px, 0px);"
+      >
+        <button
+          aria-controls="rc-tabs-test-panel-light"
+          aria-selected="true"
+          class="rc-tabs-tab rc-tabs-tab-active"
+          id="rc-tabs-test-tab-light"
+          role="tab"
+          tabindex="0"
+          type="button"
+        >
+          light
+        </button>
+        <div
+          class="rc-tabs-ink-bar rc-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="rc-tabs-nav-operations rc-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="rc-tabs-test-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="rc-tabs-nav-more"
+        id="rc-tabs-test-more"
+        style="visibility: hidden; order: 1;"
+        tabindex="-1"
+        type="button"
+      >
+        More
+      </button>
+    </div>
+  </div>
+  <div
+    class="rc-tabs-content-holder"
+  >
+    <div
+      class="rc-tabs-content rc-tabs-content-top"
+    >
+      <div
+        aria-hidden="false"
+        aria-labelledby="rc-tabs-test-tab-light"
+        class="rc-tabs-tabpane rc-tabs-tabpane-active"
+        id="rc-tabs-test-panel-light"
+        role="tabpanel"
+        tabindex="0"
+      >
+        Light
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/tests/__snapshots__/overflow.test.tsx.snap b/tests/__snapshots__/overflow.test.tsx.snap
@@ -2,12 +2,12 @@
 
 exports[`Tabs.Overflow should collapse 1`] = `
 <button
-  aria-controls="rc-tabs-0-more-popup"
+  aria-controls="rc-tabs-test-more-popup"
   aria-expanded="false"
   aria-haspopup="listbox"
   aria-hidden="true"
   class="rc-tabs-nav-more"
-  id="rc-tabs-0-more"
+  id="rc-tabs-test-more"
   style=""
   tabindex="-1"
   type="button"

diff --git a/tests/__snapshots__/suger.test.tsx.snap b/tests/__snapshots__/suger.test.tsx.snap
diff --git a/tests/index.test.tsx b/tests/index.test.tsx
@@ -30,6 +30,22 @@ describe('Tabs.Basic', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
+  it('Skip invalidate children', () => {
+    const wrapper = mount(
+      getTabs({
+        children: [
+          <TabPane tab="light" key="light">
+            Light
+          </TabPane>,
+          'not me',
+        ],
+      }),
+    );
+    wrapper.update();
+
+    expect(wrapper.render()).toMatchSnapshot();
+  });
+
   it('nothing for empty tabs', () => {
     mount(getTabs({ children: null }));
   });