Function InputText

solidui-web/src/components/InputText/InputText.tsx:31–84

({
	className,
	style,
	value = "",
	disabled = false,
	onChange,
}: InputTextProps)

}

function InputText({
	className,
	style,
	value = "",
	disabled = false,
	onChange,
}: InputTextProps) {
	const [stateValue, setStateValue] = useState(value);

	useEffect(() => {
		setStateValue(value);
	}, [value]);

	function update(pValue: string) {
		setStateValue(pValue);
		if (onChange) {
			onChange(pValue);
		}
	}

	function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
		update(event.target.value);
	}

	const inputWidth = 100;

	const _style: React.CSSProperties = {
		display: "flex",
		justifyContent: "center",
		alignItems: "center",
		width: "100%",
		...style,
	};

	if (disabled) {
		_style.cursor = "not-allowed";
	}

	return (
		<div
			className={classNames("solid-elem", "solid-input-text", className)}
			style={_style}
		>
			<input
				type="text"
				inputMode="text"
				value={stateValue}
				style={{ width: `${inputWidth}%` }}
				onChange={handleChange}
				disabled={disabled}
			/>
		</div>
	);
}

export default InputText;