Spaces:
Running
Running
File size: 2,380 Bytes
759768a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import React, { forwardRef } from 'react';
import './Input.css';
const Input = forwardRef(({
type = 'text',
label,
placeholder,
error,
success,
disabled = false,
required = false,
icon,
iconPosition = 'left',
size = 'md',
variant = 'default',
className = '',
helperText,
...props
}, ref) => {
const baseClasses = 'terra-input';
const sizeClasses = `terra-input--${size}`;
const variantClasses = `terra-input--${variant}`;
const stateClasses = [
error && 'terra-input--error',
success && 'terra-input--success',
disabled && 'terra-input--disabled',
icon && `terra-input--with-icon-${iconPosition}`
].filter(Boolean).join(' ');
const inputClasses = [
baseClasses,
sizeClasses,
variantClasses,
stateClasses,
className
].filter(Boolean).join(' ');
const inputId = props.id || `input-${Math.random().toString(36).substr(2, 9)}`;
return (
<div className="terra-input-wrapper">
{label && (
<label htmlFor={inputId} className="terra-input-label">
{label}
{required && <span className="terra-input-required">*</span>}
</label>
)}
<div className="terra-input-container">
{icon && iconPosition === 'left' && (
<span className="terra-input-icon terra-input-icon--left">
{icon}
</span>
)}
<input
ref={ref}
id={inputId}
type={type}
className={inputClasses}
placeholder={placeholder}
disabled={disabled}
required={required}
{...props}
/>
{icon && iconPosition === 'right' && (
<span className="terra-input-icon terra-input-icon--right">
{icon}
</span>
)}
</div>
{(error || success || helperText) && (
<div className="terra-input-feedback">
{error && <span className="terra-input-error">{error}</span>}
{success && <span className="terra-input-success">{success}</span>}
{helperText && !error && !success && (
<span className="terra-input-helper">{helperText}</span>
)}
</div>
)}
</div>
);
});
Input.displayName = 'Input';
export default Input; |