feat: layout support css variable theme (#45794)

* feat: layout support cssVar

* feat: optimize code

* feat: optimize code

* feat: optimize code
This commit is contained in:
kiner-tang(文辉) 2023-11-13 11:24:37 +08:00 committed by GitHub
parent df169cc4c9
commit cb6d377f61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 54 additions and 46 deletions

View File

@ -6,6 +6,7 @@ import { ConfigContext } from '../config-provider';
import { LayoutContext } from './context'; import { LayoutContext } from './context';
import useHasSider from './hooks/useHasSider'; import useHasSider from './hooks/useHasSider';
import useStyle from './style'; import useStyle from './style';
import useCSSVar from './style/cssVar';
export interface GeneratorProps { export interface GeneratorProps {
suffixCls?: string; suffixCls?: string;
@ -83,7 +84,8 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
const mergedHasSider = useHasSider(siders, children, hasSider); const mergedHasSider = useHasSider(siders, children, hasSider);
const [wrapSSR, hashId] = useStyle(prefixCls); const [, hashId] = useStyle(prefixCls);
const wrapCSSVar = useCSSVar(prefixCls);
const classString = classNames( const classString = classNames(
prefixCls, prefixCls,
{ {
@ -110,7 +112,7 @@ const BasicLayout = React.forwardRef<HTMLDivElement, BasicPropsWithTagName>((pro
[], [],
); );
return wrapSSR( return wrapCSSVar(
<LayoutContext.Provider value={contextValue}> <LayoutContext.Provider value={contextValue}>
<Tag <Tag
ref={ref} ref={ref}

View File

@ -0,0 +1,4 @@
import { genCSSVarRegister } from '../../theme/internal';
import { prepareComponentToken } from '.';
export default genCSSVarRegister('Layout', prepareComponentToken);

View File

@ -1,6 +1,6 @@
import type { CSSObject } from '@ant-design/cssinjs'; import { unit, type CSSObject } from '@ant-design/cssinjs';
import type { CSSProperties } from 'react'; import type { CSSProperties } from 'react';
import type { FullToken, GenerateStyle } from '../../theme/internal'; import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
import { genComponentStyleHook } from '../../theme/internal'; import { genComponentStyleHook } from '../../theme/internal';
import genLayoutLightStyle from './light'; import genLayoutLightStyle from './light';
@ -181,7 +181,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
zIndex: 1, zIndex: 1,
height: triggerHeight, height: triggerHeight,
color: triggerColor, color: triggerColor,
lineHeight: `${triggerHeight}px`, lineHeight: unit(triggerHeight),
textAlign: 'center', textAlign: 'center',
background: triggerBg, background: triggerBg,
cursor: 'pointer', cursor: 'pointer',
@ -196,7 +196,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
'&-trigger': { '&-trigger': {
position: 'absolute', position: 'absolute',
top: headerHeight, top: headerHeight,
insetInlineEnd: -zeroTriggerWidth, insetInlineEnd: token.calc(zeroTriggerWidth).mul(-1).equal(),
zIndex: 1, zIndex: 1,
width: zeroTriggerWidth, width: zeroTriggerWidth,
height: zeroTriggerHeight, height: zeroTriggerHeight,
@ -227,7 +227,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
}, },
'&-right': { '&-right': {
insetInlineStart: -zeroTriggerWidth, insetInlineStart: token.calc(zeroTriggerWidth).mul(-1).equal(),
borderStartStartRadius: borderRadius, borderStartStartRadius: borderRadius,
borderStartEndRadius: 0, borderStartEndRadius: 0,
borderEndEndRadius: 0, borderEndEndRadius: 0,
@ -249,7 +249,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
height: headerHeight, height: headerHeight,
padding: headerPadding, padding: headerPadding,
color: headerColor, color: headerColor,
lineHeight: `${headerHeight}px`, lineHeight: unit(headerHeight),
background: headerBg, background: headerBg,
// Other components/menu/style/index.less line:686 // Other components/menu/style/index.less line:686
@ -277,11 +277,7 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
}; };
}; };
// ============================== Export ============================== export const prepareComponentToken: GetDefaultToken<'Layout'> = (token) => {
export default genComponentStyleHook(
'Layout',
(token) => [genLayoutStyle(token)],
(token) => {
const { const {
colorBgLayout, colorBgLayout,
controlHeight, controlHeight,
@ -318,7 +314,13 @@ export default genComponentStyleHook(
lightTriggerBg: colorBgContainer, lightTriggerBg: colorBgContainer,
lightTriggerColor: colorText, lightTriggerColor: colorText,
}; };
}, };
// ============================== Export ==============================
export default genComponentStyleHook(
'Layout',
(token) => [genLayoutStyle(token)],
prepareComponentToken,
{ {
deprecatedTokens: [ deprecatedTokens: [
['colorBgBody', 'bodyBg'], ['colorBgBody', 'bodyBg'],