Skip to content

Commit

Permalink
Fixed #1876 - Added loading support to Button
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcandu
mcandu authored Apr 13, 2021
1 parent c9b9de2 commit d33107e
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 4 deletions.
25 changes: 23 additions & 2 deletions src/components/button/Button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ export class ButtonComponent extends Component {
badgeClassName: null,
tooltip: null,
tooltipOptions: null,
forwardRef: null
forwardRef: null,
loading: false
}

static propTypes = {
Expand All @@ -26,7 +27,8 @@ export class ButtonComponent extends Component {
badgeClassName: PropTypes.string,
tooltip: PropTypes.string,
tooltipOptions: PropTypes.object,
forwardRef: PropTypes.any
forwardRef: PropTypes.any,
loading: PropTypes.bool
};

getElementRef(el) {
Expand Down Expand Up @@ -109,6 +111,23 @@ export class ButtonComponent extends Component {
return null;
}

renderLoading() {
if (this.props.loading) {
let className = classNames('pi pi-spin pi-spinner', 'p-c', {
'p-button-icon-left': this.props.iconPos === 'left' && this.props.label,
'p-button-icon-right': this.props.iconPos === 'right' && this.props.label,
'p-button-icon-top': this.props.iconPos === 'top' && this.props.label,
'p-button-icon-bottom': this.props.iconPos === 'bottom' && this.props.label
});

return (
<span className={className}></span>
);
}

return null;
}

render() {
let className = classNames('p-button p-component', this.props.className, {
'p-button-icon-only': this.props.icon && !this.props.label,
Expand All @@ -118,11 +137,13 @@ export class ButtonComponent extends Component {
let icon = this.renderIcon();
let label = this.renderLabel();
let badge = this.renderBadge();
let loading = this.renderLoading();

let buttonProps = ObjectUtils.findDiffKeys(this.props, ButtonComponent.defaultProps);

return (
<button ref={(el) => this.getElementRef(el)} {...buttonProps} className={className}>
{loading}
{icon}
{label}
{this.props.children}
Expand Down
20 changes: 20 additions & 0 deletions src/showcase/button/ButtonDemo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,23 @@ import './ButtonDemo.scss';

export class ButtonDemo extends Component {

constructor(props) {
super(props)
this.state = {
loading: false,
check: false,
disabled: false
}
this.onClick = this.onClick.bind(this);
}

onClick() {
this.setState({ check: false, loading: true, disabled: true })
setTimeout(() => {
this.setState({ loading: false, check: true, disabled: false })
}, 2000)
}

render() {
return (
<div>
Expand All @@ -30,6 +47,9 @@ export class ButtonDemo extends Component {
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />

<h5>Loading</h5>
<Button label="Submit" disabled={this.state.disabled} onClick={this.onClick} loading={this.state.loading} icon={this.state.check ? 'pi pi-check' : null} iconPos="right" />

<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" className="p-button-secondary" />
Expand Down
73 changes: 71 additions & 2 deletions src/showcase/button/ButtonDoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,24 @@ import './ButtonDemo.css';
export class ButtonDemo extends Component {
constructor(props) {
super(props)
this.state = {
loading: false,
check: false,
disabled: false
}
this.onClick = this.onClick.bind(this);
}
onClick = () => {
this.setState({ check: false, loading: true, disabled: true })
setTimeout(() => {
this.setState({ loading: false, check: true, disabled: false })
}, 2000)
}
render() {
return (
<div className="button-demo">
Expand All @@ -33,6 +51,9 @@ export class ButtonDemo extends Component {
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Loading</h5>
<Button label="Submit" disabled={this.state.disabled} onClick={this.onClick} loading={this.state.loading} icon={this.state.check ? 'pi pi-check' : null} iconPos="right" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" className="p-button-secondary" />
Expand Down Expand Up @@ -144,11 +165,28 @@ export class ButtonDemo extends Component {
'hooks': {
tabName: 'Hooks Source',
content: `
import React from 'react';
import React, { useState } from 'react';
import { Button } from 'primereact/button';
import './ButtonDemo.css';
const ButtonDemo = () => {
const [loading, setLoading] = useState(false);
const [check, setCheck] = useState(false);
const [disabled, setDisabled] = useState(false);
const onClick = () => {
setLoading(true);
setCheck(false);
setDisabled(true);
setTimeout(() => {
setLoading(false);
setCheck(true);
setDisabled(false);
}, 2000)
}
return (
<div className="button-demo">
<div className="card">
Expand All @@ -162,6 +200,10 @@ const ButtonDemo = () => {
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Loading</h5>
<Button label="Submit" disabled={disabled} onClick={onClick} loading={loading} icon={check ? 'pi pi-check' : null} iconPos="right" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" className="p-button-secondary" />
Expand Down Expand Up @@ -272,12 +314,28 @@ const ButtonDemo = () => {
'ts': {
tabName: 'TS Source',
content: `
import React from 'react';
import React, { useState } from 'react';
import { Button } from 'primereact/button';
import './ButtonDemo.css';
const ButtonDemo = () => {
const [loading, setLoading] = useState(false);
const [check, setCheck] = useState(false);
const [disabled, setDisabled] = useState(false);
const onClick = () => {
setLoading(true);
setCheck(false);
setDisabled(true);
setTimeout(() => {
setLoading(false);
setCheck(true);
setDisabled(false);
}, 2000)
}
return (
<div className="button-demo">
<div className="card">
Expand All @@ -291,6 +349,9 @@ const ButtonDemo = () => {
<Button label="Submit" icon="pi pi-check" />
<Button label="Submit" icon="pi pi-check" iconPos="right" />
<h5>Loading</h5>
<Button label="Submit" disabled={disabled} onClick={onClick} loading={loading} icon={check ? 'pi pi-check' : null} iconPos="right" />
<h5>Severities</h5>
<Button label="Primary" />
<Button label="Secondary" className="p-button-secondary" />
Expand Down Expand Up @@ -482,6 +543,14 @@ import { Button } from 'primereact/button';
<Button label="Click" icon="pi pi-check" iconPos="right" />
<Button icon="pi pi-check" iconPos="right" />
`}
</CodeHighlight>
<h5>Loading</h5>
<p>Loading on a button is specified with <i>loading</i> property and position is configured using <i>iconPos</i> attribute. Default
loading position is "left" and alternative is "right". To display only a loading, leave label as undefined.</p>
<CodeHighlight>
{`
<Button label="Submit" loading iconPos="right" />
`}
</CodeHighlight>

<h5>Events</h5>
Expand Down

0 comments on commit d33107e

Please sign in to comment.