@platformatic/ui-components 0.2.14 → 0.2.15

package/index.js

@@ -37,6 +37,7 @@ import SearchBarV2 from './src/components/SearchBarV2'
 import SimpleMetric from './src/components/SimpleMetric'
 import Status from './src/components/Status'
 import Tooltip from './src/components/Tooltip'
+import TooltipV2 from './src/components/TooltipV2'
 import TabbedWindow from './src/components/TabbedWindow'
 import TabbedWindowV2 from './src/components/TabbedWindowV2'
 import Tag from './src/components/Tag'
@@ -87,6 +88,7 @@ export {
   Tag,
   TextWithLabel,
   Tooltip,
+  TooltipV2,
   TwoColumnsLayout,
   Versions,
   VerticalSeparator

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@platformatic/ui-components",
   "description": "Platformatic UI Components",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {

package/src/components/TooltipV2.jsx

@@ -0,0 +1,72 @@
+'use strict'
+import PropTypes from 'prop-types'
+import styles from './TooltipV2.module.css'
+import { useEffect, useRef, useState } from 'react'
+import { ALIGNMENT_LEFT, ALIGNMENTS } from './constants'
+
+function TooltipV2 ({ tooltipClassName, text, visible, alignment, elementClassName }) {
+  const ref = useRef(null)
+  const alignmentClassName = styles[`${alignment}PltTooltip`]
+  const [className, setClassName] = useState(normalClassName())
+
+  useEffect(() => {
+    if (visible) {
+      setClassName(visibleClassName())
+      if (ref.current) {
+        console.log('elementClassName', elementClassName)
+        const referenceBoundingClientRect = document.getElementsByClassName(elementClassName)[0]?.getBoundingClientRect()
+        if (referenceBoundingClientRect) {
+          const topPosition = referenceBoundingClientRect.y - (referenceBoundingClientRect.height)
+          const leftPosition = referenceBoundingClientRect.x + (referenceBoundingClientRect.width / 2)
+          ref.current.style.top = `${topPosition}px`
+          ref.current.style.left = `${leftPosition}px`
+        }
+      }
+    } else {
+      setClassName(normalClassName())
+    }
+  }, [visible])
+
+  function normalClassName () {
+    return `${styles.pltTooltipText} ${tooltipClassName} ${alignmentClassName}`
+  }
+
+  function visibleClassName () {
+    return `${normalClassName()} ${styles.pltTooltipTextVisible}`
+  }
+
+  return <span ref={ref} className={className}>{text}</span>
+}
+
+TooltipV2.propTypes = {
+  /**
+   * text
+   */
+  text: PropTypes.string,
+  /**
+   * tooltipClassName
+   */
+  tooltipClassName: PropTypes.string,
+  /**
+   * visible
+   */
+  visible: PropTypes.bool,
+  /**
+   * alignment
+   */
+  alignment: PropTypes.oneOf(ALIGNMENTS),
+  /**
+   * alignment
+   */
+  elementClassName: PropTypes.string
+}
+
+TooltipV2.defaultProps = {
+  text: '',
+  tooltipClassName: '',
+  visible: false,
+  alignment: ALIGNMENT_LEFT,
+  elementClassName: ''
+}
+
+export default TooltipV2

package/src/components/TooltipV2.module.css

@@ -0,0 +1,31 @@
+
+.pltTooltipText {
+  @apply bg-white text-rich-black text-center p-2;
+  z-index: 20;
+  position: fixed;
+  visibility: hidden;
+  border-radius: 6px;
+  padding: 0.25rem;
+  opacity: 0;
+  transition: opacity 0.3s;
+  transform: translateX(-50%);
+}
+
+.pltTooltipText::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  border-width: 5px;
+  border-style: solid;
+  border-color: white transparent transparent transparent;
+  left: 50%;
+}
+
+.leftPltTooltip::after {
+  
+}
+
+.pltTooltipTextVisible {
+  visibility: visible;
+  opacity: 1;
+}