如何实现一个 antd 的 Popconfirm 或 Tooltip
说明
Tooltip 和 Popconfirm 是 antd 关于操作反馈&提示的工具组件
- Tooltip 文字提示:https://ant.design/components/tooltip-cn/
- Popconfirm 是antd 的操作确认框:https://ant.design/components/popconfirm-cn/
这里主要介绍如何在 React 实现同样能力的 UI 组件(或者无物料)
Tooltip 和 Popconfrm 源码
照葫芦画瓢,先去看了下两者的源码,发现 Popconfirm
依赖 Tooltip
,而 Tooltip
又依赖了 RCTooltip
return (
<RcTooltip
{...props}
prefixCls={prefixCls}
overlayClassName={customOverlayClassName}
getTooltipContainer={getPopupContainer || getTooltipContainer || getContextPopupContainer}
ref={ref}
builtinPlacements={getTooltipPlacements()}
overlay={getOverlay()}
visible={tempVisible}
onVisibleChange={onVisibleChange}
onPopupAlign={onPopupAlign}
overlayInnerStyle={formattedOverlayInnerStyle}
arrowContent={<span className={`${prefixCls}-arrow-content`} style={arrowContentStyle} />}
>
{tempVisible ? cloneElement(child, { className: childCls }) : child}
</RcTooltip>
);
rc-tooltip
rc-tooltip
是社区非常受欢迎的 Raect 提示工具组件:https://www.npmjs.com/package/rc-tooltip
基本使用
var Tooltip = require('rc-tooltip');
var React = require('react');
var ReactDOM = require('react-dom');
// By default, the tooltip has no style.
// Consider importing the stylesheet it comes with:
// 'rc-tooltip/assets/bootstrap_white.css'
ReactDOM.render(
<Tooltip placement="left" trigger={['click']} overlay={<span>tooltip</span>}>
<a href="#">hover</a>
</Tooltip>,
container
);
主要关注几个 props
placement
弹框弹出的方向
trigger
触发的方式
overlay
弹窗内容,类型是 React.ElementType
关于样式
tooltip 内置了一个默认的样式,可以基于这个样式 classname 重写,或者是通过 props 传入 classname 和 style
封装 rc-tooltip 成 popconfirm
基础
props 参照了 antd 的props,内部渲染的还是 rc-tooltip
const PopConfirm: React.FC<{
children?: JSX.Element;
title?: string;
desc?: string;
onCancel?: React.MouseEventHandler;
onConfirm?: React.MouseEventHandler;
cancelText?: string;
confirmText?: string;
}> = props => {
if (!props.children) {
return null;
}
return (
<RCToolTip
trigger={['click']}
placement="top"
overlayClassName={styles.popWrap}
overlay={<PopTipComp {...props} />}
>
<div>{props.children}</div>
</RCToolTip>
);
};
封装 overlay
下面是参照 antd 的一个 overlay 简单写的
const PopTipComp: React.FC<{
title?: string;
desc?: string;
onCancel?: React.MouseEventHandler;
onConfirm?: React.MouseEventHandler;
cancelText?: string;
confirmText?: string;
}> = ({ title, desc, onCancel, onConfirm, cancelText, confirmText }) => {
return (
<>
<span className={styles.popTitle}>{title}</span>
<span className={styles.popDesc}>{desc}</span>
<hr className={styles.popDivider} />
<div className={styles.popActionWrap}>
<button className={styles.btn} onClick={onCancel}>
{cancelText}
</button>
<button className={styles.btn} onClick={onConfirm}>
{confirmText}
</button>
</div>
</>
);
};
使用 popconfirm
<PopConfirm
title={'确认删除?'}
desc={'删除后不可恢复'}
confirmText={'ok'}
cancelText={'cancel'}
onConfirm={handleConfirm}
onCancel={handleCancel}
>
<span>test text</span>
</PopConfirm>
最终效果
代码仓库
文章已经结束啦
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/antd-popconfirm-tooltip.html
转载请注明文章原始出处 !
扫描二维码,在手机阅读!