@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
278 lines (272 loc) • 15.2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useTooltip = exports.defaultScreenEdgeKeepout = exports["default"] = void 0;
var _handle = require("@enact/core/handle");
var _util = require("@enact/core/util");
var _I18nDecorator = require("@enact/i18n/I18nDecorator");
var _FloatingLayer = require("@enact/ui/FloatingLayer");
var _resolution = _interopRequireDefault(require("@enact/ui/resolution"));
var _react = require("react");
var _Tooltip = require("./Tooltip");
var _util2 = require("./util");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); } /* global MutationObserver ResizeObserver */
var currentTooltip; // needed to know whether or not we should stop a showing job when unmounting
var getTooltipDirection = function getTooltipDirection(tooltipPosition, tooltipType) {
var position = tooltipPosition || (0, _Tooltip.defaultDirection)(tooltipType) + ' ' + (0, _Tooltip.defaultArrowAnchor)(tooltipType);
var arr = position.split(' ');
if (arr.length === 2) {
return {
tooltipDirection: arr[0],
arrowAnchor: arr[1]
};
} else {
return {
tooltipDirection: position === 'below' ? 'below' : 'above',
arrowAnchor: 'right'
};
}
};
var removeTooltipProps = function removeTooltipProps(_ref) {
var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
delete props.rtl;
delete props.screenEdgeKeepout;
delete props.tooltipDelay;
delete props.tooltipMarquee;
delete props.tooltipPosition;
delete props.tooltipProps;
delete props.tooltipRelative;
delete props.tooltipText;
delete props.tooltipType;
delete props.tooltipUpdateDelay;
delete props.tooltipWidth;
return props;
};
/*
* The boundary around the screen which the tooltip should never cross, typically involving
* flipping to an alternate orientation or adjusting its offset to remain on screen.
* The default of 48 is derived from a standard 24px screen-keepout size plus the standard
* Spotlight-outset (24px) margin/padding value which keeps elements and text aligned inside a
* Panel. Note: This value will be scaled according to the resolution.
*/
var defaultScreenEdgeKeepout = exports.defaultScreenEdgeKeepout = 24 + 24;
// A hook to show Sandstone-styled tooltip components.
var useTooltip = exports.useTooltip = function useTooltip(props) {
var _useI18nContext;
var _props$screenEdgeKeep = props.screenEdgeKeepout,
screenEdgeKeepout = _props$screenEdgeKeep === void 0 ? defaultScreenEdgeKeepout : _props$screenEdgeKeep,
_props$tooltipDelay = props.tooltipDelay,
tooltipDelay = _props$tooltipDelay === void 0 ? 500 : _props$tooltipDelay,
_props$tooltipType = props.tooltipType,
tooltipType = _props$tooltipType === void 0 ? 'balloon' : _props$tooltipType,
_props$tooltipUpdateD = props.tooltipUpdateDelay,
tooltipUpdateDelay = _props$tooltipUpdateD === void 0 ? 400 : _props$tooltipUpdateD,
tooltipMarquee = props.tooltipMarquee,
tooltipPosition = props.tooltipPosition,
tooltipProps = props.tooltipProps,
tooltipRelative = props.tooltipRelative,
tooltipText = props.tooltipText,
tooltipWidth = props.tooltipWidth;
var rtlI18nContext = (_useI18nContext = (0, _I18nDecorator.useI18nContext)()) === null || _useI18nContext === void 0 ? void 0 : _useI18nContext.rtl;
var rtl = typeof props.rtl === 'boolean' ? props.rtl : rtlI18nContext;
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
showing = _useState2[0],
setShowing = _useState2[1];
var _useState3 = (0, _react.useState)({
arrowAnchor: null,
labelOffset: null,
position: {
top: 0,
left: 0
},
tooltipDirection: null
}),
_useState4 = _slicedToArray(_useState3, 2),
layout = _useState4[0],
setLayout = _useState4[1];
var mutableRef = (0, _react.useRef)({
mutationObserver: null,
resizeObserver: null,
showTooltipJob: null,
setTooltipLayoutJob: null
});
var clientRef = (0, _react.useRef)(null);
var tooltipRef = (0, _react.useRef)(null);
var showTooltip = (0, _react.useCallback)(function (client) {
if (tooltipText) {
var _mutableRef$current$s, _mutableRef$current$m, _mutableRef$current$r;
clientRef.current = client;
currentTooltip = client;
(_mutableRef$current$s = mutableRef.current.showTooltipJob) === null || _mutableRef$current$s === void 0 || _mutableRef$current$s.startAfter(tooltipDelay);
(_mutableRef$current$m = mutableRef.current.mutationObserver) === null || _mutableRef$current$m === void 0 || _mutableRef$current$m.observe(clientRef.current, {
attributes: true,
childList: true
});
(_mutableRef$current$r = mutableRef.current.resizeObserver) === null || _mutableRef$current$r === void 0 || _mutableRef$current$r.observe(clientRef.current);
}
}, [clientRef, tooltipDelay, tooltipText]);
var hideTooltip = (0, _react.useCallback)(function () {
if (tooltipText) {
var _mutableRef$current$m2, _mutableRef$current$r2, _mutableRef$current$s2, _mutableRef$current$s3;
(_mutableRef$current$m2 = mutableRef.current.mutationObserver) === null || _mutableRef$current$m2 === void 0 || _mutableRef$current$m2.disconnect();
(_mutableRef$current$r2 = mutableRef.current.resizeObserver) === null || _mutableRef$current$r2 === void 0 || _mutableRef$current$r2.disconnect();
clientRef.current = null;
currentTooltip = null;
(_mutableRef$current$s2 = mutableRef.current.showTooltipJob) === null || _mutableRef$current$s2 === void 0 || _mutableRef$current$s2.stop();
(_mutableRef$current$s3 = mutableRef.current.setTooltipLayoutJob) === null || _mutableRef$current$s3 === void 0 || _mutableRef$current$s3.stop();
setShowing(false);
}
}, [clientRef, tooltipText]);
var startTooltipLayoutJob = (0, _react.useCallback)(function () {
var _mutableRef$current$s4;
(_mutableRef$current$s4 = mutableRef.current.setTooltipLayoutJob) === null || _mutableRef$current$s4 === void 0 || _mutableRef$current$s4.startAfter(tooltipUpdateDelay);
}, [tooltipUpdateDelay]);
// Recalculate tooltip layout on keydown to make sure tooltip is positioned correctly in case something changes as a result of the keydown.
var onKeyDown = (0, _react.useCallback)(function (ev) {
(0, _handle.forward)('onKeyDown', ev, props);
if (!props.disabled) {
startTooltipLayoutJob();
}
}, [props, startTooltipLayoutJob]);
var onMouseOver = (0, _react.useCallback)(function (ev) {
(0, _handle.forward)('onMouseOver', ev, props);
if (props.disabled) {
showTooltip(ev.currentTarget);
}
}, [props, showTooltip]);
var onMouseOut = (0, _react.useCallback)(function (ev) {
(0, _handle.forward)('onMouseOut', ev, props);
if (props.disabled) {
if (clientRef.current && !clientRef.current.contains(ev.relatedTarget)) {
hideTooltip();
}
}
}, [hideTooltip, props]);
var onFocus = (0, _react.useCallback)(function (ev) {
(0, _handle.forward)('onFocus', ev, props);
showTooltip(ev.target);
}, [props, showTooltip]);
var onBlur = (0, _react.useCallback)(function (ev) {
(0, _handle.forward)('onBlur', ev, props);
hideTooltip();
}, [hideTooltip, props]);
var handlers = {
onKeyDown: onKeyDown,
onMouseOver: onMouseOver,
onMouseOut: onMouseOut,
onFocus: onFocus,
onBlur: onBlur
};
(0, _react.useEffect)(function () {
var mutableRefCurrent = mutableRef.current;
if (typeof window !== 'undefined' && window.MutationObserver) {
mutableRefCurrent.mutationObserver = new MutationObserver(startTooltipLayoutJob);
}
if (typeof window !== 'undefined' && window.ResizeObserver) {
mutableRefCurrent.resizeObserver = new ResizeObserver(startTooltipLayoutJob);
}
return function () {
if (currentTooltip === clientRef.current) {
var _mutableRefCurrent$mu, _mutableRefCurrent$re;
currentTooltip = null;
(_mutableRefCurrent$mu = mutableRefCurrent.mutationObserver) === null || _mutableRefCurrent$mu === void 0 || _mutableRefCurrent$mu.disconnect();
(_mutableRefCurrent$re = mutableRefCurrent.resizeObserver) === null || _mutableRefCurrent$re === void 0 || _mutableRefCurrent$re.disconnect();
mutableRefCurrent.showTooltipJob.stop();
mutableRefCurrent.setTooltipLayoutJob.stop();
}
};
}, [startTooltipLayoutJob]);
var setTooltipLayout = (0, _react.useCallback)(function () {
if (!tooltipRef.current || !clientRef.current) {
return;
}
var newLayout = getTooltipDirection(tooltipPosition, tooltipType);
var tooltipNode = tooltipRef.current.getBoundingClientRect(); // label bound
var clientNode = clientRef.current.getBoundingClientRect(); // client bound
var overflow = (0, _util2.calcOverflow)(tooltipNode, clientNode, newLayout.tooltipDirection, _resolution["default"].scale(screenEdgeKeepout));
newLayout.tooltipDirection = (0, _util2.adjustDirection)(newLayout.tooltipDirection, overflow, rtl);
newLayout.arrowAnchor = (0, _util2.adjustAnchor)(newLayout.arrowAnchor, newLayout.tooltipDirection, overflow, rtl);
newLayout.position = (0, _util2.getPosition)(clientNode, newLayout.tooltipDirection);
newLayout.labelOffset = newLayout.arrowAnchor === 'center' ? (0, _util2.getLabelOffset)(tooltipNode, newLayout.tooltipDirection, newLayout.position, overflow) : null;
if (newLayout.position.top !== layout.position.top || newLayout.position.left !== layout.position.left || newLayout.labelOffset !== layout.labelOffset || newLayout.arrowAnchor !== layout.arrowAnchor) {
setLayout(newLayout);
}
}, [rtl, tooltipPosition, tooltipType, screenEdgeKeepout, layout, tooltipRef, clientRef]);
(0, _react.useLayoutEffect)(function () {
mutableRef.current.showTooltipJob = new _util.Job(function () {
setShowing(true);
});
}, [showing]);
(0, _react.useLayoutEffect)(function () {
mutableRef.current.setTooltipLayoutJob = new _util.Job(function () {
setTooltipLayout();
});
}, [setTooltipLayout]);
var getTooltipRef = (0, _react.useCallback)(function (node) {
tooltipRef.current = node;
if (node) {
setTooltipLayout();
}
}, [setTooltipLayout]);
/*
* Conditionally creates the FloatingLayer and Tooltip based on the presence of `tooltipText`
*/
var renderTooltip = (0, _react.useCallback)(function () {
var _layout$position = layout.position,
top = _layout$position.top,
left = _layout$position.left;
var tooltipStyle = {
// Moving the position to CSS variables where there are additional offset calculations
'--tooltip-position-top': tooltipRelative ? null : _resolution["default"].unit(top, 'rem'),
'--tooltip-position-left': tooltipRelative ? null : _resolution["default"].unit(left, 'rem')
};
var renderedTooltip = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, _objectSpread(_objectSpread({
"aria-hidden": true,
labelOffset: layout.labelOffset
}, tooltipProps), {}, {
arrowAnchor: layout.arrowAnchor,
direction: layout.tooltipDirection,
marquee: tooltipMarquee,
relative: tooltipRelative,
style: tooltipStyle,
tooltipRef: getTooltipRef,
type: tooltipType,
width: tooltipWidth,
children: tooltipText
}));
if (!tooltipRelative) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FloatingLayer.FloatingLayerBase, {
open: showing,
noAutoDismiss: true,
onDismiss: hideTooltip,
scrimType: "none",
children: renderedTooltip
}, "tooltipFloatingLayer");
} else if (showing) {
return renderedTooltip;
} else {
return null;
}
}, [getTooltipRef, hideTooltip, layout, showing, tooltipMarquee, tooltipProps, tooltipRelative, tooltipText, tooltipType, tooltipWidth]);
return {
tooltip: tooltipText ? renderTooltip() : null,
handlers: handlers,
restProps: removeTooltipProps(props)
};
};
var _default = exports["default"] = useTooltip;