Untitled

import React, { useEffect } from 'react';
import { useFormContext } from 'react-hook-form';
import { InputNumber } from 'primereact/inputnumber';
import PrimeWrapper from '../primeWrapper/primeWrapper';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { v4 as uuidv4 } from 'uuid';
import { useAppState, AppContext, Lift } from '@d-lift/core';
import { get } from 'lodash';

const PrimeInputNumber = (props) => {
    const pageName = AppContext.pagedetails.getPageName();
    const context = AppContext.pagedetails.getRootContext();
    const readOnlyModeModel = `${context}_${pageName}_readOnlyMode`;
    const readOnlyMode = AppContext.model.getValue(readOnlyModeModel) || false;

    const {
        id,
        value,
        model,
        validations,
        children,
        placeholder,
        placeholderKey,
        ariaLabel,
        ariaLabelKey,
        tooltip,
        tooltipKey,
        onBlur,
        onChange,
        evalRefTableData,
        displayName,
        evalLangText,
        evalAria,
        defaultOption,
        disabled,
        noOptionsMessage,
        ...rest
    } = props;

    const {
        register,
        unregister,
        formState: { errors },
        setValue,
        trigger,
    } = useFormContext();

    const updateEvent = (event) => {
        Lift.PageEvents.next({
            type: 'userEvent',
            component: 'InputNumber',
            newValue: event.value,
            pageName: pageName,
            context: context,
        });
    };

    const [modelValue, setModelValue] = useAppState(model, value !== undefined ? value : '');

    useEffect(() => {
        const initialValue = AppContext.model.getValue(model);
        if (initialValue !== undefined) {
            setModelValue(initialValue);
            setValue(model, initialValue);
        } else if (modelValue !== undefined) {
            setModelValue(modelValue);
            setValue(model, modelValue);
        }

        return () => {
            unregister(model);
        };
    }, [modelValue, setValue, unregister, model]);

    return (
        (props.showIf !== undefined ? props.showIf : true) && (
            <span className="prime-input-text-wrapper">
                {(props.label || props.labelKey) && (
                    <label className={props.labelClassName}>
                        {props.evalLangText(props.labelKey, props.label)}
                    </label>
                )}
                <div>
                    <InputNumber
                        id={id || `${uuidv4()}_inputNumber`}
                        value={modelValue}
                        aria-label={props.evalLangText(ariaLabelKey, ariaLabel)}
                        placeholder={props.evalLangText(placeholderKey, placeholder)}
                        tooltip={props.evalLangText(tooltipKey, tooltip)}
                        {...rest}
                        disabled={disabled || readOnlyMode}
                        invalid={get(errors, model)?.message}
                        onChange={(e) => {
                            setModelValue(e.value);
                            setValue(model, e.value);
                            if (onChange) onChange(e);
                            trigger(model);
                        }}
                        onBlur={(e) => {
                            updateEvent(e);
                            if (onBlur) onBlur(e);
                        }}
                        {...register(model, {
                            validate: validations,
                        })}
                    >
                        {children}
                    </InputNumber>
                    {props.helperTextShowIf &&
                        (props.helperTextLabelKey || props.helperTextLabel) && (
                            <div>
                                <small
                                    className={classNames(
                                        'ux-input-helper-text',
                                        props.helperTextClassName,
                                    )}
                                >
                                    {props.evalLangText(
                                        props.helperTextLabelKey,
                                        props.helperTextLabel,
                                    )}
                                </small>
                            </div>
                        )}
                    {get(errors, model)?.message && (
                        <div
                            id={`errorMessageSpanForElementWithId_${id}`}
                            className="p-error"
                        >
                            {get(errors, model)?.message}
                        </div>
                    )}
                </div>
            </span>
        )
    );
};

PrimeInputNumber.propTypes = {
    // All prop types as defined earlier
    id: PropTypes.string,
    showIf: PropTypes.bool,
    labelKey: PropTypes.string,
    label: PropTypes.string,
    labelClassName: PropTypes.string,
    helperTextLabel: PropTypes.string,
    helperTextLabelKey: PropTypes.string,
    helperTextClassName: PropTypes.string,
    helperTextShowIf: PropTypes.bool,
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]),
    model: PropTypes.object,
    validations: PropTypes.arrayOf(
        PropTypes.shape({
            rule: PropTypes.string.isRequired,
            message: PropTypes.string,
        }),
    ),
    children: PropTypes.node,
    onBlur: PropTypes.func,
    onChange: PropTypes.func,
    placeholder: PropTypes.string,
    placeholderKey: PropTypes.string,
    ariaLabel: PropTypes.string,
    ariaLabelKey: PropTypes.string,
    tooltip: PropTypes.node,
    tooltipKey: PropTypes.string,
    evalRefTableData: PropTypes.func,
    displayName: PropTypes.string,
    evalLangText: PropTypes.func,
    evalAria: PropTypes.func,
    defaultOption: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
    noOptionsMessage: PropTypes.func,
    disabled: PropTypes.bool,
};

PrimeInputNumber.defaultProps = {};

export default PrimeWrapper(PrimeInputNumber);