antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix subname can be set to empty string

Browse Source
This commit is contained in:
Anton Tranelis 2024-07-29 21:35:58 +02:00
parent bb28bd3cf8
commit 6503ce7efc
1 changed files with 32 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/Components/Input/TextInput.tsx
View File

@ -15,17 +15,38 @@ type InputTextProps = {
}
export function TextInput({labelTitle, labelStyle, type, dataField, containerStyle, inputStyle, defaultValue, placeholder, autocomplete, updateFormValue} : InputTextProps){
export function TextInput({ labelTitle, labelStyle, type, dataField, containerStyle, inputStyle, defaultValue, placeholder, autocomplete, updateFormValue }: InputTextProps) {
const [inputValue, setInputValue] = useState<string>(defaultValue || "");
return(
useEffect(() => {
setInputValue(defaultValue || "");
}, [defaultValue]);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const newValue = e.target.value;
setInputValue(newValue);
if (updateFormValue) {
updateFormValue(newValue);
}
};
return (
<div className={`tw-form-control ${containerStyle}`}>
{labelTitle ? <label className="tw-label">
<span className={"tw-label-text tw-text-base-content " + labelStyle}>{labelTitle}</span>
</label>
: " "}
<input required type={type || "text"} name={dataField} defaultValue={defaultValue} placeholder={placeholder || ""} autoComplete={autocomplete} onChange={(e) => updateFormValue&& updateFormValue(e.target.value)}className={`tw-input tw-input-bordered tw-w-full ${inputStyle ? inputStyle : ""}`} />
{labelTitle ? (
<label className="tw-label">
<span className={`tw-label-text tw-text-base-content ${labelStyle}`}>{labelTitle}</span>
</label>
) : null}
<input
required
type={type || "text"}
name={dataField}
value={inputValue}
placeholder={placeholder || ""}
autoComplete={autocomplete}
onChange={handleChange}
className={`tw-input tw-input-bordered tw-w-full ${inputStyle || ""}`}
/>
</div>
)
}
);
}