2016-04-02 14:37:21 +03:00
|
|
|
import React, {PropTypes} from 'react';
|
|
|
|
import ClassNames from 'classnames';
|
2016-04-10 23:31:28 +03:00
|
|
|
import Avatar from '../avatar';
|
2016-04-05 11:54:30 +03:00
|
|
|
import style from './style';
|
2016-04-02 14:37:21 +03:00
|
|
|
|
2016-04-04 12:24:30 +03:00
|
|
|
const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
|
|
|
|
let hasAvatar = false;
|
|
|
|
if (React.Children.count(children)) {
|
|
|
|
const firstChild = children[0];
|
2016-04-10 23:31:28 +03:00
|
|
|
hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
|
2016-04-04 12:24:30 +03:00
|
|
|
}
|
|
|
|
|
2016-04-02 14:37:21 +03:00
|
|
|
const classes = ClassNames(style.chip, {
|
|
|
|
[style.deletable]: !!deletable,
|
2016-04-04 12:24:30 +03:00
|
|
|
[style.avatar]: !!hasAvatar
|
2016-04-02 14:37:21 +03:00
|
|
|
}, className);
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div data-react-toolbox='chip' className={classes} {...other}>
|
2016-04-04 12:24:30 +03:00
|
|
|
{typeof children === 'string' ? <span>{children}</span> : children}
|
2016-04-02 14:37:21 +03:00
|
|
|
{
|
|
|
|
deletable ? (
|
2016-04-04 11:27:41 +03:00
|
|
|
<span className={style.delete} onClick={onDeleteClick}>
|
2016-04-05 11:54:30 +03:00
|
|
|
<svg viewBox="0 0 40 40" className={style.deleteIcon}>
|
|
|
|
<path className={style.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
|
|
|
|
</svg>
|
2016-04-02 14:37:21 +03:00
|
|
|
</span>
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Chip.propTypes = {
|
2016-04-04 12:34:48 +03:00
|
|
|
children: PropTypes.node,
|
2016-04-02 14:37:21 +03:00
|
|
|
className: PropTypes.string,
|
|
|
|
deletable: PropTypes.bool,
|
2016-04-04 11:27:41 +03:00
|
|
|
onDeleteClick: PropTypes.func
|
2016-04-02 14:37:21 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
Chip.defaultProps = {
|
|
|
|
className: '',
|
2016-04-04 12:24:30 +03:00
|
|
|
deletable: false
|
2016-04-02 14:37:21 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
export default Chip;
|