added min-max values check in latency (#158)

* added min-max values check in latency

* error handling antd way

* separated rules validation logic into functions
This commit is contained in:
Sai Deepesh 2021-06-12 10:30:10 +05:30 committed by GitHub
parent a118c3c8a1
commit 72f5688194
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import { Modal, Form, InputNumber, Col, Row } from "antd"; import { Modal, Form, InputNumber, Col, Row } from "antd";
import { Store } from "antd/lib/form/interface"; import { NamePath, Store } from "antd/lib/form/interface";
interface LatencyModalFormProps { interface LatencyModalFormProps {
onCreate: (values: Store) => void; //Store is defined in antd forms library onCreate: (values: Store) => void; //Store is defined in antd forms library
@ -13,13 +13,32 @@ const LatencyModalForm: React.FC<LatencyModalFormProps> = ({
onCancel, onCancel,
latencyFilterValues, latencyFilterValues,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const validateMinValue = ({ getFieldValue }: {getFieldValue: (name: NamePath) => any}) => ({
validator(_, value: any) {
if (value < getFieldValue('max')) {
return Promise.resolve();
}
return Promise.reject(new Error('Min value should be less than Max value'));
},
})
const validateMaxValue = ({ getFieldValue }: {getFieldValue: (name: NamePath) => any}) => ({
validator(_, value: any) {
if (value > getFieldValue('min')) {
return Promise.resolve();
}
return Promise.reject(new Error('Max value should be greater than Min value'));
},
})
return ( return (
<Modal <Modal
visible={true} visible={true}
title="Chose min and max values of Latency" title="Chose min and max values of Latency"
okText="Apply" okText="Apply"
cancelText="Cancel" cancelText="Cancel"
onCancel={onCancel} onCancel={onCancel}
onOk={() => { onOk={() => {
form form
@ -31,7 +50,7 @@ const LatencyModalForm: React.FC<LatencyModalFormProps> = ({
.catch((info) => { .catch((info) => {
console.log("Validate Failed:", info); console.log("Validate Failed:", info);
}); });
}} }}
> >
<Form <Form
form={form} form={form}
@ -44,14 +63,19 @@ const LatencyModalForm: React.FC<LatencyModalFormProps> = ({
<Col span={12}> <Col span={12}>
<Form.Item <Form.Item
name="min" name="min"
label="Min (in ms)" label="Min (in ms)"
rules={[validateMinValue]}
// rules={[{ required: true, message: 'Please input the title of collection!' }]} // rules={[{ required: true, message: 'Please input the title of collection!' }]}
> >
<InputNumber /> <InputNumber />
</Form.Item> </Form.Item>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Form.Item name="max" label="Max (in ms)"> <Form.Item
name="max"
label="Max (in ms)"
rules = {[validateMaxValue]}
>
<InputNumber /> <InputNumber />
</Form.Item> </Form.Item>
</Col> </Col>