xntalk / xntalk-rnapp

import React, { PureComponent } from 'react';
import {
    StatusBar,
    StyleSheet,
    Text,
    TextInput,
    TouchableWithoutFeedback,
    Image,
    View,
    ScrollView,
    TouchableOpacity,
    Switch,
} from 'react-native';
import Picker from 'react-native-picker';
import DatePicker from 'react-native-datepicker';
import _ from 'lodash';
import { width, height, zoomW, zoomH } from '../../utils/getSize';
import moment from 'moment';

const userPNG = require('../../img/icon-user.png');
const calendarPNG = require('../../img/icon-calendar.png');
const noticePNG = require('../../img/icon-notice.png');
const locationPNG = require('../../img/icon-location.png');
const refreshPNG = require('../../img/icon-refresh.png');
const rightPNG = require('../../img/icon-right.png');
const filePNG = require('../../img/icon-file.png');

const PNG = {
    user: userPNG,
    calendar: calendarPNG,
    notice: noticePNG,
    location: locationPNG,
    refresh: refreshPNG,
    file: filePNG,
};

import 'moment/locale/zh-cn';

const noticeRuleOptions = ['不提醒', '5分钟前', '15分钟前', '30分钟前', '1小时前', '2小时前', '1天前'];
const repeatOptions = ['默认不重复', '每个工作日（周一至周五）', '每天', '每周', '每月', '每年', '自定义'];

export default class AddSchedule extends PureComponent {
    constructor(props) {
        super(props);
        const currentDate = moment();

        this.state = {
            scheduleTitle: '',
            startDate: currentDate.format('YYYY-MM-DD'),
            endDate: currentDate.format('YYYY-MM-DD'),
            startTime: currentDate.format('HH:mm'),
            endTime: currentDate.format('HH:mm'),
            isFullDay: false,
            noticeRule: noticeRuleOptions[1],
            repeatRule: repeatOptions[0],
        };
    }

    componentDidMount() {
        this.props.navigation.setParams({
            title: '新建日程',
            backgroundColor: 'white',
            titleColor: 'black',
            isBack: true,
        });
    }

    onChangeScheduleTitle = (value) => {
        this.setState({
            scheduleTitle: value,
        });
    };

    addSchedule = () => {
        // this.props.navigation.navigate('AddTarget', { from: 'addTarget' });
        // Picker.show();
    };

    toggleFullDay = (value) => {
        this.setState({
            isFullDay: value,
        });
    };

    showStartTimePicker = () => {
        this.startDatePicker.onPressDate();
    };

    onChangeStartDateTime = (date) => {
        const [startDate, startTime] = date.split(' ');
        this.setState({
            startDate,
            startTime,
        });
    };

    showEndTimePicker = () => {
        this.endDatePicker.onPressDate();
    };

    onChangeEndDateTime = (date) => {
        const [endDate, endTime] = date.split(' ');
        this.setState({
            endDate,
            endTime,
        });
    };

    showNoticePicker = () => {
        Picker.init({
            pickerData: noticeRuleOptions,
            pickerTitleText: '选择提醒时间',
            pickerCancelBtnText: '取消',
            pickerConfirmBtnText: '确定',
            onPickerConfirm: (data) => {
                this.setState({
                    noticeRule: data,
                });
            },
        });
        Picker.show();
    };

    showRepeatPicker = () => {
        this.props.navigation.navigate('RepeatRule', { from: 'repeatRule' });
        // Picker.init({
        //     pickerData: repeatOptions,
        //     pickerTitleText: '选择重复规则',
        //     pickerCancelBtnText: '取消',
        //     pickerConfirmBtnText: '确定',
        //     onPickerConfirm: (data) => {
        //         this.setState({
        //             repeatRule: data,
        //         });
        //     },
        // });
        // Picker.show();
    };

