test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 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', () => { it('handles empty title/content props safely', () => {
const ref = React.createRef<any>(); const { container } = render(
<Popover trigger="click">
const popover = render(
<Popover trigger="click" ref={ref}>
<span>show me your code</span> <span>show me your code</span>
</Popover>, </Popover>,
); );
fireEvent.click(container.querySelector('span')!);
fireEvent.click(popover.container.querySelector('span')!); expect(container.querySelector('.ant-popover-title')?.textContent).toBeFalsy();
expect(container.querySelector('.ant-popover-inner-content')?.textContent).toBeFalsy();
const popup = ref.current.getPopupDomNode();
expect(popup).toBe(null);
}); });
it('should not render popover when the title & content props is empty', () => { it('should not render popover when the title & content props is empty', () => {
const ref = React.createRef<any>(); const { container } = render(
<Popover trigger="click">
const popover = render(
<Popover trigger="click" ref={ref} content="">
<span>show me your code</span> <span>show me your code</span>
</Popover>, </Popover>,
); );
fireEvent.click(container.querySelector('span')!);
fireEvent.click(popover.container.querySelector('span')!); expect(container.querySelector('.ant-popover-title')?.textContent).toBeFalsy();
expect(container.querySelector('.ant-popover-inner-content')?.textContent).toBeFalsy();
const popup = ref.current.getPopupDomNode();
expect(popup).toBe(null);
}); });
it('props#overlay do not warn anymore', () => { it('props#overlay do not warn anymore', () => {

83
components/popover/index.tsx
View File

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