Untitled

import React from 'react';
import { InputMask } from 'primereact/inputmask';
import PrimeWrapper from '../primeWrapper/primewrapper';
import PropTypes from 'prop-types';

const PrimeInputMask = (props) => {
    return (
        (props.showif !== undefined ? props.showif : true) && (
            <span className="prime-input-text-wrapper">
                <div>
                    <label className={props.labelClassName}> {props.evalLangText(props)}</label>
                </div>

                <InputMask
                    id={props.id}
                    name={props.name}
                    value={props.value || ''}
                    onChange={props.onChange}
                    className={props.className}
                    style={props.style}
                    placeholder={props.placeholder}
                    disabled={props.disabled}
                    maxLength={props.maxLength}
                    size={props.size}
                    required={props.required}
                    mask={props.mask}
                    slotChar={props.slotChar}
                    autoClear={props.autoClear}
                    unmask={props.unmask}
                    tooltip={props.tooltip || null}
                    tooltipOptions={props.tooltipOptions}
                    ariaLabel={props.ariaLabel}
                    ariaLabelledBy={props.ariaLabelledBy}
                    onBlur={props.onBlur}
                    onFocus={props.onFocus}
                    onComplete={props.onComplete}
                    readOnly={props.readOnly}
                    tabIndex={props.tabIndex}
                    {...props}>
                    {props.children}
                </InputMask>
            </span>
        )
    );
};

PrimeInputMask.propTypes = {
    /** Define a unique id for the component */
    id: PropTypes.string,
    /** Name attribute of the input element. */
    name: PropTypes.string,
    /** The value of component */
    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Event handler triggered when the user commits a change to the component's value. */
    onChange: PropTypes.func,
    /** List of CSS classnames to apply on wrapper element  */
    className: PropTypes.string,
    /** Inline styles applied to apply on wrapper element  */
    style: PropTypes.object,
    /** Temporary text element that can be replaced with something else */
    placeholder: PropTypes.string,
    /** Setting this attribute will disable the textbox */
    disabled: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
    /** Maximum number of characters allowed in the input field. */
    maxLength: PropTypes.number,
    /** Size/width of the input box. */
    size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
    /** Determines if an input is required for Form validation */
    required: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), //////////////////// TO-DO WITH REACT HOOK FORMS
    /**  Defines the pattern for the input mask. For example, `99-9999-9999` or `(999) 999-9999`. */
    mask: PropTypes.string,
    /**  Placeholder character in the input mask. Default is `_`. */
    slotChar: PropTypes.string,
    /**  Determines whether the input value should be cleared if incomplete on blur. Default is `true`. */
    autoClear: PropTypes.bool,
    /**  When set to `true`, the raw value without the mask is submitted. Default is `false`. */
    unmask: PropTypes.bool,
    /** Content of the tooltip. */
    tooltip: PropTypes.string,
    /** Configuration of the tooltip, refer to the tooltip documentation for more information. */
    tooltipOptions: PropTypes.object,
    /** 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.  */
    ariaLabel: PropTypes.string,
    /** Attribute establishes relationships between objects and their label(s), and its value should be one or more element IDs. */
    ariaLabelledBy: PropTypes.string,
    /** 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,
    /** Callback to invoke when input mask is fully filled. */
    onComplete: PropTypes.func,
    /** Sets the input field as read-only. Default is `false`. */
    readOnly: PropTypes.bool,
    /** Specifies the tab order of the input element when the user navigates using the keyboard. */
    tabIndex: PropTypes.number,

    /** 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,
    /** List of CSS classnames to apply on label element  */
    labelClassName: PropTypes.string,
};

PrimeInputMask.defaultProps = {
    value: '',
    className: '',  // Default empty string for className
    style: {},  // Default empty object for style
    placeholder: '',  // Default empty string for placeholder
    disabled: false,  // Default disabled as false
    maxLength: 100,  // Default maxLength set to 100
    size: 20,  // Default size for the input
    required: false,  // Default required as false
    mask: '',  // Default mask as an empty string
    slotChar: '_',  // Default slot character
    autoClear: true,  // Default autoClear as true
    unmask: false,  // Default unmask as false
    readOnly: false,  // Default readOnly as false
    tabIndex: 0,  // Default tabIndex set to 0
    showif: true,  // Default showif to true
};

export default PrimeWrapper(PrimeInputMask);