    render() {
        const { scheduleTitle, startDate, startTime, endDate, endTime, isFullDay, noticeRule, repeatRule } = this.state;

        return (
            <View style={styles.addSchedulePage}>
                <ScrollView showsVerticalScrollIndicator={false} keyboardShouldPersistTaps="always">
                    <View style={[styles.section, styles.flex, styles.titleContainer]}>
                        <TextInput
                            placeholder="添加主题"
                            multiline
                            placeholderTextColor="#999"
                            maxLength={20}
                            style={styles.title}
                            underlineColorAndroid="transparent"
                            onChangeText={this.onChangeScheduleTitle}
                            defaultValue={scheduleTitle}
                            blurOnSubmit={false}
                        />
                    </View>
                    <View style={styles.section}>
                        <Row title="全天">
                            <Switch
                                trackColor={{ false: '#ccc', true: '#4dd865' }}
                                value={isFullDay}
                                onValueChange={this.toggleFullDay}
                            />
                        </Row>
                        <View style={styles.cell}>
                            <View style={[styles.dateTimeRange, styles.cellBody]}>
                                <TouchableWithoutFeedback onPress={this.showStartTimePicker}>
                                    <View style={styles.startDateTime}>
                                        <View>
                                            <Text style={styles.dateTimeTxt}>
                                                {moment(startDate).locale('zh-cn').format('M月D日 ddd')}
                                            </Text>
                                        </View>
                                        <View>
                                            <Text style={styles.dateTimeTxt}>{startTime}</Text>
                                        </View>
                                    </View>
                                </TouchableWithoutFeedback>
                                <TouchableWithoutFeedback onPress={this.showEndTimePicker}>
                                    <View style={styles.endDateTime}>
                                        <View>
                                            <Text style={styles.dateTimeTxt}>
                                                {moment(endDate).locale('zh-cn').format('M月D日 ddd')}
                                            </Text>
                                        </View>
                                        <View>
                                            <Text style={styles.dateTimeTxt}>{endTime}</Text>
                                        </View>
                                    </View>
                                </TouchableWithoutFeedback>
                            </View>
                        </View>
                    </View>
                    <View style={styles.section}>
                        <Row icon="location">
                            <TextInput
                                placeholderTextColor="#999"
                                placeholder="输入日程地点"
                                underlineColorAndroid="transparent"
                                blurOnSubmit={false}
                                style={{ padding: 0 }}
                            />
                        </Row>
                        <Row icon="user" isHasRightIcon={true}>
                            <Text>添加参与者</Text>
                        </Row>
                    </View>
                    <View style={styles.section}>
                        <Row icon="calendar">
                            <View style={styles.flex}>
                                <View style={styles.point}></View>
                                <Text>张三</Text>
                            </View>
                        </Row>
                    </View>
                    <View style={styles.section}>
                        <TouchableOpacity onPress={this.showNoticePicker}>
                            <Row icon="notice" isHasRightIcon={true}>
                                <Text>{noticeRule}</Text>
                            </Row>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.showRepeatPicker}>
                            <Row icon="refresh" isHasRightIcon={true}>
                                <Text>{repeatRule}</Text>
                            </Row>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.section}>
                        <Row icon="file" isHasRightIcon={true}>
                            <Text>撒大声地</Text>
                        </Row>
                    </View>
                    <DatePicker
                        mode="datetime"
                        format="YYYY-MM-DD HH:mm"
                        confirmBtnText="完成"
                        cancelBtnText="取消"
                        showIcon={false}
                        hideText={true}
                        is24Hour={true}
                        style={{ display: 'none' }}
                        onDateChange={this.onChangeStartDateTime}
                        ref={(v) => (this.startDatePicker = v)}
                    />
                    <DatePicker
                        mode="datetime"
                        format="YYYY-MM-DD HH:mm"
                        confirmBtnText="完成"
                        cancelBtnText="取消"
                        showIcon={false}
                        hideText={true}
                        is24Hour={true}
                        style={{ display: 'none' }}
                        onDateChange={this.onChangeEndDateTime}
                        ref={(v) => (this.endDatePicker = v)}
                    />
                </ScrollView>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    addSchedulePage: {
        position: 'relative',
        width: width,
        height: height,
        backgroundColor: '#eee',
    },
    section: {
        marginBottom: 20 / zoomH,
        width: width,
        backgroundColor: '#fff',
    },
    flex: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
    },
    cell: {
        paddingLeft: 15 / zoomW,
        paddingRight: 15 / zoomW,
        paddingTop: 15 / zoomH,
        paddingBottom: 15 / zoomH,
        borderBottomColor: '#ccc',
        borderBottomWidth: 1,
    },
    cellTitle: {
        flex: 1,
    },
    cellIcon: {
        width: 20,
        height: 20,
        marginRight: 20,
    },
    cellBody: {
        flex: 1,
    },
    point: {
        width: 10,
        height: 10,
        borderRadius: 5,
        backgroundColor: 'red',
        marginRight: 5 / zoomW,
    },
    titleContainer: {
        paddingLeft: 15 / zoomW,
        paddingRight: 15 / zoomW,
        height: 50 / zoomH,
    },
    title: {
        flex: 1,
        padding: 0,
        color: '#333',
        fontSize: 18,
        textAlignVertical: 'top',
    },

    dateTimeRange: {
        display: 'flex',
        flexDirection: 'row',
    },

    startDateTime: {
        flex: 1,
    },

    endDateTime: {
        flex: 1,
    },

    dateTimeTxt: {
        fontSize: 16,
    },

    addBtn: {
        position: 'absolute',
        right: 20,
        bottom: 100,
        zIndex: 2,
    },
});

class Row extends PureComponent {
    constructor(props) {
        super(props);
    }

    render() {
        const { title, children, icon, isHasRightIcon } = this.props;
        return (
            <View style={[styles.cell, styles.flex]}>
                <If condition={title || icon}>
                    <Choose>
                        <When condition={title}>
                            <View style={styles.cellTitle}>
                                <Text>{title}</Text>
                            </View>
                        </When>
                        <Otherwise>
                            <Image source={PNG[icon]} style={styles.cellIcon} />
                        </Otherwise>
                    </Choose>
                </If>
                <View style={styles.cellBody}>{children}</View>
                <If condition={isHasRightIcon}>
                    <Image source={rightPNG} style={styles.cellIcon} />
                </If>
            </View>
        );
    }
}