Untitled
unknown
plain_text
5 months ago
5.4 kB
4
Indexable
import React, { useEffect } from 'react'; import { useFormContext } from 'react-hook-form'; import { InputMask } from 'primereact/inputmask'; import PrimeWrapper from '../primeWrapper/primeWrapper'; import PropTypes from 'prop-types'; import { v4 as uuidv4 } from 'uuid'; import classNames from 'classnames'; import { useAppState, AppContext } from '@d-lift/core'; import { get } from 'lodash'; const PrimeInputMask = (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, model, placeholder, placeholderKey, ariaLabel, ariaLabelKey, tooltip, tooltipKey, validations, children, onBlur, disabled, onChange, ...rest } = props; const { register, unregister, formState: { errors }, setValue, trigger, } = useFormContext(); const { onChange: formOnChange, ...validationProps } = register(model, { validate: validations, onBlur: (e) => { updateEvent(e); if (onBlur) onBlur(e); }, }); const updateEvent = (event) => { Lift.PageEvents.next({ type: 'userEvent', component: 'InputMask', newValue: event.target.value, pageName, context, }); }; // Get the model value using AppContext.model.getValue and set as initial value const [modelValue, setModelValue] = useAppState( model, AppContext.model.getValue(model) || '', ); useEffect(() => { if (modelValue !== undefined) { setModelValue(modelValue); setValue(model, modelValue); } return () => { unregister(model); }; }, [modelValue]); 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> <InputMask id={id || uuidv4() + '_inputMask'} value={modelValue} aria-label={props.evalLangText(ariaLabelKey, ariaLabel)} placeholder={props.evalLangText(placeholderKey, placeholder)} tooltip={props.evalLangText(tooltipKey, tooltip)} invalid={get(errors, model)?.message} {...rest} onChange={(e) => { setModelValue(e.value); setValue(model, e.value); if (onChange) onChange(e); trigger(model); }} disabled={disabled || readOnlyMode} {...validationProps} > {children} </InputMask> {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_${props.id}`} className="p-error" > {get(errors, model)?.message} </div> )} </div> </span> ) ); }; PrimeInputMask.propTypes = { id: PropTypes.string, showIf: PropTypes.bool, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.bool]), model: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired, label: PropTypes.string, labelKey: PropTypes.string, labelClassName: PropTypes.string, ariaLabel: PropTypes.string, ariaLabelKey: PropTypes.string, tooltip: PropTypes.node, tooltipKey: PropTypes.string, placeholder: PropTypes.string, placeholderKey: PropTypes.string, helperTextLabel: PropTypes.string, helperTextLabelKey: PropTypes.string, helperTextClassName: PropTypes.string, helperTextShowIf: PropTypes.bool, children: PropTypes.node, evalRefTableData: PropTypes.func, displayName: PropTypes.string,
Editor is loading...
Leave a Comment