2016-05-28 18:44:29 +03:00
|
|
|
import React, { PropTypes } from 'react';
|
2016-05-21 19:17:01 +03:00
|
|
|
import classnames from 'classnames';
|
|
|
|
import { themr } from 'react-css-themr';
|
2017-01-26 20:05:32 +03:00
|
|
|
import { CHIP } from '../identifiers';
|
|
|
|
import InjectAvatar from '../avatar/Avatar';
|
2016-04-02 14:37:21 +03:00
|
|
|
|
2016-05-28 18:44:29 +03:00
|
|
|
const factory = (Avatar) => {
|
2017-01-26 20:05:32 +03:00
|
|
|
const Chip = ({ children, className, deletable, onDeleteClick, theme, ...other }) => {
|
2016-05-28 18:44:29 +03:00
|
|
|
let hasAvatar = false;
|
|
|
|
if (React.Children.count(children)) {
|
2016-12-02 20:44:40 +03:00
|
|
|
const flatChildren = React.Children.toArray(children);
|
|
|
|
const firstChild = flatChildren[0];
|
2016-05-28 18:44:29 +03:00
|
|
|
hasAvatar = firstChild && firstChild.type && firstChild.type === Avatar;
|
|
|
|
}
|
2016-04-04 12:24:30 +03:00
|
|
|
|
2016-05-28 18:44:29 +03:00
|
|
|
const classes = classnames(theme.chip, {
|
2017-01-26 20:05:32 +03:00
|
|
|
[theme.deletable]: !!deletable,
|
|
|
|
[theme.avatar]: !!hasAvatar,
|
2016-05-28 18:44:29 +03:00
|
|
|
}, className);
|
2016-04-02 14:37:21 +03:00
|
|
|
|
2016-05-28 18:44:29 +03:00
|
|
|
return (
|
2017-01-26 20:05:32 +03:00
|
|
|
<div data-react-toolbox="chip" className={classes} {...other}>
|
2016-05-28 18:44:29 +03:00
|
|
|
{typeof children === 'string' ? <span>{children}</span> : children}
|
|
|
|
{
|
|
|
|
deletable ? (
|
|
|
|
<span className={theme.delete} onClick={onDeleteClick}>
|
|
|
|
<svg viewBox="0 0 40 40" className={theme.deleteIcon}>
|
|
|
|
<path className={theme.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
|
|
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
) : null
|
|
|
|
}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2016-04-02 14:37:21 +03:00
|
|
|
|
2016-05-28 18:44:29 +03:00
|
|
|
Chip.propTypes = {
|
|
|
|
children: PropTypes.node,
|
|
|
|
className: PropTypes.string,
|
|
|
|
deletable: PropTypes.bool,
|
|
|
|
onDeleteClick: PropTypes.func,
|
2016-06-04 00:44:33 +03:00
|
|
|
theme: PropTypes.shape({
|
|
|
|
avatar: PropTypes.string,
|
|
|
|
chip: PropTypes.string,
|
|
|
|
deletable: PropTypes.string,
|
|
|
|
delete: PropTypes.string,
|
|
|
|
deleteIcon: PropTypes.string,
|
2017-01-26 20:05:32 +03:00
|
|
|
deleteX: PropTypes.string,
|
|
|
|
}),
|
2016-05-28 18:44:29 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
Chip.defaultProps = {
|
|
|
|
className: '',
|
2017-01-26 20:05:32 +03:00
|
|
|
deletable: false,
|
2016-05-28 18:44:29 +03:00
|
|
|
};
|
2016-04-02 14:37:21 +03:00
|
|
|
|
2016-05-28 18:44:29 +03:00
|
|
|
return Chip;
|
2016-04-02 14:37:21 +03:00
|
|
|
};
|
|
|
|
|
2016-05-28 18:44:29 +03:00
|
|
|
const Chip = factory(InjectAvatar);
|
|
|
|
export default themr(CHIP)(Chip);
|
|
|
|
export { factory as chipFactory };
|
|
|
|
export { Chip };
|