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 09:19:34 UTC
[incubator-apisix-dashboard] branch feat-ui created (now 8ed600b)
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a change to branch feat-ui
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git.
at 8ed600b feat: added action bar
This branch includes the following new commits:
new 8ed600b feat: added action bar
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
[incubator-apisix-dashboard] 01/01: feat: added action bar
Posted by ju...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
juzhiyuan pushed a commit to branch feat-ui
in repository https://gitbox.apache.org/repos/asf/incubator-apisix-dashboard.git
commit 8ed600b337df41a009fe4ed86aa700d83c1aa08e
Author: juzhiyuan <jj...@gmail.com>
AuthorDate: Mon Jun 1 17:15:54 2020 +0800
feat: added action bar
---
src/global.less | 4 ++
src/pages/Routes/Create.tsx | 62 +++++++---------------
.../Routes/components/ActionBar/ActionBar.tsx | 40 ++++++++++++++
src/pages/Routes/components/ActionBar/index.ts | 1 +
4 files changed, 63 insertions(+), 44 deletions(-)
diff --git a/src/global.less b/src/global.less
index 1b51401..6ea576e 100644
--- a/src/global.less
+++ b/src/global.less
@@ -52,3 +52,7 @@ ol {
min-height: 100vh;
}
}
+
+.ant-pro-sider-light {
+ z-index: 99;
+}
diff --git a/src/pages/Routes/Create.tsx b/src/pages/Routes/Create.tsx
index 707448c..872e4e6 100644
--- a/src/pages/Routes/Create.tsx
+++ b/src/pages/Routes/Create.tsx
@@ -1,9 +1,11 @@
import React, { useState } from 'react';
-import { Card, Steps, Row, Col, Button, message } from 'antd';
+import { Card, Steps } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
+
import Step1 from './components/Step1';
import styles from './Create.less';
import CreateStep3 from './components/CreateStep3';
+import ActionBar from './components/ActionBar';
const { Step } = Steps;
@@ -28,7 +30,7 @@ const Create: React.FC = () => {
},
});
- const [currentStep, setCurrentStep] = useState(0);
+ const [step, setStep] = useState(0);
const [stepHeader] = useState(['定义 API 请求', '定义 API 后端服务', '插件配置', '预览']);
const data = {
step1Data,
@@ -36,7 +38,7 @@ const Create: React.FC = () => {
};
const renderStep = () => {
- switch (currentStep) {
+ switch (step) {
case 0:
return (
<Step1
@@ -51,48 +53,20 @@ const Create: React.FC = () => {
}
};
- const renderActionBar = () => {
- // TODO: form validation
- const onPrev = () => {
- setCurrentStep(currentStep - 1);
- };
- const onNext = () => {
- if (currentStep === 3) {
- message.success('创建成功');
- return;
- }
- setCurrentStep(currentStep + 1);
- };
- return (
- <div>
- <Row justify="center" gutter={10}>
- <Col>
- <Button type="primary" onClick={onPrev} disabled={currentStep === 0}>
- 上一步
- </Button>
- </Col>
- <Col>
- <Button type="primary" onClick={onNext}>
- {currentStep < 3 ? '下一步' : '创建'}
- </Button>
- </Col>
- </Row>
- </div>
- );
- };
-
return (
- <PageHeaderWrapper>
- <Card bordered={false}>
- <Steps current={currentStep} className={styles.steps}>
- {stepHeader.map((item) => (
- <Step title={item} key={item} />
- ))}
- </Steps>
- {renderStep()}
- </Card>
- {renderActionBar()}
- </PageHeaderWrapper>
+ <>
+ <PageHeaderWrapper>
+ <Card bordered={false}>
+ <Steps current={step} className={styles.steps}>
+ {stepHeader.map((item) => (
+ <Step title={item} key={item} />
+ ))}
+ </Steps>
+ {renderStep()}
+ </Card>
+ </PageHeaderWrapper>
+ <ActionBar step={step} onChange={setStep} />
+ </>
);
};
diff --git a/src/pages/Routes/components/ActionBar/ActionBar.tsx b/src/pages/Routes/components/ActionBar/ActionBar.tsx
new file mode 100644
index 0000000..389e44a
--- /dev/null
+++ b/src/pages/Routes/components/ActionBar/ActionBar.tsx
@@ -0,0 +1,40 @@
+import React, { CSSProperties } from 'react';
+
+import { Row, Col, Button } from 'antd';
+
+interface Props {
+ step: number;
+ onChange(nextStep: number): void;
+}
+
+const style: CSSProperties = {
+ position: 'fixed',
+ bottom: 0,
+ right: 10,
+ margin: '-24px -24px 0',
+ backgroundColor: '#fff',
+ padding: '6px 36px',
+ borderTop: '1px solid #ebecec',
+ width: '100%',
+};
+
+const ActionBar: React.FC<Props> = ({ step, onChange }) => {
+ return (
+ <div style={style}>
+ <Row gutter={10} justify="end">
+ <Col>
+ <Button type="primary" onClick={() => onChange(step - 1)} disabled={step === 0}>
+ 上一步
+ </Button>
+ </Col>
+ <Col>
+ <Button type="primary" onClick={() => onChange(step + 1)}>
+ {step < 3 ? '下一步' : '创建'}
+ </Button>
+ </Col>
+ </Row>
+ </div>
+ );
+};
+
+export default ActionBar;
diff --git a/src/pages/Routes/components/ActionBar/index.ts b/src/pages/Routes/components/ActionBar/index.ts
new file mode 100644
index 0000000..d08aed0
--- /dev/null
+++ b/src/pages/Routes/components/ActionBar/index.ts
@@ -0,0 +1 @@
+export { default } from './ActionBar';