Skip to content

Commit

Permalink
Fixed #2716 - Pass other standard element attributes to all components
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Apr 2, 2022
1 parent 852e505 commit a8f462a
Show file tree
Hide file tree
Showing 91 changed files with 236 additions and 134 deletions.
6 changes: 4 additions & 2 deletions components/lib/accordion/Accordion.js
View file
Expand Up @@ -96,14 +96,15 @@ export const Accordion = React.forwardRef((props, ref) => {
if (shouldUseTab(tab)) {
const key = idState + '_' + index;
const selected = isSelected(index);
const otherProps = ObjectUtils.findDiffKeys(tab.props, AccordionTab.defaultProps);
const tabHeader = createTabHeader(tab, selected, index);
const tabContent = createTabContent(tab, selected, index);
const tabClassName = classNames('p-accordion-tab', {
'p-accordion-tab-active': selected
});

return (
<div key={key} className={tabClassName}>
<div key={key} className={tabClassName} {...otherProps}>
{tabHeader}
{tabContent}
</div>
Expand All @@ -117,11 +118,12 @@ export const Accordion = React.forwardRef((props, ref) => {
return React.Children.map(props.children, createTab);
}

const otherProps = ObjectUtils.findDiffKeys(props, Accordion.defaultProps);
const className = classNames('p-accordion p-component', props.className);
const tabs = createTabs();

return (
<div id={idState} className={className} style={props.style}>
<div id={idState} className={className} style={props.style} {...otherProps}>
{tabs}
</div>
)
Expand Down
3 changes: 2 additions & 1 deletion components/lib/autocomplete/AutoComplete.js
View file
Expand Up @@ -537,6 +537,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {

const listId = idState + '_list';
const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
const otherProps = ObjectUtils.findDiffKeys(props, AutoComplete.defaultProps);
const className = classNames('p-autocomplete p-component p-inputwrapper', {
'p-autocomplete-dd': props.dropdown,
'p-autocomplete-multiple': props.multiple,
Expand All @@ -549,7 +550,7 @@ export const AutoComplete = React.memo(React.forwardRef((props, ref) => {

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}>
<span ref={elementRef} id={idState} style={props.style} className={className} aria-haspopup="listbox" aria-expanded={overlayVisibleState} aria-owns={listId} {...otherProps}>
{input}
{loader}
{dropdown}
Expand Down
6 changes: 3 additions & 3 deletions components/lib/avatar/Avatar.js
View file
Expand Up @@ -17,6 +17,7 @@ export const Avatar = React.forwardRef((props, ref) => {
return null;
}

const otherProps = ObjectUtils.findDiffKeys(props, Avatar.defaultProps);
const containerClassName = classNames('p-avatar p-component', {
'p-avatar-image': props.image != null,
'p-avatar-circle': props.shape === 'circle',
Expand All @@ -28,7 +29,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} onClick={props.onClick}>
<div className={containerClassName} style={props.style} {...otherProps}>
{content}
{props.children}
</div>
Expand All @@ -47,6 +48,5 @@ Avatar.defaultProps = {
className: null,
template: null,
imageAlt: 'avatar',
onImageError: null,
onClick: null
onImageError: null
}
5 changes: 3 additions & 2 deletions components/lib/avatargroup/AvatarGroup.js
View file
@@ -1,11 +1,12 @@
import * as React from 'react';
import { classNames } from '../utils/Utils';
import { classNames, ObjectUtils } from '../utils/Utils';

export const AvatarGroup = React.forwardRef((props, ref) => {
const otherProps = ObjectUtils.findDiffKeys(props, AvatarGroup.defaultProps);
const className = classNames('p-avatar-group p-component', props.className);

return (
<div className={className} style={props.style}>
<div className={className} style={props.style} {...otherProps}>
{props.children}
</div>
)
Expand Down
5 changes: 3 additions & 2 deletions components/lib/badge/Badge.js
View file
@@ -1,7 +1,8 @@
import * as React from 'react';
import { classNames } from '../utils/Utils';
import { classNames, ObjectUtils } from '../utils/Utils';

export const Badge = React.memo(React.forwardRef((props, ref) => {
const otherProps = ObjectUtils.findDiffKeys(props, Badge.defaultProps);
const className = classNames('p-badge p-component', {
'p-badge-no-gutter': props.value && String(props.value).length === 1,
'p-badge-dot': !props.value,
Expand All @@ -11,7 +12,7 @@ export const Badge = React.memo(React.forwardRef((props, ref) => {
}, props.className);

return (
<span className={className} style={props.style}>
<span className={className} style={props.style} {...otherProps}>
{props.value}
</span>
)
Expand Down
3 changes: 2 additions & 1 deletion components/lib/blockui/BlockUI.js
View file
Expand Up @@ -86,10 +86,11 @@ export const BlockUI = React.forwardRef((props, ref) => {
return null;
}

const otherProps = ObjectUtils.findDiffKeys(props, BlockUI.defaultProps);
const mask = createMask();

return (
<div id={props.id} className="p-blockui-container">
<div id={props.id} className="p-blockui-container" {...otherProps}>
{props.children}
{mask}
</div>
Expand Down
3 changes: 2 additions & 1 deletion components/lib/breadcrumb/BreadCrumb.js
View file
Expand Up @@ -94,13 +94,14 @@ export const BreadCrumb = React.memo(React.forwardRef((props, ref) => {
return null;
}

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">
<nav id={props.id} className={className} style={props.style} aria-label="Breadcrumb" {...otherProps}>
<ul>
{home}
{separator}
Expand Down
4 changes: 2 additions & 2 deletions components/lib/button/Button.js
View file
Expand Up @@ -40,7 +40,7 @@ export const Button = React.memo(React.forwardRef((props, ref) => {

const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
const disabled = props.disabled || props.loading;
const buttonProps = ObjectUtils.findDiffKeys(props, Button.defaultProps);
const otherProps = ObjectUtils.findDiffKeys(props, Button.defaultProps);
const className = classNames('p-button p-component', props.className, {
'p-button-icon-only': (props.icon || (props.loading && props.loadingIcon)) && !props.label,
'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
Expand All @@ -56,7 +56,7 @@ export const Button = React.memo(React.forwardRef((props, ref) => {

return (
<>
<button ref={elementRef} {...buttonProps} className={className} disabled={disabled}>
<button ref={elementRef} {...otherProps} className={className} disabled={disabled}>
{icon}
{label}
{props.children}
Expand Down
4 changes: 2 additions & 2 deletions components/lib/calendar/Calendar.js
View file
Expand Up @@ -2794,7 +2794,7 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
return null;
}

const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
const otherProps = ObjectUtils.findDiffKeys(props, Calendar.defaultProps);
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,
Expand All @@ -2817,7 +2817,7 @@ export const Calendar = React.memo(React.forwardRef((props, ref) => {
const footer = createFooter();

return (
<span ref={elementRef} id={props.id} className={className} style={props.style}>
<span ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
{content}
<CalendarPanel ref={overlayRef} className={panelClassName} style={props.panelStyle} appendTo={props.appendTo} inline={props.inline} onClick={onPanelClick} onMouseUp={onPanelMouseUp}
in={visible} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited}
Expand Down
5 changes: 4 additions & 1 deletion components/lib/captcha/Captcha.js
View file
@@ -1,5 +1,6 @@
import * as React from 'react';
import { useMountEffect, useUnmountEffect } from '../hooks/Hooks';
import { ObjectUtils } from '../utils/Utils';

export const Captcha = React.memo(React.forwardRef((props, ref) => {
const elementRef = React.useRef(null);
Expand Down Expand Up @@ -78,7 +79,9 @@ export const Captcha = React.memo(React.forwardRef((props, ref) => {
getResponse
}));

return <div ref={elementRef} id={props.id}></div>
const otherProps = ObjectUtils.findDiffKeys(props, Captcha.defaultProps);

return <div ref={elementRef} id={props.id} {...otherProps}></div>
}));

Captcha.displayName = 'Captcha';
Expand Down
3 changes: 2 additions & 1 deletion components/lib/card/Card.js
View file
Expand Up @@ -27,12 +27,13 @@ export const Card = React.forwardRef((props, ref) => {
)
}

const otherProps = ObjectUtils.findDiffKeys(props, Card.defaultProps);
const className = classNames('p-card p-component', props.className);
const header = createHeader();
const body = createBody();

return (
<div id={props.id} className={className} style={props.style}>
<div id={props.id} className={className} style={props.style} {...otherProps}>
{header}
{body}
</div>
Expand Down
3 changes: 2 additions & 1 deletion components/lib/carousel/Carousel.js
View file
Expand Up @@ -542,6 +542,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
)
}

const otherProps = ObjectUtils.findDiffKeys(props, Carousel.defaultProps);
const className = classNames('p-carousel p-component', {
'p-carousel-vertical': isVertical,
'p-carousel-horizontal': !isVertical
Expand All @@ -553,7 +554,7 @@ export const Carousel = React.memo(React.forwardRef((props, ref) => {
const footer = createFooter();

return (
<div ref={elementRef} id={props.id} className={className} style={props.style}>
<div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
{header}
<div className={contentClassName}>
{content}
Expand Down
3 changes: 2 additions & 1 deletion components/lib/cascadeselect/CascadeSelect.js
View file
Expand Up @@ -243,6 +243,7 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
}

const createElement = () => {
const otherProps = ObjectUtils.findDiffKeys(props, CascadeSelect.defaultProps);
const className = classNames('p-cascadeselect p-component p-inputwrapper', {
'p-disabled': props.disabled,
'p-focus': focusedState,
Expand All @@ -256,7 +257,7 @@ export const CascadeSelect = React.memo(React.forwardRef((props, ref) => {
const overlay = createOverlay();

return (
<div {...ObjectUtils.findDiffKeys(props, CascadeSelect.defaultProps)} ref={elementRef} id={props.id} className={className} style={props.style} onClick={onClick}>
<div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onClick}>
{keyboardHelper}
{labelElement}
{dropdownIcon}
Expand Down
5 changes: 3 additions & 2 deletions components/lib/chart/Chart.js
View file
@@ -1,6 +1,6 @@
import * as React from 'react';
import { useUnmountEffect } from '../hooks/Hooks';
import { classNames } from '../utils/Utils';
import { classNames, ObjectUtils } from '../utils/Utils';

export const Chart = React.memo(React.forwardRef((props, ref) => {
const chartRef = React.useRef(null);
Expand Down Expand Up @@ -43,11 +43,12 @@ export const Chart = React.memo(React.forwardRef((props, ref) => {
}
});

const otherProps = ObjectUtils.findDiffKeys(props, Chart.defaultProps);
const className = classNames('p-chart', props.className);
const style = Object.assign({ width: props.width, height: props.height }, props.style);

return (
<div id={props.id} style={style} className={className}>
<div id={props.id} style={style} className={className} {...otherProps}>
<canvas ref={canvasRef} width={props.width} height={props.height}></canvas>
</div>
);
Expand Down
3 changes: 2 additions & 1 deletion components/lib/checkbox/Checkbox.js
View file
Expand Up @@ -64,6 +64,7 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {

const checked = isChecked();
const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
const otherProps = ObjectUtils.findDiffKeys(props, Checkbox.defaultProps);
const className = classNames('p-checkbox p-component', {
'p-checkbox-checked': checked,
'p-checkbox-disabled': props.disabled,
Expand All @@ -78,7 +79,7 @@ export const Checkbox = React.memo(React.forwardRef((props, ref) => {

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 ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps} 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} />
Expand Down
3 changes: 2 additions & 1 deletion components/lib/chip/Chip.js
View file
Expand Up @@ -40,14 +40,15 @@ export const Chip = React.memo(React.forwardRef((props, ref) => {
}

const createElement = () => {
const otherProps = ObjectUtils.findDiffKeys(props, Chip.defaultProps);
const className = classNames('p-chip p-component', {
'p-chip-image': props.image != null
}, props.className);

const content = props.template ? ObjectUtils.getJSXElement(props.template, props) : createContent();

return (
<div className={className} style={props.style}>
<div className={className} style={props.style} {...otherProps}>
{content}
</div>
)
Expand Down
3 changes: 2 additions & 1 deletion components/lib/chips/Chips.js
View file
Expand Up @@ -207,6 +207,7 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {
}

const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
const otherProps = ObjectUtils.findDiffKeys(props, Chips.defaultProps);
const className = classNames('p-chips p-component p-inputwrapper', {
'p-inputwrapper-filled': isFilled,
'p-inputwrapper-focus': focusedState
Expand All @@ -215,7 +216,7 @@ export const Chips = React.memo(React.forwardRef((props, ref) => {

return (
<>
<div ref={elementRef} id={props.id} className={className} style={props.style}>
<div ref={elementRef} id={props.id} className={className} style={props.style} {...otherProps}>
{list}
</div>
{hasTooltip && <Tooltip target={inputRef} content={props.tooltip} {...props.tooltipOptions} />}
Expand Down
3 changes: 2 additions & 1 deletion components/lib/colorpicker/ColorPicker.js
View file
Expand Up @@ -510,6 +510,7 @@ export const ColorPicker = React.memo(React.forwardRef((props, ref) => {
}

const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
const otherProps = ObjectUtils.findDiffKeys(props, ColorPicker.defaultProps);
const className = classNames('p-colorpicker p-component', {
'p-colorpicker-overlay': !props.inline
}, props.className);
Expand All @@ -518,7 +519,7 @@ export const ColorPicker = React.memo(React.forwardRef((props, ref) => {

return (
<>
<div ref={elementRef} id={props.id} style={props.style} className={className}>
<div ref={elementRef} id={props.id} style={props.style} className={className} {...otherProps}>
{input}
<ColorPickerPanel ref={overlayRef} appendTo={props.appendTo} inline={props.inline} disabled={props.disabled} onClick={onPanelClick}
in={props.inline || overlayVisibleState} onEnter={onOverlayEnter} onEntered={onOverlayEntered} onExit={onOverlayExit} onExited={onOverlayExited}
Expand Down
4 changes: 2 additions & 2 deletions components/lib/confirmdialog/ConfirmDialog.js
View file
Expand Up @@ -128,13 +128,13 @@ export const ConfirmDialog = React.memo(React.forwardRef((props, ref) => {
const createElement = () => {
const currentProps = getCurrentProps();
const className = classNames('p-confirm-dialog', getPropValue('className'));
const dialogProps = ObjectUtils.findDiffKeys(currentProps, ConfirmDialog.defaultProps);
const otherProps = ObjectUtils.findDiffKeys(currentProps, ConfirmDialog.defaultProps);
const message = ObjectUtils.getJSXElement(getPropValue('message'), currentProps);
const icon = IconUtils.getJSXIcon(getPropValue('icon'), { className: 'p-confirm-dialog-icon' }, { props: currentProps });
const footer = createFooter();

return (
<Dialog visible={visibleState} {...dialogProps} className={className} footer={footer} onHide={hide} breakpoints={getPropValue('breakpoints')}>
<Dialog visible={visibleState} {...otherProps} className={className} footer={footer} onHide={hide} breakpoints={getPropValue('breakpoints')}>
{icon}
<span className="p-confirm-dialog-message">{message}</span>
</Dialog>
Expand Down
3 changes: 2 additions & 1 deletion components/lib/confirmpopup/ConfirmPopup.js
View file
Expand Up @@ -226,14 +226,15 @@ export const ConfirmPopup = React.memo(React.forwardRef((props, ref) => {
}

const createElement = () => {
const otherProps = ObjectUtils.findDiffKeys(props, ConfirmPopup.defaultProps);
const className = classNames('p-confirm-popup p-component', getPropValue('className'));
const content = createContent();
const footer = createFooter();

return (
<CSSTransition nodeRef={overlayRef} classNames="p-connected-overlay" in={visibleState} timeout={{ enter: 120, exit: 100 }} options={getPropValue('transitionOptions')}
unmountOnExit onEnter={onEnter} onEntered={onEntered} onExit={onExit} onExited={onExited}>
<div ref={overlayRef} id={getPropValue('id')} className={className} style={getPropValue('style')} onClick={onPanelClick}>
<div ref={overlayRef} id={getPropValue('id')} className={className} style={getPropValue('style')} {...otherProps} onClick={onPanelClick}>
{content}
{footer}
</div>
Expand Down
5 changes: 3 additions & 2 deletions components/lib/contextmenu/ContextMenu.js
View file
Expand Up @@ -3,7 +3,7 @@ import PrimeReact from '../api/Api';
import { CSSTransition } from '../csstransition/CSSTransition';
import { useEventListener, useMountEffect, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
import { Portal } from '../portal/Portal';
import { classNames, DomHandler, ZIndexUtils } from '../utils/Utils';
import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
import { ContextMenuSub } from './ContextMenuSub';

export const ContextMenu = React.memo(React.forwardRef((props, ref) => {
Expand Down Expand Up @@ -169,12 +169,13 @@ export const ContextMenu = React.memo(React.forwardRef((props, ref) => {
}));

const createContextMenu = () => {
const otherProps = ObjectUtils.findDiffKeys(props, ContextMenu.defaultProps);
const className = classNames('p-contextmenu p-component', props.className);

return (
<CSSTransition nodeRef={menuRef} classNames="p-contextmenu" in={visibleState} timeout={{ enter: 250, exit: 0 }} options={props.transitionOptions}
unmountOnExit onEnter={onEnter} onEntered={onEntered} onExit={onExit} onExited={onExited}>
<div ref={menuRef} id={props.id} className={className} style={props.style} onClick={onMenuClick} onMouseEnter={onMenuMouseEnter}>
<div ref={menuRef} id={props.id} className={className} style={props.style} {...otherProps} onClick={onMenuClick} onMouseEnter={onMenuMouseEnter}>
<ContextMenuSub model={props.model} root resetMenu={resetMenuState} onLeafClick={onLeafClick} />
</div>
</CSSTransition>
Expand Down

0 comments on commit a8f462a

Please sign in to comment.