dash-core-components
Version:
Core component suite for Dash
120 lines (118 loc) • 10.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _style = _interopRequireDefault(require("styled-jsx/style"));
var _excluded = ["show", "targetable", "direction", "border_color", "background_color", "className", "zindex", "loading_text"];
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
// eslint-disable-line no-unused-vars
/**
* A tooltip with an absolute position.
*/
var Tooltip = _ref => {
var _ref$show = _ref.show,
show = _ref$show === void 0 ? true : _ref$show,
_ref$targetable = _ref.targetable,
targetable = _ref$targetable === void 0 ? false : _ref$targetable,
_ref$direction = _ref.direction,
direction = _ref$direction === void 0 ? 'right' : _ref$direction,
_ref$border_color = _ref.border_color,
border_color = _ref$border_color === void 0 ? '#d6d6d6' : _ref$border_color,
_ref$background_color = _ref.background_color,
background_color = _ref$background_color === void 0 ? 'white' : _ref$background_color,
_ref$className = _ref.className,
className = _ref$className === void 0 ? '' : _ref$className,
_ref$zindex = _ref.zindex,
zindex = _ref$zindex === void 0 ? 1 : _ref$zindex,
_ref$loading_text = _ref.loading_text,
loading_text = _ref$loading_text === void 0 ? 'Loading...' : _ref$loading_text,
props = _objectWithoutProperties(_ref, _excluded);
var bbox = props.bbox,
id = props.id;
var show_tooltip = show && bbox;
var ctx = window.dash_component_api.useDashContext();
var is_loading = ctx.useLoading();
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: "dcc-tooltip-bounding-box"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "hover hover-".concat(direction),
"data-dash-is-loading": is_loading
}, /*#__PURE__*/_react.default.createElement("span", {
id: id,
className: "hover-content ".concat(className),
style: props.style
}, is_loading ? /*#__PURE__*/_react.default.createElement("span", null, loading_text) : props.children))), /*#__PURE__*/_react.default.createElement("style", {
jsx: true
}, "\n .dcc-tooltip-bounding-box {\n position: absolute;\n top: ".concat((bbox === null || bbox === void 0 ? void 0 : bbox.y0) || 0, "px;\n left: ").concat((bbox === null || bbox === void 0 ? void 0 : bbox.x0) || 0, "px;\n width: ").concat((bbox === null || bbox === void 0 ? void 0 : bbox.x1) - (bbox === null || bbox === void 0 ? void 0 : bbox.x0) || 0, "px;\n height: ").concat((bbox === null || bbox === void 0 ? void 0 : bbox.y1) - (bbox === null || bbox === void 0 ? void 0 : bbox.y0) || 0, "px;\n display: ").concat(show_tooltip ? 'inline-block' : 'none', ";\n pointer-events: ").concat(targetable ? 'auto' : 'none', ";\n }\n .hover {\n position: absolute;\n }\n .hover-right {\n /* Offset so that the triangle caret lands directly on what's hovered */\n transform: translate(5px, 0);\n top: 50%;\n left: 100%;\n }\n .hover-left {\n transform: translate(-5px, 0);\n top: 50%;\n }\n .hover-bottom {\n transform: translate(0, 6px);\n top: 100%;\n left: 50%;\n }\n .hover-top {\n transform: translate(0, -5px);\n left: 50%;\n }\n .hover-content {\n position: absolute;\n border: 1px solid ").concat(border_color, ";\n border-radius: 2px;\n padding: 5px 10px;\n background: ").concat(background_color, ";\n white-space: nowrap;\n z-index: ").concat(zindex, ";\n pointer-events: none;\n }\n .hover .hover-content,\n .hover-right .hover-content {\n transform: translate(0, -50%);\n }\n .hover-left .hover-content {\n transform: translate(-100%, -50%);\n }\n .hover-top .hover-content {\n transform: translate(-50%, -100%);\n }\n .hover-bottom .hover-content {\n transform: translate(-50%, 0);\n }\n /* Add a small triangle on the left side of the box */\n .hover:before,\n .hover:after {\n content: '';\n width: 0;\n height: 0;\n position: absolute;\n border-style: solid;\n top: -6px;\n z-index: ").concat(zindex, ";\n }\n .hover:before,\n .hover:after,\n .hover-right:before,\n .hover-right:after {\n border-width: 6px 6px 6px 0;\n }\n .hover-top:before,\n .hover-top:after {\n border-width: 6px 6px 0 6px;\n }\n .hover-bottom:before,\n .hover-bottom:after {\n border-width: 0 6px 6px 6px;\n }\n .hover-left:before,\n .hover-left:after {\n border-width: 6px 0 6px 6px;\n }\n .hover:before,\n .hover-right:before {\n border-color: transparent ").concat(border_color, " transparent\n transparent;\n left: -5px;\n }\n .hover:after,\n .hover-right:after {\n border-color: transparent ").concat(background_color, " transparent\n transparent;\n left: -4px;\n }\n .hover-left:before {\n border-color: transparent transparent transparent\n ").concat(border_color, ";\n left: -1px;\n }\n .hover-left:after {\n border-color: transparent transparent transparent\n ").concat(background_color, ";\n left: -2px;\n }\n .hover-top:before,\n .hover-top:after,\n .hover-bottom:before,\n .hover-bottom:after {\n left: -6px;\n }\n .hover-bottom:before {\n border-color: transparent transparent ").concat(border_color, "\n transparent;\n }\n .hover-bottom:after {\n border-color: transparent transparent ").concat(background_color, "\n transparent;\n top: -5px;\n }\n .hover-top:before {\n border-color: ").concat(border_color, " transparent transparent\n transparent;\n top: -1px;\n }\n .hover-top:after {\n border-color: ").concat(background_color, " transparent transparent\n transparent;\n top: -2px;\n }\n ")));
};
Tooltip.propTypes = {
/**
* The contents of the tooltip
*/
children: _propTypes.default.node,
/**
* The ID of this component, used to identify dash components
* in callbacks. The ID needs to be unique across all of the
* components in an app.
*/
id: _propTypes.default.string,
/**
* The class of the tooltip
*/
className: _propTypes.default.string,
/**
* The style of the tooltip
*/
style: _propTypes.default.object,
/**
* The bounding box coordinates of the item to label, in px relative to
* the positioning parent of the Tooltip component.
*/
bbox: _propTypes.default.exact({
x0: _propTypes.default.number,
y0: _propTypes.default.number,
x1: _propTypes.default.number,
y1: _propTypes.default.number
}),
/**
* Whether to show the tooltip
*/
show: _propTypes.default.bool,
/**
* The side of the `bbox` on which the tooltip should open.
*/
direction: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
/**
* Color of the tooltip border, as a CSS color string.
*/
border_color: _propTypes.default.string,
/**
* Color of the tooltip background, as a CSS color string.
*/
background_color: _propTypes.default.string,
/**
* The text displayed in the tooltip while loading
*/
loading_text: _propTypes.default.string,
/**
* The `z-index` CSS property to assign to the tooltip. Components with
* higher values will be displayed on top of components with lower values.
*/
zindex: _propTypes.default.number,
/**
* Whether the tooltip itself can be targeted by pointer events.
* For tooltips triggered by hover events, typically this should be left
* `false` to avoid the tooltip interfering with those same events.
*/
targetable: _propTypes.default.bool,
/**
* Dash-assigned callback that gets fired when the value changes.
*/
setProps: _propTypes.default.func
};
var _default = exports.default = Tooltip;