es-grid-template
Version:
es-grid-template
74 lines (73 loc) • 2.34 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { Fragment, useState } from "react";
import classnames from "classnames";
import { useFloating, autoUpdate, offset, flip, shift, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingPortal
// useClick
} from "@floating-ui/react";
import styled from "styled-components";
import { useIsOverflow } from "../useIsOverflow";
// import {getTemplate} from "../utils";
const TooltipStyle = styled.div.withConfig({
displayName: "TooltipStyle",
componentId: "es-grid-template__sc-7yfbzv-0"
})(["width:max-content;background-color:#444;color:white;font-size:90%;padding:4px 8px;border-radius:4px;opacity:0.9;z-index:9999;max-width:450px;"]);
const TooltipContent = props => {
const {
content,
tooltip,
value,
record,
rowIndex,
showTooltip
} = props;
const [isOpen, setIsOpen] = useState(false);
const {
refs,
floatingStyles,
context
} = useFloating({
open: isOpen,
onOpenChange: setIsOpen,
placement: "top",
whileElementsMounted: autoUpdate,
middleware: [offset(5), flip({
fallbackAxisSideDirection: "start"
}), shift()]
});
const isOverflow = useIsOverflow(refs.reference);
const hover = useHover(context, {
move: false
});
const focus = useFocus(context);
const dismiss = useDismiss(context);
const role = useRole(context, {
role: "tooltip"
});
const {
getReferenceProps,
getFloatingProps
} = useInteractions([hover, focus, dismiss, role]);
return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
ref: refs.setReference
}, getReferenceProps(), {
style: {
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
wordBreak: 'keep-all'
},
className: classnames('', {})
}), content()), isOpen && showTooltip !== false && isOverflow &&
/*#__PURE__*/
// {true && (
React.createElement(FloatingPortal, {
root: document.body
}, /*#__PURE__*/React.createElement(TooltipStyle, _extends({
className: "Tooltip",
ref: refs.setFloating,
style: {
...floatingStyles
}
}, getFloatingProps()), tooltip && typeof tooltip === 'function' ? tooltip(value, record, rowIndex) : tooltip ?? content())));
};
export default TooltipContent;