Create New Item
Item Type
File
Folder
Item Name
Search file in folder and subfolders...
Are you sure want to rename?
primogenial
/
languages
/
wp-content
/
plugins
/
woocommerce
/
packages
/
woocommerce-blocks
/
assets
/
js
/
base
/
components
/
text-input
:
text-input.tsx
Advanced Search
Upload
New Item
Settings
Back
Back Up
Advanced Editor
Save
/** * External dependencies */ import { forwardRef, InputHTMLAttributes } from 'react'; import classnames from 'classnames'; import { useState } from '@wordpress/element'; /** * Internal dependencies */ import Label from '../label'; import './style.scss'; interface TextInputProps extends Omit< InputHTMLAttributes< HTMLInputElement >, 'onChange' | 'onBlur' > { id: string; ariaLabel?: string; label?: string; ariaDescribedBy?: string; screenReaderLabel?: string; help?: string; feedback?: boolean | JSX.Element; autoComplete?: string; onChange: ( newValue: string ) => void; onBlur?: ( newValue: string ) => void; } const TextInput = forwardRef< HTMLInputElement, TextInputProps >( ( { className, id, type = 'text', ariaLabel, ariaDescribedBy, label, screenReaderLabel, disabled, help, autoCapitalize = 'off', autoComplete = 'off', value = '', onChange, required = false, onBlur = () => { /* Do nothing */ }, feedback, ...rest }, 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={ ( event ) => { onBlur( event.target.value ); setIsActive( false ); } } aria-label={ ariaLabel || label } disabled={ disabled } aria-describedby={ !! help && ! ariaDescribedBy ? id + '__help' : ariaDescribedBy } required={ required } { ...rest } /> <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> ); } ); export default TextInput;