@ant-design/react-native/es/tooltip/Tooltip.js

基于蚂蚁金服移动设计规范的 React Native 组件库

"use client";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _typeof=require("@babel/runtime/helpers/typeof");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _slicedToArray2=_interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var _reactNative=require("@floating-ui/react-native");var _useMergedState3=_interopRequireDefault(require("rc-util/es/hooks/useMergedState"));var _react=_interopRequireWildcard(require("react"));var _reactNative2=require("react-native");var _withDefaultProps=require("../_util/with-default-props");var _style=require("../style");var _view=_interopRequireDefault(require("../view"));var _useClickAway3=_interopRequireDefault(require("../_util/hooks/useClickAway"));var _useScroll=_interopRequireDefault(require("../_util/hooks/useScroll"));var _portal=_interopRequireDefault(require("../portal"));var _Wrapper=_interopRequireDefault(require("./Wrapper"));var _normalizePlacement=require("./normalize-placement");var _style2=_interopRequireDefault(require("./style"));function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||_typeof(obj)!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var defaultProps={placement:'bottom',defaultVisible:false,trigger:'onPress',mode:'light',crossOffset:{top:_reactNative2.StatusBar.currentHeight,left:0}};var InternalTooltip=function InternalTooltip(p,ref){var props=(0,_withDefaultProps.mergeProps)(defaultProps,p);var mode=props.mode,crossOffset=props.crossOffset,styles=props.styles,pvisible=props.visible,defaultVisible=props.defaultVisible,onVisibleChange=props.onVisibleChange,placement=props.placement,children=props.children,trigger=props.trigger,content=props.content,style=props.style;var arrowRef=(0,_react.useRef)(null);var theme=_react.default.useContext(_style.ThemeContext);var _useMergedState=(0,_useMergedState3.default)(false,{value:pvisible,defaultValue:defaultVisible,onChange:onVisibleChange}),_useMergedState2=(0,_slicedToArray2.default)(_useMergedState,2),visible=_useMergedState2[0],setVisible=_useMergedState2[1];(0,_react.useImperativeHandle)(ref,function(){return{show:function show(){return setVisible(true);},hide:function hide(){return setVisible(false);},visible:visible};},[setVisible,visible]);var _useFloating=(0,_reactNative.useFloating)({sameScrollView:false,placement:(0,_normalizePlacement.normalizePlacement)(placement),middleware:[(0,_reactNative.offset)(theme.tooltip_arrow_size),(0,_reactNative.shift)({padding:2,crossAxis:false,limiter:(0,_reactNative.limitShift)()}),(0,_reactNative.flip)(),(0,_reactNative.hide)(),(0,_reactNative.arrow)({element:arrowRef,padding:theme.tooltip_arrow_size})]}),update=_useFloating.update,refs=_useFloating.refs,floatingStyles=_useFloating.floatingStyles,_useFloating$middlewa=_useFloating.middlewareData.arrow;_useFloating$middlewa=_useFloating$middlewa===void 0?{}:_useFloating$middlewa;var arrowX=_useFloating$middlewa.x,arrowY=_useFloating$middlewa.y,realPlacement=_useFloating.placement,scrollProps=_useFloating.scrollProps;(0,_react.useEffect)(update,[update,floatingStyles,content]);(0,_useScroll.default)(scrollProps.onScroll);var _useClickAway=(0,_useClickAway3.default)(function(){setVisible(false);}),_useClickAway2=(0,_slicedToArray2.default)(_useClickAway,1),stopPropagation=_useClickAway2[0].stopPropagation;var onTrigger=function onTrigger(){stopPropagation();setVisible(function(v){return!v;});};var arrowPosition=(0,_react.useMemo)(function(){var _ref;var side=realPlacement.split('-')[0];var arrowSide={top:'bottom',right:'left',bottom:'top',left:'right'}[side];var arrowRotate={top:'0deg',bottom:'180deg',left:'270deg',right:'90deg'}[side];return _ref={left:arrowX||undefined,top:arrowY||undefined},(0,_defineProperty2.default)(_ref,arrowSide,-theme.tooltip_arrow_size*2),(0,_defineProperty2.default)(_ref,"borderTopColor",mode==='dark'?theme.tooltip_dark:theme.fill_base),(0,_defineProperty2.default)(_ref,"transform",[{rotate:arrowRotate}]),_ref;},[arrowX,arrowY,mode,realPlacement,theme.fill_base,theme.tooltip_arrow_size,theme.tooltip_dark]);var TooltipStylesMemo=(0,_react.useCallback)(function(){return(0,_style2.default)(theme,mode);},[mode,theme]);var ss=(0,_style.useTheme)({styles:styles,themeStyles:TooltipStylesMemo});var safeFloatingStyles=(0,_react.useMemo)(function(){if(floatingStyles.left===0&&floatingStyles.top===0){return{display:'none'};}if(isNaN(floatingStyles.left)||isNaN(floatingStyles.top)){return{display:'none'};}return floatingStyles;},[floatingStyles]);return _react.default.createElement(_react.default.Fragment,null,_react.default.createElement(_Wrapper.default,{setReference:refs.setReference,onLayout:update,trigger:trigger,onTrigger:onTrigger},children),!!visible&&_react.default.createElement(_portal.default,null,_react.default.createElement(_reactNative2.View,{ref:refs.offsetParent,style:{marginTop:crossOffset.top,marginLeft:crossOffset.left},collapsable:false},_react.default.createElement(_reactNative2.View,{ref:refs.setFloating,onLayout:update,collapsable:false,style:[ss.tooltip,safeFloatingStyles,style]},_react.default.createElement(_reactNative2.View,{style:[arrowPosition,ss.arrow],ref:arrowRef,collapsable:false}),_react.default.createElement(_view.default,{style:ss.tooltipText},content)))));};var Tooltip=_react.default.forwardRef(InternalTooltip);Tooltip.displayName='Tooltip';var _default=_react.default.memo(Tooltip);exports.default=_default;