Fixed #2360 - React 18 support for Tooltip

primefaces · Apr 2, 2022 · 43686b4 · 43686b4
1 parent 11cc434
commit 43686b4
Show file tree

Hide file tree

Showing 24 changed files with 419 additions and 827 deletions.
diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
@@ -1,12 +1,12 @@
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import PrimeReact from '../api/Api';
-import { AutoCompletePanel } from './AutoCompletePanel';
-import { InputText } from '../inputtext/InputText';
 import { Button } from '../button/Button';
-import { tip } from '../tooltip/Tooltip';
+import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { InputText } from '../inputtext/InputText';
 import { OverlayService } from '../overlayservice/OverlayService';
-import { DomHandler, ObjectUtils, classNames, UniqueComponentId, ZIndexUtils, IconUtils } from '../utils/Utils';
-import { useMountEffect, useUpdateEffect, useUnmountEffect, useOverlayListener } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { AutoCompletePanel } from './AutoCompletePanel';
 
 export const AutoComplete = memo(forwardRef((props, ref) => {
     const [idState, setIdState] = useState(props.id);
@@ -15,7 +15,6 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
     const [overlayVisibleState, setOverlayVisibleState] = useState(false);
     const elementRef = useRef(null);
     const overlayRef = useRef(null);
-    const tooltipRef = useRef(null);
     const inputRef = useRef(props.inputRef);
     const multiContainerRef = useRef(null);
     const virtualScrollerRef = useRef(null);
@@ -414,19 +413,6 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useMountEffect(() => {
         if (!idState) {
             setIdState(UniqueComponentId());
@@ -455,11 +441,6 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
             clearTimeout(timeout.current);
         }
 
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-
         ZIndexUtils.clear(overlayRef.current);
     });
 
@@ -555,6 +536,7 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
     }
 
     const listId = idState + '_list';
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-autocomplete p-component p-inputwrapper', {
         'p-autocomplete-dd': props.dropdown,
         'p-autocomplete-multiple': props.multiple,
@@ -566,14 +548,17 @@ export const AutoComplete = memo(forwardRef((props, ref) => {
     const dropdown = createDropdown();
 
     return (
-        <span {...ObjectUtils.findDiffKeys(props, AutoComplete.defaultProps)} ref={elementRef} id={idState} style={props.style} className={className} aria-haspopup="listbox" aria-expanded={overlayVisibleState} aria-owns={listId}>
-            {input}
-            {loader}
-            {dropdown}
-            <AutoCompletePanel ref={overlayRef} virtualScrollerRef={virtualScrollerRef} {...props} listId={listId} onItemClick={selectItem} selectedItem={selectedItem}
-                onClick={onPanelClick} getOptionGroupLabel={getOptionGroupLabel} getOptionGroupChildren={getOptionGroupChildren}
-                in={overlayVisibleState} onEnter={onOverlayEnter} onEntering={onOverlayEntering} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited} />
-        </span>
+        <>
+            <span {...ObjectUtils.findDiffKeys(props, AutoComplete.defaultProps)} ref={elementRef} id={idState} style={props.style} className={className} aria-haspopup="listbox" aria-expanded={overlayVisibleState} aria-owns={listId}>
+                {input}
+                {loader}
+                {dropdown}
+                <AutoCompletePanel ref={overlayRef} virtualScrollerRef={virtualScrollerRef} {...props} listId={listId} onItemClick={selectItem} selectedItem={selectedItem}
+                    onClick={onPanelClick} getOptionGroupLabel={getOptionGroupLabel} getOptionGroupChildren={getOptionGroupChildren}
+                    in={overlayVisibleState} onEnter={onOverlayEnter} onEntering={onOverlayEntering} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited} />
+            </span>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 

diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
@@ -1,37 +1,15 @@
 import React, { forwardRef, memo, useEffect, useRef } from 'react';
-import { tip } from '../tooltip/Tooltip';
 import { Ripple } from '../ripple/Ripple';
-import { ObjectUtils, classNames, IconUtils } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
+import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Button = memo(forwardRef((props, ref) => {
     const elementRef = useRef(ref);
-    const tooltipRef = useRef(null);
 
     useEffect(() => {
         ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const createIcon = () => {
         const icon = props.loading ? props.loadingIcon : props.icon;
         const className = classNames('p-button-icon p-c', {
@@ -60,6 +38,7 @@ export const Button = memo(forwardRef((props, ref) => {
         return null;
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const disabled = props.disabled || props.loading;
     const buttonProps = ObjectUtils.findDiffKeys(props, Button.defaultProps);
     const className = classNames('p-button p-component', props.className, {
@@ -76,13 +55,16 @@ export const Button = memo(forwardRef((props, ref) => {
     const badge = createBadge();
 
     return (
-        <button ref={elementRef} {...buttonProps} className={className} disabled={disabled}>
-            {icon}
-            {label}
-            {props.children}
-            {badge}
-            <Ripple />
-        </button>
+        <>
+            <button ref={elementRef} {...buttonProps} className={className} disabled={disabled}>
+                {icon}
+                {label}
+                {props.children}
+                {badge}
+                <Ripple />
+            </button>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
@@ -1,13 +1,12 @@
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import PrimeReact, { localeOption, localeOptions } from '../api/Api';
-import { CalendarPanel } from './CalendarPanel';
-import { InputText } from '../inputtext/InputText';
 import { Button } from '../button/Button';
-import { tip } from '../tooltip/Tooltip';
-import { Ripple } from '../ripple/Ripple';
+import { useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { InputText } from '../inputtext/InputText';
 import { OverlayService } from '../overlayservice/OverlayService';
-import { DomHandler, ObjectUtils, classNames, mask, ZIndexUtils } from '../utils/Utils';
-import { useMountEffect, useUnmountEffect, useUpdateEffect, useOverlayListener, usePrevious } from '../hooks/Hooks';
+import { Ripple } from '../ripple/Ripple';
+import { classNames, DomHandler, mask, ObjectUtils, ZIndexUtils } from '../utils/Utils';
+import { CalendarPanel } from './CalendarPanel';
 
 export const Calendar = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
@@ -16,7 +15,6 @@ export const Calendar = memo(forwardRef((props, ref) => {
     const elementRef = useRef(null);
     const overlayRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
     const navigation = useRef(null);
     const ignoreFocusFunctionality = useRef(false);
     const isKeydown = useRef(false);
@@ -2192,19 +2190,6 @@ export const Calendar = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: inputRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useMountEffect(() => {
         let viewDate = getViewDate(props.viewDate);
         validateDate(viewDate);
@@ -2270,11 +2255,6 @@ export const Calendar = memo(forwardRef((props, ref) => {
             touchUIMask.current = null;
         }
 
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-
         ZIndexUtils.clear(overlayRef.current);
     });
 
@@ -2746,7 +2726,8 @@ export const Calendar = memo(forwardRef((props, ref) => {
             return (
                 <InputText ref={inputRef} id={props.inputId} name={props.name} type="text" className={props.inputClassName} style={props.inputStyle}
                     readOnly={props.readOnlyInput} disabled={props.disabled} required={props.required} autoComplete="off" placeholder={props.placeholder} tabIndex={props.tabIndex}
-                    onInput={onUserInput} onFocus={onInputFocus} onBlur={onInputBlur} onKeyDown={onInputKeyDown} aria-labelledby={props.ariaLabelledBy} inputMode={props.inputMode} />
+                    onInput={onUserInput} onFocus={onInputFocus} onBlur={onInputBlur} onKeyDown={onInputKeyDown} aria-labelledby={props.ariaLabelledBy} inputMode={props.inputMode}
+                    tooltip={props.tooltip} tooltipOptions={props.tooltipOptions} />
             )
         }
 
@@ -2813,6 +2794,7 @@ export const Calendar = memo(forwardRef((props, ref) => {
         return null;
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-calendar p-component p-inputwrapper', props.className, {
         [`p-calendar-w-btn p-calendar-w-btn-${props.iconPos}`]: props.showIcon,
         'p-calendar-disabled': props.disabled,

diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
@@ -1,13 +1,12 @@
 import React, { forwardRef, memo, useEffect, useRef, useState } from 'react';
-import { tip } from '../tooltip/Tooltip';
+import { useUpdateEffect } from '../hooks/Hooks';
+import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
-import { useUpdateEffect, useUnmountEffect } from '../hooks/Hooks';
 
 export const Checkbox = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
     const elementRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
 
     const onClick = (event) => {
         if (!props.disabled && !props.readOnly && props.onChange) {
@@ -59,31 +58,12 @@ export const Checkbox = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: elementRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
     useUpdateEffect(() => {
         inputRef.current.checked = isChecked();
     }, [props.checked, props.trueValue]);
 
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const checked = isChecked();
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-checkbox p-component', {
         'p-checkbox-checked': checked,
         'p-checkbox-disabled': props.disabled,
@@ -97,15 +77,18 @@ export const Checkbox = memo(forwardRef((props, ref) => {
     const icon = IconUtils.getJSXIcon(checked && props.icon, { className: 'p-checkbox-icon p-c' }, { props, checked });
 
     return (
-        <div {...ObjectUtils.findDiffKeys(props, Checkbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick} onContextMenu={props.onContextMenu} onMouseDown={props.onMouseDown}>
-            <div className="p-hidden-accessible">
-                <input ref={inputRef} type="checkbox" id={props.inputId} name={props.name} tabIndex={props.tabIndex} defaultChecked={checked} aria-labelledby={props.ariaLabelledBy}
-                    onKeyDown={onKeyDown} onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} readOnly={props.readOnly} required={props.required} />
-            </div>
-            <div className={boxClass} role="checkbox" aria-checked={checked}>
-                {icon}
+        <>
+            <div {...ObjectUtils.findDiffKeys(props, Checkbox.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick} onContextMenu={props.onContextMenu} onMouseDown={props.onMouseDown}>
+                <div className="p-hidden-accessible">
+                    <input ref={inputRef} type="checkbox" id={props.inputId} name={props.name} tabIndex={props.tabIndex} defaultChecked={checked} aria-labelledby={props.ariaLabelledBy}
+                        onKeyDown={onKeyDown} onFocus={onFocus} onBlur={onBlur} disabled={props.disabled} readOnly={props.readOnly} required={props.required} />
+                </div>
+                <div className={boxClass} role="checkbox" aria-checked={checked}>
+                    {icon}
+                </div>
             </div>
-        </div>
+            {hasTooltip && <Tooltip target={elementRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));
 

diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
@@ -1,14 +1,12 @@
 import React, { forwardRef, memo, useEffect, useMemo, useRef, useState } from 'react';
-import { tip } from '../tooltip/Tooltip';
+import { Tooltip } from '../tooltip/Tooltip';
 import { classNames, ObjectUtils } from '../utils/Utils';
-import { useUnmountEffect } from '../hooks/Hooks';
 
 export const Chips = memo(forwardRef((props, ref) => {
     const [focusedState, setFocusedState] = useState(false);
     const elementRef = useRef(null);
     const listRef = useRef(null);
     const inputRef = useRef(props.inputRef);
-    const tooltipRef = useRef(null);
 
     const removeItem = (event, index) => {
         if (props.disabled && props.readOnly) {
@@ -157,27 +155,6 @@ export const Chips = memo(forwardRef((props, ref) => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
 
-    useEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.update({ content: props.tooltip, ...(props.tooltipOptions || {}) });
-        }
-        else if (props.tooltip) {
-            tooltipRef.current = tip({
-                target: inputRef.current,
-                targetContainer: listRef.current,
-                content: props.tooltip,
-                options: props.tooltipOptions
-            });
-        }
-    }, [props.tooltip, props.tooltipOptions]);
-
-    useUnmountEffect(() => {
-        if (tooltipRef.current) {
-            tooltipRef.current.destroy();
-            tooltipRef.current = null;
-        }
-    });
-
     const createRemoveIcon = (value, index) => {
         if (!props.disabled && !props.readOnly && isRemovable(value, index)) {
             return <span className="p-chips-token-icon pi pi-times-circle" onClick={(event) => removeItem(event, index)}></span>
@@ -229,16 +206,20 @@ export const Chips = memo(forwardRef((props, ref) => {
         )
     }
 
+    const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const className = classNames('p-chips p-component p-inputwrapper', {
         'p-inputwrapper-filled': isFilled,
         'p-inputwrapper-focus': focusedState
     }, props.className);
     const list = createList();
 
     return (
-        <div ref={elementRef} id={props.id} className={className} style={props.style}>
-            {list}
-        </div>
+        <>
+            <div ref={elementRef} id={props.id} className={className} style={props.style}>
+                {list}
+            </div>
+            {hasTooltip && <Tooltip target={inputRef} content={props.tooltip} {...props.tooltipOptions} />}
+        </>
     )
 }));