You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by GitBox <gi...@apache.org> on 2020/05/31 15:33:22 UTC
[GitHub] [incubator-apisix-dashboard] juzhiyuan commented on a change in pull request #223: feat: handle Modal close event
juzhiyuan commented on a change in pull request #223:
URL: https://github.com/apache/incubator-apisix-dashboard/pull/223#discussion_r432957813
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -155,63 +169,84 @@ const Step1: React.FC<RoutesModule.StepProps> = ({ data, onChange }) => {
</>
);
- const renderBaseRequestConfig = () => (
- <>
- <PanelSection title="请求基础定义">
- <Form {...formItemLayout} form={form} layout="horizontal" className={styles.stepForm}>
- <Form.Item
- label="协议"
- name="protocol"
- rules={[{ required: true, message: '请勾选协议' }]}
- >
- <Checkbox.Group style={{ width: '100%' }}>
- <Row>
- {['HTTP', 'HTTPS', 'WebSocket'].map((item) => (
- <Col span={6} key={item}>
- <Checkbox value={item}>{item}</Checkbox>
- </Col>
- ))}
- </Row>
- </Checkbox.Group>
- </Form.Item>
- {/* TODO: name */}
- <Form.Item label="HOST" rules={[{ required: true, message: '请输入 HOST' }]}>
- {renderHosts()}
- <Button
- type="primary"
- onClick={() => {
- addHost();
- }}
+ const renderBaseRequestConfig = () => {
+ const onProtocolChange = (e: CheckboxValueType[]) => {
+ if (!e.includes('HTTP') && !e.includes('HTTPS')) return;
+ setProtocolValueList(e as HttpType[]);
+ };
+ const onMethodsChange = (checkedList: CheckboxValueType[]) => {
+ setHttpMethodsList({
+ checkedList: checkedList as HttpMethodsListType[],
+ indeterminate: !!checkedList.length && checkedList.length < httpMethodsOptionList.length,
+ checkAll: checkedList.length === httpMethodsOptionList.length,
+ });
+ };
+ const onCheckAllChange = (e: CheckboxChangeEvent) => {
+ setHttpMethodsList({
Review comment:
,
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -16,17 +20,27 @@ const formItemLayout = {
},
};
+const initEditModalData: RoutesModule.MatchingRule = {
Review comment:
DEFAULT_MODAL_DATA
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -16,17 +20,27 @@ const formItemLayout = {
},
};
+const initEditModalData: RoutesModule.MatchingRule = {
+ paramsLocation: 'query',
+ paramsName: '',
+ paramsExpresstion: '==',
+ paramsValue: '',
+ key: '',
+};
+
const Step1: React.FC<RoutesModule.StepProps> = ({ data, onChange }) => {
const { step1Data } = data;
const { hosts, paths, advancedMatchingRules } = step1Data;
const [form] = Form.useForm();
const [modalVisible, setModalVisible] = useState(false);
- const [editModalData, setEditModalData] = useState<RoutesModule.MatchingRule>({
- paramsLocation: 'query',
- paramsName: '',
- paramsExpresstion: '==',
- paramsValue: '',
- key: '',
+ const [editModalData, setEditModalData] = useState<RoutesModule.MatchingRule>(initEditModalData);
+ const [protocolValueList, setProtocolValueList] = useState<HttpType[]>(['HTTP', 'HTTPS']);
+ const protocolList = ['HTTP', 'HTTPS', 'WebSocket'];
+ const httpMethodsOptionList = ['GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'];
Review comment:
separate them to constants.ts file?
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -16,17 +20,27 @@ const formItemLayout = {
},
};
+const initEditModalData: RoutesModule.MatchingRule = {
+ paramsLocation: 'query',
+ paramsName: '',
+ paramsExpresstion: '==',
+ paramsValue: '',
+ key: '',
+};
+
const Step1: React.FC<RoutesModule.StepProps> = ({ data, onChange }) => {
const { step1Data } = data;
const { hosts, paths, advancedMatchingRules } = step1Data;
const [form] = Form.useForm();
const [modalVisible, setModalVisible] = useState(false);
- const [editModalData, setEditModalData] = useState<RoutesModule.MatchingRule>({
- paramsLocation: 'query',
- paramsName: '',
- paramsExpresstion: '==',
- paramsValue: '',
- key: '',
+ const [editModalData, setEditModalData] = useState<RoutesModule.MatchingRule>(initEditModalData);
+ const [protocolValueList, setProtocolValueList] = useState<HttpType[]>(['HTTP', 'HTTPS']);
+ const protocolList = ['HTTP', 'HTTPS', 'WebSocket'];
+ const httpMethodsOptionList = ['GET', 'HEAD', 'POST', 'PUT', 'DELETE', 'OPTIONS', 'PATCH'];
+ const [httpMethodsList, setHttpMethodsList] = useState({
Review comment:
,
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -1,12 +1,16 @@
import React, { useState } from 'react';
import { Form, Button, Input, Checkbox, Row, Col, Table, Space, Modal, Select } from 'antd';
+import { CheckboxChangeEvent } from 'antd/lib/checkbox';
+import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import styles from '../../Create.less';
-
import PanelSection from '../PanelSection';
const { TextArea } = Input;
const { Option } = Select;
+type HttpMethodsListType = 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS' | 'PATCH';
Review comment:
HttpMethod
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -16,17 +20,27 @@ const formItemLayout = {
},
};
+const initEditModalData: RoutesModule.MatchingRule = {
+ paramsLocation: 'query',
+ paramsName: '',
+ paramsExpresstion: '==',
+ paramsValue: '',
+ key: '',
+};
+
const Step1: React.FC<RoutesModule.StepProps> = ({ data, onChange }) => {
const { step1Data } = data;
const { hosts, paths, advancedMatchingRules } = step1Data;
const [form] = Form.useForm();
const [modalVisible, setModalVisible] = useState(false);
- const [editModalData, setEditModalData] = useState<RoutesModule.MatchingRule>({
- paramsLocation: 'query',
- paramsName: '',
- paramsExpresstion: '==',
- paramsValue: '',
- key: '',
+ const [editModalData, setEditModalData] = useState<RoutesModule.MatchingRule>(initEditModalData);
+ const [protocolValueList, setProtocolValueList] = useState<HttpType[]>(['HTTP', 'HTTPS']);
Review comment:
protocolList
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -16,17 +20,27 @@ const formItemLayout = {
},
};
+const initEditModalData: RoutesModule.MatchingRule = {
+ paramsLocation: 'query',
Review comment:
remove params?
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -16,17 +20,27 @@ const formItemLayout = {
},
};
+const initEditModalData: RoutesModule.MatchingRule = {
+ paramsLocation: 'query',
+ paramsName: '',
+ paramsExpresstion: '==',
+ paramsValue: '',
+ key: '',
+};
+
const Step1: React.FC<RoutesModule.StepProps> = ({ data, onChange }) => {
const { step1Data } = data;
const { hosts, paths, advancedMatchingRules } = step1Data;
const [form] = Form.useForm();
const [modalVisible, setModalVisible] = useState(false);
- const [editModalData, setEditModalData] = useState<RoutesModule.MatchingRule>({
- paramsLocation: 'query',
- paramsName: '',
- paramsExpresstion: '==',
- paramsValue: '',
- key: '',
+ const [editModalData, setEditModalData] = useState<RoutesModule.MatchingRule>(initEditModalData);
+ const [protocolValueList, setProtocolValueList] = useState<HttpType[]>(['HTTP', 'HTTPS']);
Review comment:
or selectedProtocolList
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -1,12 +1,16 @@
import React, { useState } from 'react';
import { Form, Button, Input, Checkbox, Row, Col, Table, Space, Modal, Select } from 'antd';
+import { CheckboxChangeEvent } from 'antd/lib/checkbox';
+import { CheckboxValueType } from 'antd/lib/checkbox/Group';
import styles from '../../Create.less';
-
import PanelSection from '../PanelSection';
const { TextArea } = Input;
const { Option } = Select;
+type HttpMethodsListType = 'GET' | 'HEAD' | 'POST' | 'PUT' | 'DELETE' | 'OPTIONS' | 'PATCH';
+type HttpType = 'HTTPS' | 'HTTP';
Review comment:
RequestProtocol
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -251,56 +292,62 @@ const Step1: React.FC<RoutesModule.StepProps> = ({ data, onChange }) => {
return (
<>
Review comment:
,
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -16,17 +20,27 @@ const formItemLayout = {
},
};
+const initEditModalData: RoutesModule.MatchingRule = {
+ paramsLocation: 'query',
+ paramsName: '',
+ paramsExpresstion: '==',
+ paramsValue: '',
+ key: '',
+};
+
const Step1: React.FC<RoutesModule.StepProps> = ({ data, onChange }) => {
const { step1Data } = data;
const { hosts, paths, advancedMatchingRules } = step1Data;
const [form] = Form.useForm();
const [modalVisible, setModalVisible] = useState(false);
- const [editModalData, setEditModalData] = useState<RoutesModule.MatchingRule>({
- paramsLocation: 'query',
- paramsName: '',
- paramsExpresstion: '==',
- paramsValue: '',
- key: '',
+ const [editModalData, setEditModalData] = useState<RoutesModule.MatchingRule>(initEditModalData);
Review comment:
no need typing here
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -155,63 +169,84 @@ const Step1: React.FC<RoutesModule.StepProps> = ({ data, onChange }) => {
</>
);
- const renderBaseRequestConfig = () => (
- <>
- <PanelSection title="请求基础定义">
- <Form {...formItemLayout} form={form} layout="horizontal" className={styles.stepForm}>
- <Form.Item
- label="协议"
- name="protocol"
- rules={[{ required: true, message: '请勾选协议' }]}
- >
- <Checkbox.Group style={{ width: '100%' }}>
- <Row>
- {['HTTP', 'HTTPS', 'WebSocket'].map((item) => (
- <Col span={6} key={item}>
- <Checkbox value={item}>{item}</Checkbox>
- </Col>
- ))}
- </Row>
- </Checkbox.Group>
- </Form.Item>
- {/* TODO: name */}
- <Form.Item label="HOST" rules={[{ required: true, message: '请输入 HOST' }]}>
- {renderHosts()}
- <Button
- type="primary"
- onClick={() => {
- addHost();
- }}
+ const renderBaseRequestConfig = () => {
+ const onProtocolChange = (e: CheckboxValueType[]) => {
+ if (!e.includes('HTTP') && !e.includes('HTTPS')) return;
+ setProtocolValueList(e as HttpType[]);
+ };
+ const onMethodsChange = (checkedList: CheckboxValueType[]) => {
Review comment:
,
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -230,6 +265,12 @@ const Step1: React.FC<RoutesModule.StepProps> = ({ data, onChange }) => {
setModalVisible(false);
};
+ const handleClose = () => {
Review comment:
,
##########
File path: src/pages/Routes/components/Step1/index.tsx
##########
@@ -155,63 +169,84 @@ const Step1: React.FC<RoutesModule.StepProps> = ({ data, onChange }) => {
</>
);
- const renderBaseRequestConfig = () => (
- <>
- <PanelSection title="请求基础定义">
- <Form {...formItemLayout} form={form} layout="horizontal" className={styles.stepForm}>
- <Form.Item
- label="协议"
- name="protocol"
- rules={[{ required: true, message: '请勾选协议' }]}
- >
- <Checkbox.Group style={{ width: '100%' }}>
- <Row>
- {['HTTP', 'HTTPS', 'WebSocket'].map((item) => (
- <Col span={6} key={item}>
- <Checkbox value={item}>{item}</Checkbox>
- </Col>
- ))}
- </Row>
- </Checkbox.Group>
- </Form.Item>
- {/* TODO: name */}
- <Form.Item label="HOST" rules={[{ required: true, message: '请输入 HOST' }]}>
- {renderHosts()}
- <Button
- type="primary"
- onClick={() => {
- addHost();
- }}
+ const renderBaseRequestConfig = () => {
+ const onProtocolChange = (e: CheckboxValueType[]) => {
+ if (!e.includes('HTTP') && !e.includes('HTTPS')) return;
+ setProtocolValueList(e as HttpType[]);
+ };
+ const onMethodsChange = (checkedList: CheckboxValueType[]) => {
+ setHttpMethodsList({
+ checkedList: checkedList as HttpMethodsListType[],
+ indeterminate: !!checkedList.length && checkedList.length < httpMethodsOptionList.length,
+ checkAll: checkedList.length === httpMethodsOptionList.length,
+ });
+ };
+ const onCheckAllChange = (e: CheckboxChangeEvent) => {
+ setHttpMethodsList({
+ checkedList: e.target.checked ? httpMethodsOptionList : [],
+ indeterminate: false,
+ checkAll: e.target.checked,
+ });
+ };
+ return (
+ <>
Review comment:
,
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org