/**
* External dependencies
*/
import { forwardRef } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import Label from '../label';
import './style.scss';
const TextInput = forwardRef(
(
{
className,
id,
type = 'text',
ariaLabel,
ariaDescribedBy,
label,
screenReaderLabel,
disabled,
help,
autoCapitalize = 'off',
autoComplete = 'off',
value = '',
onChange,
required = false,
onBlur = () => {},
feedback,
},
ref
) => {
const [ isActive, setIsActive ] = useState( false );
return (
<div
className={ classnames(
'wc-block-components-text-input',
className,
{
'is-active': isActive || value,
}
) }
>
<input
type={ type }
id={ id }
value={ value }
ref={ ref }
autoCapitalize={ autoCapitalize }
autoComplete={ autoComplete }
onChange={ ( event ) => {
onChange( event.target.value );
} }
onFocus={ () => setIsActive( true ) }
onBlur={ () => {
onBlur();
setIsActive( false );
} }
aria-label={ ariaLabel || label }
disabled={ disabled }
aria-describedby={
!! help && ! ariaDescribedBy
? id + '__help'
: ariaDescribedBy
}
required={ required }
/>
<Label
label={ label }
screenReaderLabel={ screenReaderLabel || label }
wrapperElement="label"
wrapperProps={ {
htmlFor: id,
} }
htmlFor={ id }
/>
{ !! help && (
<p
id={ id + '__help' }
className="wc-block-components-text-input__help"
>
{ help }
</p>
) }
{ feedback }
</div>
);
}
);
TextInput.propTypes = {
id: PropTypes.string.isRequired,
onChange: PropTypes.func.isRequired,
value: PropTypes.string,
ariaLabel: PropTypes.string,
ariaDescribedBy: PropTypes.string,
label: PropTypes.string,
screenReaderLabel: PropTypes.string,
disabled: PropTypes.bool,
help: PropTypes.string,
autoCapitalize: PropTypes.string,
autoComplete: PropTypes.string,
required: PropTypes.bool,
};
export default TextInput;