Created the Step 2 and 3 basic forms. Code Formatting.

feature/appm-store/pbac
Menaka Jayawardena 7 years ago
parent d2705b1427
commit 4d16d73b23

@ -17,11 +17,11 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import RaisedButton from 'material-ui/RaisedButton'; import MenuItem from 'material-ui/MenuItem';
import FlatButton from 'material-ui/FlatButton';
import TextField from 'material-ui/TextField'; import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField'; import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem'; import RaisedButton from 'material-ui/RaisedButton';
class Step1 extends Component { class Step1 extends Component {
constructor() { constructor() {

@ -16,13 +16,48 @@
* under the License. * under the License.
*/ */
import Chip from 'material-ui/Chip';
import React, {Component} from 'react'; import React, {Component} from 'react';
import RaisedButton from 'material-ui/RaisedButton'; import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton'; import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton';
class Step2 extends Component { class Step2 extends Component {
constructor() { constructor() {
super(); super();
this.state = {
tags: [],
defValue: "",
category: 1
};
this.styles = {
chip: {
margin: 4,
},
wrapper: {
display: 'flex',
flexWrap: 'wrap',
},
};
}
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: ""}, console.log(this.state.tags));
}
}
handleTagChange(event) {
let defaultValue = this.state.defValue;
defaultValue = event.target.value;
this.setState({defValue: defaultValue})
} }
handleNext() { handleNext() {
@ -33,12 +68,83 @@ class Step2 extends Component {
this.props.handlePrev(); this.props.handlePrev();
} }
handleRequestDelete = (key) => {
if (key === 3) {
alert('Why would you want to delete React?! :)');
return;
}
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});
};
renderChip(data) {
console.log(data);
return (
<Chip
key={data.key}
onRequestDelete={() => this.handleRequestDelete(data.key)}
style={this.styles.chip}
>
{data.value}
</Chip>
);
}
render() { render() {
const contentStyle = {margin: '0 16px'}; const contentStyle = {margin: '0 16px'};
return ( return (
<div style={contentStyle}> <div style={contentStyle}>
Step2
<div> <div>
<div>
<TextField
hintText="Enter a title for your application."
floatingLabelText="Title*"
floatingLabelFixed={true}
/><br/>
<TextField
hintText="Enter a short description for your application."
floatingLabelText="Short Description*"
floatingLabelFixed={true}
multiLine={true}
rows={2}
/><br/>
<TextField
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
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/>
</div>
<div style={{marginTop: 12}}> <div style={{marginTop: 12}}>
<FlatButton <FlatButton
label="< Back" label="< Back"

@ -17,12 +17,20 @@
*/ */
import React, {Component} from 'react'; import React, {Component} from 'react';
import RaisedButton from 'material-ui/RaisedButton'; import Toggle from 'material-ui/Toggle';
import MenuItem from 'material-ui/MenuItem';
import TextField from 'material-ui/TextField';
import FlatButton from 'material-ui/FlatButton'; import FlatButton from 'material-ui/FlatButton';
import SelectField from 'material-ui/SelectField';
import RaisedButton from 'material-ui/RaisedButton';
class Step3 extends Component { class Step3 extends Component {
constructor() { constructor() {
super(); super();
this.state = {
showForm: false,
releaseChannel: 1
}
} }
handleFinish() { handleFinish() {
@ -33,12 +41,42 @@ class Step3 extends Component {
this.props.handlePrev(); this.props.handlePrev();
} }
handleToggle() {
let hide = this.state.showForm;
this.setState({showForm: !hide});
}
render() { render() {
const contentStyle = {margin: '0 16px'}; const contentStyle = {margin: '0 16px'};
return ( return (
<div style={contentStyle}> <div style={contentStyle}>
Step3
<div> <div>
<Toggle
label="Release the Application"
labelPosition="right"
onToggle={this.handleToggle.bind(this)}
defaultToggled={this.state.showForm}
/>
{/*If toggle is true, the release form will be shown.*/}
{!this.state.showForm ? <div></div> : <div>
<SelectField
floatingLabelText="Select Release Channel*"
value={this.state.releaseChannel}
floatingLabelFixed={true}
>
<MenuItem value={1} primaryText="Alpha"/>
<MenuItem value={2} primaryText="Beta"/>
<MenuItem value={3} primaryText="GA"/>
</SelectField> <br/>
<TextField
hintText="1.0.0"
floatingLabelText="Version*"
floatingLabelFixed={true}
/><br/>
</div>}
<div style={{marginTop: 12}}> <div style={{marginTop: 12}}>
<FlatButton <FlatButton
label="< Back" label="< Back"

@ -16,20 +16,20 @@
* under the License. * under the License.
*/ */
import Badge from 'material-ui/Badge';
import React, {Component} from 'react'; import React, {Component} from 'react';
import AppBar from 'material-ui/AppBar'; import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer'; import Drawer from 'material-ui/Drawer';
import {withRouter} from 'react-router-dom';
import IconButton from 'material-ui/IconButton'; import IconButton from 'material-ui/IconButton';
import NotificationsIcon from 'material-ui/svg-icons/social/notifications'; import {List, ListItem} from 'material-ui/List';
import Apps from 'material-ui/svg-icons/navigation/apps'; import Apps from 'material-ui/svg-icons/navigation/apps';
import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
import Dashboard from 'material-ui/svg-icons/action/dashboard';
import Add from 'material-ui/svg-icons/content/add-circle'; import Add from 'material-ui/svg-icons/content/add-circle';
import Feedback from 'material-ui/svg-icons/action/feedback'; import Feedback from 'material-ui/svg-icons/action/feedback';
import {withRouter} from 'react-router-dom' import Dashboard from 'material-ui/svg-icons/action/dashboard';
import Badge from 'material-ui/Badge'; import DevicesOther from 'material-ui/svg-icons/hardware/devices-other';
import {List, ListItem} from 'material-ui/List'; import NotificationsIcon from 'material-ui/svg-icons/social/notifications';
import ActionAccountCircle from 'material-ui/svg-icons/action/account-circle';
/** /**

@ -16,13 +16,13 @@
* under the License. * under the License.
*/ */
import qs from 'qs';
import React, {Component} from 'react'; import React, {Component} from 'react';
import Checkbox from 'material-ui/Checkbox';
import {Redirect, Switch} from 'react-router-dom'; import {Redirect, Switch} from 'react-router-dom';
import {Card, CardActions, CardMedia, CardTitle} from 'material-ui/Card';
import RaisedButton from 'material-ui/RaisedButton'; import RaisedButton from 'material-ui/RaisedButton';
import {Card, CardActions, CardTitle} from 'material-ui/Card';
import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator'; import {TextValidator, ValidatorForm} from 'react-material-ui-form-validator';
import Checkbox from 'material-ui/Checkbox';
import qs from 'qs';
//todo: remove the {TextValidator, ValidatorForm} and implement it manually. //todo: remove the {TextValidator, ValidatorForm} and implement it manually.

Loading…
Cancel
Save