Fix primefaces#2963: Expose ref and element

melloware · Jul 9, 2022 · 2506c81 · 2506c81
1 parent 5ff5214
commit 2506c81
Show file tree

Hide file tree

Showing 87 changed files with 443 additions and 37 deletions.
diff --git a/components/lib/accordion/Accordion.js b/components/lib/accordion/Accordion.js
@@ -8,6 +8,7 @@ export const AccordionTab = () => { }
 export const Accordion = React.forwardRef((props, ref) => {
     const [idState, setIdState] = React.useState(props.id);
     const [activeIndexState, setActiveIndexState] = React.useState(props.activeIndex);
+    const elementRef = React.useRef(null);
     const activeIndex = props.onTabChange ? props.activeIndex : activeIndexState;
 
     const shouldUseTab = (tab) => tab && tab.props.__TYPE === 'AccordionTab';
@@ -46,6 +47,11 @@ export const Accordion = React.forwardRef((props, ref) => {
         return props.multiple ? (activeIndex && activeIndex.some(i => i === index)) : activeIndex === index;
     }
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        ...props
+    }));
+
     useMountEffect(() => {
         if (!idState) {
             setIdState(UniqueComponentId());
@@ -123,7 +129,7 @@ export const Accordion = React.forwardRef((props, ref) => {
     const tabs = createTabs();
 
     return (
-        <div id={idState} className={className} style={props.style} {...otherProps}>
+        <div id={idState} ref={elementRef} className={className} style={props.style} {...otherProps}>
             {tabs}
         </div>
     )

diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
@@ -455,6 +455,10 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {
 
     React.useImperativeHandle(ref, () => ({
         search,
+        getElement: () => elementRef.current,
+        getOverlay: () => overlayRef.current,
+        getInput: () => inputRef.current,
+        getVirtualScroller: () => virtualScrollerRef.current,
         ...props
     }));
 

diff --git a/components/lib/avatar/Avatar.js b/components/lib/avatar/Avatar.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Avatar = React.forwardRef((props, ref) => {
+    const elementRef = React.useRef(null);
 
     const createContent = () => {
         if (props.image) {
@@ -17,6 +18,11 @@ export const Avatar = React.forwardRef((props, ref) => {
         return null;
     }
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        ...props
+    }));
+
     const otherProps = ObjectUtils.findDiffKeys(props, Avatar.defaultProps);
     const containerClassName = classNames('p-avatar p-component', {
         'p-avatar-image': props.image != null,
@@ -29,7 +35,7 @@ export const Avatar = React.forwardRef((props, ref) => {
     const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
 
     return (
-        <div className={containerClassName} style={props.style} {...otherProps}>
+        <div ref={elementRef} className={containerClassName} style={props.style} {...otherProps}>
             {content}
             {props.children}
         </div>

diff --git a/components/lib/avatargroup/AvatarGroup.js b/components/lib/avatargroup/AvatarGroup.js
@@ -2,11 +2,17 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const AvatarGroup = React.forwardRef((props, ref) => {
+    const elementRef = React.useRef(null);
     const otherProps = ObjectUtils.findDiffKeys(props, AvatarGroup.defaultProps);
     const className = classNames('p-avatar-group p-component', props.className);
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        ...props
+    }));
+
     return (
-        <div className={className} style={props.style} {...otherProps}>
+        <div ref={elementRef} className={className} style={props.style} {...otherProps}>
             {props.children}
         </div>
     )

diff --git a/components/lib/badge/Badge.js b/components/lib/badge/Badge.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Badge = React.memo(React.forwardRef((props, ref) => {
+    const elementRef = React.useRef(null);
     const otherProps = ObjectUtils.findDiffKeys(props, Badge.defaultProps);
     const className = classNames('p-badge p-component', {
         'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
@@ -11,8 +12,13 @@ export const Badge = React.memo(React.forwardRef((props, ref) => {
         [`p-badge-${props.severity}`]: props.severity !== null
     }, props.className);
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        ...props
+    }));
+
     return (
-        <span className={className} style={props.style} {...otherProps}>
+        <span ref={elementRef} className={className} style={props.style} {...otherProps}>
             {props.value}
         </span>
     )

diff --git a/components/lib/blockui/BlockUI.js b/components/lib/blockui/BlockUI.js
@@ -6,6 +6,7 @@ import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils
 
 export const BlockUI = React.forwardRef((props, ref) => {
     const [visibleState, setVisibleState] = React.useState(props.blocked);
+    const elementRef = React.useRef(null);
     const maskRef = React.useRef(null);
 
     const block = () => {
@@ -65,6 +66,7 @@ export const BlockUI = React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         block,
         unblock,
+        getElement: () => elementRef.current,
         ...props
     }));
 
@@ -91,7 +93,7 @@ export const BlockUI = React.forwardRef((props, ref) => {
     const mask = createMask();
 
     return (
-        <div id={props.id} className="p-blockui-container" {...otherProps}>
+        <div id={props.id} ref={elementRef} className="p-blockui-container" {...otherProps}>
             {props.children}
             {mask}
         </div>

diff --git a/components/lib/breadcrumb/BreadCrumb.js b/components/lib/breadcrumb/BreadCrumb.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const BreadCrumb = React.memo(React.forwardRef((props, ref) => {
+    const elementRef = React.useRef(null);
 
     const itemClick = (event, item) => {
         if (item.disabled) {
@@ -110,14 +111,19 @@ export const BreadCrumb = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        ...props
+    }));
+
     const otherProps = ObjectUtils.findDiffKeys(props, BreadCrumb.defaultProps);
     const className = classNames('p-breadcrumb p-component', props.className);
     const home = createHome();
     const items = createMenuitems();
     const separator = createSeparator();
 
     return (
-        <nav id={props.id} className={className} style={props.style} aria-label="Breadcrumb" {...otherProps}>
+        <nav id={props.id} ref={elementRef} className={className} style={props.style} aria-label="Breadcrumb" {...otherProps}>
             <ul>
                 {home}
                 {separator}

diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
@@ -38,6 +38,11 @@ export const Button = React.memo(React.forwardRef((props, ref) => {
         return null;
     }
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        ...props
+    }));
+
     const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     const disabled = props.disabled || props.loading;
     const otherProps = ObjectUtils.findDiffKeys(props, Button.defaultProps);

diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
@@ -2485,6 +2485,9 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
         getCurrentDateTime,
         getViewDate,
         updateViewDate,
+        getElement: () => elementRef.current,
+        getOverlay: () => overlayRef.current,
+        getInput: () => inputRef.current,
         ...props
     }));
 

diff --git a/components/lib/captcha/Captcha.js b/components/lib/captcha/Captcha.js
@@ -83,6 +83,7 @@ export const Captcha = React.memo(React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         reset,
         getResponse,
+        getElement: () => elementRef.current,
         ...props
     }));
 

diff --git a/components/lib/carousel/Carousel.js b/components/lib/carousel/Carousel.js
@@ -286,6 +286,11 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        ...props
+    }));
+
     useMountEffect(() => {
         if (elementRef.current) {
             attributeSelector.current = UniqueComponentId();

diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -182,6 +182,14 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
         DomHandler.alignOverlay(overlayRef.current, labelRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
     }
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        getOverlay: () => overlayRef.current,
+        getInput: () => inputRef.current,
+        getLabel: () => labelRef.current,
+        ...props
+    }));
+
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);

diff --git a/components/lib/chart/Chart.js b/components/lib/chart/Chart.js
@@ -3,6 +3,7 @@ import { useUnmountEffect } from '../hooks/Hooks';
 import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const Chart = React.memo(React.forwardRef((props, ref) => {
+    const elementRef = React.useRef(null);
     const chartRef = React.useRef(null);
     const canvasRef = React.useRef(null);
 
@@ -34,6 +35,7 @@ export const Chart = React.memo(React.forwardRef((props, ref) => {
         getCanvas: () => canvasRef.current,
         getChart: () => chartRef.current,
         getBase64Image: () => chartRef.current.toBase64Image(),
+        getElement: () => elementRef.current,
         generateLegend: () => chartRef.current && chartRef.current.generateLegend(),
         refresh: () => chartRef.current && chartRef.current.update(),
         ...props
@@ -55,7 +57,7 @@ export const Chart = React.memo(React.forwardRef((props, ref) => {
     const style = Object.assign({ width: props.width, height: props.height }, props.style);
 
     return (
-        <div id={props.id} style={style} className={className} {...otherProps}>
+        <div id={props.id} ref={elementRef} style={style} className={className} {...otherProps}>
             <canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
         </div>
     );

diff --git a/components/lib/checkbox/Checkbox.js b/components/lib/checkbox/Checkbox.js
@@ -45,6 +45,12 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {
         return props.checked === props.trueValue;
     }
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        getInput: () => inputRef.current,
+        ...props
+    }));
+
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);

diff --git a/components/lib/chip/Chip.js b/components/lib/chip/Chip.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { classNames, IconUtils, ObjectUtils } from '../utils/Utils';
 
 export const Chip = React.memo(React.forwardRef((props, ref) => {
+    const elementRef = React.useRef(null);
     const [visibleState, setVisibleState] = React.useState(true);
 
     const onKeyDown = (event) => {
@@ -48,12 +49,17 @@ export const Chip = React.memo(React.forwardRef((props, ref) => {
         const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();
 
         return (
-            <div className={className} style={props.style} {...otherProps}>
+            <div ref={elementRef} className={className} style={props.style} {...otherProps}>
                 {content}
             </div>
         )
     }
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        ...props
+    }));
+
     return visibleState && createElement();
 }));
 

diff --git a/components/lib/chips/Chips.js b/components/lib/chips/Chips.js
@@ -169,6 +169,12 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
         return ObjectUtils.getPropValue(props.removable, { value, index, props });
     }
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        getInput: () => inputRef.current,
+        ...props
+    }));
+
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);

diff --git a/components/lib/colorpicker/ColorPicker.js b/components/lib/colorpicker/ColorPicker.js
@@ -437,6 +437,15 @@ export const ColorPicker = React.memo(React.forwardRef((props, ref) => {
         }
     }
 
+    React.useImperativeHandle(ref, () => ({
+        show,
+        hide,
+        getElement: () => elementRef.current,
+        getOverlay: () => overlayRef.current,
+        getInput: () => inputRef.current,
+        ...props
+    }));
+
     React.useEffect(() => {
         ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);

diff --git a/components/lib/contextmenu/ContextMenu.js b/components/lib/contextmenu/ContextMenu.js
@@ -166,6 +166,7 @@ export const ContextMenu = React.memo(React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         show,
         hide,
+        getElement: () => menuRef.current,
         ...props
     }));
 

diff --git a/components/lib/datascroller/DataScroller.js b/components/lib/datascroller/DataScroller.js
@@ -5,6 +5,7 @@ import { classNames, ObjectUtils } from '../utils/Utils';
 
 export const DataScroller = React.memo(React.forwardRef((props, ref) => {
     const [dataToRenderState, setDataToRenderState] = React.useState([]);
+    const elementRef = React.useRef(null);
     const contentRef = React.useRef(null);
     const value = React.useRef(props.value);
     const dataToRender = React.useRef([]);
@@ -143,6 +144,8 @@ export const DataScroller = React.memo(React.forwardRef((props, ref) => {
     React.useImperativeHandle(ref, () => ({
         load,
         reset,
+        getElement: () => elementRef.current,
+        getContent: () => contentRef.current,
         ...props
     }));
 
@@ -200,7 +203,7 @@ export const DataScroller = React.memo(React.forwardRef((props, ref) => {
     const content = createContent();
 
     return (
-        <div id={props.id} className={className} {...otherProps}>
+        <div id={props.id} ref={elementRef} className={className} {...otherProps}>
             {header}
             {content}
             {footer}

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -1325,6 +1325,9 @@ export const DataTable = React.forwardRef((props, ref) => {
         closeEditingCell,
         restoreTableState,
         clearState,
+        getElement: () => elementRef.current,
+        getTable: () => tableRef.current,
+        getVirtualScroller: () => virtualScrollerRef.current,
         ...props
     }));
 

diff --git a/components/lib/dataview/DataView.js b/components/lib/dataview/DataView.js
@@ -40,6 +40,7 @@ export const DataViewItem = React.memo((props) => {
 export const DataView = React.memo(React.forwardRef((props, ref) => {
     const [firstState, setFirstState] = React.useState(props.first);
     const [rowsState, setRowsState] = React.useState(props.rows);
+    const elementRef = React.useRef(null);
     const first = props.onPage ? props.first : firstState;
     const rows = props.onPage ? props.rows : rowsState;
 
@@ -195,6 +196,11 @@ export const DataView = React.memo(React.forwardRef((props, ref) => {
         return data;
     }
 
+    React.useImperativeHandle(ref, () => ({
+        getElement: () => elementRef.current,
+        ...props
+    }));
+
     const data = processData();
 
     const otherProps = ObjectUtils.findDiffKeys(props, DataView.defaultProps);
@@ -210,7 +216,7 @@ export const DataView = React.memo(React.forwardRef((props, ref) => {
     const content = createContent(data);
 
     return (
-        <div id={props.id} style={props.style} className={className} {...otherProps}>
+        <div id={props.id} ref={elementRef} style={props.style} className={className} {...otherProps}>
             {loader}
             {header}
             {topPaginator}