Untitled
unknown
plain_text
13 days ago
7.0 kB
2
Indexable
Never
import React, { useState, useEffect } from 'react'; import { InputText } from 'primereact/inputtext'; import PrimeWrapper from '../primeWrapper/primewrapper'; import { Tooltip } from 'primereact/tooltip'; import PropTypes from 'prop-types'; const PrimeInputText = (props) => { const { prefixLabelText, prefixLabel, labelClassName, showif = true } = props; return ( showif && ( <> <div> {/* Render the prefixLabelText or prefixLabel if provided */} {prefixLabelText && ( <span className={`prefix-label ${labelClassName || ''}`}>{prefixLabelText}</span> )} {prefixLabel && ( <span className={`prefix-label ${labelClassName || ''}`}>{prefixLabel}</span> )} {/* Render the main label */} <label className={labelClassName}>{props.evalLabel(props)}</label> </div> <InputText id={props.id} className={props.className} value={props.value || null} onChange={props.onChange} onInput={props.onInput} keyfilter={props.keyfilter} placeholder={props.placeholder} variant={props.variant} //"filled" | "outlined" tooltip={props.tooltip || null} tooltipOptions={props.tooltipOptions} validateOnly={props.validateOnly} invalid={props.invalid} disabled={props.evalBool(props, 'disabled')} unstyled={props.evalBool(props, 'unstyled')} readOnly={props.readOnly} maxLength={props.maxLength} size={props.size || null} type={props.type} style={props.style} autoFocus={props.autofocus} autoComplete={props.autoComplete} tabIndex={props.tabIndex} onBlur={props.onBlur} onFocus={props.onFocus} > {props.children} </InputText> </> ) ); }; PrimeInputText.propTypes = { /** Define a unique id for the component */ id: PropTypes.string, /** List of CSS classnames to apply on wrapper element */ className: PropTypes.string, /** List of CSS classnames to apply on wrapper element for the label */ labelClassName: PropTypes.string, /** The value of component */ value: PropTypes.string, /** Event handler triggered when the user commits a change to the component's value. */ onChange: PropTypes.func, /** Callback to invoke while typing value on input */ onInput: PropTypes.func, /** InputText has built-in key filtering support to block certain keys, refer to keyfilter page for more information. */ keyfilter: PropTypes.oneOf([ 'int', 'pint', 'num', 'pnum', 'money', 'hex', 'alpha', 'alphanum', 'email', ]), /** Temporary text element that can be replaced with something else */ placeholder: PropTypes.string, /** Specifies the input variant of the component. Possible values are "filled" | "outlined" */ variant: PropTypes.oneOf(['filled', 'outlined']), /** Content of the tooltip. */ tooltip: PropTypes.string, /** Configuration of the tooltip, refer to the tooltip documentation for more information. */ tooltipOptions: PropTypes.object, /** When enabled, instead of blocking keys, input is validated internally to test against the regular expression. */ validateOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), /** When present, it specifies that the component should have invalid state style. */ invalid: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), /** Setting this attribute will disable the textbox */ disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), /** When enabled, it removes component related styles in the core. */ unstyled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), /** Size/width of the input box. */ size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), /** Makes the input field readOnly, so the user cannot modify its value. */ readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), /** Maximum number of input characters allowed */ maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), /** Specifies the type of the input element(e.g., 'text','password','email','number','tel','url','search','date','datetime-local','month','week','time'). Default is 'text'. */ type: PropTypes.string, /** Inline styles applied to input element. */ style: PropTypes.object, /** Sets autofocus property on textbox */ autofocus: PropTypes.bool, /** Sets auto complete property on textbox */ autoComplete: PropTypes.string, /** Specifies the tab order of the input element when the user navigates using the keyboard. */ tabIndex: PropTypes.number, /** Attribute is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen */ 'aria-label': PropTypes.string, /** Indicates that input is required */ 'aria-required': PropTypes.bool, /** Takes a user defined javascript function which executes on a 'blur' event */ onBlur: PropTypes.func, /** Event handler which is triggered when the input field gains focus */ onFocus: PropTypes.func, /** Determines if the component is hidden or shown */ showif: PropTypes.bool, /** Accepts a Content Manager key and assigns the value to the label of the input */ labelKey: PropTypes.string, /** Determines if an input is required for Form validation */ required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), /** Contains key-value pairs. The values replace the key in each label */ labelSubstitute: PropTypes.object, /** Contains key-value pairs. The values replace the key in each label */ labelSubstituteText: PropTypes.object, /** Text to prepend as a prefix label inside the input */ prefixLabelText: PropTypes.string, /** Text to prepend from a dynamic source, such as a Content Manager */ prefixLabel: PropTypes.string, }; PrimeInputText.defaultProps = { value: null, keyfilter: null, validateOnly: false, invalid: false, variant: 'outlined', tooltip: null, tooltipOptions: null, unstyled: false, size: null, type: 'text', autoFocus: false, autoComplete: 'on', showif: true, prefixLabelText: '', prefixLabel: '', }; export default PrimeWrapper(PrimeInputText);
Leave a Comment