1 | import * as React from 'react';
|
2 | import { css } from '@patternfly/react-styles';
|
3 | import { Button } from '../Button';
|
4 | import { Tooltip } from '../Tooltip';
|
5 | import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
|
6 | import styles from '@patternfly/react-styles/css/components/Chip/chip';
|
7 | import { GenerateId } from '../../helpers/GenerateId/GenerateId';
|
8 | import { getOUIAProps, getDefaultOUIAId } from '../../helpers';
|
9 | export class Chip extends React.Component {
|
10 | constructor(props) {
|
11 | super(props);
|
12 | this.span = React.createRef();
|
13 | this.renderOverflowChip = () => {
|
14 | const { children, className, onClick, ouiaId } = this.props;
|
15 | const Component = this.props.component;
|
16 | return (React.createElement(Component, Object.assign({ onClick: onClick, className: css(styles.chip, styles.modifiers.overflow, className) }, (this.props.component === 'button' ? { type: 'button' } : {}), getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
|
17 | React.createElement("span", { className: css(styles.chipText) }, children)));
|
18 | };
|
19 | this.renderChip = (randomId) => {
|
20 | const { children, tooltipPosition } = this.props;
|
21 | if (this.state.isTooltipVisible) {
|
22 | return (React.createElement(Tooltip, { position: tooltipPosition, content: children }, this.renderInnerChip(randomId)));
|
23 | }
|
24 | return this.renderInnerChip(randomId);
|
25 | };
|
26 | this.state = {
|
27 | isTooltipVisible: false,
|
28 | ouiaStateId: getDefaultOUIAId(Chip.displayName)
|
29 | };
|
30 | }
|
31 | componentDidMount() {
|
32 | this.setState({
|
33 | isTooltipVisible: Boolean(this.span.current && this.span.current.offsetWidth < this.span.current.scrollWidth)
|
34 | });
|
35 | }
|
36 | renderInnerChip(id) {
|
37 | const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId } = this.props;
|
38 | const Component = component;
|
39 | return (React.createElement(Component, Object.assign({ className: css(styles.chip, className) }, (this.state.isTooltipVisible && { tabIndex: 0 }), getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
|
40 | React.createElement("span", { ref: this.span, className: css(styles.chipText), id: id }, children),
|
41 | !isReadOnly && (React.createElement(Button, { onClick: onClick, variant: "plain", "aria-label": closeBtnAriaLabel, id: `remove_${id}`, "aria-labelledby": `remove_${id} ${id}`, ouiaId: ouiaId || closeBtnAriaLabel },
|
42 | React.createElement(TimesIcon, { "aria-hidden": "true" })))));
|
43 | }
|
44 | render() {
|
45 | const { isOverflowChip } = this.props;
|
46 | return (React.createElement(GenerateId, null, randomId => (isOverflowChip ? this.renderOverflowChip() : this.renderChip(this.props.id || randomId))));
|
47 | }
|
48 | }
|
49 | Chip.displayName = 'Chip';
|
50 | Chip.defaultProps = {
|
51 | closeBtnAriaLabel: 'close',
|
52 | className: '',
|
53 | isOverflowChip: false,
|
54 | isReadOnly: false,
|
55 | tooltipPosition: 'top',
|
56 |
|
57 | onClick: (_e) => undefined,
|
58 | component: 'div'
|
59 | };
|
60 |
|
\ | No newline at end of file |