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:24:34 UTC
[incubator-apisix-dashboard] branch next updated: feat: added
action bar (#227)
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 ef34eb6 feat: added action bar (#227)
ef34eb6 is described below
commit ef34eb6969149f577d07d6d22d7fa94d4eb79091
Author: 琚致远 <ju...@apache.org>
AuthorDate: Mon Jun 1 17:24:28 2020 +0800
feat: added action bar (#227)
---
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';