feat: tab.action&tab.extra

feat: Tab component Extra & Action fix: remove useless code fix: remove useless code
umijs · Nov 30, 2022 · 352b6ed · 352b6ed
1 parent 26effaf
commit 352b6ed
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 46 deletions.
diff --git a/docs/guide/page-tab.md b/docs/guide/page-tab.md
@@ -36,4 +36,17 @@ export default (api: IApi) => {
 };
 ```
 
+```ts
+// a.tsx
+import React from 'react';
+
+export default () => <>Hi, hello</>;
+
+export const Extra = () => <>😄</>;
+
+export const Action = () => <>🏀</>;
+
+```
+
 `component` 放入我们自定义的 Tab 内容，`test` 可以写入正则来匹配路由，这样我们就实现了为 `/componets` 下的路由页面添加自定义 Tab。
+`component` 组件默认导出的是 Tab 页内容，`Extra` 和 `Action` 都是可选导出项，`Extra` 可以自定义每个 Tab 的紧跟内容，`Action` 可以自定义整个tab栏的右侧内容，同一路由下只有第一个 `Action` 有效。
diff --git a/examples/normal/a.tsx b/examples/normal/a.tsx
@@ -1,3 +1,7 @@
 import React from 'react';
 
 export default () => <>Hi, hello</>;
+
+export const Extra = () => <>😄</>;
+
+export const Action = () => <>🏀</>;
diff --git a/src/client/theme-default/slots/ContentTabs/index.less b/src/client/theme-default/slots/ContentTabs/index.less
@@ -24,48 +24,58 @@
     }
   }
 
-  > li {
-    height: inherit;
+  &-nav {
+    flex: auto;
+    display: flex;
+    height: 60px;
 
-    > button {
-      padding: 0;
+    >li {
       height: inherit;
-      color: @c-text-secondary;
-      font-size: 17px;
-      border: 0;
-      background: transparent;
-      cursor: pointer;
-      transition: all 0.2s;
 
-      &:hover {
-        color: @c-primary;
+      >button {
+        padding: 0;
+        height: inherit;
+        color: @c-text-secondary;
+        font-size: 17px;
+        border: 0;
+        background: transparent;
+        cursor: pointer;
+        transition: all 0.2s;
+
+        &:hover {
+          color: @c-primary;
+        }
       }
-    }
 
-    &:not(last-child) {
-      margin-inline-end: 42px;
+      &:not(last-child) {
+        margin-inline-end: 42px;
 
-      @media @mobile {
-        margin-inline-end: 20px;
+        @media @mobile {
+          margin-inline-end: 20px;
+        }
       }
-    }
 
-    &[data-active] {
-      position: relative;
+      &[data-active] {
+        position: relative;
 
-      > button {
-        color: @c-text;
-      }
+        >button {
+          color: @c-text;
+        }
 
-      &::after {
-        content: '';
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: -1px;
-        height: 1px;
-        background-color: @c-primary;
+        &::after {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: -1px;
+          height: 1px;
+          background-color: @c-primary;
+        }
       }
     }
   }
+
+  &-action {
+    flex: none;
+  }
 }
diff --git a/src/client/theme-default/slots/ContentTabs/index.tsx b/src/client/theme-default/slots/ContentTabs/index.tsx
@@ -4,6 +4,18 @@ import './index.less';
 
 type IContentTabs = ReturnType<typeof useRouteMeta>['tabs'];
 
+const TabsAction: FC<{ tabs: IContentTabs }> = ({ tabs }) => {
+  const tabActions = tabs
+    ?.map((tab) => tab.components.Action)
+    .filter((tab) => tab);
+
+  return Boolean(tabActions?.length) ? (
+    <div className="dumi-default-content-tabs-actions">
+      {React.createElement(tabActions![0])}
+    </div>
+  ) : null;
+};
+
 export interface IContentTabsProps {
   tabs: IContentTabs;
   tabKey: string | null;
@@ -17,24 +29,26 @@ const ContentTabs: FC<IContentTabsProps> = ({
 }) => {
   const intl = useIntl();
 
-  // TODO: tab.Extra & tab.Action render
-
   return Boolean(tabs?.length) ? (
     <ul className="dumi-default-content-tabs">
-      <li onClick={() => onChange()} data-active={!key || undefined}>
-        <button type="button">
-          {intl.formatMessage({ id: 'content.tabs.default' })}
-        </button>
-      </li>
-      {tabs!.map((tab) => (
-        <li
-          key={tab.key}
-          onClick={() => onChange(tab)}
-          data-active={key === tab.key || undefined}
-        >
-          <button type="button">{tab.meta.frontmatter.title}</button>
+      <div className="dumi-default-content-tabs-nav">
+        <li onClick={() => onChange()} data-active={!key || undefined}>
+          <button type="button">
+            {intl.formatMessage({ id: 'content.tabs.default' })}
+          </button>
         </li>
-      ))}
+        {tabs!.map((tab) => (
+          <li
+            key={tab.key}
+            onClick={() => onChange(tab)}
+            data-active={key === tab.key || undefined}
+          >
+            <button type="button">{tab.meta.frontmatter.title}</button>
+            {tab.components.Extra && React.createElement(tab.components.Extra)}
+          </li>
+        ))}
+      </div>
+      <TabsAction tabs={tabs} />
     </ul>
   ) : null;
 };