forked from community/device-mgt-core
Added form validation and image visualization to application and platform create. Removed hash router and used browser router.
Menaka Jayawardena
7 years ago
parent
89b4e6dc10
commit
b70bf91f3a
31
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.js
31
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step1.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step1.js
@ -0,0 +1,489 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import Chip from 'material-ui/Chip';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import React, {Component} from 'react';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
import Clear from 'material-ui/svg-icons/content/clear';
|
||||
import {GridList, GridTile} from 'material-ui/GridList';
|
||||
|
||||
/**
|
||||
* The Second step of application create wizard.
|
||||
* This contains following components.
|
||||
* * App Title
|
||||
* * Short Description
|
||||
* * Application Description
|
||||
* * Application Visibility
|
||||
* * Application Tags : {Used Material UI Chip component}
|
||||
* * Application Category.
|
||||
* * Platform Specific properties.
|
||||
* * Screenshots
|
||||
* * Banner
|
||||
* * Icon
|
||||
*
|
||||
* Parent Component: Create
|
||||
* Props:
|
||||
* * handleNext : {type: function, Invokes handleNext function in Parent.}
|
||||
* * handlePrev : {type: function, Invokes handlePrev function in Parent}
|
||||
* * setData : {type: function, Invokes setStepData function in Parent}
|
||||
* * removeData : {type: Invokes removeStepData function in Parent}
|
||||
* */
|
||||
class Step2 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
tags: [],
|
||||
defValue: "",
|
||||
category: 0,
|
||||
visibility: 0,
|
||||
errors: {},
|
||||
title: "",
|
||||
shortDescription: "",
|
||||
description: "",
|
||||
banner: [],
|
||||
screenshots: [],
|
||||
icon: []
|
||||
};
|
||||
|
||||
this.styles = {
|
||||
chip: {
|
||||
margin: 4,
|
||||
},
|
||||
wrapper: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Create a tag on Enter key press and set it to the state.
|
||||
* Clears the tags text field.
|
||||
* Chip gets two parameters: Key and value.
|
||||
* */
|
||||
_addTags(event) {
|
||||
let tags = this.state.tags;
|
||||
if (event.charCode === 13) {
|
||||
event.preventDefault();
|
||||
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
|
||||
this.setState({tags, defValue: ""});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the value for tag.
|
||||
* */
|
||||
_handleTagChange(event) {
|
||||
let defaultValue = this.state.defValue;
|
||||
defaultValue = event.target.value;
|
||||
this.setState({defValue: defaultValue})
|
||||
}
|
||||
|
||||
/**
|
||||
* Invokes the handleNext function in Create component.
|
||||
* */
|
||||
_handleNext() {
|
||||
let fields = [{name: "Title", value: this.state.title},
|
||||
{name: "Short Description", value: this.state.shortDescription},
|
||||
{name: "Description", value: this.state.description},
|
||||
{name: "Banner", value: this.state.banner},
|
||||
{name: "Screenshots", value: this.state.screenshots},
|
||||
{name: "Icon", value: this.state.icon}];
|
||||
this._validate(fields);
|
||||
// this.props.handleNext();
|
||||
}
|
||||
|
||||
/**
|
||||
* Invokes the handlePrev function in Create component.
|
||||
* */
|
||||
_handlePrev() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Chip delete function.
|
||||
* Removes the tag from state.tags
|
||||
* */
|
||||
_handleRequestDelete = (key) => {
|
||||
this.chipData = this.state.tags;
|
||||
const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
|
||||
this.chipData.splice(chipToDelete, 1);
|
||||
this.setState({tags: this.chipData});
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates Chip array from state.tags.
|
||||
* */
|
||||
_renderChip(data) {
|
||||
return (
|
||||
<Chip
|
||||
key={data.key}
|
||||
onRequestDelete={() => this._handleRequestDelete(data.key)}
|
||||
style={this.styles.chip}
|
||||
>
|
||||
{data.value}
|
||||
</Chip>
|
||||
);
|
||||
}
|
||||
|
||||
_onVisibilitySelect = (event, index, value) => {
|
||||
console.log(value);
|
||||
let comp = <SelectField> <MenuItem value={0} primaryText="Public"/>
|
||||
<MenuItem value={1} primaryText="Roles"/>
|
||||
<MenuItem value={2} primaryText="Devices"/> </SelectField>;
|
||||
if (value === 1) {
|
||||
this.setState({visibilityComponent: comp});
|
||||
} else if (value === 2) {
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Validate the form.
|
||||
* */
|
||||
_validate(fields) {
|
||||
let errors = {};
|
||||
let errorsPresent = false;
|
||||
fields.forEach(function (field) {
|
||||
switch (field.name) {
|
||||
case 'Title': {
|
||||
if (field.value === "") {
|
||||
errors[field.name] = field.name + " is required!";
|
||||
errorsPresent = true;
|
||||
} else {
|
||||
errorsPresent = false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Short Description': {
|
||||
if (field.value === "") {
|
||||
errors[field.name] = field.name + " is required!";
|
||||
errorsPresent = true;
|
||||
} else {
|
||||
errorsPresent = false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Description': {
|
||||
if (field.value === "") {
|
||||
errors[field.name] = field.name + " is required!";
|
||||
errorsPresent = true;
|
||||
} else {
|
||||
errorsPresent = false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Banner': {
|
||||
if (field.value.length === 0) {
|
||||
errors[field.name] = field.name + " is required!";
|
||||
errorsPresent = true;
|
||||
} else {
|
||||
errorsPresent = false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Icon': {
|
||||
if (field.value.length === 0) {
|
||||
errors[field.name] = field.name + " is required!";
|
||||
errorsPresent = true;
|
||||
} else {
|
||||
errorsPresent = false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
case 'Screenshots': {
|
||||
if (field.value.length < 3) {
|
||||
errors[field.name] = "3 " +field.name + " are required!";
|
||||
errorsPresent = true;
|
||||
} else {
|
||||
errorsPresent = false;
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
console.log(errorsPresent);
|
||||
if (!errorsPresent) {
|
||||
this._setStepData();
|
||||
} else {
|
||||
this.setState({errors: errors}, console.log(errors));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an object with the current step data and persist in the parent.
|
||||
* */
|
||||
_setStepData() {
|
||||
let stepData = {
|
||||
title: this.state.title,
|
||||
description: this.state.description,
|
||||
shortDescription: this.state.shortDescription,
|
||||
tags: this.state.tags,
|
||||
banner: this.state.banner,
|
||||
screenshots: this.state.screenshots,
|
||||
icon: this.state.icon
|
||||
};
|
||||
|
||||
this.props.setData("step2", {step: stepData});
|
||||
}
|
||||
|
||||
/**
|
||||
* Set text field values to state.
|
||||
* */
|
||||
_onTextFieldChange(event, value) {
|
||||
let field = event.target.id;
|
||||
switch (field) {
|
||||
case "title": {
|
||||
this.setState({title: value});
|
||||
break;
|
||||
}
|
||||
case "shortDescription": {
|
||||
this.setState({shortDescription: value});
|
||||
break;
|
||||
}
|
||||
case "description": {
|
||||
this.setState({description: value});
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removed user uploaded banner.
|
||||
* */
|
||||
_removeBanner(event, d) {
|
||||
console.log(event, d);
|
||||
this.setState({banner: []});
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes uploaded icon.
|
||||
* */
|
||||
_removeIcon(event) {
|
||||
this.setState({icon: []});
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes selected screenshot.
|
||||
* */
|
||||
_removeScreenshot(event) {
|
||||
console.log(event.target)
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.state.visibilityComponent);
|
||||
const contentStyle = {margin: '0 16px'};
|
||||
return (
|
||||
<div style={contentStyle}>
|
||||
<div>
|
||||
<div>
|
||||
<TextField
|
||||
id="title"
|
||||
hintText="Enter a title for your application."
|
||||
errorText={this.state.errors["Title"]}
|
||||
floatingLabelText="Title*"
|
||||
floatingLabelFixed={true}
|
||||
onChange={this._onTextFieldChange.bind(this)}
|
||||
/><br/>
|
||||
<TextField
|
||||
id="shortDescription"
|
||||
hintText="Enter a short description for your application."
|
||||
errorText={this.state.errors["Short Description"]}
|
||||
floatingLabelText="Short Description*"
|
||||
floatingLabelFixed={true}
|
||||
multiLine={true}
|
||||
rows={2}
|
||||
onChange={this._onTextFieldChange.bind(this)}
|
||||
|
||||
/><br/>
|
||||
<TextField
|
||||
id="description"
|
||||
errorText={this.state.errors["Description"]}
|
||||
hintText="Enter the description."
|
||||
floatingLabelText="Description*"
|
||||
floatingLabelFixed={true}
|
||||
multiLine={true}
|
||||
rows={4}
|
||||
onChange={this._onTextFieldChange.bind(this)}
|
||||
/><br/>
|
||||
<SelectField
|
||||
floatingLabelText="Visibility*"
|
||||
value={this.state.visibility}
|
||||
floatingLabelFixed={true}
|
||||
onChange={this._onVisibilitySelect.bind(this)}
|
||||
>
|
||||
<MenuItem value={0} primaryText="Public"/>
|
||||
<MenuItem value={1} primaryText="Roles"/>
|
||||
<MenuItem value={2} primaryText="Devices"/>
|
||||
</SelectField><br/>
|
||||
<TextField
|
||||
id="tags"
|
||||
errorText={this.state.errors["tags"]}
|
||||
hintText="Enter application tags.."
|
||||
floatingLabelText="Tags*"
|
||||
floatingLabelFixed={true}
|
||||
value={this.state.defValue}
|
||||
onChange={this._handleTagChange.bind(this)}
|
||||
onKeyPress={this._addTags.bind(this)}
|
||||
/><br/>
|
||||
<div style={this.styles.wrapper}>
|
||||
{this.state.tags.map(this._renderChip, this)}
|
||||
</div>
|
||||
<br/>
|
||||
<SelectField
|
||||
floatingLabelText="Category*"
|
||||
value={this.state.category}
|
||||
floatingLabelFixed={true}
|
||||
>
|
||||
<MenuItem value={0} primaryText="Business"/>
|
||||
</SelectField> <br/>
|
||||
{/*Platform Specific Properties.*/}
|
||||
<div style={{border: 'solid #BDBDBD 1px'}}>
|
||||
<p style={{color: '#BDBDBD'}}>Platform Specific Properties</p>
|
||||
</div>
|
||||
<br/>
|
||||
<div>
|
||||
<p style={{color: '#f44336'}}>{this.state.errors["Banner"]}</p>
|
||||
<p style={{color: '#BDBDBD'}}>Banner*:</p>
|
||||
<GridList style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
overflowX: 'auto',
|
||||
}} cols={1.1}>
|
||||
{this.state.banner.map((tile) => (
|
||||
<GridTile key={Math.floor(Math.random() * 1000)}
|
||||
title={tile.name}
|
||||
actionIcon={
|
||||
<IconButton onClick={this._removeBanner.bind(this)}>
|
||||
<Clear />
|
||||
</IconButton>}>
|
||||
<img src={tile.preview}/></GridTile>
|
||||
))}
|
||||
{this.state.banner.length === 0 ?
|
||||
<Dropzone style={{width: '300px', height: '150px', border: 'dashed #BDBDBD 1px'}}
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(banner, rejected) => {
|
||||
this.setState({banner, rejected});
|
||||
}}>
|
||||
<p style={{margin: '70px 40px 40px 150px'}}>+</p>
|
||||
</Dropzone> : <div />}
|
||||
|
||||
</GridList>
|
||||
|
||||
</div>
|
||||
<br/>
|
||||
<div>
|
||||
<p style={{color: '#f44336'}}>{this.state.errors["Screenshots"]}</p>
|
||||
<p style={{color: '#BDBDBD'}}>Screenshots*:</p>
|
||||
<GridList style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
overflowX: 'auto',
|
||||
}} cols={1.1}>
|
||||
{this.state.screenshots.map((file) => (
|
||||
<GridTile key={Math.floor(Math.random() * 1000)}
|
||||
title={file[0].name}
|
||||
actionIcon={
|
||||
<IconButton onClick={this._removeScreenshot.bind(this)}>
|
||||
<Clear/>
|
||||
</IconButton>}>
|
||||
<img src={file[0].preview}/></GridTile>
|
||||
))}
|
||||
{this.state.screenshots.length < 3 ?
|
||||
<Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(screenshots, rejected) => {
|
||||
let tmpScreenshots = this.state.screenshots;
|
||||
tmpScreenshots.push(screenshots);
|
||||
this.setState({
|
||||
screenshots: tmpScreenshots});
|
||||
}}>
|
||||
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
|
||||
</Dropzone> : <div />}
|
||||
</GridList>
|
||||
</div>
|
||||
<br/>
|
||||
<div>
|
||||
<p style={{color: '#f44336'}}>{this.state.errors["Icon"]}</p>
|
||||
<p style={{color: '#BDBDBD'}}>Icon*:</p>
|
||||
<GridList style={{
|
||||
display: 'flex',
|
||||
flexWrap: 'nowrap',
|
||||
overflowX: 'auto',
|
||||
}} cols={1.1}>
|
||||
{this.state.icon.map((tile) => (
|
||||
<GridTile key={Math.floor(Math.random() * 1000)}
|
||||
title={tile.name}
|
||||
actionIcon={
|
||||
<IconButton onClick={this._removeIcon.bind(this)}>
|
||||
<Clear />
|
||||
</IconButton>}>
|
||||
<img src={tile.preview}/></GridTile>
|
||||
))}
|
||||
{this.state.icon.length === 0 ?
|
||||
<Dropzone style={{width: '150px', height: '150px', border: 'dashed #BDBDBD 1px'}}
|
||||
accept="image/jpeg, image/png"
|
||||
onDrop={(icon, rejected) => {this.setState({icon, rejected});}}>
|
||||
<p style={{margin: '70px 40px 70px 70px'}}>+</p>
|
||||
</Dropzone> : <div />}
|
||||
</GridList>
|
||||
</div>
|
||||
<br/>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<br/>
|
||||
<div style={{marginTop: 12}}>
|
||||
<FlatButton
|
||||
label="< Back"
|
||||
disabled={false}
|
||||
onClick={this._handlePrev.bind(this)}
|
||||
style={{marginRight: 12}}
|
||||
/>
|
||||
<RaisedButton
|
||||
label="Next >"
|
||||
primary={true}
|
||||
onClick={this._handleNext.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Step2.prototypes = {
|
||||
handleNext: PropTypes.func,
|
||||
handlePrev: PropTypes.func,
|
||||
setData: PropTypes.func,
|
||||
removeData: PropTypes.func
|
||||
};
|
||||
|
||||
export default Step2;
|
||||
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.js
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/Step3.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/Step3.js
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/index.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/index.js
0
components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/Forms/index.js → components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/Application/CreateSteps/index.js
@ -1,240 +0,0 @@
|
||||
/*
|
||||
* Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
|
||||
*
|
||||
* WSO2 Inc. licenses this file to you under the Apache License,
|
||||
* Version 2.0 (the "License"); you may not use this file except
|
||||
* in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing,
|
||||
* software distributed under the License is distributed on an
|
||||
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
|
||||
* KIND, either express or implied. See the License for the
|
||||
* specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*/
|
||||
|
||||
import PropTypes from 'prop-types';
|
||||
import Chip from 'material-ui/Chip';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import React, {Component} from 'react';
|
||||
import MenuItem from 'material-ui/MenuItem';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import FlatButton from 'material-ui/FlatButton';
|
||||
import SelectField from 'material-ui/SelectField';
|
||||
import RaisedButton from 'material-ui/RaisedButton';
|
||||
|
||||
/**
|
||||
* The Second step of application create wizard.
|
||||
* This contains following components.
|
||||
* * App Title
|
||||
* * Short Description
|
||||
* * Application Description
|
||||
* * Application Visibility
|
||||
* * Application Tags : {Used Material UI Chip component}
|
||||
* * Application Category.
|
||||
* * Platform Specific properties.
|
||||
* * Screenshots
|
||||
* * Banner
|
||||
* * Icon
|
||||
*
|
||||
* Parent Component: Create
|
||||
* Props:
|
||||
* * handleNext : {type: function, Invokes handleNext function in Parent.}
|
||||
* * handlePrev : {type: function, Invokes handlePrev function in Parent}
|
||||
* * setData : {type: function, Invokes setStepData function in Parent}
|
||||
* * removeData : {type: Invokes removeStepData function in Parent}
|
||||
* */
|
||||
class Step2 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
tags: [],
|
||||
defValue: "",
|
||||
category: 1,
|
||||
errors: {}
|
||||
};
|
||||
|
||||
this.styles = {
|
||||
chip: {
|
||||
margin: 4,
|
||||
},
|
||||
wrapper: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a tag on Enter key press and set it to the state.
|
||||
* Clears the tags text field.
|
||||
* Chip gets two parameters: Key and value.
|
||||
* */
|
||||
_addTags(event) {
|
||||
let tags = this.state.tags;
|
||||
if (event.charCode === 13) {
|
||||
event.preventDefault();
|
||||
tags.push({key: Math.floor(Math.random() * 1000), value: event.target.value});
|
||||
this.setState({tags, defValue: ""});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the value for tag.
|
||||
* */
|
||||
_handleTagChange(event) {
|
||||
let defaultValue = this.state.defValue;
|
||||
defaultValue = event.target.value;
|
||||
this.setState({defValue: defaultValue})
|
||||
}
|
||||
|
||||
/**
|
||||
* Invokes the handleNext function in Create component.
|
||||
* */
|
||||
_handleNext() {
|
||||
this.props.handleNext();
|
||||
}
|
||||
|
||||
/**
|
||||
* Invokes the handlePrev function in Create component.
|
||||
* */
|
||||
_handlePrev() {
|
||||
this.props.handlePrev();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles Chip delete function.
|
||||
* Removes the tag from state.tags
|
||||
* */
|
||||
_handleRequestDelete = (key) => {
|
||||
this.chipData = this.state.tags;
|
||||
const chipToDelete = this.chipData.map((chip) => chip.key).indexOf(key);
|
||||
this.chipData.splice(chipToDelete, 1);
|
||||
this.setState({tags: this.chipData});
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates Chip array from state.tags.
|
||||
* */
|
||||
_renderChip(data) {
|
||||
return (
|
||||
<Chip
|
||||
key={data.key}
|
||||
onRequestDelete={() => this._handleRequestDelete(data.key)}
|
||||
style={this.styles.chip}
|
||||
>
|
||||
{data.value}
|
||||
</Chip>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const contentStyle = {margin: '0 16px'};
|
||||
return (
|
||||
<div style={contentStyle}>
|
||||
<div>
|
||||
<div>
|
||||
<TextField
|
||||
hintText="Enter a title for your application."
|
||||
errorText={this.state.errors["title"]}
|
||||
floatingLabelText="Title*"
|
||||
floatingLabelFixed={true}
|
||||
/><br/>
|
||||
<TextField
|
||||
hintText="Enter a short description for your application."
|
||||
errorText={this.state.errors["shortDesc"]}
|
||||
floatingLabelText="Short Description*"
|
||||
floatingLabelFixed={true}
|
||||
multiLine={true}
|
||||
rows={2}
|
||||
|
||||
/><br/>
|
||||
<TextField
|
||||
errorText={this.state.errors["description"]}
|
||||
hintText="Enter the description."
|
||||
floatingLabelText="Description*"
|
||||
floatingLabelFixed={true}
|
||||
multiLine={true}
|
||||
rows={4}
|
||||
/><br/>
|
||||
<TextField
|
||||
hintText="Select the application visibility"
|
||||
floatingLabelText="Visibility"
|
||||
floatingLabelFixed={true}
|
||||
/><br/>
|
||||
<TextField
|
||||
errorText={this.state.errors["tags"]}
|
||||
hintText="Enter application tags.."
|
||||
floatingLabelText="Tags*"
|
||||
floatingLabelFixed={true}
|
||||
value={this.state.defValue}
|
||||
onChange={this._handleTagChange.bind(this)}
|
||||
onKeyPress={this._addTags.bind(this)}
|
||||
/><br/>
|
||||
<div style={this.styles.wrapper}>
|
||||
{this.state.tags.map(this._renderChip, this)}
|
||||
</div>
|
||||
<br/>
|
||||
<SelectField
|
||||
floatingLabelText="Category*"
|
||||
value={this.state.category}
|
||||
floatingLabelFixed={true}
|
||||
>
|
||||
<MenuItem value={1} primaryText="Business"/>
|
||||
</SelectField> <br/>
|
||||
{/*Platform Specific Properties.*/}
|
||||
<div style={{border: 'solid #BDBDBD 1px'}}>
|
||||
<p style={{color:'#BDBDBD'}}>Platform Specific Properties</p>
|
||||
</div><br/>
|
||||
<div>
|
||||
<p style={{color:'#BDBDBD'}}>Screenshots*:</p>
|
||||
<Dropzone style={{width:'100px', height:'100px', border: 'dashed #BDBDBD 1px'}}>
|
||||
<p style={{margin: '40px 40px 40px 50px'}}>+</p>
|
||||
</Dropzone>
|
||||
</div><br/>
|
||||
<div>
|
||||
<p style={{color:'#BDBDBD'}}>Banner*:</p>
|
||||
<Dropzone style={{width:'100px', height:'100px', border: 'dashed #BDBDBD 1px'}}>
|
||||
<p style={{margin: '40px 40px 40px 50px'}}>+</p>
|
||||
</Dropzone>
|
||||
</div><br/>
|
||||
<div>
|
||||
<p style={{color:'#BDBDBD'}}>Icon*:</p>
|
||||
<Dropzone style={{width:'100px', height:'100px', border: 'dashed #BDBDBD 1px'}}>
|
||||
<p style={{margin: '40px 40px 40px 50px'}}>+</p>
|
||||
</Dropzone>
|
||||
</div><br/>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<div style={{marginTop: 12}}>
|
||||
<FlatButton
|
||||
label="< Back"
|
||||
disabled={false}
|
||||
onClick={this._handlePrev.bind(this)}
|
||||
style={{marginRight: 12}}
|
||||
/>
|
||||
<RaisedButton
|
||||
label="Next >"
|
||||
primary={true}
|
||||
onClick={this._handleNext.bind(this)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Step2.prototypes = {
|
||||
handleNext: PropTypes.func,
|
||||
handlePrev: PropTypes.func,
|
||||
setData: PropTypes.func,
|
||||
removeData: PropTypes.func
|
||||
};
|
||||
|
||||
export default Step2;
|
||||
Loading…
Reference in new issue