Skip to content

Commit 0ce69ec

Browse files
chenshuai2144chenshuai2144
committed
refactor: 更新组件以支持 ref 转发，优化布局和渲染逻辑
1 parent a03a580 commit 0ce69ec

File tree

6 files changed

+114
-102
lines changed

6 files changed

+114
-102
lines changed

‎src/form/layouts/QueryFilter/index.tsx

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -588,55 +588,58 @@ function QueryFilter<T = Record<string, any>>(props: QueryFilterProps<T>) {
588588
}
589589
}}
590590
>
591-
<div
592-
className={`${baseClassName}-container ${hashId}`}
593-
style={props.containerStyle}
594-
>
595-
<BaseForm
596-
isKeyPressSubmit
597-
preserve={preserve}
598-
{...rest}
599-
className={classNames(baseClassName, hashId, rest.className)}
600-
onReset={onReset}
601-
style={style}
602-
layout={spanSize.layout}
603-
fieldProps={{
604-
style: {
605-
width: '100%',
606-
},
607-
}}
608-
formItemProps={formItemFixStyle}
609-
groupProps={{
610-
titleStyle: {
611-
display: 'inline-block',
612-
marginInlineEnd: 16,
613-
},
614-
}}
615-
contentRender={(items, renderSubmitter, form) => (
616-
<QueryFilterContent
617-
spanSize={spanSize}
618-
collapsed={controlCollapsed}
619-
form={form}
620-
submitterColSpanProps={submitterColSpanProps}
621-
collapseRender={collapseRender}
622-
defaultCollapsed={defaultCollapsed}
623-
onCollapse={onCollapse}
624-
optionRender={optionRender}
625-
submitter={renderSubmitter}
626-
items={items}
627-
split={split}
628-
baseClassName={baseClassName}
629-
resetText={props.resetText}
630-
searchText={props.searchText}
631-
searchGutter={searchGutter}
632-
preserve={preserve}
633-
ignoreRules={ignoreRules}
634-
showLength={showLength}
635-
showHiddenNum={showHiddenNum}
636-
/>
637-
)}
638-
/>
639-
</div>
591+
{(ref) => (
592+
<div
593+
ref={ref}
594+
className={`${baseClassName}-container ${hashId}`}
595+
style={props.containerStyle}
596+
>
597+
<BaseForm
598+
isKeyPressSubmit
599+
preserve={preserve}
600+
{...rest}
601+
className={classNames(baseClassName, hashId, rest.className)}
602+
onReset={onReset}
603+
style={style}
604+
layout={spanSize.layout}
605+
fieldProps={{
606+
style: {
607+
width: '100%',
608+
},
609+
}}
610+
formItemProps={formItemFixStyle}
611+
groupProps={{
612+
titleStyle: {
613+
display: 'inline-block',
614+
marginInlineEnd: 16,
615+
},
616+
}}
617+
contentRender={(items, renderSubmitter, form) => (
618+
<QueryFilterContent
619+
spanSize={spanSize}
620+
collapsed={controlCollapsed}
621+
form={form}
622+
submitterColSpanProps={submitterColSpanProps}
623+
collapseRender={collapseRender}
624+
defaultCollapsed={defaultCollapsed}
625+
onCollapse={onCollapse}
626+
optionRender={optionRender}
627+
submitter={renderSubmitter}
628+
items={items}
629+
split={split}
630+
baseClassName={baseClassName}
631+
resetText={props.resetText}
632+
searchText={props.searchText}
633+
searchGutter={searchGutter}
634+
preserve={preserve}
635+
ignoreRules={ignoreRules}
636+
showLength={showLength}
637+
showHiddenNum={showHiddenNum}
638+
/>
639+
)}
640+
/>
641+
</div>
642+
)}
640643
</RcResizeObserver>,
641644
);
642645
}

‎src/layout/components/GlobalHeader/ActionsContent.tsx

Lines changed: 32 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -115,35 +115,40 @@ export const ActionsContent: React.FC<GlobalHeaderProps> = ({
115115
height: '100%',
116116
}}
117117
>
118-
<div
119-
style={{
120-
height: '100%',
121-
}}
122-
>
123-
<ResizeObserver
124-
onResize={({ width }: { width: number }) => {
125-
setRightSizeDebounceFn.run(width);
118+
{contentRender ? (
119+
<div
120+
style={{
121+
height: '100%',
126122
}}
127123
>
128-
{contentRender ? (
129-
<div
130-
style={{
131-
display: 'flex',
132-
alignItems: 'center',
133-
height: '100%',
134-
justifyContent: 'flex-end',
135-
}}
136-
>
137-
{contentRender({
138-
...props,
139-
// 测试专用
140-
//@ts-ignore
141-
rightContentSize: rightSize,
142-
})}
143-
</div>
144-
) : null}
145-
</ResizeObserver>
146-
</div>
124+
<ResizeObserver
125+
onResize={({ width }: { width: number }) => {
126+
setRightSizeDebounceFn.run(width);
127+
}}
128+
>
129+
{(ref) => (
130+
<div
131+
ref={ref}
132+
style={{
133+
display: 'flex',
134+
alignItems: 'center',
135+
height: '100%',
136+
justifyContent: 'flex-end',
137+
}}
138+
>
139+
{contentRender
140+
? contentRender({
141+
...props,
142+
// 测试专用
143+
//@ts-ignore
144+
rightContentSize: rightSize,
145+
})
146+
: null}
147+
</div>
148+
)}
149+
</ResizeObserver>
150+
</div>
151+
) : null}
147152
</div>
148153
);
149154
};

