add prefix property

aragon · Jan 30, 2024 · 75b47a2 · 75b47a2
1 parent 8f7d147
commit 75b47a2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/src/components/input/inputNumber/inputNumber.test.tsx b/src/components/input/inputNumber/inputNumber.test.tsx
@@ -28,6 +28,19 @@ describe('<InputNumber /> component', () => {
         expect(screen.queryAllByRole('button').length).toEqual(0);
     });
 
+    it('should show suffix & prefix only when there is a value', () => {
+        let value = '';
+        const prefix = '~';
+        const suffix = '%';
+
+        const { rerender } = render(createTestComponent({ prefix, suffix }));
+        expect(screen.queryByDisplayValue(prefix + value + suffix)).not.toBeInTheDocument();
+
+        value = 'test';
+        rerender(createTestComponent({ value, prefix, suffix }));
+        expect(screen.getByDisplayValue(prefix + value + suffix)).toBeInTheDocument();
+    });
+
     it('should default step to 1 when given value less than zero', () => {
         const step = -15;
         render(createTestComponent({ step }));

diff --git a/src/components/input/inputNumber/inputNumber.tsx b/src/components/input/inputNumber/inputNumber.tsx
@@ -16,17 +16,21 @@ export interface IInputNumberProps extends Omit<IInputComponentProps, 'onChange'
      */
     max?: number;
     /**
-     * Specifies the granularity of the intervals for the input value
+     * Optional string prepended to the input value.
      */
-    step?: number;
+    prefix?: string;
     /**
-     * The value of the number input.
+     * Specifies the granularity of the intervals for the input value
      */
-    value?: string | number;
+    step?: number;
     /**
      * Optional string appended to the input value.
      */
     suffix?: string;
+    /**
+     * The value of the number input.
+     */
+    value?: string | number;
     /**
      * @see IUseNumberMaskProps['onChange']
      */
@@ -35,12 +39,13 @@ export interface IInputNumberProps extends Omit<IInputComponentProps, 'onChange'
 
 export const InputNumber: React.FC<IInputNumberProps> = (props) => {
     const {
-        suffix,
-        onChange,
         max = Number.MAX_SAFE_INTEGER,
         min = Number.MIN_SAFE_INTEGER,
         step: inputStep = 1,
         value,
+        prefix = '',
+        suffix = '',
+        onChange,
         ...otherProps
     } = props;
 
@@ -52,7 +57,7 @@ export const InputNumber: React.FC<IInputNumberProps> = (props) => {
 
     const [isFocused, setIsFocused] = useState(false);
     const {
-        ref: numberMaskRef,
+        ref,
         value: maskedValue,
         unmaskedValue,
         setValue,
@@ -63,7 +68,7 @@ export const InputNumber: React.FC<IInputNumberProps> = (props) => {
         onChange,
     });
 
-    const suffixedValue = maskedValue && suffix ? maskedValue + suffix : maskedValue;
+    const augmentedValue = maskedValue ? `${prefix}${maskedValue}${suffix}` : maskedValue;
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'ArrowUp') {
@@ -129,17 +134,17 @@ export const InputNumber: React.FC<IInputNumberProps> = (props) => {
                 />
             )}
             <input
-                ref={numberMaskRef}
-                min={min}
-                max={max}
+                ref={ref}
                 step={step}
-                value={isFocused ? maskedValue : suffixedValue}
+                max={props.max ?? max}
+                min={props.min ?? min}
                 onBlur={handleBlur}
                 onFocus={handleFocus}
                 inputMode="numeric"
                 onKeyDown={handleKeyDown}
                 className={classNames('text-center spin-buttons:appearance-none', inputClassName)}
                 {...otherInputProps}
+                value={isFocused ? maskedValue : augmentedValue}
             />
             {!isDisabled && (
                 <Button