@arpitbhalla/rneui-base-dev
Version:
Cross Platform React Native UI Toolkit
144 lines (143 loc) • 9.16 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = void 0;
var react_1 = __importDefault(require("react"));
var react_native_1 = require("react-native");
var Triangle_1 = __importDefault(require("./components/Triangle"));
var helpers_1 = require("../helpers");
var getTooltipCoordinate_1 = require("./helpers/getTooltipCoordinate");
var getTooltipStyle_1 = require("./helpers/getTooltipStyle");
var Tooltip = function (_a) {
var _b;
var _c = _a.withOverlay, withOverlay = _c === void 0 ? true : _c, _d = _a.overlayColor, overlayColor = _d === void 0 ? '#fafafa14' : _d, _e = _a.highlightColor, highlightColor = _e === void 0 ? 'transparent' : _e, _f = _a.withPointer, withPointer = _f === void 0 ? true : _f, _g = _a.toggleOnPress, toggleOnPress = _g === void 0 ? true : _g, _h = _a.toggleAction, toggleAction = _h === void 0 ? 'onPress' : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, _k = _a.width, width = _k === void 0 ? 150 : _k, _l = _a.containerStyle, containerStyle = _l === void 0 ? {} : _l, _m = _a.backgroundColor, backgroundColor = _m === void 0 ? '#617080' : _m, _o = _a.pointerColor, pointerColor = _o === void 0 ? backgroundColor : _o, pointerStyle = _a.pointerStyle, _p = _a.onClose, onClose = _p === void 0 ? function () { } : _p, _q = _a.onOpen, onOpen = _q === void 0 ? function () { } : _q, _r = _a.visible, visible = _r === void 0 ? false : _r, _s = _a.skipAndroidStatusBar, skipAndroidStatusBar = _s === void 0 ? false : _s, _t = _a.ModalComponent, ModalComponent = _t === void 0 ? react_native_1.Modal : _t, _u = _a.closeOnlyOnBackdropPress, closeOnlyOnBackdropPress = _u === void 0 ? false : _u, _v = _a.animationType, animationType = _v === void 0 ? 'fade' : _v, props = __rest(_a, ["withOverlay", "overlayColor", "highlightColor", "withPointer", "toggleOnPress", "toggleAction", "height", "width", "containerStyle", "backgroundColor", "pointerColor", "pointerStyle", "onClose", "onOpen", "visible", "skipAndroidStatusBar", "ModalComponent", "closeOnlyOnBackdropPress", "animationType"]);
var isMounted = react_1.default.useRef(false);
var renderedElement = react_1.default.useRef(null);
var _w = react_1.default.useState({
yOffset: 0,
xOffset: 0,
elementWidth: 0,
elementHeight: 0,
}), dimensions = _w[0], setDimensions = _w[1];
var getElementPosition = react_1.default.useCallback(function () {
var _a;
(_a = renderedElement.current) === null || _a === void 0 ? void 0 : _a.measure(function (_frameOffsetX, _frameOffsetY, _width, _height, pageOffsetX, pageOffsetY) {
if (_width === void 0) { _width = 0; }
if (_height === void 0) { _height = 0; }
if (pageOffsetX === void 0) { pageOffsetX = 0; }
if (pageOffsetY === void 0) { pageOffsetY = 0; }
isMounted.current &&
setDimensions({
xOffset: pageOffsetX,
yOffset: helpers_1.isIOS || skipAndroidStatusBar
? pageOffsetY
: pageOffsetY -
react_native_1.Platform.select({
android: react_native_1.StatusBar.currentHeight,
ios: 20,
default: 0,
}),
elementWidth: _width,
elementHeight: _height,
});
});
}, [skipAndroidStatusBar]);
var handleOnPress = react_1.default.useCallback(function () {
getElementPosition();
isMounted.current && toggleOnPress && (visible ? onClose === null || onClose === void 0 ? void 0 : onClose() : onOpen === null || onOpen === void 0 ? void 0 : onOpen());
}, [getElementPosition, onClose, onOpen, toggleOnPress, visible]);
var Pointer = function (_a) {
var _b;
var tooltipY = _a.tooltipY;
var yOffset = dimensions.yOffset, xOffset = dimensions.xOffset, elementHeight = dimensions.elementHeight, elementWidth = dimensions.elementWidth;
var pastMiddleLine = yOffset > (tooltipY || 0);
if (!withPointer) {
return null;
}
return (react_1.default.createElement(react_native_1.View, { style: (_b = {
position: 'absolute',
top: pastMiddleLine ? yOffset - 13 : yOffset + elementHeight - 2
},
_b[react_native_1.I18nManager.isRTL ? 'right' : 'left'] = xOffset +
(0, getTooltipCoordinate_1.getElementVisibleWidth)(elementWidth, xOffset, helpers_1.ScreenWidth) / 2 -
7.5,
_b) },
react_1.default.createElement(Triangle_1.default, { style: pointerStyle, pointerColor: pointerColor, isDown: pastMiddleLine })));
};
var TooltipHighlightedButtonStyle = react_1.default.useMemo(function () {
var _a;
var yOffset = dimensions.yOffset, xOffset = dimensions.xOffset, elementWidth = dimensions.elementWidth, elementHeight = dimensions.elementHeight;
return _a = {
position: 'absolute',
top: yOffset
},
_a[react_native_1.I18nManager.isRTL ? 'right' : 'left'] = xOffset,
_a.backgroundColor = highlightColor,
_a.overflow = 'visible',
_a.width = elementWidth,
_a.height = elementHeight,
_a;
}, [dimensions, highlightColor]);
var HighlightedButton = function () {
if (!closeOnlyOnBackdropPress) {
return (react_1.default.createElement(react_native_1.Pressable, { testID: "tooltipTouchableHighlightedButton", onPress: handleOnPress, style: TooltipHighlightedButtonStyle }, props.children));
}
else {
return (react_1.default.createElement(react_native_1.View, { testID: "tooltipTouchableHighlightedButton", style: TooltipHighlightedButtonStyle }, props.children));
}
};
react_1.default.useEffect(function () {
isMounted.current = true;
requestAnimationFrame(getElementPosition);
var dimensionsListener = react_native_1.Dimensions.addEventListener('change', getElementPosition);
return function () {
isMounted.current = false;
if (dimensionsListener === null || dimensionsListener === void 0 ? void 0 : dimensionsListener.remove) {
dimensionsListener.remove();
}
else {
react_native_1.Dimensions.removeEventListener('change', getElementPosition);
}
};
}, [getElementPosition]);
var tooltipStyle = react_1.default.useMemo(function () {
return (0, getTooltipStyle_1.getTooltipStyle)(__assign(__assign({}, dimensions), { backgroundColor: backgroundColor, containerStyle: containerStyle, height: height, width: width, withPointer: withPointer }));
}, [backgroundColor, containerStyle, dimensions, height, width, withPointer]);
return (react_1.default.createElement(react_native_1.View, { collapsable: false, ref: renderedElement },
react_1.default.createElement(react_native_1.Pressable, __assign({}, (_b = {}, _b[toggleAction] = handleOnPress, _b), { delayLongPress: 250 }), props.children),
react_1.default.createElement(ModalComponent, { transparent: true, visible: visible, onShow: onOpen, animationType: animationType },
react_1.default.createElement(react_native_1.TouchableOpacity, { style: {
backgroundColor: withOverlay ? overlayColor : 'transparent',
flex: 1,
}, onPress: handleOnPress, activeOpacity: 1 },
react_1.default.createElement(react_native_1.View, null,
react_1.default.createElement(HighlightedButton, null),
react_1.default.createElement(Pointer, { tooltipY: tooltipStyle.top }),
react_1.default.createElement(react_native_1.View, { style: tooltipStyle, testID: "tooltipPopoverContainer" }, props.popover))))));
};
exports.Tooltip = Tooltip;
exports.Tooltip.displayName = 'Tooltip';