Improve custom SpeedDial icon implementation Related - primefaces#4220

melloware · Apr 7, 2023 · e29ef3f · e29ef3f
1 parent 3fdc8b0
commit e29ef3f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 19 deletions.
diff --git a/components/lib/speeddial/SpeedDial.js b/components/lib/speeddial/SpeedDial.js
@@ -4,6 +4,8 @@ import { useEventListener, useMountEffect, useUpdateEffect } from '../hooks/Hook
 import { Ripple } from '../ripple/Ripple';
 import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
 import { SpeedDialBase } from './SpeedDialBase';
+import { PlusIcon } from '../icon/plus';
+import { MinusIcon } from '../icon/minus';
 
 export const SpeedDial = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -219,21 +221,9 @@ export const SpeedDial = React.memo(
                 [`${props.showIcon}`]: (!visible && !!props.showIcon) || !props.hideIcon,
                 [`${props.hideIcon}`]: visible && !!props.hideIcon
             });
-            const icon = IconUtils.getJSXIcon(showIconVisible ? props.showIcon : hideIconVisible ? props.hideIcon : null, undefined, { props });
-            const content = <Button type="button" style={props.buttonStyle} className={className} icon={icon} onClick={onClick} disabled={props.disabled} aria-label={props['aria-label']} />;
-
-            if (props.buttonTemplate) {
-                const defaultContentOptions = {
-                    onClick,
-                    className,
-                    iconClassName,
-                    element: content,
-                    props,
-                    visible
-                };
-
-                return ObjectUtils.getJSXElement(props.buttonTemplate, defaultContentOptions);
-            }
+            const icon = showIconVisible ? props.showIcon || <PlusIcon className={iconClassName} onClick={onClick} /> : hideIconVisible ? props.hideIcon || <MinusIcon className={iconClassName} onClick={onClick} /> : null;
+            const toggleIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props, visible });
+            const content = <Button type="button" style={props.buttonStyle} className={className} icon={toggleIcon} onClick={onClick} disabled={props.disabled} aria-label={props['aria-label']} />;
 
             return content;
         };

diff --git a/components/lib/speeddial/SpeedDialBase.js b/components/lib/speeddial/SpeedDialBase.js
@@ -21,7 +21,7 @@ export const SpeedDialBase = {
         'aria-label': null,
         maskStyle: null,
         maskClassName: null,
-        showIcon: 'pi pi-plus',
+        showIcon: null,
         hideIcon: null,
         rotateAnimation: true,
         onVisibleChange: null,

diff --git a/components/lib/speeddial/speeddial.d.ts b/components/lib/speeddial/speeddial.d.ts
@@ -112,13 +112,12 @@ export interface SpeedDialProps extends Omit<React.DetailedHTMLProps<React.HTMLA
     maskClassName?: string | undefined;
     /**
      * Show icon of the button element.
-     * @defaultValue pi pi-plus
      */
-    showIcon?: IconType<SpeedDialProps>;
+    showIcon?: IconType<SpeedDialProps> | undefined;
     /**
      * Hide icon of the button element.
      */
-    hideIcon?: IconType<SpeedDialProps>;
+    hideIcon?: IconType<SpeedDialProps> | undefined;
     /**
      * Defined to rotate showIcon when hideIcon is not present.
      * @defaultValue true