framework/js/lib/components/Badge.js
Toby Zerner e5a7013c2c Key item lists to maintain identity across redraws
Fixes #667. This issue was due to the fact that Mithril would change the "Lock" badge into a "Sticky" badge, but the tooltip initialization would not be triggered because it was using the same element. By maintaining element identity, the "Lock" badge will remain untouched, and a new element for the "Sticky" badge will be inserted before it. See https://lhorie.github.io/mithril/mithril.html#dealing-with-focus for more information.
2016-01-13 09:34:12 +10:30

40 lines
1.2 KiB
JavaScript

import Component from 'flarum/Component';
import icon from 'flarum/helpers/icon';
import extract from 'flarum/utils/extract';
/**
* The `Badge` component represents a user/discussion badge, indicating some
* status (e.g. a discussion is stickied, a user is an admin).
*
* A badge may have the following special props:
*
* - `type` The type of badge this is. This will be used to give the badge a
* class name of `Badge--{type}`.
* - `icon` The name of an icon to show inside the badge.
* - `label`
*
* All other props will be assigned as attributes on the badge element.
*/
export default class Badge extends Component {
view() {
const attrs = Object.assign({}, this.props);
const type = extract(attrs, 'type');
const iconName = extract(attrs, 'icon');
attrs.className = 'Badge ' + (type ? 'Badge--' + type : '') + ' ' + (attrs.className || '');
attrs.title = extract(attrs, 'label') || '';
return (
<span {...attrs}>
{iconName ? icon(iconName, {className: 'Badge-icon'}) : m.trust('&nbsp;')}
</span>
);
}
config(isInitialized) {
if (isInitialized) return;
if (this.props.label) this.$().tooltip({container: 'body'});
}
}