xntalk / xntalk-rnapp

import React, { PureComponent } from 'react';
import {
    StyleSheet,
    Text,
    TextInput,
    TouchableWithoutFeedback,
    Image,
    View,
    ScrollView,
    TouchableOpacity,
    Switch,
    DeviceEventEmitter,
    NativeModules,
    ActivityIndicator,
} from 'react-native';

import _ from 'lodash';
import moment from 'moment';
import Picker from 'react-native-picker';
import DatePicker from 'react-native-datepicker';

import { width, height, zoomW, zoomH } from '../../utils/getSize';
import { xnToast, NoDoublePress } from "../../utils/utils";
import AppService from "../../service/AppService";

import IMG_PersonOutline from '../../assets/personOutline.png';
import IMG_PeopleOutline from '../../assets/peopleOutline.png';
import IMG_ChevronForwardOutline from '../../assets/chevronForwardOutline.png';
import IMG_LocationOutline from '../../assets/locationOutline.png';
// import IMG_NotificationsOutline from '../../assets/notificationsOutline.png';
import IMG_AttachOutline from '../../assets/attachOutline.png';
import IMG_AddCircleOutline from '../../assets/addCircleOutline.png';
import IMG_CloseOutline from '../../assets/closeOutline.png';
import IMG_ReaderOutline from '../../assets/readerOutline.png';

