mirror of
https://github.com/flarum/core.git
synced 2025-07-23 09:41:26 +02:00
- Extensions now have their own pages - The API for extensions to register permissions and settings has been overhauled via the `flarum/admin/utils/ExtensionData` util - An extension grid has been added as a widget to the Dashboard page
76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
import Component from '../Component';
|
|
import icon from '../helpers/icon';
|
|
import classList from '../utils/classList';
|
|
import extract from '../utils/extract';
|
|
import extractText from '../utils/extractText';
|
|
import LoadingIndicator from './LoadingIndicator';
|
|
|
|
/**
|
|
* The `Button` component defines an element which, when clicked, performs an
|
|
* action.
|
|
*
|
|
* ### Attrs
|
|
*
|
|
* - `icon` The name of the icon class. If specified, the button will be given a
|
|
* 'has-icon' class name.
|
|
* - `disabled` Whether or not the button is disabled. If truthy, the button
|
|
* will be given a 'disabled' class name, and any `onclick` handler will be
|
|
* removed.
|
|
* - `loading` Whether or not the button should be in a disabled loading state.
|
|
*
|
|
* All other attrs will be assigned as attributes on the button element.
|
|
*
|
|
* Note that a Button has no default class names. This is because a Button can
|
|
* be used to represent any generic clickable control, like a menu item.
|
|
*/
|
|
export default class Button extends Component {
|
|
view(vnode) {
|
|
const attrs = Object.assign({}, this.attrs);
|
|
|
|
attrs.type = attrs.type || 'button';
|
|
|
|
// If a tooltip was provided for buttons without additional content, we also
|
|
// use this tooltip as text for screen readers
|
|
if (attrs.title && !vnode.children) {
|
|
attrs['aria-label'] = attrs.title;
|
|
}
|
|
|
|
// If given a translation object, extract the text.
|
|
if (typeof attrs.title === 'object') {
|
|
attrs.title = extractText(attrs.title);
|
|
}
|
|
|
|
// If nothing else is provided, we use the textual button content as tooltip
|
|
if (!attrs.title && vnode.children) {
|
|
attrs.title = extractText(vnode.children);
|
|
}
|
|
|
|
const iconName = extract(attrs, 'icon');
|
|
|
|
const loading = extract(attrs, 'loading');
|
|
if (attrs.disabled || loading) {
|
|
delete attrs.onclick;
|
|
}
|
|
|
|
attrs.className = classList([attrs.className, iconName && 'hasIcon', (attrs.disabled || loading) && 'disabled', loading && 'loading']);
|
|
|
|
return <button {...attrs}>{this.getButtonContent(vnode.children)}</button>;
|
|
}
|
|
|
|
/**
|
|
* Get the template for the button's content.
|
|
*
|
|
* @return {*}
|
|
* @protected
|
|
*/
|
|
getButtonContent(children) {
|
|
const iconName = this.attrs.icon;
|
|
|
|
return [
|
|
iconName && iconName !== true ? icon(iconName, { className: 'Button-icon' }) : '',
|
|
children ? <span className="Button-label">{children}</span> : '',
|
|
this.attrs.loading ? <LoadingIndicator size="tiny" className="LoadingIndicator--inline" /> : '',
|
|
];
|
|
}
|
|
}
|