created the step one

merge-requests/62/head^2
Jayasanka 6 years ago
parent b5dc76d005
commit ae1d0cbff2

@ -1,6 +1,9 @@
import React from "react";
import "antd/dist/antd.css";
import {PageHeader, Typography, Card, Steps, Button, message} from "antd";
import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd";
import Step1 from "./Step1"
import Step2 from "./Step2"
import Step3 from "./Step3"
const Paragraph = Typography;
@ -23,13 +26,13 @@ const Step = Steps.Step;
const steps = [{
title: 'First',
content: 'First-content',
content: Step1
}, {
title: 'Second',
content: 'Second-content',
content: Step2,
}, {
title: 'Last',
content: 'Last-content',
content: Step3,
}];
@ -54,7 +57,8 @@ class AddNewApp extends React.Component {
render() {
const { current } = this.state;
const {current} = this.state;
const Content = steps[current].content;
return (
<div>
<PageHeader
@ -70,33 +74,38 @@ class AddNewApp extends React.Component {
</div>
</PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
<Card>
<div>
<Steps current={current}>
{steps.map(item => <Step key={item.title} title={item.title}/>)}
</Steps>
<div className="steps-content">{steps[current].content}</div>
<div className="steps-action">
{
current < steps.length - 1
&& <Button type="primary" onClick={() => this.next()}>Next</Button>
}
{
current === steps.length - 1
&& <Button type="primary"
onClick={() => message.success('Processing complete!')}>Done</Button>
}
{
current > 0
&& (
<Button style={{marginLeft: 8}} onClick={() => this.prev()}>
Previous
</Button>
)
}
</div>
</div>
</Card>
<Row>
<Col span={16} offset={4}>
<Card>
<div>
<Steps current={current}>
{steps.map(item => <Step key={item.title} title={item.title}/>)}
</Steps>
<Content/>
<div className="steps-action">
{
current < steps.length - 1
&& <Button type="primary" onClick={() => this.next()}>Next</Button>
}
{
current === steps.length - 1
&& <Button type="primary"
onClick={() => message.success('Processing complete!')}>Done</Button>
}
{
current > 0
&& (
<Button style={{marginLeft: 8}} onClick={() => this.prev()}>
Previous
</Button>
)
}
</div>
</div>
</Card>
</Col>
</Row>
</div>
</div>

@ -0,0 +1,153 @@
import React from "react";
import {Form, Input, Button, Select, Divider, Tag, Tooltip, Icon, Checkbox, Row, Col} from "antd";
import styles from './Style.less';
const { Option } = Select;
const { TextArea } = Input;
const InputGroup = Input.Group;
const formItemLayout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
};
class EditableTagGroup extends React.Component {
state = {
tags: [],
inputVisible: false,
inputValue: '',
};
handleClose = (removedTag) => {
const tags = this.state.tags.filter(tag => tag !== removedTag);
console.log(tags);
this.setState({ tags });
}
showInput = () => {
this.setState({ inputVisible: true }, () => this.input.focus());
}
handleInputChange = (e) => {
this.setState({ inputValue: e.target.value });
}
handleInputConfirm = () => {
const { inputValue } = this.state;
let { tags } = this.state;
if (inputValue && tags.indexOf(inputValue) === -1) {
tags = [...tags, inputValue];
}
console.log(tags);
this.setState({
tags,
inputVisible: false,
inputValue: '',
});
}
saveInputRef = input => this.input = input
render() {
const { tags, inputVisible, inputValue } = this.state;
return (
<div>
{tags.map((tag, index) => {
const isLongTag = tag.length > 20;
const tagElem = (
<Tag key={tag} closable={index !== 0} onClose={() => this.handleClose(tag)}>
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
</Tag>
);
return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
})}
{inputVisible && (
<Input
ref={this.saveInputRef}
type="text"
size="small"
style={{ width: 78 }}
value={inputValue}
onChange={this.handleInputChange}
onBlur={this.handleInputConfirm}
onPressEnter={this.handleInputConfirm}
/>
)}
{!inputVisible && (
<Tag
onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }}
>
<Icon type="plus" /> New Tag
</Tag>
)}
</div>
);
}
}
class Step1 extends React.Component {
render() {
console.log("hhhoohh");
return (
<div>
<Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
<Form.Item {...formItemLayout} label="Platform">
<Select placeholder="ex: android">
<Option value="Android">Android</Option>
<Option value="iOS">iOS</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} label="Type">
<Select value="Enterprise">
<Option value="Enterprise" selected>Enterprise</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} label="Name">
<Input placeholder="App Name" />
</Form.Item>
<Form.Item {...formItemLayout} label="Description">
<TextArea placeholder="Enter the description" rows={4} />
</Form.Item>
<Form.Item {...formItemLayout} label="Category">
<Select placeholder="Select a category">
<Option value="travel">Travel</Option>
<Option value="entertainment">Entertainment</Option>
</Select>
</Form.Item>
<Form.Item {...formItemLayout} label="Tags">
<EditableTagGroup/>
</Form.Item>
<Form.Item {...formItemLayout} label="Price">
<Input prefix="$" placeholder="00.00" />
</Form.Item>
<Form.Item {...formItemLayout} label="Share with all tenents?">
<Checkbox > </Checkbox>
</Form.Item>
<Form.Item {...formItemLayout} label="Meta Daa">
<InputGroup>
<Row gutter={8}>
<Col span={5}>
<Input placeholder="Key" />
</Col>
<Col span={10}>
<Input placeholder="value" />
</Col>
<Col span={4}>
<Button type="dashed" shape="circle" icon="plus" />
</Col>
</Row>
</InputGroup>
</Form.Item>
</Form>
</div>
);
}
}
export default Step1;

@ -0,0 +1,12 @@
import React from "react"
class Step2 extends React.Component {
render() {
console.log("hhhoohh");
return (
<p>tttoooeeee</p>
);
}
}
export default Step2;

@ -0,0 +1,12 @@
import React from "react"
class Step3 extends React.Component {
render() {
console.log("hhhoohh");
return (
<p>tttoooeeee</p>
);
}
}
export default Step3;
Loading…
Cancel
Save