function CoordinatesInput()

in src/front/src/components/CoordinatesInput/CoordinatesInput.js [8:60]


function CoordinatesInput() {
    const { ra, setRa, dec, setDec, ang, setAng } = useContext(SearchParamsContext);

    const [tempRa, setTempRa] = useState('');
    const [tempDec, setTempDec] = useState('');
    const [tempAng, setTempAng] = useState('');

    useEffect(() => {
        setTempRa(ra ? formatValueForInput("RA", ra) : '');
        setTempDec(dec ? formatValueForInput("DEC", dec) : '');
        setTempAng(ang ? formatValueForInput("RAD", ang) : '');
    }, [ra, dec, ang]);

    const extractNumericValue = useCallback((value) => {
        const matches = value.match(/-?\d+(\.\d+)?/g);
        return matches && matches.length === 1 ? matches[0].trim() : '';
    }, []);

    const handleBlur = useCallback((value, setState, setTempState, label) => {
        const numericValue = extractNumericValue(value);
        setState(numericValue);
        setTempState(numericValue ? formatValueForInput(label, numericValue) : '');
    }, [extractNumericValue]);

    return (
<>
            <FlowInput
                id="ra-input"
                placeholder="RA,"
                value={tempRa}
                minWidth={80}
                onChange={(e) => setTempRa(e.target.value)}
                onBlur={() => handleBlur(tempRa, setRa, setTempRa, "RA,")}
            />
            <FlowInput
                id="dec-input"
                placeholder="DEC"
                value={tempDec}
                minWidth={105}
                onChange={(e) => setTempDec(e.target.value)}
                onBlur={() => handleBlur(tempDec, setDec, setTempDec, "DEC,")}
            />
            <FlowInput
                id="ang-input"
                placeholder="& RADIUS"
                value={tempAng}
                minWidth={230}
                onChange={(e) => setTempAng(e.target.value)}
                onBlur={() => handleBlur(tempAng, setAng, setTempAng, "RADIUS")}
            />
        </>
    );
}