@patternfly/react-core
Version:
This library provides a set of common React components for use with the PatternFly reference implementation.
69 lines • 5.42 kB
JavaScript
import { __rest } from "tslib";
import * as React from 'react';
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/Card/card';
import { CardContext } from './Card';
import { CardHeaderMain } from './CardHeaderMain';
import { CardActions } from './CardActions';
import { CardSelectableActions } from './CardSelectableActions';
import { Button } from '../Button';
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
import { Radio } from '../Radio';
import { Checkbox } from '../Checkbox';
export const CardHeader = (_a) => {
var { children, className, actions, selectableActions, id, onExpand, toggleButtonProps, isToggleRightAligned } = _a, props = __rest(_a, ["children", "className", "actions", "selectableActions", "id", "onExpand", "toggleButtonProps", "isToggleRightAligned"]);
return (React.createElement(CardContext.Consumer, null, ({ cardId, isClickable, isSelectable, isSelected, isClicked, isDisabled: isCardDisabled, hasSelectableInput }) => {
const cardHeaderToggle = (React.createElement("div", { className: css(styles.cardHeaderToggle) },
React.createElement(Button, Object.assign({ variant: "plain", type: "button", onClick: (evt) => {
onExpand(evt, cardId);
} }, toggleButtonProps),
React.createElement("span", { className: css(styles.cardHeaderToggleIcon) },
React.createElement(AngleRightIcon, { "aria-hidden": "true" })))));
const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
// TODO: Remove following variable and update if block when deprecated prop is removed
// We don't want to throw a warning for the deprecated card
const isDeprecatedSelectableCard = hasSelectableInput;
if ((actions === null || actions === void 0 ? void 0 : actions.actions) && isClickableOrSelectableOnly && !isDeprecatedSelectableCard) {
// eslint-disable-next-line no-console
console.warn(`${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 handleActionClick = (event) => {
if (selectableActions === null || selectableActions === void 0 ? void 0 : selectableActions.onClickAction) {
selectableActions.onClickAction(event);
}
else if (selectableActions === null || selectableActions === void 0 ? void 0 : selectableActions.to) {
window.open(selectableActions.to, selectableActions.isExternalLink ? '_blank' : '_self');
}
};
const getClickableSelectableProps = () => {
var _a;
const baseProps = {
className: 'pf-m-standalone',
inputClassName: isClickable && !isSelectable && 'pf-v5-screen-reader',
label: React.createElement(React.Fragment, null),
'aria-label': selectableActions.selectableActionAriaLabel,
'aria-labelledby': selectableActions.selectableActionAriaLabelledby,
id: selectableActions.selectableActionId,
name: selectableActions.name,
isDisabled: isCardDisabled
};
const isSelectableInputChecked = (_a = selectableActions.isChecked) !== null && _a !== void 0 ? _a : isSelected;
if (isClickable && !isSelectable) {
return Object.assign(Object.assign({}, baseProps), { onClick: handleActionClick, isChecked: isClicked });
}
if (isSelectable) {
return Object.assign(Object.assign({}, baseProps), { onChange: selectableActions.onChange, isChecked: isSelectableInputChecked });
}
return baseProps;
};
return (React.createElement("div", Object.assign({ className: css(styles.cardHeader, isToggleRightAligned && styles.modifiers.toggleRight, className), id: id }, props),
onExpand && !isToggleRightAligned && cardHeaderToggle,
(actions || (selectableActions && (isClickable || isSelectable))) && (React.createElement(CardActions, { className: actions === null || actions === void 0 ? void 0 : actions.className, hasNoOffset: (actions === null || actions === void 0 ? void 0 : actions.hasNoOffset) || (selectableActions === null || selectableActions === void 0 ? void 0 : selectableActions.hasNoOffset) }, actions === null || actions === void 0 ? void 0 :
actions.actions,
selectableActions && (isClickable || isSelectable) && (React.createElement(CardSelectableActions, { className: selectableActions === null || selectableActions === void 0 ? void 0 : selectableActions.className }, (selectableActions === null || selectableActions === void 0 ? void 0 : selectableActions.variant) === 'single' || (isClickable && !isSelectable) ? (React.createElement(Radio, Object.assign({}, getClickableSelectableProps()))) : (React.createElement(Checkbox, Object.assign({}, getClickableSelectableProps()))))))),
children && React.createElement(CardHeaderMain, null, children),
onExpand && isToggleRightAligned && cardHeaderToggle));
}));
};
CardHeader.displayName = 'CardHeader';
//# sourceMappingURL=CardHeader.js.map