Skip to content

Commit

Permalink
Fix primefaces#2963: Expose ref and element
Browse files Browse the repository at this point in the history
  • Loading branch information
melloware committed Jul 9, 2022
1 parent 5ff5214 commit fb34e06
Show file tree
Hide file tree
Showing 87 changed files with 441 additions and 37 deletions.
8 changes: 7 additions & 1 deletion components/lib/accordion/Accordion.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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());
Expand Down Expand Up @@ -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>
)
Expand Down
3 changes: 3 additions & 0 deletions components/lib/autocomplete/AutoComplete.js
Original file line number Diff line number Diff line change
Expand Up @@ -455,6 +455,9 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {

React.useImperativeHandle(ref, () => ({
search,
getElement: () => elementRef.current,
getOverlay: () => overlayRef.current,
getInput: () => inputRef.current,
...props
}));

Expand Down
8 changes: 7 additions & 1 deletion components/lib/avatar/Avatar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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,
Expand All @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion components/lib/avatargroup/AvatarGroup.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down
8 changes: 7 additions & 1 deletion components/lib/badge/Badge.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
)
Expand Down
4 changes: 3 additions & 1 deletion components/lib/blockui/BlockUI.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => {
Expand Down Expand Up @@ -65,6 +66,7 @@ export const BlockUI = React.forwardRef((props, ref) => {
React.useImperativeHandle(ref, () => ({
block,
unblock,
getElement: () => elementRef.current,
...props
}));

Expand All @@ -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>
Expand Down
8 changes: 7 additions & 1 deletion components/lib/breadcrumb/BreadCrumb.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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}
Expand Down
5 changes: 5 additions & 0 deletions components/lib/button/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
3 changes: 3 additions & 0 deletions components/lib/calendar/Calendar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
}));

Expand Down
1 change: 1 addition & 0 deletions components/lib/captcha/Captcha.js
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ export const Captcha = React.memo(React.forwardRef((props, ref) => {
React.useImperativeHandle(ref, () => ({
reset,
getResponse,
getElement: () => elementRef.current,
...props
}));

Expand Down
5 changes: 5 additions & 0 deletions components/lib/carousel/Carousel.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
8 changes: 8 additions & 0 deletions components/lib/cascadeselect/CascadeSelect.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down
4 changes: 3 additions & 1 deletion components/lib/chart/Chart.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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
Expand All @@ -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>
);
Expand Down
6 changes: 6 additions & 0 deletions components/lib/checkbox/Checkbox.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down
8 changes: 7 additions & 1 deletion components/lib/chip/Chip.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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();
}));

Expand Down
6 changes: 6 additions & 0 deletions components/lib/chips/Chips.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down
9 changes: 9 additions & 0 deletions components/lib/colorpicker/ColorPicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand Down
1 change: 1 addition & 0 deletions components/lib/contextmenu/ContextMenu.js
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ export const ContextMenu = React.memo(React.forwardRef((props, ref) => {
React.useImperativeHandle(ref, () => ({
show,
hide,
getElement: () => menuRef.current,
...props
}));

Expand Down
5 changes: 4 additions & 1 deletion components/lib/datascroller/DataScroller.js
Original file line number Diff line number Diff line change
Expand Up @@ -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([]);
Expand Down Expand Up @@ -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
}));

Expand Down Expand Up @@ -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}
Expand Down
3 changes: 3 additions & 0 deletions components/lib/datatable/DataTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -1325,6 +1325,9 @@ export const DataTable = React.forwardRef((props, ref) => {
closeEditingCell,
restoreTableState,
clearState,
getElement: () => elementRef.current,
getTable: () => tableRef.current,
getVirtualScroller: () => virtualScrollerRef.current,
...props
}));

Expand Down
8 changes: 7 additions & 1 deletion components/lib/dataview/DataView.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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);
Expand All @@ -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}
Expand Down
5 changes: 5 additions & 0 deletions components/lib/deferredcontent/DeferredContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,11 @@ export const DeferredContent = React.forwardRef((props, ref) => {
props.onLoad && props.onLoad(event);
}

React.useImperativeHandle(ref, () => ({
getElement: () => elementRef.current,
...props
}));

useMountEffect(() => {
if (!loadedState) {
shouldLoad() ? load() : bindScrollListener();
Expand Down
Loading

0 comments on commit fb34e06

Please sign in to comment.