@platformatic/ui-components 0.2.14 → 0.2.16

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.16",
   "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;
+}

package/src/components/forms/Select.jsx

@@ -32,14 +32,13 @@ function Select ({
   const [showOptions, setShowOptions] = useState(false)
   const [isSelected, setIsSelected] = useState(false)
   const [isOnFocus, setIsOnFocus] = useState(false)
+
   const showError = errorMessage.length > 0
   const containerClassName = `${styles.container} ${defaultContainerClassName} `
   let inputClassName = `${commonStyles.fullWidth} ${styles.select} ${inputTextClassName}`
   inputClassName += ' ' + styles[`select-${mainColor}`]
   inputClassName += ' ' + commonStyles[`text--${borderColor}`]
   let optionsClassName = `${styles.options} ${defaultOptionsClassName} `
-  if (showError) inputClassName += ' ' + commonStyles['bordered--error-red']
-  if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
   inputClassName += ' ' + commonStyles[`background-color-${backgroundColor}`]
   optionsClassName += commonStyles[`background-color-${backgroundColor}`]
 
@@ -55,12 +54,20 @@ function Select ({
   const optionSpanClassName = commonStyles[`text--${mainColor}`]
 
   const [wrapperClassName, setWrapperClassName] = useState(normalClassName())
+
   function onFocusClassName () {
     return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-100`]
   }
 
   function normalClassName () {
-    return inputClassName + ' ' + commonStyles[`bordered--${borderColor}-70`]
+    const baseClassName = inputClassName
+    if (showError) {
+      inputClassName += ' ' + commonStyles['bordered--error-red']
+    } else {
+      inputClassName += ' ' + commonStyles[`bordered--${borderColor}-70`]
+    }
+    if (disabled) inputClassName += ' ' + commonStyles['apply-opacity-30']
+    return baseClassName
   }
 
   const dataProps = {}
@@ -101,6 +108,15 @@ function Select ({
     }
   }, [optionSelected])
 
+  useEffect(() => {
+    if (disabled) {
+      const className = normalClassName() + ' ' + commonStyles['apply-opacity-30']
+      setWrapperClassName(className)
+    } else {
+      setWrapperClassName(normalClassName())
+    }
+  }, [disabled])
+
   function renderLi (option, index) {
     return (
       <li
@@ -173,8 +189,8 @@ function Select ({
       <div className={styles.selectContainer}>
         <input type='text' name={name} value={value} className={wrapperClassName} ref={inputRef} onChange={onChange} disabled={disabled} placeholder={placeholder} onFocus={() => handleFocus()} onBlur={(e) => handleBlur(e)} />
         <div className={styles.icons}>
-          {value?.length > 0 && <PlatformaticIcon iconName='CircleCloseIcon' color={borderColor} onClick={() => clearValue()} size={SMALL} />}
-          <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} onClick={() => disabled ? null : setShowOptions(!showOptions)} size={SMALL} />
+          {value?.length > 0 && !disabled && <PlatformaticIcon iconName='CircleCloseIcon' color={borderColor} onClick={() => clearValue()} size={SMALL} />}
+          <PlatformaticIcon iconName={showOptions ? 'ArrowUpIcon' : 'ArrowDownIcon'} color={borderColor} disabled={disabled} onClick={() => setShowOptions(!showOptions)} size={SMALL} />
         </div>
       </div>
       {showOptions && !showError && renderOptions()}