feat: 移除 tab 功能

alibaba-fusion · Oct 11, 2022 · e7a21ed · e7a21ed
1 parent 778d80e
commit e7a21ed
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 197 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@alifd/layout",
   "version": "2.0.0",
-  "description": "自然布局",
+  "description": "基于 Fusion 设计系统的自然布局体系",
   "files": [
     "demo/",
     "es/",
@@ -37,7 +37,6 @@
     "component"
   ],
   "dependencies": {
-    "@alifd/next": "^1.x",
     "classnames": "^2.3.2",
     "lodash-es": "^4.17.21",
     "resize-observer-polyfill": "^1.5.1"

diff --git a/src/page/content.tsx b/src/page/content.tsx
@@ -1,16 +1,15 @@
 import React, {
-  useRef,
+  Children,
   forwardRef,
-  useContext,
-  ReactNode,
+  ForwardRefExoticComponent,
   ForwardRefRenderFunction,
-  ReactElement,
-  Children,
   isValidElement,
-  ForwardRefExoticComponent,
+  ReactElement,
+  ReactNode,
+  useContext,
+  useRef,
 } from 'react';
 import classNames from 'classnames';
-import Tab from '@alifd/next/lib/tab';
 import Context from '@/common/context';
 import { BaseBgMode, BaseProps, LayoutContextProps, TypeMark } from '@/types';
 import { wrapUnit } from '@/utils';
@@ -38,7 +37,7 @@ const PageContent: ForwardRefRenderFunction<any, PageContentProps> = (
   ref,
 ) => {
   const { children, mode, noPadding, title, key, active, style, ...others } = props;
-  const { prefix, isTab } = useContext<LayoutContextProps>(Context);
+  const { prefix } = useContext<LayoutContextProps>(Context);
 
   const sectionWrapperRef = useRef(null);
   let navNode: any;
@@ -65,28 +64,26 @@ const PageContent: ForwardRefRenderFunction<any, PageContentProps> = (
   const asideWidth = asideNode?.props?.width || 0;
   const centerMode = !!(asideNode || navNode);
 
-  const newPrefix = isTab ? 'fd-layout-' : prefix;
   const mainCls = classNames({
-    [`${newPrefix}page-main`]: true,
+    [`${prefix}page-main`]: true,
   });
 
   const contentHelpCls = classNames({
-    [`${newPrefix}page-bg-${mode}`]: !!mode,
-    [`${newPrefix}page-min-height-helper`]: true,
-    [`${newPrefix}page-content--with-aside`]: asideNode,
-    [`${newPrefix}page-content--with-nav`]: navNode,
-    [`${newPrefix}page-content--is-tab`]: isTab,
-    [`${newPrefix}page-content--center-mode`]: navNode || asideNode,
-    [`${newPrefix}page-content--single-col`]: !navNode && !asideNode,
+    [`${prefix}page-bg-${mode}`]: !!mode,
+    [`${prefix}page-min-height-helper`]: true,
+    [`${prefix}page-content--with-aside`]: asideNode,
+    [`${prefix}page-content--with-nav`]: navNode,
+    [`${prefix}page-content--center-mode`]: navNode || asideNode,
+    [`${prefix}page-content--single-col`]: !navNode && !asideNode,
   });
 
   const contentCls = classNames({
-    [`${newPrefix}page-content`]: true,
-    [`${newPrefix}page-content-no-padding`]: noPadding,
-    [`${newPrefix}page-content--with-nav`]: navNode,
+    [`${prefix}page-content`]: true,
+    [`${prefix}page-content-no-padding`]: noPadding,
+    [`${prefix}page-content--with-nav`]: navNode,
   });
 
-  const content = (
+  return (
     <div ref={ref} className={contentHelpCls} {...others}>
       <div
         className={contentCls}
@@ -109,17 +106,6 @@ const PageContent: ForwardRefRenderFunction<any, PageContentProps> = (
       </div>
     </div>
   );
-
-  if (isTab) {
-    return (
-      // @ts-ignore
-      <Tab.Item title={title} key={key} active={active}>
-        {content}
-      </Tab.Item>
-    );
-  }
-
-  return content;
 };
 
 const RefPageContent: IPageContent = forwardRef(PageContent);

diff --git a/src/page/index.tsx b/src/page/index.tsx
@@ -1,18 +1,17 @@
 import React, {
-  useRef,
-  useEffect,
-  useState,
-  forwardRef,
-  isValidElement,
   Children,
-  ReactNode,
   CSSProperties,
-  ReactElement,
+  forwardRef,
   ForwardRefRenderFunction,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  useEffect,
   useMemo,
+  useRef,
+  useState,
 } from 'react';
 import classNames from 'classnames';
-import Tab from '@alifd/next/lib/tab';
 import ResizeObserver from 'resize-observer-polyfill';
 import Context from '@/common/context';
 import { DEFAULT_BREAK_POINTS } from '@/common/constant';
@@ -27,12 +26,6 @@ interface ContentProps extends BaseBgMode {
   noPadding?: boolean;
 }
 
-interface IPageTabsProps {
-  size?: 'medium' | 'small';
-  excessMode?: 'dropdown' | 'slide';
-  shape?: 'wrapped' | 'capsule' | 'pure' | 'text';
-}
-
 export interface PageProps extends PageContentProps, BaseBgMode, BaseProps {
   /**
    * class 前缀
@@ -51,9 +44,6 @@ export interface PageProps extends PageContentProps, BaseBgMode, BaseProps {
    */
   noPadding?: boolean;
 
-  isTab?: boolean; // 是否打开分页模式
-  tabProps?: IPageTabsProps[];
-
   contentProps?: ContentProps;
 
   /**
@@ -99,8 +89,6 @@ const Page: ForwardRefRenderFunction<any, PageProps> = (props, ref) => {
     mode,
     noPadding,
     contentProps,
-    isTab,
-    tabProps,
     header,
     nav,
     aside,
@@ -201,8 +189,7 @@ const Page: ForwardRefRenderFunction<any, PageProps> = (props, ref) => {
   const pageCls = classNames(className, {
     [`${prefix}page`]: true,
     [`${prefix}page--col-${curBreakPoint.numberOfColumns}`]: true,
-    [`${prefix}page--with-tab`]: !!isTab,
-    [`${prefix}page--not-tab`]: !isTab,
+    [`${prefix}page--not-tab`]: true,
     [`${prefix}page--headless`]: !headerNode,
     [`${prefix}page--footless`]: !footerNode,
     [`${prefix}page--no-padding`]: noPadding,
@@ -227,18 +214,6 @@ const Page: ForwardRefRenderFunction<any, PageProps> = (props, ref) => {
       </PageContent>
     );
 
-  const content = isTab ? (
-    <Tab
-      {...tabProps}
-      navClassName={`fd-layout-page-tab`}
-      contentClassName={`${prefix}page-tab-content`}
-    >
-      {defaultContent}
-    </Tab>
-  ) : (
-    defaultContent
-  );
-
   return (
     <>
       <style
@@ -269,11 +244,10 @@ const Page: ForwardRefRenderFunction<any, PageProps> = (props, ref) => {
             blockGap,
             breakPoint: curBreakPoint,
             maxNumberOfColumns: getMaxNumberOfColumns(breakPoints),
-            isTab,
           }}
         >
           {headerNode}
-          {content}
+          {defaultContent}
           {footerNode}
         </Context.Provider>
       </div>

diff --git a/src/page/page-header.tsx b/src/page/page-header.tsx
@@ -17,13 +17,11 @@ export type IPageHeader = FC<PageHeaderProps> & TypeMark;
 
 const PageHeader: IPageHeader = (props: PageHeaderProps) => {
   const { className, children, mode, noBottomPadding, divider, fullWidth, ...others } = props;
-  const { prefix, isTab } = useContext<LayoutContextProps>(Context);
+  const { prefix } = useContext<LayoutContextProps>(Context);
   const clsPrefix = `${prefix}page-header`;
 
   const headerCls = classNames(className, clsPrefix, {
     [`${clsPrefix}--dividing`]: divider,
-    [`${clsPrefix}--no-margin`]: isTab,
-    [`${clsPrefix}--no-bottom-padding`]: isTab || noBottomPadding,
     [`${clsPrefix}--fullwidth`]: fullWidth,
     [`${prefix}bg--${mode}`]: !!mode,
   });

diff --git a/src/scss/header-footer.scss b/src/scss/header-footer.scss
@@ -66,10 +66,6 @@
   }
 }
 
-#{$biz-css-prefix}page-content--with-tab #{$biz-css-prefix}page-header {
-  margin-bottom: 0;
-}
-
 #{$biz-css-prefix}page--no-padding #{$biz-css-prefix}page-header {
   padding-top: 0;
   padding-left: 0;