Custom goal dates

[doub1ejack]

Add some UI (probably a date picker) that allows users to specify a specific date on goal detail modal.

[kmeyersvt]

@johnneed's suggestion of date picker code he's used.

// @flow
import React from 'react';
import {StyleSheet, View, Text, TouchableHighlight} from 'react-native';
import DateTimePicker from 'react-native-modal-datetime-picker';
import moment from 'moment';
import * as R from 'ramda';
import commonStyles from '../../styles/common-styles';

const styles = StyleSheet.create(commonStyles);

type Props = { report: Object, config: { key: string }, text: string, update: string => void, valueKey: string };

export default class DateTimeControl extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        isDatePickerVisible: false,
        isTimePickerVisible: false
    };
}

showDatePicker = () => {
    this.setState({isDatePickerVisible: true});
};
showTimePicker = () => {
    this.setState({isTimePickerVisible: true});
};

hideDateTimePicker = () => {
    this.setState({isDatePickerVisible: false, isTimePickerVisible: false});
};

handleDateTimePicked = R.curry((update, key, report, date) => {
    const newDateTime = date;
    update(key, newDateTime);
    this.hideDateTimePicker();
});


render() {
    const {config, report, update} = this.props;
    return (
        <View style={styles.controlView}>
            <Text style={styles.controlLabel}>{config.dateText}</Text>
            <TouchableHighlight onPress={this.showDatePicker}>
                <Text style={{...styles.textInput, fontSize: 20, paddingTop: 7, paddingLeft: 10, color: '#888'}}>
                    {moment(report.data[config.key]).format('MMMM DD YYYY')}
                </Text>
            </TouchableHighlight>
            <DateTimePicker
                date={moment(report.data[config.key]).toDate()}
                isVisible={this.state.isDatePickerVisible}
                maximumDate={(new Date())}
                mode={'date'}
                onCancel={this.hideDateTimePicker}
                onConfirm={this.handleDateTimePicked(update, config.key, report)}
            />
            <Text style={styles.controlLabel}>{config.timeText}</Text>
            <TouchableHighlight onPress={this.showTimePicker}>
                <Text style={{...styles.textInput, fontSize: 20, paddingTop: 7, paddingLeft: 10, color: '#888'}}>
                    {moment(report.data[config.key]).format('hh:mm A')}
                </Text>
            </TouchableHighlight>
            <DateTimePicker
                date={moment(report.data[config.key]).toDate()}
                isVisible={this.state.isTimePickerVisible}
                mode={'time'}
                onCancel={this.hideDateTimePicker}
                onConfirm={this.handleDateTimePicked(update, config.key, report)}
            />
        </View>
    );

}

}

[kmeyersvt]

https://github.com/mmazzarolo/react-native-modal-datetime-picker