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:
committed by
Franz Liedke
parent
b2c147c147
commit
07551b4890
@@ -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" /> : '',
|
||||||
];
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user