1
0
mirror of https://github.com/flarum/core.git synced 2025-08-18 06:11:23 +02:00

update: common/components/Button

This commit is contained in:
Matthew Kilgore
2020-08-04 19:24:15 -04:00
committed by Franz Liedke
parent b2c147c147
commit 07551b4890

View File

@@ -21,23 +21,21 @@ import LoadingIndicator from './LoadingIndicator';
* be used to represent any generic clickable control, like a menu item. * be used to represent any generic clickable control, like a menu item.
*/ */
export default class Button extends Component { export default class Button extends Component {
view() { view(vnode) {
const attrs = Object.assign({}, this.props); const attrs = Object.assign({}, vnode.attrs);
delete attrs.children;
attrs.className = attrs.className || ''; attrs.className = attrs.className || '';
attrs.type = attrs.type || 'button'; attrs.type = attrs.type || 'button';
// If a tooltip was provided for buttons without additional content, we also // If a tooltip was provided for buttons without additional content, we also
// use this tooltip as text for screen readers // use this tooltip as text for screen readers
if (attrs.title && !this.props.children) { if (attrs.title && !vnode.children) {
attrs['aria-label'] = attrs.title; attrs['aria-label'] = attrs.title;
} }
// If nothing else is provided, we use the textual button content as tooltip // If nothing else is provided, we use the textual button content as tooltip
if (!attrs.title && this.props.children) { if (!attrs.title && vnode.children) {
attrs.title = extractText(this.props.children); attrs.title = extractText(vnode.children);
} }
const iconName = extract(attrs, 'icon'); const iconName = extract(attrs, 'icon');
@@ -49,7 +47,7 @@ export default class Button extends Component {
delete attrs.onclick; delete attrs.onclick;
} }
return <button {...attrs}>{this.getButtonContent()}</button>; return <button {...attrs}>{this.getButtonContent(attrs, vnode.children)}</button>;
} }
/** /**
@@ -58,13 +56,13 @@ export default class Button extends Component {
* @return {*} * @return {*}
* @protected * @protected
*/ */
getButtonContent() { getButtonContent(attrs, children) {
const iconName = this.props.icon; const iconName = attrs.icon;
return [ return [
iconName && iconName !== true ? icon(iconName, { className: 'Button-icon' }) : '', iconName && iconName !== true ? icon(iconName, { className: 'Button-icon' }) : '',
this.props.children ? <span className="Button-label">{this.props.children}</span> : '', children ? <span className="Button-label">{children}</span> : '',
this.props.loading ? LoadingIndicator.component({ size: 'tiny', className: 'LoadingIndicator--inline' }) : '', attrs.loading ? <LoadingIndicator size="tiny" className="LoadingIndicator--inline" /> : '',
]; ];
} }
} }