FIX Button loading indicator

See silverstripe/silverstripe-framework#5941
This commit is contained in:
Ingo Schommer 2016-09-06 20:39:32 +12:00
parent 3b71b7731a
commit b53ce4c190
2 changed files with 14 additions and 8 deletions

View File

@ -11,10 +11,16 @@ function fieldHolder(Field) {
// The extraClass property is defined on both the holder and element
// for legacy reasons (same behaviour as PHP rendering)
const classNames = ['form-group field', this.props.extraClass].join(' ');
const classNames = [
'form-group field',
this.props.extraClass,
];
if (this.props.readOnly) {
classNames.push('readonly');
}
return (
<div className={classNames}>
<div className={classNames.join(' ')} id={this.props.holder_id}>
{labelText &&
<label className="form__field-label" htmlFor={`${this.props.id}`}>
{labelText}

View File

@ -12,7 +12,7 @@ class FormAction extends SilverStripeComponent {
return (
<button {...this.getButtonProps()}>
{this.getLoadingIcon()}
{this.props.title}
<span>{this.props.title}</span>
</button>
);
}
@ -50,7 +50,7 @@ class FormAction extends SilverStripeComponent {
}
// If there is no text
if (typeof this.props.title === 'undefined') {
if (typeof this.props.title !== 'string') {
buttonClasses.push('btn--no-text');
}
@ -61,16 +61,16 @@ class FormAction extends SilverStripeComponent {
}
// Add loading class
if (this.props.loading === true) {
if (this.props.loading) {
buttonClasses.push('btn--loading');
}
// Add disabled class
if (this.props.disabled === true) {
if (this.props.disabled) {
buttonClasses.push('disabled');
}
if (typeof this.props.extraClass !== 'undefined') {
if (typeof this.props.extraClass === 'string') {
buttonClasses.push(this.props.extraClass);
}
@ -120,7 +120,7 @@ class FormAction extends SilverStripeComponent {
* @returns object|null
*/
getLoadingIcon() {
if (this.props.loading === true) {
if (this.props.loading) {
return (
<div className="btn__loading-icon" >
<span className="btn__circle btn__circle--1" />