From dfbe7bc1b99575ac798d4ce42f5bedbeed5b70c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ula=C5=9F=20Turan?= <ulasturan06@hotmail.com>
Date: Tue, 8 Aug 2023 21:53:35 +0300
Subject: [PATCH] Refactor #4602 - For Tooltip

---
 components/lib/tooltip/Tooltip.css    | 62 --------------------
 components/lib/tooltip/Tooltip.js     | 25 +++-----
 components/lib/tooltip/TooltipBase.js | 83 ++++++++++++++++++++++++++-
 3 files changed, 91 insertions(+), 79 deletions(-)
 delete mode 100644 components/lib/tooltip/Tooltip.css

diff --git a/components/lib/tooltip/Tooltip.css b/components/lib/tooltip/Tooltip.css
deleted file mode 100644
index af84851858..0000000000
--- a/components/lib/tooltip/Tooltip.css
+++ /dev/null
@@ -1,62 +0,0 @@
-.p-tooltip {
-    position: absolute;
-    padding: .25em .5rem;
-    /* #3687: Tooltip prevent scrollbar flickering */
-    top: -9999px;
-    left: -9999px;
-}
-
-.p-tooltip.p-tooltip-right,
-.p-tooltip.p-tooltip-left {
-    padding: 0 .25rem;
-}
-
-.p-tooltip.p-tooltip-top,
-.p-tooltip.p-tooltip-bottom {
-    padding:.25em 0;
-}
-
-.p-tooltip .p-tooltip-text {
-   white-space: pre-line;
-   word-break: break-word;
-}
-
-.p-tooltip-arrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-}
-
-.p-tooltip-right .p-tooltip-arrow {
-    top: 50%;
-    left: 0;
-    margin-top: -.25rem;
-    border-width: .25em .25em .25em 0;
-}
-
-.p-tooltip-left .p-tooltip-arrow {
-    top: 50%;
-    right: 0;
-    margin-top: -.25rem;
-    border-width: .25em 0 .25em .25rem;
-}
-
-.p-tooltip.p-tooltip-top {
-    padding: .25em 0;
-}
-
-.p-tooltip-top .p-tooltip-arrow {
-    bottom: 0;
-    left: 50%;
-    margin-left: -.25rem;
-    border-width: .25em .25em 0;
-}
-
-.p-tooltip-bottom .p-tooltip-arrow {
-    top: 0;
-    left: 50%;
-    margin-left: -.25rem;
-    border-width: 0 .25em .25rem;
-}
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 88e13528ff..6edac43b97 100644
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -4,6 +4,7 @@ import { useMountEffect, useOverlayScrollListener, useResizeListener, useUnmount
 import { Portal } from '../portal/Portal';
 import { DomHandler, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
 import { TooltipBase } from './TooltipBase';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const Tooltip = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -12,7 +13,7 @@ export const Tooltip = React.memo(
         const [visibleState, setVisibleState] = React.useState(false);
         const [positionState, setPositionState] = React.useState(props.position);
         const [classNameState, setClassNameState] = React.useState('');
-        const { ptm } = TooltipBase.setMetaData({
+        const { ptm, cx, isUnstyled } = TooltipBase.setMetaData({
             props,
             state: {
                 visible: visibleState,
@@ -20,6 +21,8 @@ export const Tooltip = React.memo(
                 className: classNameState
             }
         });
+
+        useHandleStyle(TooltipBase.css.styles, isUnstyled, { name: 'tooltip' });
         const elementRef = React.useRef(null);
         const textRef = React.useRef(null);
         const currentTargetRef = React.useRef(null);
@@ -470,20 +473,11 @@ export const Tooltip = React.memo(
         }));
 
         const createElement = () => {
-            const tooltipClassName = classNames(
-                'p-tooltip p-component',
-                {
-                    [`p-tooltip-${positionState}`]: true
-                },
-                props.className,
-                classNameState
-            );
             const empty = isTargetContentEmpty(currentTargetRef.current);
             const rootProps = mergeProps(
                 {
                     id: props.id,
-                    ref: elementRef,
-                    className: tooltipClassName,
+                    className: classNames(props.className, cx('root', { positionState, classNameState })),
                     style: props.style,
                     role: 'tooltip',
                     'aria-hidden': visibleState,
@@ -496,23 +490,22 @@ export const Tooltip = React.memo(
 
             const arrowProps = mergeProps(
                 {
-                    className: 'p-tooltip-arrow'
+                    className: cx('arrow')
                 },
                 ptm('arrow')
             );
 
             const textProps = mergeProps(
                 {
-                    ref: textRef,
-                    className: 'p-tooltip-text'
+                    className: cx('text')
                 },
                 ptm('text')
             );
 
             return (
-                <div {...rootProps}>
+                <div ref={elementRef} {...rootProps}>
                     <div {...arrowProps}></div>
-                    <div {...textProps}>{empty && props.children}</div>
+                    <div ref={textRef} {...textProps}>{empty && props.children}</div>
                 </div>
             );
         };
diff --git a/components/lib/tooltip/TooltipBase.js b/components/lib/tooltip/TooltipBase.js
index 018db32736..46fc970713 100644
--- a/components/lib/tooltip/TooltipBase.js
+++ b/components/lib/tooltip/TooltipBase.js
@@ -1,5 +1,82 @@
 import { ComponentBase } from '../componentbase/ComponentBase';
-import { ObjectUtils } from '../utils/Utils';
+import { classNames } from '../utils/Utils';
+
+const classes = {
+    root: ({ positionState, classNameState}) => classNames(
+        'p-tooltip p-component',
+        {
+            [`p-tooltip-${positionState}`]: true
+        },
+        classNameState
+    ),
+    arrow: 'p-tooltip-arrow',
+    text: 'p-tooltip-text'
+};
+
+const styles = `
+.p-tooltip {
+    position: absolute;
+    padding: .25em .5rem;
+    /* #3687: Tooltip prevent scrollbar flickering */
+    top: -9999px;
+    left: -9999px;
+}
+
+.p-tooltip.p-tooltip-right,
+.p-tooltip.p-tooltip-left {
+    padding: 0 .25rem;
+}
+
+.p-tooltip.p-tooltip-top,
+.p-tooltip.p-tooltip-bottom {
+    padding:.25em 0;
+}
+
+.p-tooltip .p-tooltip-text {
+   white-space: pre-line;
+   word-break: break-word;
+}
+
+.p-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+
+.p-tooltip-right .p-tooltip-arrow {
+    top: 50%;
+    left: 0;
+    margin-top: -.25rem;
+    border-width: .25em .25em .25em 0;
+}
+
+.p-tooltip-left .p-tooltip-arrow {
+    top: 50%;
+    right: 0;
+    margin-top: -.25rem;
+    border-width: .25em 0 .25em .25rem;
+}
+
+.p-tooltip.p-tooltip-top {
+    padding: .25em 0;
+}
+
+.p-tooltip-top .p-tooltip-arrow {
+    bottom: 0;
+    left: 50%;
+    margin-left: -.25rem;
+    border-width: .25em .25em 0;
+}
+
+.p-tooltip-bottom .p-tooltip-arrow {
+    top: 0;
+    left: 50%;
+    margin-left: -.25rem;
+    border-width: 0 .25em .25rem;
+}
+`;
 
 export const TooltipBase = ComponentBase.extend({
     defaultProps: {
@@ -32,5 +109,9 @@ export const TooltipBase = ComponentBase.extend({
         target: null,
         updateDelay: 0,
         children: undefined
+    },
+    css: {
+        classes,
+        styles
     }
 });