Untitled
unknown
plain_text
5 months ago
6.2 kB
3
Indexable
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);
Editor is loading...
Leave a Comment