-
Notifications
You must be signed in to change notification settings - Fork 947
/
Chip.js
111 lines (92 loc) · 3.1 KB
/
Chip.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { classNames, ObjectUtils, IconUtils } from '../utils/Utils';
export class Chip extends Component {
static defaultProps = {
label: null,
icon: null,
image: null,
removable: false,
removeIcon: 'pi pi-times-circle',
className: null,
style: null,
template: null,
imageAlt: 'chip',
onImageError: null,
onRemove: null
};
static propTypes = {
label: PropTypes.string,
icon: PropTypes.any,
image: PropTypes.string,
removable: PropTypes.bool,
removeIcon: PropTypes.any,
className: PropTypes.string,
style: PropTypes.object,
template: PropTypes.any,
imageAlt: PropTypes.string,
onImageError: PropTypes.func,
onRemove: PropTypes.func
};
constructor(props) {
super(props);
this.state = {
visible: true
};
this.close = this.close.bind(this);
this.onKeyDown = this.onKeyDown.bind(this);
}
onKeyDown(event) {
if (event.keyCode === 13) { // enter
this.close(event);
}
}
close(event) {
event.persist();
this.setState({ visible: false }, () => {
if (this.props.onRemove) {
this.props.onRemove(event);
}
});
}
renderContent() {
let content = [];
if (this.props.image) {
const onError = (e) => {
if (this.props.onImageError) {
this.props.onImageError(e);
}
};
content.push(<img key="image" src={this.props.image} alt={this.props.imageAlt} onError={onError}></img>);
}
else if (this.props.icon) {
const iconClassName = classNames('p-chip-icon', this.props.icon);
content.push(IconUtils.getJSXIcon(this.props.icon, {key: "icon", className: iconClassName}, this.props));
}
if (this.props.label) {
content.push(<span key="label" className="p-chip-text">{this.props.label}</span>);
}
if (this.props.removable) {
const removableIconClassName = classNames('p-chip-remove-icon', this.props.removeIcon);
content.push(IconUtils.getJSXIcon(this.props.removeIcon,
{key: "removeIcon", tabIndex: 0, className: removableIconClassName, onClick: this.close, onKeyDown: this.onKeyDown},
this.props,
))
}
return content;
}
renderElement() {
const containerClassName = classNames('p-chip p-component', {
'p-chip-image': this.props.image != null
}, this.props.className);
const content = this.props.template ? ObjectUtils.getJSXElement(this.props.template, this.props) : this.renderContent();
return (
<div className={containerClassName} style={this.props.style}>
{content}
</div>
);
}
render() {
return this.state.visible && this.renderElement();
}
}