You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@apisix.apache.org by ju...@apache.org on 2020/06/01 04:39:20 UTC
[incubator-apisix-dashboard] branch next updated: feat: added
typing (#225)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
The following commit(s) were added to refs/heads/next by this push:
new dfad767 feat: added typing (#225)
dfad767 is described below
commit dfad7674997f3b6eb187e1e2b07dbeaf0b9331ba
Author: 琚致远 <ju...@apache.org>
AuthorDate: Mon Jun 1 12:39:14 2020 +0800
feat: added typing (#225)
---
src/components/PluginForm/PluginForm.tsx | 4 +---
src/components/PluginForm/typing.d.ts | 2 ++
src/components/PluginModal/index.tsx | 6 +++--
.../Routes/components/CreateStep3/CreateStep3.tsx | 11 ++++++++-
.../Routes/components/CreateStep3/PluginDrawer.tsx | 26 ++++++++++++++++------
5 files changed, 36 insertions(+), 13 deletions(-)
diff --git a/src/components/PluginForm/PluginForm.tsx b/src/components/PluginForm/PluginForm.tsx
index 361be91..3bc04f8 100644
--- a/src/components/PluginForm/PluginForm.tsx
+++ b/src/components/PluginForm/PluginForm.tsx
@@ -1,6 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Form, Input, Switch, Select, InputNumber, Button } from 'antd';
-import { useForm } from 'antd/es/form/util';
import { PlusOutlined, MinusCircleOutlined } from '@ant-design/icons';
import { useIntl } from 'umi';
@@ -98,9 +97,8 @@ const ArrayComponent: React.FC<ArrayComponentProps> = ({
);
};
-const PluginForm: React.FC<PluginForm.Props> = ({ name, initialData = {}, onFinish }) => {
+const PluginForm: React.FC<PluginForm.Props> = ({ name, form, initialData = {}, onFinish }) => {
const [schema, setSchema] = useState<PluginForm.PluginSchema>();
- const [form] = useForm();
useEffect(() => {
if (name) {
diff --git a/src/components/PluginForm/typing.d.ts b/src/components/PluginForm/typing.d.ts
index b59f80e..80ee8ed 100644
--- a/src/components/PluginForm/typing.d.ts
+++ b/src/components/PluginForm/typing.d.ts
@@ -1,6 +1,8 @@
declare namespace PluginForm {
interface Props {
name?: string;
+ // FormInstance
+ form: any;
initialData?: PluginSchema;
onFinish(values: any): void;
}
diff --git a/src/components/PluginModal/index.tsx b/src/components/PluginModal/index.tsx
index 5080080..25347d1 100644
--- a/src/components/PluginModal/index.tsx
+++ b/src/components/PluginModal/index.tsx
@@ -3,16 +3,18 @@ import { Modal } from 'antd';
import { useIntl } from 'umi';
import PluginForm from '@/components/PluginForm';
+import { useForm } from 'antd/es/form/util';
interface Props {
visible: boolean;
name: string;
- initialData?: PluginSchema;
+ initialData?: PluginForm.PluginSchema;
onFinish(values: any): void;
}
const PluginModal: React.FC<Props> = (props) => {
const { name, visible } = props;
+ const [form] = useForm();
return (
<Modal
@@ -20,7 +22,7 @@ const PluginModal: React.FC<Props> = (props) => {
visible={visible}
title={`${useIntl().formatMessage({ id: 'component.global.edit.plugin' })} ${name}`}
>
- <PluginForm {...props} />
+ <PluginForm form={form} {...props} />
</Modal>
);
};
diff --git a/src/pages/Routes/components/CreateStep3/CreateStep3.tsx b/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
index 199966b..52b95a7 100644
--- a/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
+++ b/src/pages/Routes/components/CreateStep3/CreateStep3.tsx
@@ -72,7 +72,16 @@ const CreateStep3: React.FC<Props> = ({ data }) => {
<PluginDrawer
name={currentPlugin}
active={Boolean(activeList.find((item) => item.name === currentPlugin))}
- onFinish={() => {}}
+ onActive={(name: string) => {
+ setInactiveList(inactiveList.filter((item) => item.name !== name));
+ setActiveList(activeList.concat({ name }));
+ }}
+ onInactive={(name: string) => {
+ setActiveList(activeList.filter((item) => item.name !== name));
+ setInactiveList(inactiveList.concat({ name }));
+ setCurrentPlugin(undefined);
+ }}
+ onFinish={(value) => console.log('plugin data:', value)}
/>
</>
);
diff --git a/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx b/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
index 2656674..59447be 100644
--- a/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
+++ b/src/pages/Routes/components/CreateStep3/PluginDrawer.tsx
@@ -1,14 +1,18 @@
import React, { useState, useEffect } from 'react';
import { Drawer, Button } from 'antd';
+import { useForm } from 'antd/es/form/util';
import PluginForm from '@/components/PluginForm';
-interface Props extends PluginForm.Props {
+interface Props extends Omit<PluginForm.Props, 'form'> {
active?: boolean;
+ onActive(name: string): void;
+ onInactive(name: string): void;
}
-const PluginDrawer: React.FC<Props> = ({ name, active, ...rest }) => {
+const PluginDrawer: React.FC<Props> = ({ name, active, onActive, onInactive, ...rest }) => {
const [visiable, setVisiable] = useState(false);
+ const [form] = useForm();
useEffect(() => {
setVisiable(Boolean(name));
@@ -24,29 +28,37 @@ const PluginDrawer: React.FC<Props> = ({ name, active, ...rest }) => {
width={400}
visible={visiable}
destroyOnClose
+ onClose={() => setVisiable(false)}
footer={
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
<div>
{Boolean(active) && (
- <Button type="primary" danger>
+ <Button type="primary" danger onClick={() => onInactive(name)}>
禁用
</Button>
)}
- {Boolean(!active) && <Button type="primary">启用</Button>}
+ {Boolean(!active) && (
+ <Button type="primary" onClick={() => onActive(name)}>
+ 启用
+ </Button>
+ )}
</div>
{Boolean(active) && (
<div>
<Button onClick={() => setVisiable(false)}>取消</Button>
- <Button type="primary" style={{ marginRight: 8, marginLeft: 8 }}>
+ <Button
+ type="primary"
+ style={{ marginRight: 8, marginLeft: 8 }}
+ onClick={() => form.submit()}
+ >
提交
</Button>
</div>
)}
</div>
}
- onClose={() => setVisiable(false)}
>
- <PluginForm name={name!} {...rest} />
+ <PluginForm name={name!} form={form} {...rest} />
</Drawer>
);
};