moved items to left

feature/appm-store/pbac
Jayasanka 6 years ago
parent ae1d0cbff2
commit 59d3407cd5

@ -1,12 +1,30 @@
import React from "react"; import React from "react";
import "antd/dist/antd.css"; import "antd/dist/antd.css";
import {PageHeader, Typography, Card, Steps, Button, message, Row, Col} from "antd"; import {
PageHeader,
Typography,
Card,
Steps,
Button,
message,
Row,
Col,
Tag,
Tooltip,
Input,
Icon,
Select,
Checkbox,
Form,
Upload
} from "antd";
import Step1 from "./Step1" import Step1 from "./Step1"
import Step2 from "./Step2" import Step2 from "./Step2"
import Step3 from "./Step3" import Step3 from "./Step3"
import styles from "./Style.less"
const Paragraph = Typography; const Paragraph = Typography;
const Dragger = Upload.Dragger;
const routes = [ const routes = [
{ {
path: 'index', path: 'index',
@ -36,6 +54,94 @@ const steps = [{
}]; }];
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 AddNewApp extends React.Component { class AddNewApp extends React.Component {
constructor(props) { constructor(props) {
@ -75,33 +181,67 @@ class AddNewApp extends React.Component {
</PageHeader> </PageHeader>
<div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}> <div style={{background: '#f0f2f5', padding: 24, minHeight: 720}}>
<Row> <Row>
<Col span={16} offset={4}> <Col span={20} offset={2}>
<Card> <Card>
<div> <Row>
<Steps current={current}> <Col span={12}>
{steps.map(item => <Step key={item.title} title={item.title}/>)} <div>
</Steps> <Form layout="horizontal" className={styles.stepForm} hideRequiredMark>
<Content/>
<div className="steps-action"> <Form.Item {...formItemLayout} label="Platform">
{ <Select placeholder="ex: android">
current < steps.length - 1 <Option value="Android">Android</Option>
&& <Button type="primary" onClick={() => this.next()}>Next</Button> <Option value="iOS">iOS</Option>
} </Select>
{ </Form.Item>
current === steps.length - 1 <Form.Item {...formItemLayout} label="Type">
&& <Button type="primary" <Select value="Enterprise">
onClick={() => message.success('Processing complete!')}>Done</Button> <Option value="Enterprise" selected>Enterprise</Option>
} </Select>
{ </Form.Item>
current > 0 <Form.Item {...formItemLayout} label="Name">
&& ( <Input placeholder="App Name"/>
<Button style={{marginLeft: 8}} onClick={() => this.prev()}> </Form.Item>
Previous <Form.Item {...formItemLayout} label="Description">
</Button> <TextArea placeholder="Enter the description" rows={4}/>
) </Form.Item>
} <Form.Item {...formItemLayout} label="Category">
</div> <Select placeholder="Select a category">
</div> <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>
</Col>
<Col span={12}>
</Col>
</Row>
</Card> </Card>
</Col> </Col>
</Row> </Row>

Loading…
Cancel
Save