mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 22:36:31 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

fix: support Layout, Header and Footer given ref (#34650)

Browse Source 
* feat: support layout components given refs

* test: add ensure given ref test case

* fix: update test

Co-authored-by: dengqing <qing.deng@goldenpig.com.cn>
This commit is contained in:
dengqing 2022-03-22 16:52:20 +08:00 committed by GitHub
parent 67bfdacca0
commit 8cab1883af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 27 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/layout/__tests__/index.test.js
View File

@ -6,7 +6,7 @@ import Menu from '../../menu';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
const { Sider, Content } = Layout;
const { Sider, Content, Footer, Header } = Layout;
describe('Layout', () => {
mountTest(Layout);
@ -285,15 +285,19 @@ describe('Sider', () => {
expect(wrapper.find('.ant-layout-sider-zero-width-trigger').find('.my-trigger').length).toBe(1);
});
it('should get aside element from ref', () => {
const ref = React.createRef();
const onSelect = jest.fn();
['Layout', 'Header', 'Footer', 'Sider'].forEach(tag => {
const ComponentMap = { Layout, Header, Footer, Sider };
it(`should get ${tag} element from ref`, () => {
const ref = React.createRef();
const onSelect = jest.fn();
const Component = ComponentMap[tag];
mount(
<Sider onSelect={onSelect} ref={ref}>
Sider
</Sider>,
);
expect(ref.current instanceof HTMLElement).toBe(true);
mount(
<Component onSelect={onSelect} ref={ref}>
{tag}
</Component>,
);
expect(ref.current instanceof HTMLElement).toBe(true);
});
});
});

6
components/layout/index.tsx
View File

@ -1,10 +1,12 @@
import InternalLayout, { BasicProps, Content, Footer, Header } from './layout';
import InternalLayout, { Content, Footer, Header } from './layout';
import Sider from './Sider';
export { BasicProps as LayoutProps } from './layout';
export { SiderProps } from './Sider';
interface LayoutType extends React.FC<BasicProps> {
type InternalLayoutType = typeof InternalLayout;
interface LayoutType extends InternalLayoutType {
Header: typeof Header;
Footer: typeof Footer;
Content: typeof Content;

18
components/layout/layout.tsx
View File

@ -31,25 +31,25 @@ interface BasicPropsWithTagName extends BasicProps {
function generator({ suffixCls, tagName, displayName }: GeneratorProps) {
return (BasicComponent: any) => {
const Adapter: React.FC<BasicProps> = props => {
const Adapter = React.forwardRef<HTMLElement, BasicProps>((props, ref) => {
const { getPrefixCls } = React.useContext(ConfigContext);
const { prefixCls: customizePrefixCls } = props;
const prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
return <BasicComponent prefixCls={prefixCls} tagName={tagName} {...props} />;
};
return <BasicComponent ref={ref} prefixCls={prefixCls} tagName={tagName} {...props} />;
});
Adapter.displayName = displayName;
return Adapter;
};
}
const Basic = (props: BasicPropsWithTagName) => {
const Basic = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props, ref) => {
const { prefixCls, className, children, tagName, ...others } = props;
const classString = classNames(prefixCls, className);
return React.createElement(tagName, { className: classString, ...others }, children);
};
return React.createElement(tagName, { className: classString, ...others, ref }, children);
});
const BasicLayout: React.FC<BasicPropsWithTagName> = props => {
const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props, ref) => {
const { direction } = React.useContext(ConfigContext);
const [siders, setSiders] = React.useState<string[]>([]);
@ -80,12 +80,12 @@ const BasicLayout: React.FC<BasicPropsWithTagName> = props => {
return (
<LayoutContext.Provider value={contextValue}>
<Tag className={classString} {...others}>
<Tag ref={ref} className={classString} {...others}>
{children}
</Tag>
</LayoutContext.Provider>
);
};
});
const Layout = generator({
suffixCls: 'layout',