Refactor #1876

primefaces · Apr 13, 2021 · 61d8dcc · 61d8dcc
1 parent d33107e
commit 61d8dcc
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 34 deletions.
diff --git a/src/components/button/Button.d.ts b/src/components/button/Button.d.ts
@@ -3,14 +3,25 @@ import TooltipOptions from '../tooltip/TooltipOptions';
 
 declare namespace Button {
 
+    type PositionType = 'top' | 'bottom' | 'left' | 'right';
+
+    type LoadingIconType = React.ReactNode | ((props: ButtonProps) => React.ReactNode);
+
+    interface LoadingOption {
+        icon: LoadingIconType,
+        position: PositionType
+    }
+
     interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
         label?: string;
         icon?: string;
-        iconPos?: string;
+        iconPos?: PositionType;
         badge?: string;
         badgeClassName?: string;
         tooltip?: string;
         tooltipOptions?: TooltipOptions;
+        loading?: boolean;
+        loadingOptions?: LoadingOptions;
     }
 }
 

diff --git a/src/components/button/Button.js b/src/components/button/Button.js
@@ -16,7 +16,11 @@ export class ButtonComponent extends Component {
         tooltip: null,
         tooltipOptions: null,
         forwardRef: null,
-        loading: false
+        loading: false,
+        loadingOptions: {
+            icon: 'pi pi-spin pi-spinner',
+            position: 'left'
+        }
     }
 
     static propTypes = {
@@ -28,7 +32,8 @@ export class ButtonComponent extends Component {
         tooltip: PropTypes.string,
         tooltipOptions: PropTypes.object,
         forwardRef: PropTypes.any,
-        loading: PropTypes.bool
+        loading: PropTypes.bool,
+        loadingOptions: PropTypes.any
     };
 
     getElementRef(el) {
@@ -76,18 +81,22 @@ export class ButtonComponent extends Component {
         });
     }
 
-    renderIcon() {
-        if (this.props.icon) {
-            let className = classNames(this.props.icon, '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>
-            );
+    renderIcon(icon, position) {
+        if (icon) {
+            if (typeof icon === 'string') {
+                let className = classNames(icon, 'p-c', {
+                    'p-button-icon-left': position === 'left' && this.props.label,
+                    'p-button-icon-right': position === 'right' && this.props.label,
+                    'p-button-icon-top': position === 'top' && this.props.label,
+                    'p-button-icon-bottom': position === 'bottom' && this.props.label
+                });
+
+                return (
+                    <span className={className}></span>
+                );
+            }
+
+            return ObjectUtils.getJSXElement(icon, this.props);
         }
 
         return null;
@@ -111,33 +120,16 @@ 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,
             'p-button-vertical': (this.props.iconPos === 'top' || this.props.iconPos === 'bottom') && this.label,
             'p-disabled': this.props.disabled
         });
-        let icon = this.renderIcon();
+        let icon = this.renderIcon(this.props.icon, this.props.iconPos);
         let label = this.renderLabel();
         let badge = this.renderBadge();
-        let loading = this.renderLoading();
+        let loading = this.props.loading && this.renderIcon(this.props.loadingOptions.icon, this.props.loadingOptions.position);
 
         let buttonProps = ObjectUtils.findDiffKeys(this.props, ButtonComponent.defaultProps);