import 'moment/locale/zh-cn';

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

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

        this.state = {
            title: '',
            isFullDay: false,
            startDate: currentDate.format('YYYY-MM-DD'),
            endDate: currentDate.format('YYYY-MM-DD'),
            startTime: currentDate.format('HH:mm'),
            endTime: currentDate.format('HH:mm'),
            userList: [],
            location: '',
            desc: '',
            // noticeRule: noticeOptions[1],
            // repeatRule: repeatOptions[0],
            attachFileList: [],
            submitting: false,
        };
    }

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

        let that = this;
        this.reloaAddEmployee = DeviceEventEmitter.addListener('reloaAddEmployee', function () {
            that.setState({
                userList: global.linkDoEmployee,
            });
        });
    }

    componentWillUnmount() {
        if (this.reloaAddEmployee) {
            this.reloaAddEmployee.remove();
        }
    };

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

    handleSelectPeopleList = () => {
        this.props.navigation.navigate('AddPeople', { from2: 'addSchedule', from: 'doEmployee', target: 'link', });
    }

    onChangeTitle = (value) => {
        this.setState({
            title: 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,
        });
    };

    onChangeLocation = (value) => {
        this.setState({
            location: value,
        });
    };

    onChangeDesc = (value) => {
        this.setState({
            desc: value,
        });
    };

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

    handleAttachFileSelector = () => {
        const that = this;
        setTimeout(() => {
            const picLength = 9 - that.state.attachFileList.length;
            NativeModules.system.choosePic(picLength).then((data) => {
                if (data == '' || !!!data) {
                    return;
                }

                let path = data;
                let nameList = [];
                for (let i = 0; i < data.length; i++) {
                    let filePath = data[i].filePath.substring(path.lastIndexOf('/') + 1);
                    filePath = global.userId + filePath;

                    nameList.push(filePath);
                }

                that.setState({
                    loading: true,
                });

                AppService.getAccess({ nameList: nameList, }).then((res) => {
                    if (res.message) {
                        xnToast(res.message);
                        that.setState({
                            loading: false,
                        });
                        return;
                    }

                    if (res.errors.length > 0) {
                        xnToast(res.errors[0].message);
                    } else {
                        NativeModules.system.batchUpload(res.accessKeyId, res.accessKeySecret, res.securityToken, res.infoList, path).then((data2) => {
                            const fileList = that.state.attachFileList;
                            for (let i = 0;i < data2.length; i++) {
                                const temp = data2[i];
                                const id = that.getUrlFileName(temp);
                                fileList.push({ id, url: temp, });
                            }

                            that.setState({
                                loading: false,
                                imgList: fileList,
                            });
                        });
                    }
                }).catch((error) => {
                    that.setState({
                        loading: false,
                    }, () => {
                        xnToast(error.message);
                    });
                });
            });
        }, 500);
    }

    getUrlFileName = (url) => {
        if (url) {
            var match = url.toString().match(/.*\/(.+?)\./);
            if (match && match.length > 1) {
                return match[1];
            }
        }

        return "";
    }

    removeAttachFileItem = (id) => {
        const newAttachFileList = [];

        const { attachFileList } = this.state;
        if (attachFileList.length > 0) {
            for (let i = 0; i < attachFileList.length; i++) {
                const item = attachFileList[i];
                if (item.id !== id) {
                    newAttachFileList.push(item);
                }
            }
        }

        this.setState({ attachFileList: newAttachFileList, });
    }

    renderAttachFileItem = (item, index) => {
        const { id, url } = item; 
        return (
            <View key={index} style={[styles.flex_row_space_between, styles.attachFileItem]}>
                <View style={[styles.flex_row]}>
                    <Image source={{ uri: url, }} style={styles.attachImage} />
                    <Text style={[styles.defaultText, styles.attachFileText]}>{id}</Text>
                </View>
                <TouchableOpacity onPress={() => this.removeAttachFileItem(id)}>
                    <View style={[styles.iconWrap, { height: 50 / zoomH, width: 50 / zoomW, }]}>
                        <Image source={IMG_CloseOutline} style={[styles.iconStyle]} />
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

    handleSubmit = () => {
        NoDoublePress.onPress(() => {
            // 调用接口保存数据
            const {
                title,
                isFullDay,
                startDate,
                endDate,
                startTime,
                endTime,
                userList,
                location,
                desc,
                attachFileList,
            } = this.state;
            if(!title) return xnToast('日程标题不能为空');
            if(isFullDay && startDate > endDate) return xnToast('开始日期不能大于结束日期');
            if(!isFullDay && startDate <= endDate && startTime > endTime) return xnToast('开始时间不能大于结束时间');
            
            const params = {
                title,
                address: location,
                description: desc,
                userId: global.userId,
                isAllDay: isFullDay,
                beginTime: `${startDate} ${startTime}:00`,
                endTime: `${endDate} ${endTime}:00`,
                scheduleUserCreateRequestList: _.map(userList, user=>_.pick(user, 'userId')),
                attachmentList: _.map(attachFileList, attachFile=>{
                    return {
                        storagePath: attachFile.url,
                        sourceType: 'NORMAL',
                        type: 'IMAGE'
                    }
                })
            }
            AppService.createSchedule(params).then((data)=>{
                xnToast('新建成功');
                DeviceEventEmitter.emit('reloadPlanList');
                this.props.navigation.goBack();
            })
        });
    };

    render() {
        const { 
            title, 
            isFullDay,
            startDate, startTime, 
            endDate, endTime, 
            userList, 
            location, 
            desc, 
            attachFileList,
        } = this.state;
        const datePickerMode = isFullDay === true ? 'date' : 'datetime';

        let attachFileItems;
        if (attachFileList.length > 0) {
            attachFileItems = (
                <View style={{ flex: 1, backgroundColor: '#fff', paddingTop: 14 / zoomW, }}>
                    {attachFileList.map((item, index) => this.renderAttachFileItem(item, index))}
                </View>
            );
            
        }

        return (
            <View style={[{ flex: 1, backgroundColor: '#f3f3f3', }]}>
                <ScrollView 
                    showsVerticalScrollIndicator={false} 
                    keyboardShouldPersistTaps="always">
                    <View style={styles.dividingLine}></View>
                    <View style={[styles.flex_row, styles.flex_row_padding, styles.titleWrap]}>
                        <TextInput
                            placeholder="添加日程标题"
                            multiline
                            placeholderTextColor="#999"
                            maxLength={128}
                            style={[styles.textInputStyle, { fontSize: 18, }]}
                            underlineColorAndroid="transparent"
                            onChangeText={this.onChangeTitle}
                            defaultValue={title}
                            blurOnSubmit={false}
                        />
                    </View>
                    
                    <View style={styles.dividingLine}></View>
                    <View style={[styles.flex_column, styles.timeSelectorWrap]}>
                        <View style={[styles.flex_row, styles.flex_row_padding]}>
                            <View style={[styles.dateSelector]}>
                                <TouchableOpacity onPress={this.showStartTimePicker}>
                                    <View style={{ flex: 1, }}>
                                        <View style={[styles.flex_row, { height: 24/zoomH, alignItems: 'center', }]}>
                                            <Text style={styles.defaultText}>
                                                { isFullDay === true 
                                                    ? moment(startDate).locale('zh-cn').format('M月D日') 
                                                    : moment(startDate).locale('zh-cn').format('M月D日 ddd')
                                                }
                                            </Text>
                                        </View>
                                        <View style={[styles.flex_row, { height: 24/zoomH, alignItems: 'center', }]}>
                                            <Text style={styles.defaultText}>
                                                { isFullDay === true 
                                                    ? moment(startDate).locale('zh-cn').format('ddd')
                                                    : startTime
                                                }
                                            </Text>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            </View>
                            <View style={styles.arrowWrap}>
                            </View>
                            <View style={[styles.dateSelector]}>
                                <TouchableOpacity onPress={this.showEndTimePicker}>
                                    <View style={{ flex: 1, }}>
                                        <View style={[styles.flex_row, { height: 24/zoomH, alignItems: 'center', }]}>
                                            <Text style={styles.defaultText}>
                                                { isFullDay === true 
                                                    ? moment(endDate).locale('zh-cn').format('M月D日') 
                                                    : moment(endDate).locale('zh-cn').format('M月D日 ddd')
                                                }
                                            </Text>
                                        </View>
                                        <View style={[styles.flex_row, { height: 24/zoomH, alignItems: 'center', }]}>
                                            <Text style={styles.defaultText}>
                                                { isFullDay === true 
                                                    ? moment(endDate).locale('zh-cn').format('ddd')
                                                    : endTime
                                                }
                                            </Text>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            </View>
                        </View>
                        <View style={[styles.dividingLine, { height: 1 / zoomH, }]}></View>
                        <View style={[styles.flex_row_space_between, styles.flex_row_padding]}>
                            <Text style={styles.defaultText}>全天</Text>
                            <Switch
                                trackColor={{ false: '#ccc', true: '#4dd865' }}
                                value={isFullDay}
                                onValueChange={this.toggleFullDay}
                            />
                        </View>
                    </View>

                    <View style={styles.dividingLine}></View>
                    <TouchableOpacity onPress={this.handleSelectPeopleList}>
                        <View style={[styles.flex_row, styles.flex_row_padding]}>
                            <View style={styles.iconWrap}>
                                <Image source={IMG_PersonOutline} style={[styles.iconStyle]} />
                            </View>

                            { userList.length > 0 
                                ? <View style={[styles.flex_column, styles.inputOrTextWrap]}>
                                    <Text style={[styles.defaultText]}>我（组织人）</Text>
                                </View> 
                                : <View style={[styles.flex_column, styles.inputOrTextWrap]}>
                                    <Text style={[styles.defaultText, styles.placeholderText]}>添加参与人</Text>
                                </View> 
                            }

                            { userList.length == 0 
                                ? <View style={styles.iconWrap}>
                                    <Image source={IMG_ChevronForwardOutline} style={[styles.iconStyle]} />
                                </View> 
                                : undefined 
                            }
                        </View>
                    </TouchableOpacity>

                    { userList.length > 0 ? <View style={[styles.dividingLine, { height: 1 / zoomH, }]}></View> : undefined }
                    { userList.length > 0 ? 
                        <TouchableOpacity onPress={this.handleSelectPeopleList}>
                            <View style={[styles.flex_row, styles.flex_row_padding]}>
                                <View style={styles.iconWrap}>
                                    <Image source={IMG_PeopleOutline} style={[styles.iconStyle]} />
                                </View>
                                <View style={[styles.flex_column, styles.inputOrTextWrap]}>
                                    <Text style={[styles.defaultText]}>邀请 {userList[0].userName} 等 {userList.length}人</Text>
                                </View>
                                <View style={styles.iconWrap}>
                                    <Image source={IMG_ChevronForwardOutline} style={[styles.iconStyle]} />
                                </View>
                            </View>
                        </TouchableOpacity> : undefined }

                    <View style={styles.dividingLine}></View>
                    <View style={[styles.flex_row, styles.flex_row_padding]}>
                        <View style={styles.iconWrap}>
                            <Image source={IMG_LocationOutline} style={[styles.iconStyle]} />
                        </View>
                        <View style={[styles.flex_column, styles.inputOrTextWrap]}>
                            <TextInput
                                placeholder="输入日程地点"
                                multiline
                                placeholderTextColor="#999"
                                maxLength={128}
                                style={[styles.textInputStyle, { textAlignVertical: 'center', }]}
                                underlineColorAndroid="transparent"
                                onChangeText={this.onChangeLocation}
                                defaultValue={location}
                                blurOnSubmit={false}
                            />
                        </View>
                    </View>

                    {/* <View style={styles.dividingLine}></View>
                    <TouchableOpacity onPress={this.showNoticePicker}>
                        <View style={[styles.flex_row, styles.flex_row_padding]}>
                            <View style={styles.iconWrap}>
                                <Image source={IMG_NotificationsOutline} style={[styles.iconStyle]} />
                            </View>
                            <View style={[styles.flex_column, styles.inputOrTextWrap]}>
                                <Text style={[styles.defaultText]}>5分钟前</Text>
                            </View>
                            <View style={styles.iconWrap}>
                                <Image source={IMG_ChevronForwardOutline} style={[styles.iconStyle]} />
                            </View>
                        </View>
                    </TouchableOpacity> */}

                    <View style={styles.dividingLine}></View>
                    <TouchableOpacity onPress={() => {
                        // if (attachFileList.length == 0) {
                            this.handleAttachFileSelector();
                        // }
                    }}>
                        <View style={[styles.flex_row, styles.flex_row_padding]}>
                            <View style={styles.iconWrap}>
                                <Image source={IMG_AttachOutline} style={[styles.iconStyle, { width: 24 / zoomW, height: 24 / zoomH, }]} />
                            </View>
                            <View style={[styles.flex_column, styles.inputOrTextWrap]}>
                            { attachFileList.length > 0 
                                ? <Text style={[styles.defaultText]}>附件</Text>
                                : <Text style={[styles.defaultText, styles.placeholderText]}>上传附件</Text>
                            }
                            </View>
                            { attachFileList.length > 0 
                                ? <View style={styles.iconWrap}>
                                    <Image source={IMG_AddCircleOutline} style={[styles.iconStyle]} />
                                </View>
                                : <View style={styles.iconWrap} onPress={() => {
                                    if (attachFileList.length > 0) {
                                        this.handleAttachFileSelector();
                                    }
                                }}>
                                    <Image source={IMG_ChevronForwardOutline} style={[styles.iconStyle]} />
                                </View>
                            }
                        </View>
                    </TouchableOpacity>
                    { attachFileList.length > 0 ? <View style={[styles.dividingLine, { height: 1 / zoomH, }]}></View> : undefined }
                    { attachFileList.length > 0 ? attachFileItems : undefined }

                    <View style={styles.dividingLine}></View>
                    <View style={[styles.flex_row, styles.flex_row_padding, { height: 100 / zoomH, }]}>
                        <View style={[styles.iconWrap, { justifyContent: "flex-start", }]}>
                            <Image source={IMG_ReaderOutline} style={[styles.iconStyle]} />
                        </View>
                        <View style={[styles.flex_column, styles.inputOrTextWrap]}>
                            <TextInput
                                placeholder="输入描述"
                                multiline
                                placeholderTextColor="#999"
                                maxLength={512}
                                style={[styles.textInputStyle]}
                                underlineColorAndroid="transparent"
                                onChangeText={this.onChangeDesc}
                                defaultValue={desc}
                                blurOnSubmit={false}
                            />
                        </View>
                    </View>

                    <View style={styles.dividingLine}></View>
                    <View style={[styles.submitWrap]}>
                        { this.state.submitting === false ?
                            <TouchableOpacity style={[styles.flex_column_center, styles.submitButton]} onPress={this.handleSubmit}>
                                <View>
                                    <Text style={styles.submitButtonText}>完 成</Text>
                                </View>
                            </TouchableOpacity> :
                            <TouchableOpacity style={[styles.flex_column_center, styles.submitButtonDisabled]}>
                                <View>
                                    <Text style={styles.submitButtonText}>提 交 中</Text>
                                </View>
                            </TouchableOpacity> 
                        }
                    </View>
                    
                    <View style={styles.dividingLine}></View>

                    <DatePicker
                        mode={datePickerMode}
                        format="YYYY-MM-DD HH:mm"
                        confirmBtnText="完成"
                        cancelBtnText="取消"
                        showIcon={false}
                        hideText={true}
                        is24Hour={true}
                        onDateChange={this.onChangeStartDateTime}
                        ref={(v) => (this.startDatePicker = v)}
                    />

                    <DatePicker
                        mode={datePickerMode}
                        format="YYYY-MM-DD HH:mm"
                        confirmBtnText="完成"
                        cancelBtnText="取消"
                        showIcon={false}
                        hideText={true}
                        is24Hour={true}
                        onDateChange={this.onChangeEndDateTime}
                        ref={(v) => (this.endDatePicker = v)}
                    />

                </ScrollView>

                { this.state.loading && 
                    <View style={styles.loadingWrap}>
                        <View style={styles.loadingBox}>
                            <ActivityIndicator size='large' color='#fff'/>
                            <Text style={{ fontSize: 16, color: '#fff', marginTop: (6 / zoomH), }}>
                                加载中...
                            </Text>
                        </View>
                    </View>
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    flex_row: {
        display: 'flex',
        flexDirection: 'row',
        backgroundColor: '#fff',
    },
    flex_row_space_between: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: "space-between",
        backgroundColor: '#fff',
    },
    flex_row_padding: {
        paddingTop: 14 / zoomW,
        paddingBottom: 12 / zoomW,
        paddingLeft: 14 / zoomW,
        paddingRight: 14 / zoomW,
    },
    flex_column: {
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: '#fff',
    },
    flex_column_center: {
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: "center",
    },
    dividingLine: {
        height: 12 / zoomH,
        backgroundColor: '#f3f3f3',
    },
    textInputStyle: {
        flex: 1,
        fontSize: 16,
        height: '100%',
        paddingLeft: 0,
        paddingTop: 2 / zoomW,
        paddingBottom: 2 / zoomW,
        textAlignVertical: 'top',
    },
    defaultText: {
        color: '#555',
        fontSize: 16,
        fontWeight: '400',
    },
    placeholderText: {
        color: '#999999',
        fontSize: 16,
        fontWeight: '300',
    },
    iconWrap: {
        alignItems: 'center',
        justifyContent: "center",
        width: 40 / zoomW,
        height: '100%',
        minHeight: 28 / zoomH,
    },
    iconStyle: {
        width: 22 / zoomW,
        height: 22 / zoomH,
    },
    inputOrTextWrap: {
        flex: 1,
        justifyContent: 'center',
        paddingLeft: 12 / zoomW,
    },
    titleWrap: {
        height: 80 / zoomH,
    },
    timeSelectorWrap: { },
    dateSelector: {
        flex: 1,
    },
    arrowWrap: {
        width: 20 / zoomW,
    },
    submitWrap: {
        paddingTop: 2 / zoomW,
        paddingBottom: 2 / zoomW,
        paddingLeft: 14 / zoomW,
        paddingRight: 14 / zoomW,
    },
    submitButton: {
        height: 40 / zoomH,
        backgroundColor: '#28C35A',
    },
    submitButtonDisabled: {
        height: 40 / zoomH,
        backgroundColor: '#999999',
    },
    submitButtonText: {
        color: '#fff',
        fontSize: 16,
    },
    loadingWrap: {
        position: "absolute",
        top: 0,
        width: "100%",
        height: "100%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center"
    },
    loadingBox: {
        width: 100 / zoomW,
        height: 120 / zoomH,
        backgroundColor: "rgba(0,0,0,.5)",
        borderRadius: 8,
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
    },
    attachFileItem: {
        paddingBottom: 12 / zoomW,
        paddingLeft: 24 / zoomW,
        paddingRight: 10 / zoomW,
    },
    attachImage: {
        height: 44 / zoomH, 
        width: 44 / zoomW,
        marginRight: 6 / zoomW,
        borderWidth: 1 / zoomH,
        borderColor: '#c3c3c3',
        borderRadius: 4 / zoomW,
    },
    attachFileText: {
        height: 44 / zoomH, 
        textAlignVertical: 'center',
    },
});