| 1 | import { __rest } from "tslib";
|
| 2 | import * as React from 'react';
|
| 3 | import styles from '@patternfly/react-styles/css/components/Card/card';
|
| 4 | import { css } from '@patternfly/react-styles';
|
| 5 | import { useOUIAProps } from '../../helpers';
|
| 6 | export const CardContext = React.createContext({
|
| 7 | cardId: '',
|
| 8 | registerTitleId: () => { },
|
| 9 | isExpanded: false
|
| 10 | });
|
| 11 | export const Card = (_a) => {
|
| 12 | var { children = null, id = '', className = '', component = 'article', isHoverable = false, isCompact = false, isSelectable = false, isSelectableRaised = false, isSelected = false, isDisabledRaised = false, isFlat = false, isExpanded = false, isRounded = false, isLarge = false, isFullHeight = false, isPlain = false, ouiaId, ouiaSafe = true, hasSelectableInput = false, selectableInputAriaLabel, onSelectableInputChange = () => { } } = _a, props = __rest(_a, ["children", "id", "className", "component", "isHoverable", "isCompact", "isSelectable", "isSelectableRaised", "isSelected", "isDisabledRaised", "isFlat", "isExpanded", "isRounded", "isLarge", "isFullHeight", "isPlain", "ouiaId", "ouiaSafe", "hasSelectableInput", "selectableInputAriaLabel", "onSelectableInputChange"]);
|
| 13 | const Component = component;
|
| 14 | const ouiaProps = useOUIAProps(Card.displayName, ouiaId, ouiaSafe);
|
| 15 | const [titleId, setTitleId] = React.useState('');
|
| 16 | const [ariaProps, setAriaProps] = React.useState();
|
| 17 | if (isCompact && isLarge) {
|
| 18 |
|
| 19 | console.warn('Card: Cannot use isCompact with isLarge. Defaulting to isCompact');
|
| 20 | isLarge = false;
|
| 21 | }
|
| 22 | const getSelectableModifiers = () => {
|
| 23 | if (isDisabledRaised) {
|
| 24 | return css(styles.modifiers.nonSelectableRaised);
|
| 25 | }
|
| 26 | if (isSelectableRaised) {
|
| 27 | return css(styles.modifiers.selectableRaised, isSelected && styles.modifiers.selectedRaised);
|
| 28 | }
|
| 29 | if (isSelectable || isHoverable) {
|
| 30 | return css(styles.modifiers.selectable, isSelected && styles.modifiers.selected);
|
| 31 | }
|
| 32 | return '';
|
| 33 | };
|
| 34 | const containsCardTitleChildRef = React.useRef(false);
|
| 35 | const registerTitleId = (id) => {
|
| 36 | setTitleId(id);
|
| 37 | containsCardTitleChildRef.current = !!id;
|
| 38 | };
|
| 39 | React.useEffect(() => {
|
| 40 | if (selectableInputAriaLabel) {
|
| 41 | setAriaProps({ 'aria-label': selectableInputAriaLabel });
|
| 42 | }
|
| 43 | else if (titleId) {
|
| 44 | setAriaProps({ 'aria-labelledby': titleId });
|
| 45 | }
|
| 46 | else if (hasSelectableInput && !containsCardTitleChildRef.current) {
|
| 47 | setAriaProps({});
|
| 48 |
|
| 49 | console.warn('If no CardTitle component is passed as a child of Card the selectableInputAriaLabel prop must be passed');
|
| 50 | }
|
| 51 | }, [hasSelectableInput, selectableInputAriaLabel, titleId]);
|
| 52 | return (React.createElement(CardContext.Provider, { value: {
|
| 53 | cardId: id,
|
| 54 | registerTitleId,
|
| 55 | isExpanded
|
| 56 | } },
|
| 57 | hasSelectableInput && (React.createElement("input", Object.assign({ className: "pf-screen-reader", id: `${id}-input` }, ariaProps, { type: "checkbox", checked: isSelected, onChange: event => onSelectableInputChange(id, event), disabled: isDisabledRaised, tabIndex: -1 }))),
|
| 58 | React.createElement(Component, Object.assign({ id: id, className: css(styles.card, isCompact && styles.modifiers.compact, isExpanded && styles.modifiers.expanded, isFlat && styles.modifiers.flat, isRounded && styles.modifiers.rounded, isLarge && styles.modifiers.displayLg, isFullHeight && styles.modifiers.fullHeight, isPlain && styles.modifiers.plain, getSelectableModifiers(), className), tabIndex: isSelectable || isSelectableRaised ? '0' : undefined }, props, ouiaProps), children)));
|
| 59 | };
|
| 60 | Card.displayName = 'Card';
|
| 61 | |
| \ | No newline at end of file |