58 lines
No EOL
2 KiB
TypeScript
58 lines
No EOL
2 KiB
TypeScript
import Input from "../../UI/inputs/input"
|
||
import { MainButton } from "../../UI/buttons/mainButton";
|
||
import { useState } from "react";
|
||
import { ModalContainer, ModalTitle, ModalContent, ModalText, ButtonContainer } from "../style"
|
||
import { validateIPAddress } from "../../../utils/nodeController/validator";
|
||
|
||
interface Props {
|
||
onSave?: (data: string) => void;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export const AddDevice = ({ onSave, onClose }: Props) => {
|
||
const [ipAddress, setIpAddress] = useState('')
|
||
const [error, setError] = useState(false)
|
||
|
||
const handleSubmit = () => {
|
||
if (!validateIPAddress(ipAddress)) {
|
||
setError(true)
|
||
return;
|
||
}
|
||
// e.preventDefault(); // Предотвращаем перезагрузку страницы
|
||
if (onSave && ipAddress) {
|
||
setError(false)
|
||
onSave(ipAddress);
|
||
onClose();
|
||
}
|
||
};
|
||
|
||
return (
|
||
<ModalContainer style={{ height: '230px' }}>
|
||
{/* <form onSubmit={handleSubmit}> */}
|
||
<ModalTitle>
|
||
<h3>Добавление узла</h3>
|
||
</ModalTitle>
|
||
|
||
<ModalContent style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
|
||
<Input
|
||
type="text"
|
||
placeholderText='Введите адрес узла...'
|
||
id="newIp"
|
||
value={ipAddress}
|
||
onChange={(id, value) => setIpAddress(value)}
|
||
/>
|
||
{error && (
|
||
<p style={{ color: 'red', marginTop: '5px' }}>
|
||
Некорректный адрес узла
|
||
</p>
|
||
)}
|
||
</ModalContent>
|
||
|
||
<ButtonContainer>
|
||
<MainButton type="button" size="small" title="Отмена" onClick={onClose} />
|
||
<MainButton type="submit" size="small" title="Сохранить" onClick={handleSubmit} />
|
||
</ButtonContainer>
|
||
{/* </form> */}
|
||
</ModalContainer>
|
||
)
|
||
} |