‎src/layout/components/PageHeader/index.tsx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { Avatar, Breadcrumb, ConfigProvider, Space } from 'antd';
44
import type { DirectionType } from 'antd/lib/config-provider';
55
import classNames from 'classnames';
66
import ResizeObserver from 'rc-resize-observer';
7-
import * as React from 'react';
7+
import React from 'react';
88
import type { ContentWidth } from '../../defaultSettings';
9-
import useStyle from './style/index';
9+
import useStyle from './style';
1010

1111
export interface PageHeaderProps {
1212
backIcon?: React.ReactNode;
@@ -226,12 +226,14 @@ const PageHeader: React.FC<PageHeaderProps> = (props) => {
226226

227227
return wrapSSR(
228228
<ResizeObserver onResize={onResize}>
229-
<div className={className} style={style}>
230-
{breadcrumbDom}
231-
{title}
232-
{childDom}
233-
{footerDom}
234-
</div>
229+
{(ref) => (
230+
<div ref={ref} className={className} style={style}>
231+
{breadcrumbDom}
232+
{title}
233+
{childDom}
234+
{footerDom}
235+
</div>
236+
)}
235237
</ResizeObserver>,
236238
);
237239
};

‎src/table/components/ListToolBar/index.tsx

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -391,15 +391,21 @@ const ListToolBar: React.FC<ListToolBarProps> = ({
391391
}
392392
}}
393393
>
394-
<div style={style} className={classNames(prefixCls, hashId, className)}>
395-
{titleNode}
396-
<ListToolBarTabBar
397-
filtersNode={filtersNode}
398-
prefixCls={prefixCls}
399-
tabs={tabs}
400-
multipleLine={multipleLine}
401-
/>
402-
</div>
394+
{(ref) => (
395+
<div
396+
ref={ref}
397+
style={style}
398+
className={classNames(prefixCls, hashId, className)}
399+
>
400+
{titleNode}
401+
<ListToolBarTabBar
402+
filtersNode={filtersNode}
403+
prefixCls={prefixCls}
404+
tabs={tabs}
405+
multipleLine={multipleLine}
406+
/>
407+
</div>
408+
)}
403409
</ResizeObserver>,
404410
);
405411
};

‎tests/layout/__snapshots__/index.test.tsx.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1244,11 +1244,11 @@ exports[`BasicLayout > 🥩 mix layout hideInMenu render right 1`] = `
12441244
role="none"
12451245
>
12461246
<div
1247-
aria-controls="rc-menu-uuid-84044-8-/admin-popup"
1247+
aria-controls="rc-menu-uuid-84044-9-/admin-popup"
12481248
aria-expanded="false"
12491249
aria-haspopup="true"
12501250
class="ant-menu-submenu-title"
1251-
data-menu-id="rc-menu-uuid-84044-8-/admin"
1251+
data-menu-id="rc-menu-uuid-84044-9-/admin"
12521252
role="menuitem"
12531253
style="padding-left: 16px;"
12541254
tabindex="-1"
@@ -1273,7 +1273,7 @@ exports[`BasicLayout > 🥩 mix layout hideInMenu render right 1`] = `
12731273
</li>
12741274
<li
12751275
class="ant-menu-item ant-menu-item-only-child ant-pro-base-menu-inline-menu-item"
1276-
data-menu-id="rc-menu-uuid-84044-8-/list"
1276+
data-menu-id="rc-menu-uuid-84044-9-/list"
12771277
role="menuitem"
12781278
style="padding-left: 16px;"
12791279
tabindex="-1"
@@ -1282,7 +1282,7 @@ exports[`BasicLayout > 🥩 mix layout hideInMenu render right 1`] = `
12821282
class="ant-menu-title-content"
12831283
>
12841284
<div
1285-
aria-describedby=":r5v:"
1285+
aria-describedby=":r60:"
12861286
class="ant-pro-base-menu-inline-item-title"
12871287
>
12881288
<span

‎tests/layout/__snapshots__/pageHeaderWarp.test.tsx.snap

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,7 @@ exports[`BasicLayout > ActionsContent support contentRender 1`] = `
55
<div
66
class="ant-pro-global-header-right-content"
77
style="min-width: auto; height: 100%;"
8-
>
9-
<div
10-
style="height: 100%;"
11-
/>
12-
</div>
8+
/>
139
</div>
1410
`;
1511

0 commit comments

Comments
 (0)