Permalink
Browse files

Introduce ContentPanel

  • Loading branch information...
lucapette committed Feb 24, 2017
1 parent 9870914 commit c4566e3b749ae17b6c6303c05f81ea6bf798919a
Showing with 67 additions and 3 deletions.
  1. +64 −0 src/ContentPanel.js
  2. +2 −3 src/Layout.js
  3. +1 −0 src/app.css
View
@@ -0,0 +1,64 @@
//@flow
import React, { Component } from 'react'
import { List, Segment, Form, Input } from 'semantic-ui-react'
export default class ContentPanel extends Component {
handleClick = (e, item) => {
console.log(item.name)
}
currentPanel = () => {
switch(this.props.page) {
case "home":
return (
<List selection divided size="big">
<List.Item name="Category 1" onClick={this.handleClick}>
<List.Content>
Category 1
</List.Content>
</List.Item>
<List.Item name="Category 2" onClick={this.handleClick}>
<List.Content>
Category 2
</List.Content>
</List.Item>
<List.Item>
<List.Content>
<Input icon="add" fluid placeholder="New category..." transparent/>
</List.Content>
</List.Item>
</List>
)
case "run":
return (
<List selection divided size="big">
<List.Item name="Note 1" onClick={this.handleClick}>
<List.Content>
Note one
</List.Content>
</List.Item>
<List.Item name="Note 2" onClick={this.handleClick}>
<List.Content>
Note two
</List.Content>
</List.Item>
<List.Item>
<List.Content>
<Input icon="add" fluid placeholder="New note" transparent/>
</List.Content>
</List.Item>
</List>
)
}
}
render() {
return (
<Segment attached id="content">
<Form>
{this.currentPanel()}
</Form>
</Segment>
)
}
}
View
@@ -2,6 +2,7 @@
import React, { Component } from "react"
import { Segment } from "semantic-ui-react"
import ContentPanel from "./ContentPanel"
import ControlPanel from "./ControlPanel"
export default class Layout extends Component {
@@ -17,9 +18,7 @@ export default class Layout extends Component {
render() {
return (
<div id="container">
<Segment attached id="content">
This is a segment
</Segment>
<ContentPanel changePage={this.changePage.bind(this)} page={this.state.page}/>
<ControlPanel changePage={this.changePage.bind(this)} page={this.state.page}/>
</div>
View
@@ -3,6 +3,7 @@
}
#content {
min-height: 450px;
padding: 0px;
}
/*
* This is needed because of this bug:

0 comments on commit c4566e3

Please sign in to comment.