render() {
let newButton;
if (ons.platform.isAndroid()) {
newButton = <Fab
onClick={this.props.onNewClick}
position="right bottom" >
<Icon icon="md-edit" />
</Fab>
}
return (
<Page>
{newButton}
<List
dataSource={this.props.tasks}
renderRow={this.renderTask} />
</Page>
);
}
render() {
const toolbarLeftBtn = this.props.backButton === true ?
<BackButton onClick={this.props.navigation.popPage}>Back</BackButton>
: <ToolbarButton onClick={this.props.navigation.openMenu}>
<Icon icon='ion-navicon, material:md-menu' />
</ToolbarButton>
;
const toolbarRightBtn = this.props.refresh !== null ? <ToolbarButton onClick={this.props.refresh}>
<Icon icon='ion-ios-refresh-empty, material:ion-android-refresh' />
</ToolbarButton> : null;
;
return (<OnsToolbar>
<div className='left'>{toolbarLeftBtn}</div>
<div className="center">Digital {!ons.platform.isAndroid() ?
<img src={logo} style={{verticalAlign: 'middle', height: '50%'}}/> : null} Vernissage
</div>
<div className="right">{toolbarRightBtn}</div>
</OnsToolbar>);
}
render() {
let actionButton, rightToolBarButton;
if (!ons.platform.isAndroid()) {
actionButton = <Button modifier="large" onClick={this.action}>
{ this.props.editMode?
'Save Task' :
'Add New Task'
}
</Button>;
} else {
rightToolBarButton = <div className="right">
<ToolbarButton onClick={this.action}>
<Icon icon="md-save" />
</ToolbarButton>
</div>;
}
return (
<Page id="newTaskPage"
renderToolbar={
() => <Toolbar>
<div className="left"><BackButton>Back</BackButton></div>
<div className="center">{this.props.title}</div>
{rightToolBarButton}
</Toolbar>
}>
<List
renderHeader={() => <ListHeader> Add a new task </ListHeader>}
dataSource={[
{
placeholder: 'I want to',
fieldName: 'title'
},
{
placeholder: 'Category',
fieldName: 'category'
},
{
placeholder: 'Description',
fieldName: 'description'
}
]}
renderRow={(data) => {
return (
<ListItem modifier="nodivider">
<div className='center'>
<Input
type="text"
value={this.state[data.fieldName]}
onChange={(event) => {
var newData = {};
newData[data.fieldName] = event.target.value;
this.setState(newData);
}}
placeholder={data.placeholder} float />
</div>
</ListItem>
);
}} />
{actionButton}
</Page>
);
}
calculateItemHeight={() => ons.platform.isAndroid() ? 48 : 44}
calculateItemHeight={() => ons.platform.isAndroid() ? 76 : 45}