@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
219 lines (215 loc) • 6.66 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Tooltip = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _helpers = require("../../helpers");
var _constants = require("../../constants/constants");
var _zIndex = require("../../styles/z-index");
var _defaultText = require("../../constants/defaultText");
var _Button = require("../Button");
var _Link = require("../Link");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Positions for the caret on tooltips */
/** Props for Tooltip component */
/**
* Tooltip component for rendering a tooltip popup
*
* {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Tooltip.tsx | Example code}
*/
class Tooltip extends _react.default.Component {
state = {
open: false,
renderLeft: 0,
renderTop: 0,
renderBottom: 0,
inverseMenu: false
};
get styles() {
const {
renderLeft,
renderTop,
renderBottom,
inverseMenu
} = this.state;
const caret = {
width: 12,
height: 12,
backgroundColor: (0, _colors.getColor)('backgroundInverse'),
position: 'absolute',
top: inverseMenu ? undefined : -6,
bottom: inverseMenu ? -6 : undefined,
transform: [{
rotate: '45deg'
}],
right: undefined,
left: 18
};
switch (this.caretPosition) {
case 'center':
caret.right = '50%';
caret.left = '50%';
break;
case 'right':
caret.right = 18;
caret.left = undefined;
break;
}
return _reactNative.StyleSheet.create({
modal: {
zIndex: _zIndex.zIndexes.dropdown
},
wrapper: {},
closeModal: {
zIndex: _zIndex.zIndexes.behind,
top: 0,
right: 0,
bottom: 0,
left: 0,
position: 'absolute'
},
tooltipWrapper: {
backgroundColor: (0, _colors.getColor)('backgroundInverse'),
maxWidth: 336,
padding: 16,
borderRadius: 2,
position: 'absolute',
top: renderTop,
bottom: renderBottom,
left: renderLeft,
..._colors.shadowStyle
},
caret: caret
});
}
toggleTooltip = () => {
const {
open
} = this.state;
this.setState({
open: !open
});
};
closeTooltip = () => {
this.setState({
open: false
});
};
get height() {
const {
height
} = this.props;
return height || 200;
}
get caretPosition() {
const {
caretPosition
} = this.props;
return caretPosition || 'left';
}
/**
* Calculate where to render the overlayed tooltip
* Sometimes didMount is not called before full render and results in all 0. setTimeout waits for load
*
* In event measure returns bad it will load to top of page with min width/height.
*
* @param item - View from reference
*/
setFormItemRef = item => {
if (item && typeof item?.measure === 'function') {
setTimeout(() => {
const {
renderLeft,
renderTop,
renderBottom,
inverseMenu
} = this.state;
const screenHeight = _reactNative.Dimensions.get('window').height || 320;
const caretSize = 12;
item.measure((_fx, _fy, _width, height, pageX, pageY) => {
const newRenderLeft = pageX || 0;
let newRenderTop = (pageY || 0) + (height || 200) + caretSize;
let newRenderBottom = screenHeight - (newRenderTop + this.height);
let newInverse = false;
if (newRenderTop > screenHeight - this.height) {
newRenderBottom = screenHeight - (pageY || 0) + caretSize;
newRenderTop = screenHeight - (newRenderBottom + this.height);
newInverse = true;
}
if (screenHeight - (newRenderBottom + newRenderTop) < this.height) {
if (newInverse) {
newRenderTop = 44;
} else {
newRenderBottom = 44;
}
}
if (renderLeft !== newRenderLeft || renderTop !== newRenderTop || renderBottom !== newRenderBottom || inverseMenu !== newInverse) {
this.setState({
renderLeft: newRenderLeft,
renderTop: newRenderTop,
renderBottom: newRenderBottom,
inverseMenu: newInverse
});
}
});
});
}
};
render() {
const {
content,
componentProps,
style,
contentStyle,
linkProps,
buttonProps,
closeText
} = this.props;
const {
open
} = this.state;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: (0, _helpers.styleReferenceBreaker)(this.styles.wrapper, style),
accessibilityRole: "menu",
...(componentProps || {}),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
children: [linkProps ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
...linkProps,
onPress: this.toggleTooltip,
forwardRef: this.setFormItemRef
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
...(buttonProps || {
text: ''
}),
overrideColor: buttonProps?.iconOnlyMode ? open ? (0, _colors.getColor)('iconPrimary') : (0, _colors.getColor)('iconSecondary') : undefined,
onPress: this.toggleTooltip,
forwardRef: this.setFormItemRef
}), open && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Modal, {
style: this.styles.modal,
supportedOrientations: _constants.modalPresentations,
transparent: true,
onRequestClose: () => this.setState({
open: false
}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
style: this.styles.closeModal,
accessibilityRole: "button",
accessibilityLabel: closeText || _defaultText.defaultText.close,
onPress: this.closeTooltip
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: (0, _helpers.styleReferenceBreaker)(this.styles.tooltipWrapper, contentStyle),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.caret
}), content]
})]
})]
})
});
}
}
exports.Tooltip = Tooltip;
//# sourceMappingURL=index.js.map