react-toolbox/components/chip/Chip.js

47 lines
1.2 KiB
JavaScript
Raw Normal View History

2016-04-02 14:37:21 +03:00
import React, {PropTypes} from 'react';
import ClassNames from 'classnames';
import Avatar from '../avatar';
import style from './style';
2016-04-02 14:37:21 +03:00
const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
let hasAvatar = false;
if (React.Children.count(children)) {
const firstChild = children[0];
hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
}
2016-04-02 14:37:21 +03:00
const classes = ClassNames(style.chip, {
[style.deletable]: !!deletable,
[style.avatar]: !!hasAvatar
2016-04-02 14:37:21 +03:00
}, className);
return (
<div data-react-toolbox='chip' className={classes} {...other}>
{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}>
<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: '',
deletable: false
2016-04-02 14:37:21 +03:00
};
export default Chip;