Skip to content

Commit a9fbf98

Browse files
shifeng1993shifeng1993
authored
refactor:pageheader (#6239)
* refactor:pageheader * fix inheritAttrs: false & attrs.class
1 parent fee7c04 commit a9fbf98

File tree

6 files changed

+181
-217
lines changed

6 files changed

+181
-217
lines changed

‎components/page-header/index.tsx

+24-11
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,9 @@ import useDestroyed from '../_util/hooks/useDestroyed';
1616
import type { MouseEventHandler } from '../_util/EventInterface';
1717
import Space from '../space';
1818

19+
// CSSINJS
20+
import useStyle from './style';
21+
1922
export const pageHeaderProps = () => ({
2023
backIcon: PropTypes.any,
2124
prefixCls: String,
@@ -35,11 +38,16 @@ export type PageHeaderProps = Partial<ExtractPropTypes<ReturnType<typeof pageHea
3538
const PageHeader = defineComponent({
3639
compatConfig: { MODE: 3 },
3740
name: 'APageHeader',
41+
inheritAttrs: false,
3842
props: pageHeaderProps(),
3943
// emits: ['back'],
4044
slots: ['backIcon', 'avatar', 'breadcrumb', 'title', 'subTitle', 'tags', 'extra', 'footer'],
41-
setup(props, { emit, slots }) {
45+
setup(props, { emit, slots, attrs }) {
4246
const { prefixCls, direction, pageHeader } = useConfigInject('page-header', props);
47+
48+
// style
49+
const [wrapSSR, hashId] = useStyle(prefixCls);
50+
4351
const compact = ref(false);
4452
const isDestroyed = useDestroyed();
4553
const onResize = ({ width }: { width: number }) => {
@@ -148,22 +156,27 @@ const PageHeader = defineComponent({
148156
const hasBreadcrumb = props.breadcrumb?.routes || slots.breadcrumb;
149157
const hasFooter = props.footer || slots.footer;
150158
const children = flattenChildren(slots.default?.());
151-
const className = classNames(prefixCls.value, {
152-
'has-breadcrumb': hasBreadcrumb,
153-
'has-footer': hasFooter,
154-
[`${prefixCls.value}-ghost`]: ghost.value,
155-
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
156-
[`${prefixCls.value}-compact`]: compact.value,
157-
});
158-
return (
159+
const className = classNames(
160+
prefixCls.value,
161+
{
162+
'has-breadcrumb': hasBreadcrumb,
163+
'has-footer': hasFooter,
164+
[`${prefixCls.value}-ghost`]: ghost.value,
165+
[`${prefixCls.value}-rtl`]: direction.value === 'rtl',
166+
[`${prefixCls.value}-compact`]: compact.value,
167+
},
168+
attrs.class,
169+
hashId.value,
170+
);
171+
return wrapSSR(
159172
<ResizeObserver onResize={onResize}>
160-
<div class={className}>
173+
<div {...attrs} class={className}>
161174
{renderBreadcrumb()}
162175
{renderTitle()}
163176
{children.length ? renderChildren(children) : null}
164177
{renderFooter()}
165178
</div>
166-
</ResizeObserver>
179+
</ResizeObserver>,
167180
);
168181
};
169182
},

‎components/page-header/style/index.less

-123
This file was deleted.

‎components/page-header/style/index.tsx

+155-5
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,156 @@
1-
import './index.less';
1+
import type { CSSObject } from '../../_util/cssinjs';
2+
import type { FullToken, GenerateStyle } from '../../theme/internal';
3+
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
4+
import { resetComponent, textEllipsis } from '../../_style';
5+
import { operationUnit } from '../../_style';
26

3-
// style dependencies
4-
import '../../breadcrumb/style';
5-
import '../../avatar/style';
6-
import '../../space/style';
7+
interface PageHeaderToken extends FullToken<'PageHeader'> {
8+
pageHeaderPadding: number;
9+
pageHeaderPaddingVertical: number;
10+
pageHeaderPaddingBreadcrumb: number;
11+
pageHeaderGhostBg: string;
12+
pageHeaderBackColor: string;
13+
pageHeaderHeadingTitle: number;
14+
pageHeaderHeadingSubTitle: number;
15+
pageHeaderContentPaddingVertical: number;
16+
pageHeaderTabFontSize: number;
17+
}
18+
19+
const genPageHeaderStyle: GenerateStyle<PageHeaderToken, CSSObject> = token => {
20+
const { componentCls, antCls } = token;
21+
22+
return {
23+
[componentCls]: {
24+
...resetComponent(token),
25+
position: 'relative',
26+
padding: `${token.pageHeaderPaddingVertical}px ${token.pageHeaderPadding}px`,
27+
backgroundColor: token.colorBgLayout,
28+
29+
[`${componentCls}-ghost`]: {
30+
backgroundColor: token.pageHeaderGhostBg,
31+
},
32+
33+
[`&.has-footer`]: {
34+
paddingBottom: 0,
35+
},
36+
37+
[`${componentCls}-back`]: {
38+
marginRight: token.marginMD,
39+
fontZize: token.fontSizeLG,
40+
lineHeight: 1,
41+
42+
[`&-button`]: {
43+
...operationUnit(token),
44+
color: token.pageHeaderBackColor,
45+
cursor: 'pointer',
46+
},
47+
},
48+
49+
[`${antCls}-divider-vertical`]: {
50+
height: '14px',
51+
margin: `0 ${token.marginSM}`,
52+
verticalAlign: 'middle',
53+
},
54+
55+
[`${antCls}-breadcrumb + &-heading`]: {
56+
marginTop: token.marginXS,
57+
},
58+
59+
[`${componentCls}-heading`]: {
60+
display: 'flex',
61+
justifyContent: 'space-between',
62+
63+
[`&-left`]: {
64+
display: 'flex',
65+
alignItems: 'center',
66+
margin: `${token.marginXS / 2}px 0`,
67+
overflow: 'hidden',
68+
},
69+
70+
[`&-title`]: {
71+
marginRight: token.marginSM,
72+
marginBottom: 0,
73+
color: token.colorTextHeading,
74+
fontWeight: 600,
75+
fontSize: token.pageHeaderHeadingTitle,
76+
lineHeight: `${token.controlHeight}px`,
77+
...textEllipsis,
78+
},
79+
80+
[`${antCls}-avatar`]: {
81+
marginRight: token.marginSM,
82+
},
83+
84+
[`&-sub-title`]: {
85+
marginRight: token.marginSM,
86+
color: token.colorTextDescription,
87+
fontSize: token.pageHeaderHeadingSubTitle,
88+
lineHeight: token.lineHeight,
89+
...textEllipsis,
90+
},
91+
92+
[`&-extra`]: {
93+
margin: `${token.marginXS / 2}px 0`,
94+
whiteSpace: 'nowrap',
95+
96+
[`> *`]: {
97+
marginLeft: token.marginSM,
98+
whiteSpace: 'unset',
99+
},
100+
101+
[`> *:first-child`]: {
102+
marginLeft: 0,
103+
},
104+
},
105+
},
106+
107+
[`${componentCls}-content`]: {
108+
paddingTop: token.pageHeaderContentPaddingVertical,
109+
},
110+
111+
[`${componentCls}-footer`]: {
112+
marginTop: token.marginMD,
113+
[`${antCls}-tabs`]: {
114+
[`> ${antCls}-tabs-nav`]: {
115+
margin: 0,
116+
117+
[`&::before`]: {
118+
border: 'none',
119+
},
120+
},
121+
[`${antCls}-tabs-tab`]: {
122+
paddingTop: token.paddingXS,
123+
paddingBottom: token.paddingXS,
124+
fontSize: token.pageHeaderTabFontSize,
125+
},
126+
},
127+
},
128+
129+
[`${componentCls}-compact ${componentCls}-heading`]: {
130+
flexWrap: 'wrap',
131+
},
132+
133+
// rtl style
134+
[`&${token.componentCls}-rtl`]: {
135+
direction: 'rtl',
136+
},
137+
},
138+
};
139+
};
140+
141+
// ============================== Export ==============================
142+
export default genComponentStyleHook('PageHeader', token => {
143+
const PageHeaderToken = mergeToken<PageHeaderToken>(token, {
144+
pageHeaderPadding: token.paddingLG,
145+
pageHeaderPaddingVertical: token.paddingMD,
146+
pageHeaderPaddingBreadcrumb: token.paddingSM,
147+
pageHeaderContentPaddingVertical: token.paddingSM,
148+
pageHeaderBackColor: token.colorTextBase,
149+
pageHeaderGhostBg: 'inherit',
150+
pageHeaderHeadingTitle: token.fontSizeHeading4,
151+
pageHeaderHeadingSubTitle: token.fontSize,
152+
pageHeaderTabFontSize: token.fontSizeLG,
153+
});
154+
155+
return [genPageHeaderStyle(PageHeaderToken)];
156+
});

0 commit comments

Comments
 (0)