Refactor #4602 - For InputNumber

primefaces · Aug 11, 2023 · 56fdf88 · 56fdf88
1 parent b2e8c7d
commit 56fdf88
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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.
      */