fix(Layout): 修复 PageContainer 设置 fixedHeader 属性后，样式 ant-pro-page-cont…

…ainer-warp 未生效问题 (#6078) * fix: 修复 PageContainer 设置 fixedHeader 属性后，样式 ant-pro-page-container-warp 未生效问题 * fix: 修复 RouteContex 导入问题 * fix test * fix test Co-authored-by: Yanghc <hqwlkj@parsec.com.cn> Co-authored-by: chenshuai2144 <qixian.cs@outlook.com>
ant-design · Oct 16, 2022 · 0bf30ba · 0bf30ba
1 parent 7df07ba
commit 0bf30ba
Show file tree

Hide file tree

Showing 12 changed files with 461 additions and 399 deletions.
diff --git a/packages/field/src/components/Segmented/index.tsx b/packages/field/src/components/Segmented/index.tsx
@@ -48,7 +48,11 @@ const FieldSegmented: ProFieldFC<
   }
   if (mode === 'edit' || mode === 'update') {
     const dom = (
-      <Segmented ref={inputRef} {...(omit(fieldProps, ['allowClear']) as any)} options={options} />
+      <Segmented
+        ref={inputRef}
+        {...(omit(fieldProps || {}, ['allowClear']) as any)}
+        options={options}
+      />
     );
 
     if (renderFormItem) {

diff --git a/packages/layout/src/components/PageContainer/demos/fixHeader.tsx b/packages/layout/src/components/PageContainer/demos/fixHeader.tsx
@@ -45,9 +45,13 @@ export default () => (
     >
       <ProCard direction="column" ghost gutter={[0, 16]}>
         <ProCard style={{ height: 200 }} />
-        <ProCard gutter={16} ghost style={{ height: 200 }}>
-          <ProCard colSpan={16} />
-          <ProCard colSpan={8} />
+        <ProCard gutter={16} ghost>
+          <ProCard colSpan={16} style={{ height: 200 }} />
+          <ProCard colSpan={8} style={{ height: 200 }} />
+        </ProCard>
+        <ProCard gutter={16} ghost>
+          <ProCard colSpan={8} style={{ height: 200 }} />
+          <ProCard colSpan={16} style={{ height: 200 }} />
         </ProCard>
       </ProCard>
     </PageContainer>

diff --git a/packages/layout/src/components/PageContainer/index.tsx b/packages/layout/src/components/PageContainer/index.tsx
@@ -14,14 +14,14 @@ import { PageHeader } from '../PageHeader';
 import { PageLoading } from '../PageLoading';
 import type { WaterMarkProps } from '../WaterMark';
 import { WaterMark } from '../WaterMark';
-import type { pageContainerToken } from './style/index';
-import { useStyle } from './style/index';
+import type { pageContainerToken } from './style';
+import { useStyle } from './style';
 
 export type PageHeaderTabConfig = {
   /** @name tabs 的列表 */
-  tabList?: (TabPaneProps & { key?: React.ReactText })[];
+  tabList?: (TabPaneProps & { key?: React.Key })[];
 
-  /** @name 当前选中 tab 的 key */
+  /** @name tabActiveKey 当前选中 tab 的 key */
   tabActiveKey?: TabsProps['activeKey'];
 
   /** @name tab 修改时触发 */
@@ -35,11 +35,11 @@ export type PageHeaderTabConfig = {
 
   /**
    * @deprecated 请使用 fixedHeader
-   * @name 固定 PageHeader 到页面顶部
+   * @name fixHeader 固定 PageHeader 到页面顶部
    */
   fixHeader?: boolean;
 
-  /** @name 固定 PageHeader 到页面顶部 */
+  /** @name fixedHeader 固定 PageHeader 到页面顶部 */
   fixedHeader?: boolean;
 };
 
@@ -51,7 +51,7 @@ export type PageContainerProps = {
   footer?: ReactNode[];
 
   /**
-   * 自定义的 token
+   * @name token 自定义的 token
    */
   token?: pageContainerToken;
 
@@ -64,30 +64,33 @@ export type PageContainerProps = {
     children?: React.ReactNode;
   };
 
-  /** @name 自定义 pageHeader */
+  /** @name pageHeaderRender 自定义 pageHeader */
   pageHeaderRender?: WithFalse<(props: PageContainerProps) => React.ReactNode>;
 
   /**
    * 与 antd 完全相同
    *
-   * @name 固钉的配置
+   * @name affixProps 固钉的配置
    */
   affixProps?: Omit<AffixProps, 'children'>;
 
   /**
    * 只加载内容区域
    *
-   * @name 是否加载
+   * @name loading 是否加载
    */
   loading?: boolean | SpinProps | React.ReactNode;
 
-  /** 自定义 breadcrumb,返回false不展示 */
+  /**
+   * 自定义 breadcrumb,
+   * @name breadcrumbRender 返回false不展示
+   */
   breadcrumbRender?: PageHeaderProps['breadcrumbRender'] | false;
 
-  /** @name 水印的配置 */
+  /** @name WaterMarkProps 水印的配置 */
   waterMarkProps?: WaterMarkProps;
 
-  /** @name 配置面包屑 */
+  /** @name BreadcrumbProps 配置面包屑 */
   breadcrumb?: BreadcrumbProps;
 
   children?: React.ReactNode;
@@ -401,7 +404,7 @@ const PageContainer: React.FC<PageContainerProps> = (props) => {
             {...affixProps}
             className={`${basePageContainer}-affix ${hashId}`}
           >
-            {pageHeaderDom}
+            <div className={`${basePageContainer}-warp ${hashId}`}>{pageHeaderDom}</div>
           </Affix>
         ) : (
           pageHeaderDom

diff --git a/packages/layout/src/components/PageContainer/style/index.ts b/packages/layout/src/components/PageContainer/style/index.ts
@@ -23,6 +23,7 @@ const genPageContainerStyle: GenerateStyle<
         [`${token.antCls}-affix`]: {
           [`${token.componentCls}-warp`]: {
             backgroundColor: token.colorBgPageContainerFixed,
+            transition: 'background-color 0.3s',
             boxShadow: '0 2px 8px #f0f1f2',
           },
         },

diff --git a/packages/layout/src/components/PageHeader/index.tsx b/packages/layout/src/components/PageHeader/index.tsx
@@ -171,7 +171,7 @@ const PageHeader: React.FC<PageHeaderProps> = (props) => {
 
   const breadcrumbDom = isBreadcrumbComponent ? breadcrumb : breadcrumbRenderDomFromProps;
 
-  const className = classNames(prefixCls, props.className, customizeClassName, {
+  const className = classNames(prefixCls, customizeClassName, {
     hashId,
     [`${prefixCls}-has-breadcrumb`]: !!breadcrumbDom,
     [`${prefixCls}-has-footer`]: !!footer,

diff --git a/tests/form/__snapshots__/demo.test.ts.snap b/tests/form/__snapshots__/demo.test.ts.snap
@@ -44769,7 +44769,7 @@ exports[`form demos 📸 renders ./packages/form/src/demos/layout-footer.tsx cor
               class="ant-pro-page-container"
             >
               <div
-                class="ant-page-header ant-pro-page-container-warp-page-header  ant-pro-page-container-warp-page-header  ant-page-header-has-breadcrumb ant-page-header-ghost"
+                class="ant-page-header ant-pro-page-container-warp-page-header  ant-page-header-has-breadcrumb ant-page-header-ghost"
               >
                 <nav
                   class="ant-breadcrumb ant-page-header-breadcrumb"