You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
UnitCommitment.jl/web/src/components/Common/Forms/TextInputRow.tsx

52 lines
1.4 KiB

/*
* UnitCommitment.jl: Optimization Package for Security-Constrained Unit Commitment
* Copyright (C) 2020-2025, UChicago Argonne, LLC. All rights reserved.
* Released under the modified BSD license. See COPYING.md for more details.
*/
import formStyles from "./Form.module.css";
import HelpButton from "../Buttons/HelpButton";
import React, { useRef, useState } from "react";
import { ValidationError } from "../../../core/Validation/validate";
interface TextInputRowProps {
label: string;
unit: string;
tooltip: string;
initialValue: string;
onChange: (newValue: string) => ValidationError | null;
}
function TextInputRow(props: TextInputRowProps) {
const [savedValue, setSavedValue] = useState(props.initialValue);
const inputRef = useRef<HTMLInputElement>(null);
const onBlur = (event: React.FocusEvent<HTMLInputElement>) => {
const newValue = event.target.value;
if (newValue === savedValue) return;
const err = props.onChange(newValue);
if (err) {
inputRef.current!.value = savedValue;
return;
}
setSavedValue(newValue);
};
return (
<div className={formStyles.FormRow}>
<label>
{props.label}
<span className={formStyles.FormRow_unit}> ({props.unit})</span>
</label>
<input
ref={inputRef}
type="text"
defaultValue={savedValue}
onBlur={onBlur}
/>
<HelpButton text={props.tooltip} />
</div>
);
}
export default TextInputRow;