1
0
mirror of https://github.com/laurent22/joplin.git synced 2024-12-15 09:04:04 +02:00
joplin/ReactNativeClient/lib/components/note-item.js
Laurent Cozic 1a5720bd8c Styling
2017-07-30 23:04:26 +02:00

99 lines
2.5 KiB
JavaScript

import React, { Component } from 'react';
import { connect } from 'react-redux'
import { ListView, Text, TouchableHighlight, View, StyleSheet } from 'react-native';
import { Log } from 'lib/log.js';
import { _ } from 'lib/locale.js';
import { Checkbox } from 'lib/components/checkbox.js';
import { reg } from 'lib/registry.js';
import { Note } from 'lib/models/note.js';
import { time } from 'lib/time-utils.js';
import { globalStyle } from 'lib/components/global-style.js';
let styles = {
listItem: {
flexDirection: 'row',
//height: 40,
borderBottomWidth: 1,
borderBottomColor: globalStyle.dividerColor,
alignItems: 'center',
paddingLeft: globalStyle.marginLeft,
paddingRight: globalStyle.marginRight,
paddingTop: globalStyle.itemMarginTop,
paddingBottom: globalStyle.itemMarginBottom,
backgroundColor: globalStyle.backgroundColor,
},
listItemText: {
flex: 1,
color: globalStyle.color,
fontSize: globalStyle.fontSize,
},
};
styles.listItemFadded = Object.assign({}, styles.listItem);
styles.listItemFadded.opacity = 0.4;
styles = StyleSheet.create(styles);
class NoteItemComponent extends Component {
noteItem_press(noteId) {
this.props.dispatch({
type: 'NAV_GO',
routeName: 'Note',
noteId: noteId,
});
}
async todoCheckbox_change(checked) {
if (!this.props.note) return;
const newNote = {
id: this.props.note.id,
todo_completed: checked ? time.unixMs() : 0,
}
await Note.save(newNote);
}
onPress() {
if (!this.props.note) return;
this.props.dispatch({
type: 'NAV_GO',
routeName: 'Note',
noteId: this.props.note.id,
});
}
render() {
const note = this.props.note ? this.props.note : {};
const onPress = this.props.onPress;
const onCheckboxChange = this.props.onCheckboxChange;
const checkboxStyle = !Number(note.is_todo) ? { display: 'none' } : { color: globalStyle.color };
const checkboxChecked = !!Number(note.todo_completed);
const listItemStyle = !!Number(note.is_todo) && checkboxChecked ? styles.listItemFadded : styles.listItem;
return (
<TouchableHighlight onPress={() => this.onPress()} underlayColor="#0066FF">
<View style={ listItemStyle }>
<Checkbox
style={checkboxStyle}
checked={checkboxChecked}
onChange={(checked) => this.todoCheckbox_change(checked)}
/>
<Text style={styles.listItemText}>{note.title}</Text>
</View>
</TouchableHighlight>
);
}
}
const NoteItem = connect(
(state) => {
return {};
}
)(NoteItemComponent)
export { NoteItem }