Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix: support Layout, Header and Footer given ref (#34650)
* 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>
  • Loading branch information
Dunqing and dengqing committed Mar 22, 2022
1 parent 67bfdac commit 8cab188
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 22 deletions.
26 changes: 15 additions & 11 deletions components/layout/__tests__/index.test.js
Expand Up @@ -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);
Expand Down Expand Up @@ -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();

mount(
<Sider onSelect={onSelect} ref={ref}>
Sider
</Sider>,
);
expect(ref.current instanceof HTMLElement).toBe(true);
['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(
<Component onSelect={onSelect} ref={ref}>
{tag}
</Component>,
);
expect(ref.current instanceof HTMLElement).toBe(true);
});
});
});
6 changes: 4 additions & 2 deletions components/layout/index.tsx
@@ -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;
Expand Down
18 changes: 9 additions & 9 deletions components/layout/layout.tsx
Expand Up @@ -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[]>([]);
Expand Down Expand Up @@ -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',
Expand Down

0 comments on commit 8cab188

Please sign in to comment.