From 56fdf8887a3bd380b727c377c00e271c1ecf651f Mon Sep 17 00:00:00 2001
From: habubey <habubey@outlook.com>
Date: Fri, 11 Aug 2023 17:47:53 +0300
Subject: [PATCH] Refactor #4602 - For InputNumber

---
 components/lib/inputnumber/InputNumber.js     | 11 +++--
 components/lib/inputnumber/InputNumberBase.js | 40 +++++++------------
 components/lib/inputnumber/inputnumber.d.ts   |  4 +-
 3 files changed, 21 insertions(+), 34 deletions(-)

diff --git a/components/lib/inputnumber/InputNumber.js b/components/lib/inputnumber/InputNumber.js
index 0707135cfa..6f6334b23d 100644
--- a/components/lib/inputnumber/InputNumber.js
+++ b/components/lib/inputnumber/InputNumber.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { PrimeReactContext } from '../api/Api';
+import PrimeReact, { PrimeReactContext } from '../api/Api';
+import { useHandleStyle } from '../componentbase/ComponentBase';
 import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { AngleDownIcon } from '../icons/angledown';
 import { AngleUpIcon } from '../icons/angleup';
@@ -8,8 +9,6 @@ import { Ripple } from '../ripple/Ripple';
 import { Tooltip } from '../tooltip/Tooltip';
 import { DomHandler, IconUtils, ObjectUtils, classNames, mergeProps } from '../utils/Utils';
 import { InputNumberBase } from './InputNumberBase';
-import PrimeReact from '../api/Api';
-import { useHandleStyle } from '../componentbase/ComponentBase';
 
 export const InputNumber = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -1052,7 +1051,7 @@ export const InputNumber = React.memo(
             const incrementButtonProps = mergeProps(
                 {
                     type: 'button',
-                    className: cx('incrementButton'),
+                    className: classNames(props.incrementButtonClassName, cx('incrementButton')),
                     onPointerLeave: onUpButtonMouseLeave,
                     onPointerDown: (e) => onUpButtonMouseDown(e),
                     onPointerUp: onUpButtonMouseUp,
@@ -1084,7 +1083,7 @@ export const InputNumber = React.memo(
             const decrementButtonProps = mergeProps(
                 {
                     type: 'button',
-                    className: cx('decrementButton'),
+                    className: classNames(props.decrementButtonClassName, cx('decrementButton')),
                     onPointerLeave: onDownButtonMouseLeave,
                     onPointerDown: (e) => onDownButtonMouseDown(e),
                     onPointerUp: onDownButtonMouseUp,
@@ -1141,7 +1140,7 @@ export const InputNumber = React.memo(
             {
                 id: props.id,
                 ref: elementRef,
-                className: cx('root', { focusedState, stacked, horizontal, vertical }),
+                className: classNames(props.className, cx('root', { focusedState, stacked, horizontal, vertical })),
                 style: props.style
             },
             otherProps,
diff --git a/components/lib/inputnumber/InputNumberBase.js b/components/lib/inputnumber/InputNumberBase.js
index d42db3ee7d..8f21026bf7 100644
--- a/components/lib/inputnumber/InputNumberBase.js
+++ b/components/lib/inputnumber/InputNumberBase.js
@@ -3,36 +3,24 @@ import { classNames } from '../utils/Utils';
 
 const classes = {
     root: ({ props, focusedState, stacked, horizontal, vertical }) =>
-        classNames(
-            'p-inputnumber p-component p-inputwrapper',
-            {
-                'p-inputwrapper-filled': props.value != null && props.value.toString().length > 0,
-                'p-inputwrapper-focus': focusedState,
-                'p-inputnumber-buttons-stacked': stacked,
-                'p-inputnumber-buttons-horizontal': horizontal,
-                'p-inputnumber-buttons-vertical': vertical
-            },
-            props.className
-        ),
+        classNames('p-inputnumber p-component p-inputwrapper', {
+            'p-inputwrapper-filled': props.value != null && props.value.toString().length > 0,
+            'p-inputwrapper-focus': focusedState,
+            'p-inputnumber-buttons-stacked': stacked,
+            'p-inputnumber-buttons-horizontal': horizontal,
+            'p-inputnumber-buttons-vertical': vertical
+        }),
     buttonGroup: 'p-inputnumber-button-group',
     incrementButton: ({ props }) =>
-        classNames(
-            'p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component',
-            {
-                'p-disabled': props.disabled
-            },
-            props.incrementButtonClassName
-        ),
+        classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', {
+            'p-disabled': props.disabled
+        }),
     incrementIcon: 'p-button-icon',
     decrementButton: ({ props }) =>
-        classNames(
-            'p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component',
-            {
-                'p-disabled': props.disabled
-            },
-            props.decrementButtonClassName
-        ),
-    decrementButton: 'p-button-icon'
+        classNames('p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component', {
+            'p-disabled': props.disabled
+        }),
+    decrementIcon: 'p-button-icon'
 };
 
 const styles = `
diff --git a/components/lib/inputnumber/inputnumber.d.ts b/components/lib/inputnumber/inputnumber.d.ts
index 3376c7acdc..5c1eb69998 100644
--- a/components/lib/inputnumber/inputnumber.d.ts
+++ b/components/lib/inputnumber/inputnumber.d.ts
@@ -131,11 +131,11 @@ export interface InputNumberProps extends Omit<React.DetailedHTMLProps<React.HTM
     /**
      * Style class of the increment button.
      */
-    incrementButtonIcon?: string | undefined;
+    incrementButtonIcon?: InputNumberPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Style class of the decrement button.
      */
-    decrementButtonIcon?: string | undefined;
+    decrementButtonIcon?: InputNumberPassThroughType<React.HTMLAttributes<HTMLSpanElement>>;
     /**
      * Locale to be used in formatting.
      */