Skip to content

Commit

Permalink
Related #4602 - Refactor for data-p- attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ulasturann
ulasturann committed Sep 17, 2023
1 parent 2660f80 commit 090116c
Show file tree
Hide file tree
Showing 33 changed files with 238 additions and 222 deletions.
16 changes: 10 additions & 6 deletions components/lib/accordion/Accordion.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as React from 'react';
import { ariaLabel } from '../api/Api';
import { CSSTransition } from '../csstransition/CSSTransition';
import { useMountEffect } from '../hooks/Hooks';
import { IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils';
import { classNames, IconUtils, mergeProps, ObjectUtils, UniqueComponentId } from '../utils/Utils';
import { AccordionBase, AccordionTabBase } from './AccordionBase';
import { ChevronRightIcon } from '../icons/chevronright';
import { ChevronDownIcon } from '../icons/chevrondown';
Expand Down Expand Up @@ -101,6 +101,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
}

const createTabHeader = (tab, selected, index) => {
const style = { ...(getTabProp(tab, 'style') || {}), ...(getTabProp(tab, 'headerStyle') || {}) };
const headerId = idState + '_header_' + index;
const ariaControls = idState + '_content_' + index;
const tabIndex = getTabProp(tab, 'disabled') ? -1 : getTabProp(tab, 'tabIndex');
Expand All @@ -122,8 +123,10 @@ export const Accordion = React.forwardRef((inProps, ref) => {
const label = selected ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
const headerProps = mergeProps(
{
className: cx('tab.header', { selected, getTabProp, tab }),
style: sx('tab.header', { getTabProp, tab })
className: classNames(getTabProp(tab, 'headerClassName'), getTabProp(tab, 'className'), cx('tab.header', { selected, getTabProp, tab })),
style,
'data-p-highlight': selected,
'data-p-disabled': getTabProp(tab, 'disabled')
},
getTabPT(tab, 'header', index)
);
Expand Down Expand Up @@ -154,15 +157,16 @@ export const Accordion = React.forwardRef((inProps, ref) => {
};

const createTabContent = (tab, selected, index) => {
const style = { ...(getTabProp(tab, 'style') || {}), ...(getTabProp(tab, 'contentStyle') || {}) };
const contentId = idState + '_content_' + index;
const ariaLabelledby = idState + '_header_' + index;
const contentRef = React.createRef();
const toggleableContentProps = mergeProps(
{
id: contentId,
ref: contentRef,
className: cx('tab.toggleablecontent', { getTabProp, tab }),
style: sx('tab.toggleablecontent', { getTabProp, tab }),
className: classNames(getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'), cx('tab.toggleablecontent')),
style,
role: 'region',
'aria-labelledby': ariaLabelledby
},
Expand Down Expand Up @@ -219,7 +223,7 @@ export const Accordion = React.forwardRef((inProps, ref) => {
const tabs = createTabs();
const rootProps = mergeProps(
{
className: cx('root'),
className: classNames(props.className, cx('root')),
style: props.style
},
AccordionBase.getOtherProps(props),
Expand Down
27 changes: 7 additions & 20 deletions components/lib/accordion/AccordionBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,34 +2,22 @@ import { ComponentBase } from '../componentbase/ComponentBase';
import { ObjectUtils, classNames } from '../utils/Utils';

const classes = {
root: ({ props }) => classNames('p-accordion p-component', props.className),
root: 'p-accordion p-component',
tab: {
root: ({ selected }) =>
classNames('p-accordion-tab', {
'p-accordion-tab-active': selected
}),
content: 'p-accordion-content',
header: ({ selected, getTabProp, tab }) =>
classNames(
'p-accordion-header',
{
'p-highlight': selected,
'p-disabled': getTabProp(tab, 'disabled')
},
getTabProp(tab, 'headerClassName'),
getTabProp(tab, 'className')
),
classNames('p-accordion-header', {
'p-highlight': selected,
'p-disabled': getTabProp(tab, 'disabled')
}),
headeraction: 'p-accordion-header-link',
headericon: 'p-accordion-toggle-icon',
headertitle: 'p-accordion-header-text',
toggleablecontent: ({ getTabProp, tab }) => classNames('p-toggleable-content', getTabProp(tab, 'contentClassName'), getTabProp(tab, 'className'))
}
};

const inlineStyles = {
tab: {
toggleablecontent: ({ getTabProp, tab }) => ({ ...(getTabProp(tab, 'style') || {}), ...(getTabProp(tab, 'contentStyle') || {}) }),
header: ({ getTabProp, tab }) => ({ ...(getTabProp(tab, 'style') || {}), ...(getTabProp(tab, 'headerStyle') || {}) })
toggleablecontent: 'p-toggleable-content'
}
};

Expand Down Expand Up @@ -70,8 +58,7 @@ export const AccordionBase = ComponentBase.extend({
},
css: {
classes,
styles,
inlineStyles
styles
}
});

Expand Down
31 changes: 20 additions & 11 deletions components/lib/autocomplete/AutoComplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { TimesCircleIcon } from '../icons/timescircle';
import { InputText } from '../inputtext/InputText';
import { OverlayService } from '../overlayservice/OverlayService';
import { Tooltip } from '../tooltip/Tooltip';
import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, mergeProps } from '../utils/Utils';
import { DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
import { AutoCompleteBase } from './AutoCompleteBase';
import { AutoCompletePanel } from './AutoCompletePanel';

Expand Down Expand Up @@ -201,7 +201,8 @@ export const AutoComplete = React.memo(
if (props.autoHighlight && props.suggestions && props.suggestions.length) {
const element = getScrollableElement().firstChild.firstChild;

DomHandler.addClass(element, 'p-highlight');
!isUnstyled() && DomHandler.addClass(element, 'p-highlight');
element.current.setAttribute('data-p-highlight', true);
}
};

Expand Down Expand Up @@ -274,7 +275,8 @@ export const AutoComplete = React.memo(
let nextElement = findNextItem(highlightItem);

if (nextElement) {
DomHandler.addClass(nextElement, 'p-highlight');
!isUnstyled() && DomHandler.addClass(nextElement, 'p-highlight');
nextElement.setAttribute('data-p-highlight', true);
DomHandler.removeClass(highlightItem, 'p-highlight');
DomHandler.scrollInView(getScrollableElement(), nextElement);
}
Expand All @@ -286,7 +288,8 @@ export const AutoComplete = React.memo(
}

if (highlightItem) {
DomHandler.addClass(highlightItem, 'p-highlight');
!isUnstyled() && DomHandler.addClass(highlightItem, 'p-highlight');
highlightItem.setAttribute('data-p-highlight', true);
}
}

Expand All @@ -299,8 +302,10 @@ export const AutoComplete = React.memo(
let previousElement = findPrevItem(highlightItem);

if (previousElement) {
DomHandler.addClass(previousElement, 'p-highlight');
DomHandler.removeClass(highlightItem, 'p-highlight');
!isUnstyled() && DomHandler.addClass(previousElement, 'p-highlight');
previousElement.setAttribute('data-p-highlight', true);
!isUnstyled() && DomHandler.removeClass(highlightItem, 'p-highlight');
highlightItem.setAttribute('data-p-highlight', false);
DomHandler.scrollInView(getScrollableElement(), previousElement);
}
}
Expand Down Expand Up @@ -433,12 +438,14 @@ export const AutoComplete = React.memo(

const onMultiInputFocus = (event) => {
onInputFocus(event);
DomHandler.addClass(multiContainerRef.current, 'p-focus');
!isUnstyled() && DomHandler.addClass(multiContainerRef.current, 'p-focus');
multiContainerRef.current.setAttribute('data-p-focus', true);
};

const onMultiInputBlur = (event) => {
onInputBlur(event);
DomHandler.removeClass(multiContainerRef.current, 'p-focus');
!isUnstyled() && DomHandler.removeClass(multiContainerRef.current, 'p-focus');
multiContainerRef.current.setAttribute('data-p-focus', false);
};

const isSelected = (val) => {
Expand Down Expand Up @@ -532,7 +539,7 @@ export const AutoComplete = React.memo(
aria-controls={ariaControls}
aria-haspopup="listbox"
aria-expanded={overlayVisibleState}
className={cx('input')}
className={classNames(props.inputClassName, cx('input'))}
style={props.inputStyle}
autoComplete="off"
readOnly={props.readOnly}
Expand Down Expand Up @@ -654,7 +661,9 @@ export const AutoComplete = React.memo(
onClick: allowMoreValues ? onMultiContainerClick : undefined,
onContextMenu: props.onContextMenu,
onMouseDown: props.onMouseDown,
onDoubleClick: props.onDblClick
onDoubleClick: props.onDblClick,
'data-p-focus': focusedState,
'data-p-disabled': props.disabled
},
ptm('container')
);
Expand Down Expand Up @@ -721,7 +730,7 @@ export const AutoComplete = React.memo(
id: idState,
ref: elementRef,
style: props.style,
className: cx('root', { focusedState })
className: classNames(props.className, cx('root', { focusedState }))
},
otherProps,
ptm('root')
Expand Down
22 changes: 9 additions & 13 deletions components/lib/autocomplete/AutoCompleteBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,12 @@ import { classNames } from '../utils/Utils';

const classes = {
root: ({ props, focusedState }) =>
classNames(
'p-autocomplete p-component p-inputwrapper',
{
'p-autocomplete-dd': props.dropdown,
'p-autocomplete-multiple': props.multiple,
'p-inputwrapper-filled': props.value,
'p-inputwrapper-focus': focusedState
},
props.className
),
classNames('p-autocomplete p-component p-inputwrapper', {
'p-autocomplete-dd': props.dropdown,
'p-autocomplete-multiple': props.multiple,
'p-inputwrapper-filled': props.value,
'p-inputwrapper-focus': focusedState
}),
container: ({ props }) =>
classNames('p-autocomplete-multiple-container p-component p-inputtext', {
'p-disabled': props.disabled
Expand All @@ -25,11 +21,11 @@ const classes = {
tokenLabel: 'p-autocomplete-token-label',
inputToken: 'p-autocomplete-input-token',
input: ({ props }) =>
classNames('p-autocomplete-input', props.inputClassName, {
classNames('p-autocomplete-input', {
'p-autocomplete-dd-input': props.dropdown
}),
panel: ({ props, context }) =>
classNames('p-autocomplete-panel p-component', props.panelClassName, {
panel: ({ context }) =>
classNames('p-autocomplete-panel p-component', {
'p-input-filled': (context && context.inputStyle === 'filled') || PrimeReact.inputStyle === 'filled',
'p-ripple-disabled': (context && context.ripple === false) || PrimeReact.ripple === false
}),
Expand Down
14 changes: 8 additions & 6 deletions components/lib/autocomplete/AutoCompletePanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { localeOption, PrimeReactContext } from '../api/Api';
import { CSSTransition } from '../csstransition/CSSTransition';
import { Portal } from '../portal/Portal';
import { Ripple } from '../ripple/Ripple';
import { mergeProps, ObjectUtils } from '../utils/Utils';
import { classNames, mergeProps, ObjectUtils } from '../utils/Utils';
import { VirtualScroller } from '../virtualscroller/VirtualScroller';

export const AutoCompletePanel = React.memo(
Expand Down Expand Up @@ -49,12 +49,13 @@ export const AutoCompletePanel = React.memo(
const itemProps = mergeProps(
{
role: 'option',
'aria-selected': selected,
className: cx('item', { optionGroupLabel: props.optionGroupLabel, suggestion: item }),
style,
onClick: (e) => props.onItemClick(e, item),
'aria-selected': selected,
'data-group': i,
'data-index': j
'data-index': j,
'data-p-disabled': suggestion.disabled
},
getPTOptions(item, 'item')
);
Expand Down Expand Up @@ -93,12 +94,13 @@ export const AutoCompletePanel = React.memo(
const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion;
const itemProps = mergeProps(
{
index,
role: 'option',
'aria-selected': props.selectedItem === suggestion,
className: cx('item', { suggestion }),
style,
onClick: (e) => props.onItemClick(e, suggestion),
index
'aria-selected': props.selectedItem === suggestion,
'data-p-disabled': suggestion.disabled
},
getPTOptions(suggestion, 'item')
);
Expand Down Expand Up @@ -199,7 +201,7 @@ export const AutoCompletePanel = React.memo(
const footer = createFooter();
const panelProps = mergeProps(
{
className: cx('panel', context),
className: classNames(props.panelClassName, cx('panel', { context })),
style,
onClick: (e) => props.onClick(e)
},
Expand Down
4 changes: 2 additions & 2 deletions components/lib/blockui/BlockUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PrimeReact, { PrimeReactContext } from '../api/Api';
import { useHandleStyle } from '../componentbase/ComponentBase';
import { useMountEffect, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
import { Portal } from '../portal/Portal';
import { DomHandler, ObjectUtils, ZIndexUtils, mergeProps } from '../utils/Utils';
import { DomHandler, ObjectUtils, ZIndexUtils, classNames, mergeProps } from '../utils/Utils';
import { BlockUIBase } from './BlockUIBase';

export const BlockUI = React.forwardRef((inProps, ref) => {
Expand Down Expand Up @@ -86,7 +86,7 @@ export const BlockUI = React.forwardRef((inProps, ref) => {
const appendTo = props.fullScreen ? document.body : 'self';
const maskProps = mergeProps(
{
className: cx('mask'),
className: classNames(props.className, cx('mask')),
style: {
...props.style,
position: props.fullScreen ? 'fixed' : 'absolute',
Expand Down
10 changes: 3 additions & 7 deletions components/lib/blockui/BlockUIBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,9 @@ import { classNames } from '../utils/Utils';
const classes = {
root: ({ props }) => classNames('p-blockui-container', props.containerClassName),
mask: ({ props }) =>
classNames(
'p-blockui p-component-overlay p-component-overlay-enter',
{
'p-blockui-document': props.fullScreen
},
props.className
)
classNames('p-blockui p-component-overlay p-component-overlay-enter', {
'p-blockui-document': props.fullScreen
})
};

const styles = `
Expand Down
Loading

0 comments on commit 090116c

Please sign in to comment.