Untitled
update the below code so that we can implement prop for the below 3 things to the existing prime react inputText component: prefixLabelText Used to prepend the value of a prefix label text to the textbox. prefixLabel Used to prepend the value of a key from the Content Manager to the label. labelClassName Used to apply CSS class names to the label element. 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) => { return ( (props.showif != undefined ? props.showif : true) && ( <> <div> <label className={props.labelClassName}>{props.evalLabel(props)}</label> </div> <InputText id={props.id} className={props.className} value={null || props.value} 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} // aria-label={props.aria - label} // aria-required={props.aria - required} onBlur={props.onBlur} onFocus={props.onFocus}> {props.children} </InputText> </> ) ); }; InputText.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: null || 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. */ /** Format definition of the keys to block. */ 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.oneOf(['true', 'false']), /** When present, it specifies that the component should have invalid state style. */ invalid: PropTypes.oneOf(['true', 'false']), /** Setting this attribute will disable the textbox */ disabled: PropTypes.oneOf(['true', 'false']), /** When enabled, it removes component related styles in the core. */ unstyled: PropTypes.oneOf(['true', 'false']), /** Size/width of the input box. */ size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), /** Makes the input field readOnly, so the user cannot modify it's 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','searh','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, ///////////////////////////////////////////////// brought from lift /** 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 * Ex: {"key":"userAccount.registration[0].name[0].firstName"} * labelKey : "Label and <%= key %>" */ labelSubstitute: PropTypes.object, /** Contains key value pairs. The values replace the key in each label * Ex: {"key":"Any string/Function call which returns string"} * labelKey : "Label and <%= key %>" */ labelSubstituteText: PropTypes.object, ///////////////////////////\self defined /** List of CSS classnames to apply on label element */ labelClassName: PropTypes.string, }; InputText.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', }; export default PrimeWrapper(PrimeInputText);
Leave a Comment