mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

style: Code optimization (#37804)

Browse Source 
* style: Code optimization

* style: Code optimization

* style: Code optimization
This commit is contained in:
lijianan 2022-09-30 10:17:49 +08:00 committed by GitHub
parent 3588ae82c1
commit 08188f72ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/popover/__tests__/index.test.tsx
View File

@ -43,34 +43,27 @@ describe('Popover', () => {
});
it('handles empty title/content props safely', () => {
const ref = React.createRef<any>();
const popover = render(
<Popover trigger="click" ref={ref}>
const { container } = render(
<Popover trigger="click">
<span>show me your code</span>
</Popover>,
);
fireEvent.click(container.querySelector('span')!);
fireEvent.click(popover.container.querySelector('span')!);
const popup = ref.current.getPopupDomNode();
expect(popup).toBe(null);
expect(container.querySelector('.ant-popover-title')?.textContent).toBeFalsy();
expect(container.querySelector('.ant-popover-inner-content')?.textContent).toBeFalsy();
});
it('should not render popover when the title & content props is empty', () => {
const ref = React.createRef<any>();
const popover = render(
<Popover trigger="click" ref={ref} content="">
const { container } = render(
<Popover trigger="click">
<span>show me your code</span>
</Popover>,
);
fireEvent.click(container.querySelector('span')!);
fireEvent.click(popover.container.querySelector('span')!);
const popup = ref.current.getPopupDomNode();
expect(popup).toBe(null);
expect(container.querySelector('.ant-popover-title')?.textContent).toBeFalsy();
expect(container.querySelector('.ant-popover-inner-content')?.textContent).toBeFalsy();
});
it('props#overlay do not warn anymore', () => {

83
components/popover/index.tsx
View File

@ -1,6 +1,6 @@
import * as React from 'react';
import { ConfigContext } from '../config-provider';
import type { AbstractTooltipProps, TooltipPlacement } from '../tooltip';
import type { AbstractTooltipProps } from '../tooltip';
import Tooltip from '../tooltip';
import type { RenderFunction } from '../_util/getRenderPropValue';
import { getRenderPropValue } from '../_util/getRenderPropValue';
@ -13,45 +13,60 @@ export interface PopoverProps extends AbstractTooltipProps {
_overlay?: React.ReactNode;
}
const Popover = React.forwardRef<unknown, PopoverProps>(
({ prefixCls: customizePrefixCls, title, content, _overlay, ...otherProps }, ref) => {
const { getPrefixCls } = React.useContext(ConfigContext);
interface OverlayPorps {
prefixCls?: string;
title?: PopoverProps['title'];
content?: PopoverProps['content'];
}
const getOverlay = (prefixCls: string) => {
if (!title && !content) return undefined;
return (
<>
{title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
<div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
</>
);
};
const Overlay: React.FC<OverlayPorps> = ({ title, content, prefixCls }) => {
if (!title && !content) {
return null;
}
return (
<>
{title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
<div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
</>
);
};
const prefixCls = getPrefixCls('popover', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
const Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => {
const {
prefixCls: customizePrefixCls,
title,
content,
_overlay,
placement = 'top',
trigger = 'hover',
mouseEnterDelay = 0.1,
mouseLeaveDelay = 0.1,
overlayStyle = {},
...otherProps
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
return (
<Tooltip
{...otherProps}
prefixCls={prefixCls}
ref={ref as any}
overlay={_overlay || getOverlay(prefixCls)}
transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
/>
);
},
);
const prefixCls = getPrefixCls('popover', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
return (
<Tooltip
placement={placement}
trigger={trigger}
mouseEnterDelay={mouseEnterDelay}
mouseLeaveDelay={mouseLeaveDelay}
overlayStyle={overlayStyle}
{...otherProps}
prefixCls={prefixCls}
ref={ref}
overlay={_overlay || <Overlay prefixCls={prefixCls} title={title} content={content} />}
transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
/>
);
});
if (process.env.NODE_ENV !== 'production') {
Popover.displayName = 'Popover';
}
Popover.defaultProps = {
placement: 'top' as TooltipPlacement,
trigger: 'hover',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
overlayStyle: {},
};
export default Popover;