mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
8b3868ac63
* feat: tooltip support arrow props * docs: update docs * chore: update rc-tooltip version * feat: update snapshots * feat: update snapshots * style: format code * Update components/tooltip/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/tooltip/index.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/tooltip/demo/arrow.md Co-authored-by: MadCcc <1075746765@qq.com> * Update components/tooltip/demo/arrow.md Co-authored-by: MadCcc <1075746765@qq.com> * feat: code optimize * docs: update docs * feat: code optimize * feat: del doc * feat: update snapshots * feat: update snapshots * feat: update snapshots * feat: refactor dropdown arrow style * feat: comment * Update components/tooltip/demo/arrow.tsx Co-authored-by: MadCcc <1075746765@qq.com> * feat: popover support arrow prop * feat: tour arrow style optimize * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: update test case * feat: update test case * feat: update test case * Update components/popover/index.tsx Co-authored-by: MadCcc <1075746765@qq.com> * Update components/tooltip/index.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code Co-authored-by: MadCcc <1075746765@qq.com>
93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import classNames from 'classnames';
|
|
import * as React from 'react';
|
|
import { ConfigContext } from '../config-provider';
|
|
import type { AbstractTooltipProps } from '../tooltip';
|
|
import Tooltip from '../tooltip';
|
|
import type { RenderFunction } from '../_util/getRenderPropValue';
|
|
import { getRenderPropValue } from '../_util/getRenderPropValue';
|
|
import { getTransitionName } from '../_util/motion';
|
|
import PurePanel from './PurePanel';
|
|
// CSSINJS
|
|
import useStyle from './style';
|
|
|
|
export interface PopoverProps extends AbstractTooltipProps {
|
|
title?: React.ReactNode | RenderFunction;
|
|
content?: React.ReactNode | RenderFunction;
|
|
}
|
|
|
|
interface OverlayPorps {
|
|
prefixCls?: string;
|
|
title?: PopoverProps['title'];
|
|
content?: PopoverProps['content'];
|
|
}
|
|
|
|
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 Popover = React.forwardRef<unknown, PopoverProps>((props, ref) => {
|
|
const {
|
|
prefixCls: customizePrefixCls,
|
|
title,
|
|
content,
|
|
overlayClassName,
|
|
placement = 'top',
|
|
trigger = 'hover',
|
|
mouseEnterDelay = 0.1,
|
|
mouseLeaveDelay = 0.1,
|
|
overlayStyle = {},
|
|
arrowPointAtCenter,
|
|
arrow,
|
|
...otherProps
|
|
} = props;
|
|
const { getPrefixCls } = React.useContext(ConfigContext);
|
|
|
|
const prefixCls = getPrefixCls('popover', customizePrefixCls);
|
|
const [wrapSSR, hashId] = useStyle(prefixCls);
|
|
const rootPrefixCls = getPrefixCls();
|
|
|
|
const overlayCls = classNames(overlayClassName, hashId);
|
|
|
|
const mergedArrowPointAtCenter =
|
|
(typeof arrow !== 'boolean' && arrow?.arrowPointAtCenter) ?? arrowPointAtCenter ?? false;
|
|
const mergedArrow = arrow ?? { arrowPointAtCenter: mergedArrowPointAtCenter };
|
|
|
|
return wrapSSR(
|
|
<Tooltip
|
|
placement={placement}
|
|
arrow={mergedArrow}
|
|
trigger={trigger}
|
|
mouseEnterDelay={mouseEnterDelay}
|
|
mouseLeaveDelay={mouseLeaveDelay}
|
|
overlayStyle={overlayStyle}
|
|
{...otherProps}
|
|
prefixCls={prefixCls}
|
|
overlayClassName={overlayCls}
|
|
ref={ref}
|
|
overlay={<Overlay prefixCls={prefixCls} title={title} content={content} />}
|
|
transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
|
|
data-popover-inject
|
|
/>,
|
|
);
|
|
}) as React.ForwardRefExoticComponent<
|
|
React.PropsWithoutRef<PopoverProps> & React.RefAttributes<unknown>
|
|
> & {
|
|
_InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
|
|
};
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
|
Popover.displayName = 'Popover';
|
|
}
|
|
|
|
Popover._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
|
|
|
|
export default Popover;
|