This is an automated email from the ASF dual-hosted git repository. juzhiyuan pushed a commit to branch feat-route-plugin in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
commit 370f4e82793c5cbb86b9402290269dfc30c35393 Author: juzhiyuan <[email protected]> AuthorDate: Mon Jun 1 12:37:09 2020 +0800 feat: added typing --- 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> ); };
