@yandex/ui
Version:
Yandex UI components
55 lines (54 loc) • 3.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipStateful = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var mergeRefs_1 = require("../lib/mergeRefs");
var forkFn_1 = require("../lib/forkFn");
var useUniqId_1 = require("../useUniqId");
var Tooltip_1 = require("./Tooltip");
/**
* Компонент используется для создания всплывающих подсказок.
*
* @param {TooltipStatefulProps} props Свойства компонента.
*/
var TooltipStateful = function (_a) {
var _b;
var children = _a.children, content = _a.content, _c = _a.defaultVisible, defaultVisible = _c === void 0 ? false : _c,
// eslint-disable-next-line react-hooks/rules-of-hooks
_d = _a.id,
// eslint-disable-next-line react-hooks/rules-of-hooks
id = _d === void 0 ? useUniqId_1.useUniqId('tooltip') : _d, _e = _a.trigger, trigger = _e === void 0 ? 'hover' : _e, props = tslib_1.__rest(_a, ["children", "content", "defaultVisible", "id", "trigger"]);
var _f = tslib_1.__read(react_1.useState(defaultVisible), 2), visible = _f[0], setVisible = _f[1];
var anchorRef = react_1.useRef(null);
var child = react_1.Children.only(children);
// В дальнейшем данный код можно вынести куда-то выше и использовать по аналогии с Popup и Modal.
var triggers = Array.isArray(trigger) ? trigger : [trigger];
var handlers = triggers.reduce(function (acc, trigger) {
switch (trigger) {
case 'click':
acc.onClick = forkFn_1.forkFn(child.props.onClick, function () { return setVisible(!visible); });
break;
case 'focus':
acc.onFocus = forkFn_1.forkFn(child.props.onFocus, function () { return setVisible(true); });
acc.onBlur = forkFn_1.forkFn(child.props.onBlur, function () { return setVisible(false); });
break;
case 'hover':
acc.onMouseEnter = forkFn_1.forkFn(child.props.onMouseEnter, function () { return setVisible(true); });
acc.onMouseLeave = forkFn_1.forkFn(child.props.onMouseLeave, function () { return setVisible(false); });
break;
}
return acc;
}, {});
var onClose = react_1.useCallback(function () {
setVisible(false);
}, []);
// Определяем тип ссылки в зависимости от типа потомка,
// нативные элементы реализуют ref, лего-компоненты должны реализовывать innerRef.
var refKey = typeof child.type === 'string' ? 'ref' : 'innerRef';
var ref = child.props[refKey] === undefined ? anchorRef : mergeRefs_1.mergeRefs(child.props[refKey], anchorRef);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.cloneElement(child, tslib_1.__assign(tslib_1.__assign({}, handlers), (_b = {}, _b[refKey] = ref, _b['aria-describedby'] = id, _b))),
react_1.default.createElement(Tooltip_1.Tooltip, tslib_1.__assign({}, props, { id: id, visible: visible, anchor: anchorRef, onClose: onClose }), content)));
};
exports.TooltipStateful = TooltipStateful;