Skip to content

Commit

Permalink
fix: replace react useId with lodash uniqueId (#11351) (#11357)
Browse files Browse the repository at this point in the history 
* fix: replace react useId with lodash uniqueId (#11351)

* fix: use `GenerateId` instead of lodash.uniqueId
  • Loading branch information
@logonoff
logonoff authored Dec 19, 2024
1 parent 6a1686f commit 1c3dd97
Show file tree
Hide file tree
Showing 2 changed files with 124 additions and 120 deletions.
215 changes: 108 additions & 107 deletions packages/react-core/src/components/Card/CardHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { Button } from '../Button';
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
import { Radio } from '../Radio';
import { Checkbox } from '../Checkbox';
import { GenerateId } from '../../helpers/GenerateId/GenerateId';

export interface CardHeaderActionsObject {
/** Actions of the card header */
Expand Down Expand Up @@ -87,122 +88,122 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
toggleButtonProps,
isToggleRightAligned,
...props
}: CardHeaderProps) => {
const uniqueId = React.useId();

return (
<CardContext.Consumer>
{({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
const cardHeaderToggle = (
<div className={css(styles.cardHeaderToggle)}>
<Button
variant="plain"
type="button"
onClick={(evt) => {
onExpand(evt, cardId);
}}
{...toggleButtonProps}
icon={
<span className={css(styles.cardHeaderToggleIcon)}>
<AngleRightIcon />
</span>
}
/>
</div>
);

const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
if (actions?.actions && isClickableOrSelectableOnly) {
// eslint-disable-next-line no-console
console.error(
`Card: ${
isClickable ? 'Clickable' : 'Selectable'
} only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
}: CardHeaderProps) => (
<GenerateId>
{(randomId) => (
<CardContext.Consumer>
{({ cardId, isClickable, isSelectable, isSelected, isDisabled: isCardDisabled }) => {
const cardHeaderToggle = (
<div className={css(styles.cardHeaderToggle)}>
<Button
variant="plain"
type="button"
onClick={(evt) => {
onExpand(evt, cardId);
}}
{...toggleButtonProps}
icon={
<span className={css(styles.cardHeaderToggleIcon)}>
<AngleRightIcon />
</span>
}
/>
</div>
);
}

const isClickableOnlyCard = isClickable && !isSelectable;
if (
(isClickableOnlyCard || isSelectable) &&
!selectableActions?.selectableActionAriaLabel &&
!selectableActions?.selectableActionAriaLabelledby
) {
// eslint-disable-next-line no-console
console.error(
`Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
);
}
const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
if (actions?.actions && isClickableOrSelectableOnly) {
// eslint-disable-next-line no-console
console.error(
`Card: ${
isClickable ? 'Clickable' : 'Selectable'
} only cards should not contain any other actions. If you wish to include additional actions, use a clickable and selectable card.`
);
}

const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
const getSelectableProps = () => ({
className: css('pf-m-standalone'),
inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
label: <></>,
'aria-label': selectableActions.selectableActionAriaLabel,
'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
id: selectableActions.selectableActionId ?? `card-selectable-${uniqueId}`,
name: selectableActions.name,
isDisabled: isCardDisabled,
onChange: selectableActions.onChange,
isChecked: selectableActions.isChecked ?? isSelected,
...selectableActions.selectableActionProps
});
const isClickableOnlyCard = isClickable && !isSelectable;
if (
(isClickableOnlyCard || isSelectable) &&
!selectableActions?.selectableActionAriaLabel &&
!selectableActions?.selectableActionAriaLabelledby
) {
// eslint-disable-next-line no-console
console.error(
`Card: ${isClickableOnlyCard ? 'Clickable-only cards' : 'Cards with a selectable input'} must have either the selectableActions.selectableActionAriaLabel or selectableActions.selectableActionAriaLabelledby prop passed in order to provide an accessible name to the clickable element.`
);
}

const isClickableLinkCard = selectableActions?.to !== undefined;
const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
const getClickableProps = () => {
const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
const baseProps = {
className: css(
'pf-v6-c-card__clickable-action',
isDisabledLinkCard && styles.modifiers.disabled,
selectableActions?.isHidden && 'pf-v6-screen-reader'
),
id: selectableActions.selectableActionId,
const SelectableCardInput = selectableActions?.variant === 'single' ? Radio : Checkbox;
const getSelectableProps = () => ({
className: css('pf-m-standalone'),
inputClassName: css(selectableActions?.isHidden && 'pf-v6-screen-reader'),
label: <></>,
'aria-label': selectableActions.selectableActionAriaLabel,
'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
id: selectableActions.selectableActionId ?? `card-selectable-${randomId}`,
name: selectableActions.name,
isDisabled: isCardDisabled,
onChange: selectableActions.onChange,
isChecked: selectableActions.isChecked ?? isSelected,
...selectableActions.selectableActionProps
};
});

if (isClickableLinkCard) {
return {
...baseProps,
href: selectableActions.to,
...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
...(selectableActions.isExternalLink && { target: '_blank' })
const isClickableLinkCard = selectableActions?.to !== undefined;
const ClickableCardComponent = isClickableLinkCard ? 'a' : 'button';
const getClickableProps = () => {
const isDisabledLinkCard = isCardDisabled && isClickableLinkCard;
const baseProps = {
className: css(
'pf-v6-c-card__clickable-action',
isDisabledLinkCard && styles.modifiers.disabled,
selectableActions?.isHidden && 'pf-v6-screen-reader'
),
id: selectableActions.selectableActionId,
'aria-label': selectableActions.selectableActionAriaLabel,
'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
...selectableActions.selectableActionProps
};
}

return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
};
if (isClickableLinkCard) {
return {
...baseProps,
href: selectableActions.to,
...(isCardDisabled && { tabIndex: -1, 'aria-disabled': true }),
...(selectableActions.isExternalLink && { target: '_blank' })
};
}

return (
<div
className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
id={id}
{...props}
>
{onExpand && !isToggleRightAligned && cardHeaderToggle}
{(actions || (selectableActions && (isClickable || isSelectable))) && (
<CardActions
className={actions?.className}
hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
>
{actions?.actions}
{selectableActions && (isClickable || isSelectable) && (
<CardSelectableActions className={selectableActions?.className}>
{isSelectable && <SelectableCardInput {...getSelectableProps()} />}
{isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
</CardSelectableActions>
)}
</CardActions>
)}
{children && <CardHeaderMain>{children}</CardHeaderMain>}
{onExpand && isToggleRightAligned && cardHeaderToggle}
</div>
);
}}
</CardContext.Consumer>
);
};
return { ...baseProps, type: 'button', disabled: isCardDisabled, onClick: selectableActions.onClickAction };
};

return (
<div
className={css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className)}
id={id}
{...props}
>
{onExpand && !isToggleRightAligned && cardHeaderToggle}
{(actions || (selectableActions && (isClickable || isSelectable))) && (
<CardActions
className={actions?.className}
hasNoOffset={actions?.hasNoOffset || selectableActions?.hasNoOffset}
>
{actions?.actions}
{selectableActions && (isClickable || isSelectable) && (
<CardSelectableActions className={selectableActions?.className}>
{isSelectable && <SelectableCardInput {...getSelectableProps()} />}
{isClickableOnlyCard && <ClickableCardComponent {...getClickableProps()} />}
</CardSelectableActions>
)}
</CardActions>
)}
{children && <CardHeaderMain>{children}</CardHeaderMain>}
{onExpand && isToggleRightAligned && cardHeaderToggle}
</div>
);
}}
</CardContext.Consumer>
)}
</GenerateId>
);
CardHeader.displayName = 'CardHeader';
29 changes: 16 additions & 13 deletions packages/react-core/src/components/DataList/DataListCheck.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import * as React from 'react';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/DataList/data-list';
import { Checkbox, CheckboxProps } from '../Checkbox';
import { GenerateId } from '../../helpers/GenerateId/GenerateId';

export interface DataListCheckProps extends Omit<CheckboxProps, 'ref' | 'id'> {
/** Id of the DataList checkbox. */
Expand Down Expand Up @@ -46,21 +47,23 @@ export const DataListCheck: React.FunctionComponent<DataListCheckProps> = ({
otherControls = false,
...props
}: DataListCheckProps) => {
const uniqueId = React.useId();

const check = (
<div className={css(styles.dataListCheck)}>
<Checkbox
id={id ?? `datalist-check-${uniqueId}`}
isChecked={isChecked}
checked={checked}
defaultChecked={defaultChecked}
onChange={onChange}
aria-invalid={!isValid}
isDisabled={isDisabled}
isLabelWrapped
{...props}
/>
<GenerateId>
{(randomId) => (
<Checkbox
id={id ?? `datalist-check-${randomId}`}
isChecked={isChecked}
checked={checked}
defaultChecked={defaultChecked}
onChange={onChange}
aria-invalid={!isValid}
isDisabled={isDisabled}
isLabelWrapped
{...props}
/>
)}
</GenerateId>
</div>
);
return (
Expand Down

0 comments on commit 1c3dd97

Please sign in to comment.