All files / components/Tag Tag.jsx

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
 
 
 
 
 
 
 
 
 
 
 
 
134x
 
134x
 
 
 
 
 
 
 
134x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
268x
 
 
 
 
 
1x
 
 
 
155x
 
155x
155x
155x
 
155x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { lucidClassNames } from '../../util/style-helpers';
import CrossIcon from '../Icon/CrossIcon/CrossIcon';
import {
	createClass,
	filterTypes,
	rejectTypes,
	omitProps,
} from '../../util/component-types';
 
const cx = lucidClassNames.bind('&-Tag');
 
const { bool, func, node, string } = PropTypes;
 
/**
 * {"categories": ["communication"]}
 *
 * Organizes items into removable items or groups. Can be nested to facilitate
 * grouping.
 */
const Tag = createClass({
	displayName: 'Tag',
 
	propTypes: {
		/**
		 * Shows or hides the little "x" for a given tag.
		 */
		isRemovable: bool,
		/**
		 * Called when the user clicks to remove a tag.
		 *
		 * Signature: `({props, event}) => {}`
		 */
		onRemove: func,
		/**
		 * Can contain elements or nested `Tag` components.
		 */
		children: node,
		/**
		 * Appended to the component-specific class names set on the root element.
		 */
		className: string,
	},
 
	getDefaultProps() {
		return {
			onRemove: _.noop,
		};
	},
 
	handleRemove(event) {
		this.props.onRemove({ props: this.props, event });
	},
 
	render() {
		const { isRemovable, children, className, ...passThroughs } = this.props;
 
		const subTags = filterTypes(children, Tag);
		const otherChildren = rejectTypes(children, Tag);
		const isLeaf = _.isEmpty(subTags);
 
		return (
			<div
				{...omitProps(passThroughs, Tag)}
				className={cx('&', { '&-leaf': isLeaf }, className)}
			>
				<div className={cx('&-inner')}>
					<div className={cx('&-inner-content')}>
						{!_.isEmpty(otherChildren)
							? <span className={cx('&-inner-children')}>
									{otherChildren}
								</span>
							: null}
						{isRemovable
							? <span className={cx('&-remove')} onClick={this.handleRemove}>
									<CrossIcon
										className={cx('&-remove-button')}
										size={10}
										viewBox="4 4 8 8"
										isClickable
									/>
								</span>
							: null}
					</div>
					{!isLeaf
						? <div className={cx('&-subgroup')}>
								{subTags}
							</div>
						: null}
				</div>
			</div>
		);
	},
});
 
export default Tag;