Untitled

import React from 'react';
import { InputNumber } from 'primereact/inputnumber';
import PrimeWrapper from '../primeWrapper/primewrapper';
import PropTypes from 'prop-types';

const PrimeInputNumber = (props) => {
    return (
        (props.showif !== undefined ? props.showif : true) && (
            <span className="prime-input-text-wrapper">
                <div>
                    <label className={props.labelClassName}>{props.evalLabel(props)}</label>
                </div>

                <InputNumber
                    id={props.id}
                    name={props.name}
                    className={props.className}
                    inputClassName={props.inputClassName}
                    style={props.style}
                    inputStyle={props.inputStyle}
                    value={props.value || null}
                    onValueChange={(e) => props.onValueChange(e)}
                    onChange={props.onChange}
                    placeholder={props.placeholder}
                    disabled={props.evalBool(props, 'disabled')}
                    readOnly={props.readOnly}
                    required={props.required}
                    tabIndex={props.tabIndex}
                    autoFocus={props.autofocus}
                    inputId={props.inputId}
                    tooltip={props.tooltip || null}
                    tooltipOptions={props.tooltipOptions}
                    arialabel={props.arialabel}
                    arialabelledby={props.arialabelledby}
                    onBlur={props.onBlur}
                    onFocus={props.onFocus}
                    onKeyDown={props.onKeyDown}
                    locale={props.locale}
                    localeMatcher={props.localeMatcher}
                    mode={props.mode}
                    prefix={props.prefix}
                    suffix={props.suffix}
                    currency={props.currency || null}
                    currencyDisplay={props.currencyDisplay}
                    useGrouping={props.useGrouping}
                    minFractionDigits={props.minFractionDigits}
                    maxFractionDigits={props.maxFractionDigits}
                    min={props.min}
                    max={props.max}
                    format={props.format}
                    showButtons={props.showButtons}
                    buttonLayout={props.buttonLayout}
                    incrementButtonClassName={props.incrementButtonClassName}
                    decrementButtonClassName={props.decrementButtonClassName}
                    incrementButtonIcon={props.incrementButtonIcon}
                    decrementButtonIcon={props.decrementButtonIcon}
                    step={props.step}
                    roundingMode={props.roundingMode}
                    allowEmpty={props.allowEmpty}
                    size={props.size || null}
                    pattern={props.pattern || null}
                    variant={props.variant}
                    invalid={props.invalid}
                    unstyled={props.evalBool(props, 'unstyled')}
                >
                    {props.children}
                </InputNumber>
            </span>
        )
    );
};

PrimeInputNumber.propTypes = {
    id: PropTypes.string,
    name: PropTypes.string,
    className: PropTypes.string,
    inputClassName: PropTypes.string,
    style: PropTypes.object,
    inputStyle: PropTypes.object,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), // Accept number values
    onChange: PropTypes.func,
    onValueChange: PropTypes.func,
    placeholder: PropTypes.string,
    disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    autofocus: PropTypes.bool,
    tabIndex: PropTypes.number,
    inputId: PropTypes.string,
    tooltip: PropTypes.string,
    tooltipOptions: PropTypes.object,
    arialabel: PropTypes.string,
    arialabelledby: PropTypes.string,
    onBlur: PropTypes.func,
    onFocus: PropTypes.func,
    onKeyDown: PropTypes.func,
    locale: PropTypes.string,
    localeMatcher: PropTypes.string,
    mode: PropTypes.oneOf(['decimal', 'currency']),
    prefix: PropTypes.string,
    suffix: PropTypes.string,
    currency: PropTypes.string,
    currencyDisplay: PropTypes.string,
    useGrouping: PropTypes.bool,
    minFractionDigits: PropTypes.number,
    maxFractionDigits: PropTypes.number,
    min: PropTypes.number,
    max: PropTypes.number,
    format: PropTypes.bool,
    showButtons: PropTypes.bool,
    buttonLayout: PropTypes.string,
    incrementButtonClassName: PropTypes.string,
    decrementButtonClassName: PropTypes.string,
    incrementButtonIcon: PropTypes.string,
    decrementButtonIcon: PropTypes.string,
    step: PropTypes.number,
    allowEmpty: PropTypes.bool,
    roundingMode: PropTypes.string,
    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    pattern: PropTypes.string,
    variant: PropTypes.string,
    invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    unstyled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    showif: PropTypes.bool,
    labelKey: PropTypes.string,
    labelClassName: PropTypes.string,
};

PrimeInputNumber.defaultProps = {
    value: null, // Initial value as null
    validateOnly: false,
    invalid: false,
    tooltip: null,
    tooltipOptions: null,
    size: null,
    format: true, // Enables formatting of the input value
    autofocus: false, // AutoFocus is disabled by default
    buttonLayout: 'stacked', // Layout of increment/decrement buttons
    currencyDisplay: 'symbol', // Default currency display as symbol
    roundingMode: 'halfExpand', // Default rounding mode
    localeMatcher: 'bestfit', // Default locale matcher
    variant: 'outlined', // Default input variant
};

export default PrimeWrapper(PrimeInputNumber);