linkmore-design
Version:
🌈 🚀lm组件库。🚀
292 lines (285 loc) • 10.2 kB
JavaScript
;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _classnames = _interopRequireDefault(require("classnames"));
var _lodash = require("lodash");
var _rcTooltip = _interopRequireDefault(require("rc-tooltip"));
var _useMergedState = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
var React = _interopRequireWildcard(require("react"));
var _configProvider = require("../config-provider");
var _colors = require("../_util/colors");
var _motion = require("../_util/motion");
var _placements = _interopRequireDefault(require("../_util/placements"));
var _reactNode = require("../_util/reactNode");
var _warning = _interopRequireDefault(require("../_util/warning"));
const splitObject = (obj, keys) => {
const picked = {};
const omitted = {
...obj
};
keys.forEach(key => {
if (obj && key in obj) {
picked[key] = obj[key];
delete omitted[key];
}
});
return {
picked,
omitted
};
};
const PresetColorRegex = new RegExp(`^(${_colors.PresetColorTypes.join('|')})(-inverse)?$`);
// Fix Tooltip won't hide at disabled button
// mouse events don't trigger at disabled button in Chrome
// https://github.com/react-component/tooltip/issues/18
function getDisabledCompatibleChildren(element, prefixCls) {
const elementType = element.type;
if ((elementType.__ANT_BUTTON === true || element.type === 'button') && element.props.disabled || elementType.__ANT_SWITCH === true && (element.props.disabled || element.props.loading) || elementType.__ANT_RADIO === true && element.props.disabled) {
// Pick some layout related style properties up to span
// Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254
const {
picked,
omitted
} = splitObject(element.props.style, ['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex']);
const spanStyle = {
display: 'inline-block',
// default inline-block is important
...picked,
cursor: 'not-allowed',
width: element.props.block ? '100%' : undefined
};
const buttonStyle = {
...omitted,
pointerEvents: 'none'
};
const child = (0, _reactNode.cloneElement)(element, {
style: buttonStyle,
className: null
});
return /*#__PURE__*/React.createElement("span", {
style: spanStyle,
className: (0, _classnames.default)(element.props.className, `${prefixCls}-disabled-compatible-wrapper`)
}, child);
}
return element;
}
const Tooltip = /*#__PURE__*/React.forwardRef((props, ref) => {
const {
getPopupContainer: getContextPopupContainer,
getPrefixCls,
direction
} = React.useContext(_configProvider.ConfigContext);
// Warning for deprecated usage
if (process.env.NODE_ENV !== 'production') {
;
[['visible', 'open'], ['defaultVisible', 'defaultOpen'], ['onVisibleChange', 'onOpenChange'], ['afterVisibleChange', 'afterOpenChange']].forEach(([deprecatedName, newName]) => {
(0, _warning.default)(!(deprecatedName in props), 'Tooltip', `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`);
});
}
const [open, setOpen] = (0, _useMergedState.default)(false, {
value: props.open !== undefined ? props.open : props.visible,
defaultValue: props.defaultOpen !== undefined ? props.defaultOpen : props.defaultVisible
});
const isNoTitle = () => {
const {
title,
overlay
} = props;
return !title && !overlay && title !== 0; // overlay for old version compatibility
};
const onOpenChange = vis => {
setOpen(isNoTitle() ? false : vis);
if (!isNoTitle()) {
props.onOpenChange?.(vis);
props.onVisibleChange?.(vis);
}
};
const getTooltipPlacements = () => {
const {
builtinPlacements,
arrowPointAtCenter = false,
autoAdjustOverflow = true
} = props;
return builtinPlacements || (0, _placements.default)({
arrowPointAtCenter,
autoAdjustOverflow
});
};
// 动态设置动画点
const onPopupAlign = (domNode, align) => {
const placements = getTooltipPlacements();
// 当前返回的位置
const placement = Object.keys(placements).find(key => placements[key].points[0] === align.points?.[0] && placements[key].points[1] === align.points?.[1]);
if (!placement) {
return;
}
// 根据当前坐标设置动画点
const rect = domNode.getBoundingClientRect();
const transformOrigin = {
top: '50%',
left: '50%'
};
if (/top|Bottom/.test(placement)) {
transformOrigin.top = `${rect.height - align.offset[1]}px`;
} else if (/Top|bottom/.test(placement)) {
transformOrigin.top = `${-align.offset[1]}px`;
}
if (/left|Right/.test(placement)) {
transformOrigin.left = `${rect.width - align.offset[0]}px`;
} else if (/right|Left/.test(placement)) {
transformOrigin.left = `${-align.offset[0]}px`;
}
domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`;
};
const getOverlay = () => {
const {
title,
overlay
} = props;
if (title === 0) {
return title;
}
return overlay || title || '';
};
const {
getPopupContainer,
placement = 'top',
mouseEnterDelay = 0.1,
mouseLeaveDelay = 0.1,
...otherProps
} = props;
const {
prefixCls: customizePrefixCls,
openClassName,
getTooltipContainer,
overlayClassName,
color,
overlayInnerStyle,
children
} = props;
const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
const rootPrefixCls = getPrefixCls();
let tempOpen = open;
// Hide tooltip when there is no title
if (!('open' in props) && !('visible' in props) && isNoTitle()) {
tempOpen = false;
}
const child = getDisabledCompatibleChildren((0, _reactNode.isValidElement)(children) && !(0, _reactNode.isFragment)(children) ? children : /*#__PURE__*/React.createElement("span", null, children), prefixCls);
const childProps = child.props;
const childCls = !childProps.className || typeof childProps.className === 'string' ? (0, _classnames.default)(childProps.className, {
[openClassName || `${prefixCls}-open`]: true
}) : childProps.className;
const customOverlayClassName = (0, _classnames.default)(overlayClassName, {
[`${prefixCls}-rtl`]: direction === 'rtl',
[`${prefixCls}-${color}`]: color && PresetColorRegex.test(color)
});
let formattedOverlayInnerStyle = overlayInnerStyle;
let arrowContentStyle = {};
if (color && !PresetColorRegex.test(color)) {
formattedOverlayInnerStyle = {
...overlayInnerStyle,
background: color
};
// @ts-ignore
arrowContentStyle = {
'--antd-arrow-background-color': color
};
}
return /*#__PURE__*/React.createElement(_rcTooltip.default, (0, _extends2.default)({}, otherProps, {
placement: placement,
mouseEnterDelay: mouseEnterDelay,
mouseLeaveDelay: mouseLeaveDelay,
prefixCls: prefixCls,
overlayClassName: customOverlayClassName,
getTooltipContainer: getPopupContainer || getTooltipContainer || getContextPopupContainer,
ref: ref,
builtinPlacements: getTooltipPlacements(),
overlay: getOverlay(),
visible: tempOpen,
onVisibleChange: onOpenChange,
onPopupAlign: onPopupAlign,
overlayInnerStyle: formattedOverlayInnerStyle,
arrowContent: /*#__PURE__*/React.createElement("span", {
className: `${prefixCls}-arrow-content`,
style: arrowContentStyle
}),
motion: {
motionName: (0, _motion.getTransitionName)(rootPrefixCls, 'zoom-big-fast', props.transitionName),
motionDeadline: 1000
}
}), tempOpen ? (0, _reactNode.cloneElement)(child, {
className: childCls
}) : child);
});
// 解决鼠标移动残影问题
function HoverTooltipWrapper(props) {
const [, setUpdate] = React.useState({});
const openRef = React.useRef(false);
const {
children,
hideWhenClick,
wrapperClass,
...other
} = props;
const wrapperClassName = React.useRef(`__tw__${Math.random().toString(32).slice(3)}`);
const handleMove = React.useCallback((0, _lodash.throttle)(e => {
if (!e.target?.closest(`.${wrapperClassName.current}`) && !e.target.closest('.ant-tooltip')) {
if (openRef.current === true) {
openRef.current = false;
setTimeout(() => {
setUpdate({});
}, 100);
}
}
}, 50), []);
React.useEffect(() => {
document.addEventListener('mousemove', handleMove);
return () => {
openRef.current = false;
setUpdate({});
document.removeEventListener('mousemove', handleMove);
};
}, []);
const handleMouseEnter = React.useCallback(open => {
if (open) {
openRef.current = true;
setUpdate({});
}
}, []);
// 点击时清除tooltip
const handleClick = React.useCallback(() => {
if (hideWhenClick) {
openRef.current = false;
setUpdate({});
}
}, []);
return /*#__PURE__*/React.createElement(Tooltip, (0, _extends2.default)({}, other, {
open: openRef.current,
onOpenChange: handleMouseEnter
}), /*#__PURE__*/React.createElement("span", {
className: `${wrapperClassName.current} ${wrapperClass}`,
onClick: handleClick
}, children));
}
function TooltipWrapper(props) {
const {
trigger,
open
} = props;
if (open === undefined && props.title !== '' && (!trigger || trigger === 'hover' || Array.isArray(trigger) && trigger.includes('hover'))) {
return /*#__PURE__*/React.createElement(HoverTooltipWrapper, props);
}
return /*#__PURE__*/React.createElement(Tooltip, props);
}
if (process.env.NODE_ENV !== 'production') {
TooltipWrapper.displayName = 'Tooltip';
}
;
Tooltip.LmToolTip = TooltipWrapper;
var _default = Tooltip;
exports.default = _default;