@wordpress/components
Version:
UI components for WordPress.
138 lines (133 loc) • 4.07 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _reactNative = require("react-native");
var _element = require("@wordpress/element");
var _style = _interopRequireDefault(require("./style.scss"));
var _jsxRuntime = require("react/jsx-runtime");
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
const TooltipContext = (0, _element.createContext)();
function Tooltip({
children,
onPress,
style,
visible
}) {
const panResponder = (0, _element.useRef)(_reactNative.PanResponder.create({
/**
* To allow dimissing the tooltip on press while also avoiding blocking
* interactivity within the child context, we place this `onPress` side
* effect within the `onStartShouldSetPanResponderCapture` callback.
*
* This is a bit unorthodox, but may be the simplest approach to achieving
* this outcome. This is effectively a gesture responder that never
* becomes the controlling responder. https://bit.ly/2J3ugKF
*/
onStartShouldSetPanResponderCapture: () => {
if (onPress) {
onPress();
}
return false;
}
})).current;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipContext.Provider, {
value: visible,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
...(visible ? panResponder.panHandlers : {}),
style: style,
children: children
})
});
}
function Label({
align = 'center',
text,
xOffset = 0,
yOffset = 0
}) {
const animationValue = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;
const [dimensions, setDimensions] = (0, _element.useState)(null);
const visible = (0, _element.useContext)(TooltipContext);
if (typeof visible === 'undefined') {
throw new Error('Tooltip.Label cannot be rendered outside of the Tooltip component');
}
(0, _element.useEffect)(() => {
const startAnimation = () => {
_reactNative.Animated.timing(animationValue, {
toValue: visible ? 1 : 0,
duration: visible ? 300 : 150,
useNativeDriver: true,
delay: visible ? 500 : 0,
easing: _reactNative.Easing.out(_reactNative.Easing.quad)
}).start();
};
startAnimation();
}, [animationValue, visible]);
// Transforms rely upon onLayout to enable custom offsets additions.
let tooltipTransforms;
if (dimensions) {
tooltipTransforms = [{
translateX: (align === 'center' ? -dimensions.width / 2 : 0) + xOffset
}, {
translateY: -dimensions.height + yOffset
}];
}
const tooltipStyles = [_style.default.tooltip, {
shadowColor: _style.default.tooltipShadow?.color,
shadowOffset: {
width: 0,
height: 2
},
shadowOpacity: 0.25,
shadowRadius: 2,
elevation: 2,
transform: tooltipTransforms
}, align === 'left' && _style.default.tooltipLeftAlign];
const arrowStyles = [_style.default.arrow, align === 'left' && _style.default.arrowLeftAlign];
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
style: {
opacity: animationValue,
transform: [{
translateY: animationValue.interpolate({
inputRange: [0, 1],
outputRange: [visible ? 4 : -8, -8]
})
}]
},
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
onLayout: ({
nativeEvent
}) => {
const {
height,
width
} = nativeEvent.layout;
setDimensions({
height,
width
});
},
style: tooltipStyles,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: _style.default.text,
children: text
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: arrowStyles
})]
})
});
}
Tooltip.Label = Label;
var _default = exports.default = Tooltip;
//# sourceMappingURL=index.native.js.map