fix(layout): better theme gen style

hsbtr · Nov 28, 2022 · fcbc182 · fcbc182
1 parent 9247c4a
commit fcbc182
Show file tree

Hide file tree

Showing 16 changed files with 1,242 additions and 1,235 deletions.
diff --git a/docs/demos/customization-value-type.tsx b/docs/demos/customization-value-type.tsx
@@ -1,14 +1,9 @@
 import type { ProFormColumnsType } from '@ant-design/pro-components';
-import {
-  BetaSchemaForm,
-  ProCard,
-  ProDescriptions,
-  ProProvider,
-  ProTable,
-} from '@ant-design/pro-components';
+import { ProConfigProvider } from '@ant-design/pro-components';
+import { BetaSchemaForm, ProCard, ProDescriptions, ProTable } from '@ant-design/pro-components';
 import type { InputRef } from 'antd';
 import { Input, Space, Tag } from 'antd';
-import React, { useContext, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 const valueEnum = {
   0: 'close',
@@ -149,33 +144,29 @@ const initialValue = {
 };
 
 export default () => {
-  const values = useContext(ProProvider);
   return (
-    <ProProvider.Provider
-      value={{
-        hashed: false,
-        ...values,
-        valueTypeMap: {
-          link: {
-            render: (text) => <a>{text}</a>,
-            renderFormItem: (text, props) => (
-              <Input placeholder="请输入链接" {...props?.fieldProps} />
-            ),
-          },
-          tags: {
-            render: (text) => {
-              return (
-                <>
-                  {[text].flat(1).map((item) => (
-                    <Tag key={item.value}>{item.label}</Tag>
-                  ))}
-                </>
-              );
-            },
-            renderFormItem: (text, props) => <TagList {...props} {...props?.fieldProps} />,
+    <ProConfigProvider
+      valueTypeMap={{
+        link: {
+          render: (text) => <a>{text}</a>,
+          renderFormItem: (text, props) => (
+            <Input placeholder="请输入链接" {...props?.fieldProps} />
+          ),
+        },
+        tags: {
+          render: (text) => {
+            return (
+              <>
+                {[text].flat(1).map((item) => (
+                  <Tag key={item.value}>{item.label}</Tag>
+                ))}
+              </>
+            );
           },
+          renderFormItem: (text, props) => <TagList {...props} {...props?.fieldProps} />,
         },
       }}
+      hashed={false}
     >
       <ProCard
         title="SchemaForm"
@@ -213,6 +204,6 @@ export default () => {
       >
         <ProDescriptions columns={tableColumns} dataSource={initialValue} />
       </ProCard>
-    </ProProvider.Provider>
+    </ProConfigProvider>
   );
 };
diff --git a/packages/field/src/index.tsx b/packages/field/src/index.tsx
@@ -1,4 +1,4 @@
-import ConfigContext from '@ant-design/pro-provider';
+import ProConfigContext from '@ant-design/pro-provider';
 import type {
   BaseProFieldFC,
   ProFieldFCRenderProps,
@@ -466,7 +466,7 @@ const ProFieldComponent: React.ForwardRefRenderFunction<any, ProFieldPropsType>
   { text, valueType = 'text', mode = 'read', onChange, renderFormItem, value, readonly, ...rest },
   ref: any,
 ) => {
-  const context = useContext(ConfigContext);
+  const context = useContext(ProConfigContext);
 
   const fieldProps = (value !== undefined || onChange || rest?.fieldProps) && {
     value,

diff --git a/packages/layout/src/ProLayout.tsx b/packages/layout/src/ProLayout.tsx
@@ -1,7 +1,7 @@
-import { darkAlgorithm, defaultAlgorithm, ProTokenType } from '@ant-design/pro-provider';
+import type { ProTokenType } from '@ant-design/pro-provider';
 import { ProProvider } from '@ant-design/pro-provider';
 import { ProConfigProvider } from '@ant-design/pro-provider';
-import { isBrowser, merge, useDocumentTitle, useMountMergeState } from '@ant-design/pro-utils';
+import { isBrowser, useDocumentTitle, useMountMergeState } from '@ant-design/pro-utils';
 import { getMatchMenu } from '@umijs/route-utils';
 import type { BreadcrumbProps as AntdBreadcrumbProps } from 'antd';
 import { ConfigProvider, Layout } from 'antd';
@@ -717,33 +717,16 @@ BaseProLayout.defaultProps = {
 
 const ProLayout: React.FC<ProLayoutProps> = (props) => {
   const { colorPrimary } = props;
-  const tokenContext = useContext(ProProvider);
   return (
     <ConfigProvider
       // @ts-ignore
       theme={{
-        hashed: process.env.NODE_ENV?.toLowerCase() !== 'test',
-        components: {
-          Button: {
-            colorBgContainer: props.navTheme?.includes('Dark') ? 'transparent' : '#FFF',
-          },
-        },
         token: {
           colorPrimary: colorPrimary || '#1677FF',
         },
-        algorithm: props.navTheme?.includes('Dark') ? darkAlgorithm : defaultAlgorithm,
       }}
     >
-      <ProConfigProvider
-        autoClearCache
-        token={
-          props.token
-            ? merge(tokenContext.token, {
-                layout: merge(tokenContext.token?.layout, props.token || {}),
-              })
-            : undefined
-        }
-      >
+      <ProConfigProvider autoClearCache dark={props.navTheme === 'realDark'} token={props.token}>
         <BaseProLayout {...props} />
       </ProConfigProvider>
     </ConfigProvider>

diff --git a/packages/layout/src/demos/base.tsx b/packages/layout/src/demos/base.tsx
@@ -10,7 +10,7 @@ import {
 import ProCard from '@ant-design/pro-card';
 import type { ProSettings } from '@ant-design/pro-layout';
 import { PageContainer, ProLayout, SettingDrawer } from '@ant-design/pro-layout';
-import { ProProvider } from '@ant-design/pro-provider';
+import { ProConfigProvider } from '@ant-design/pro-provider';
 import { css } from '@emotion/css';
 import { Button, Divider, Popover, Input, theme } from 'antd';
 import React, { useState } from 'react';
@@ -261,11 +261,7 @@ export default () => {
         height: '100vh',
       }}
     >
-      <ProProvider.Provider
-        value={{
-          hashed: false,
-        }}
-      >
+      <ProConfigProvider hashed={false}>
         <ProLayout
           bgLayoutImgList={[
             {
@@ -401,7 +397,7 @@ export default () => {
             disableUrlParams={false}
           />
         </ProLayout>
-      </ProProvider.Provider>
+      </ProConfigProvider>
     </div>
   );
 };
diff --git a/packages/layout/src/index.tsx b/packages/layout/src/index.tsx
@@ -33,7 +33,8 @@ import type { SettingDrawerProps, SettingDrawerState } from './components/Settin
 import { SettingDrawer } from './components/SettingDrawer';
 import type { TopNavHeaderProps } from './components/TopNavHeader';
 import { TopNavHeader } from './components/TopNavHeader';
-import { WaterMark, WaterMarkProps } from './components/WaterMark';
+import type { WaterMarkProps } from './components/WaterMark';
+import { WaterMark } from './components/WaterMark';
 import type { RouteContextType } from './context/RouteContext';
 import { RouteContext } from './context/RouteContext';
 import { getPageTitle } from './getPageTitle';