1 | import { __rest } from "tslib";
|
2 | import * as React from 'react';
|
3 | import styles from '@patternfly/react-styles/css/components/ChipGroup/chip-group';
|
4 | import { css } from '@patternfly/react-styles';
|
5 | import { Button } from '../Button';
|
6 | import { Chip } from '../Chip';
|
7 | import { Tooltip } from '../Tooltip';
|
8 | import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
|
9 | import { fillTemplate } from '../../helpers';
|
10 | import { GenerateId } from '../../helpers/GenerateId/GenerateId';
|
11 | import { getOUIAProps } from '../../helpers';
|
12 | export class ChipGroup extends React.Component {
|
13 | constructor(props) {
|
14 | super(props);
|
15 | this.headingRef = React.createRef();
|
16 | this.toggleCollapse = () => {
|
17 | this.setState(prevState => ({
|
18 | isOpen: !prevState.isOpen,
|
19 | isTooltipVisible: Boolean(this.headingRef.current && this.headingRef.current.offsetWidth < this.headingRef.current.scrollWidth)
|
20 | }));
|
21 | };
|
22 | this.state = {
|
23 | isOpen: this.props.defaultIsOpen,
|
24 | isTooltipVisible: false
|
25 | };
|
26 | }
|
27 | componentDidMount() {
|
28 | this.setState({
|
29 | isTooltipVisible: Boolean(this.headingRef.current && this.headingRef.current.offsetWidth < this.headingRef.current.scrollWidth)
|
30 | });
|
31 | }
|
32 | renderLabel(id) {
|
33 | const { categoryName, tooltipPosition } = this.props;
|
34 | const { isTooltipVisible } = this.state;
|
35 | return isTooltipVisible ? (React.createElement(Tooltip, { position: tooltipPosition, content: categoryName },
|
36 | React.createElement("span", { tabIndex: 0, ref: this.headingRef, className: css(styles.chipGroupLabel) },
|
37 | React.createElement("span", { id: id }, categoryName)))) : (React.createElement("span", { ref: this.headingRef, className: css(styles.chipGroupLabel), id: id }, categoryName));
|
38 | }
|
39 | render() {
|
40 | const _a = this.props, { categoryName, children, className, isClosable, closeBtnAriaLabel, 'aria-label': ariaLabel, onClick, onOverflowChipClick, numChips, expandedText, collapsedText, ouiaId,
|
41 |
|
42 | defaultIsOpen, tooltipPosition } = _a,
|
43 |
|
44 | rest = __rest(_a, ["categoryName", "children", "className", "isClosable", "closeBtnAriaLabel", 'aria-label', "onClick", "onOverflowChipClick", "numChips", "expandedText", "collapsedText", "ouiaId", "defaultIsOpen", "tooltipPosition"]);
|
45 | const { isOpen } = this.state;
|
46 | const numChildren = React.Children.count(children);
|
47 | const collapsedTextResult = fillTemplate(collapsedText, {
|
48 | remaining: React.Children.count(children) - numChips
|
49 | });
|
50 | const renderChipGroup = (id) => {
|
51 | const chipArray = !isOpen
|
52 | ? React.Children.toArray(children).slice(0, numChips)
|
53 | : React.Children.toArray(children);
|
54 | return (React.createElement("div", Object.assign({ className: css(styles.chipGroup, className, categoryName && styles.modifiers.category), role: "group" }, (categoryName && { 'aria-labelledby': id }), (!categoryName && { 'aria-label': ariaLabel }), getOUIAProps(ChipGroup.displayName, ouiaId)),
|
55 | React.createElement("div", { className: css(styles.chipGroupMain) },
|
56 | categoryName && this.renderLabel(id),
|
57 | React.createElement("ul", Object.assign({ className: css(styles.chipGroupList) }, (categoryName && { 'aria-labelledby': id }), (!categoryName && { 'aria-label': ariaLabel }), { role: "list" }, rest),
|
58 | chipArray.map((child, i) => (React.createElement("li", { className: css(styles.chipGroupListItem), key: i }, child))),
|
59 | numChildren > numChips && (React.createElement("li", { className: css(styles.chipGroupListItem) },
|
60 | React.createElement(Chip, { isOverflowChip: true, onClick: event => {
|
61 | this.toggleCollapse();
|
62 | onOverflowChipClick(event);
|
63 | }, component: "button" }, isOpen ? expandedText : collapsedTextResult))))),
|
64 | isClosable && (React.createElement("div", { className: css(styles.chipGroupClose) },
|
65 | React.createElement(Button, { variant: "plain", "aria-label": closeBtnAriaLabel, onClick: onClick, id: `remove_group_${id}`, "aria-labelledby": `remove_group_${id} ${id}`, ouiaId: ouiaId || closeBtnAriaLabel },
|
66 | React.createElement(TimesCircleIcon, { "aria-hidden": "true" }))))));
|
67 | };
|
68 | return numChildren === 0 ? null : React.createElement(GenerateId, null, randomId => renderChipGroup(this.props.id || randomId));
|
69 | }
|
70 | }
|
71 | ChipGroup.displayName = 'ChipGroup';
|
72 | ChipGroup.defaultProps = {
|
73 | expandedText: 'Show Less',
|
74 | collapsedText: '${remaining} more',
|
75 | categoryName: '',
|
76 | defaultIsOpen: false,
|
77 | numChips: 3,
|
78 | isClosable: false,
|
79 |
|
80 | onClick: (_e) => undefined,
|
81 | onOverflowChipClick: (_e) => undefined,
|
82 | closeBtnAriaLabel: 'Close chip group',
|
83 | tooltipPosition: 'top',
|
84 | 'aria-label': 'Chip group category'
|
85 | };
|
86 |
|
\ | No newline at end of file |