@geezee/react-ui
Version:
Modern and minimalist React UI library.
157 lines (143 loc) • 8.29 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo, useEffect, useRef, useState, useCallback } from 'react';
import withDefaults from '../utils/with-defaults';
import { usePopper } from 'react-popper';
import useTheme from '../styles/use-theme';
import { getColors } from './styles';
import useClickAway from '../utils/use-click-away';
export var defaultProps = {
defaultVisible: false,
hideArrow: false,
color: 'default',
trigger: 'hover',
placement: 'auto',
offset: [0, 10],
className: '',
contentClassName: '',
hoverable: false,
hoverableTimeout: 200,
displayBlock: false
};
var Tooltip = function Tooltip(_ref) {
var displayBlock = _ref.displayBlock,
hoverable = _ref.hoverable,
hoverableTimeout = _ref.hoverableTimeout,
children = _ref.children,
defaultVisible = _ref.defaultVisible,
text = _ref.text,
offset = _ref.offset,
placement = _ref.placement,
contentClassName = _ref.contentClassName,
trigger = _ref.trigger,
color = _ref.color,
className = _ref.className,
onVisibleChange = _ref.onVisibleChange,
hideArrow = _ref.hideArrow,
customVisible = _ref.visible,
onMouseEnter = _ref.onMouseEnter,
onMouseLeave = _ref.onMouseLeave,
onClickAway = _ref.onClickAway,
props = _objectWithoutProperties(_ref, ["displayBlock", "hoverable", "hoverableTimeout", "children", "defaultVisible", "text", "offset", "placement", "contentClassName", "trigger", "color", "className", "onVisibleChange", "hideArrow", "visible", "onMouseEnter", "onMouseLeave", "onClickAway"]);
var hoverableTimer = useRef();
var contentHovering = useRef();
var theme = useTheme();
var parentRef = useRef(null);
var contentRef = useRef(null);
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
arrowRef = _useState2[0],
setArrowRef = _useState2[1];
var _useState3 = useState(customVisible === undefined ? defaultVisible : customVisible),
_useState4 = _slicedToArray(_useState3, 2),
visible = _useState4[0],
setVisible = _useState4[1];
var _usePopper = usePopper(parentRef === null || parentRef === void 0 ? void 0 : parentRef.current, contentRef === null || contentRef === void 0 ? void 0 : contentRef.current, {
modifiers: [{
name: 'arrow',
options: {
element: arrowRef,
padding: 10
}
}, {
name: 'offset',
options: {
offset: offset
}
}],
placement: placement
}),
styles = _usePopper.styles,
attributes = _usePopper.attributes;
var colors = useMemo(function () {
return getColors(color, theme.palette);
}, [color, theme.palette]);
var changeVisible = function changeVisible(newVisible) {
if (typeof onVisibleChange === 'function') onVisibleChange(newVisible);
setVisible(newVisible);
};
var realHoverMouseLeaveHandler = useCallback(function (e) {
if (contentHovering === null || contentHovering === void 0 ? void 0 : contentHovering.current) return;
customVisible === undefined && changeVisible(false);
onMouseLeave && onMouseLeave(e, changeVisible);
}, []);
var mouseEventHandler = function mouseEventHandler(e, next, fromContent) {
if (hoverable && trigger === 'hover' && !next && !fromContent) {
if (hoverableTimer.current) clearTimeout(hoverableTimer.current);
hoverableTimer.current = window.setTimeout(function () {
return realHoverMouseLeaveHandler(e);
}, hoverableTimeout);
return;
}
if (customVisible === undefined) trigger === 'hover' && changeVisible(next);
if (next) onMouseEnter && onMouseEnter(e, changeVisible);else onMouseLeave && onMouseLeave(e, changeVisible);
};
var clickEventHandler = function clickEventHandler() {
return trigger === 'click' && changeVisible(!visible);
};
var clickAwayHandler = function clickAwayHandler(e) {
if (customVisible === undefined) trigger === 'click' && changeVisible(false);
onClickAway && onClickAway(e, changeVisible);
};
useClickAway(parentRef, clickAwayHandler);
useEffect(function () {
if (customVisible === undefined) return;
changeVisible(customVisible);
}, [customVisible]);
return /*#__PURE__*/React.createElement("div", {
className: _JSXStyle.dynamic([["811020623", [displayBlock ? 'block' : 'inline-block', theme.expressiveness.D2, theme.expressiveness.R2, colors.color, colors.bgColor, theme.layout.gapHalf, theme.expressiveness.R2, colors.bgColor]]]) + " " + "tooltip-wrapper"
}, /*#__PURE__*/React.createElement("div", _extends({
ref: parentRef,
onClick: clickEventHandler,
onMouseEnter: function onMouseEnter(e) {
return mouseEventHandler(e, true);
},
onMouseLeave: function onMouseLeave(e) {
return mouseEventHandler(e, false);
}
}, props, {
className: _JSXStyle.dynamic([["811020623", [displayBlock ? 'block' : 'inline-block', theme.expressiveness.D2, theme.expressiveness.R2, colors.color, colors.bgColor, theme.layout.gapHalf, theme.expressiveness.R2, colors.bgColor]]]) + " " + (props && props.className != null && props.className || "tooltip ".concat(className))
}), children), visible && /*#__PURE__*/React.createElement("div", _extends({
ref: contentRef,
style: styles.popper,
onMouseEnter: function onMouseEnter() {
contentHovering.current = true;
},
onMouseLeave: function onMouseLeave(e) {
contentHovering.current = false;
mouseEventHandler(e, false, true);
}
}, attributes.popper, {
className: _JSXStyle.dynamic([["811020623", [displayBlock ? 'block' : 'inline-block', theme.expressiveness.D2, theme.expressiveness.R2, colors.color, colors.bgColor, theme.layout.gapHalf, theme.expressiveness.R2, colors.bgColor]]]) + " " + (attributes.popper && attributes.popper.className != null && attributes.popper.className || "tooltip-content ".concat(contentClassName))
}), !hideArrow && /*#__PURE__*/React.createElement("div", {
ref: setArrowRef,
style: styles.arrow,
className: _JSXStyle.dynamic([["811020623", [displayBlock ? 'block' : 'inline-block', theme.expressiveness.D2, theme.expressiveness.R2, colors.color, colors.bgColor, theme.layout.gapHalf, theme.expressiveness.R2, colors.bgColor]]]) + " " + "tooltip-arrow"
}), text), /*#__PURE__*/React.createElement(_JSXStyle, {
id: "811020623",
dynamic: [displayBlock ? 'block' : 'inline-block', theme.expressiveness.D2, theme.expressiveness.R2, colors.color, colors.bgColor, theme.layout.gapHalf, theme.expressiveness.R2, colors.bgColor]
}, ".tooltip-wrapper.__jsx-style-dynamic-selector{display:".concat(displayBlock ? 'block' : 'inline-block', ";}.tooltip.__jsx-style-dynamic-selector{display:inline-block;}.tooltip-content.__jsx-style-dynamic-selector{box-shadow:").concat(theme.expressiveness.D2, ";border-radius:").concat(theme.expressiveness.R2, ";z-index:1000;color:").concat(colors.color, ";background-color:").concat(colors.bgColor, ";padding:calc(").concat(theme.layout.gapHalf, " * 1.5);border-radius:").concat(theme.expressiveness.R2, ";}.tooltip-arrow.__jsx-style-dynamic-selector,.tooltip-arrow.__jsx-style-dynamic-selector::before{position:absolute;width:10px;height:10px;z-index:-1;}.tooltip-arrow.__jsx-style-dynamic-selector::before{content:'';-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);background-color:red;background-color:").concat(colors.bgColor, ";}.tooltip-content[data-popper-placement^='top'].__jsx-style-dynamic-selector>.tooltip-arrow.__jsx-style-dynamic-selector{bottom:-5px;}.tooltip-content[data-popper-placement^='bottom'].__jsx-style-dynamic-selector>.tooltip-arrow.__jsx-style-dynamic-selector{top:-5px;}.tooltip-content[data-popper-placement^='left'].__jsx-style-dynamic-selector>.tooltip-arrow.__jsx-style-dynamic-selector{right:-5px;}.tooltip-content[data-popper-placement^='right'].__jsx-style-dynamic-selector>.tooltip-arrow.__jsx-style-dynamic-selector{left:-5px;}")));
};
export default withDefaults(Tooltip, defaultProps);