hcmobile-sdk/components/pickerView/PickerViewDemo.js

mobile-sdk

//import liraries
import React, { Component } from 'react';
import { 
    View, 
    Text, 
    StyleSheet,
    TouchableOpacity,
    Dimensions 
} from 'react-native';
import Picker from './index';
import RowLayout from '../rowLayout/index';
import TextInput from '../textInput/index';

// create a component
class PickerViewDemo extends Component {

    constructor(props) {
        super(props);
        this._showDatePicker = this._showDatePicker.bind(this);
        this._showTimePicker = this._showTimePicker.bind(this);
        this._toggle = this._toggle.bind(this);
        this._isPickerShow = this._isPickerShow.bind(this);
        this.state = {
            date:'',
            time:'',
        };
    }
    
    componentWillUnmount() {
        Picker.hide();
    }

    _createDateData() {
        let date = [];
        for(let i=1970;i<2020;i++){
            let month = [];
            for(let j = 1;j<13;j++){
                let day = [];
                if(j === 2){
                    for(let k=1;k<29;k++){
                        day.push(k+'日');
                    }
                    //Leap day for years that are divisible by 4, such as 2000, 2004
                    if(i%4 === 0){
                        day.push(29+'日');
                    }
                }
                else if(j in {1:1, 3:1, 5:1, 7:1, 8:1, 10:1, 12:1}){
                    for(let k=1;k<32;k++){
                        day.push(k+'日');
                    }
                }
                else{
                    for(let k=1;k<31;k++){
                        day.push(k+'日');
                    }
                }
                let _month = {};
                _month[j+'月'] = day;
                month.push(_month);
            }
            let _date = {};
            _date[i+'年'] = month;
            date.push(_date);
        }
        return date;
    }

    _showDatePicker() {
        Picker.init({
            isLoop:false,
            pickerTitleText:'请选择日期',
            pickerTitleColor:[0,0,0,1],
            pickerCancelBtnColor: [51, 51, 51, 1],
            pickerConfirmBtnColor: [51, 51, 51, 1],
            pickerConfirmBtnText: '确定',
            pickerCancelBtnText: '取消',
            pickerFontColor:[102,102,102,1],
            pickerToolBarBg:[246,246,246,1],
            pickerBg:[255,255,255,1],
            wheelFlex: [2, 1, 2, 1, 2],
            pickerData: this._createDateData(),
            pickerFontColor: [255, 0 ,0, 1],
            onPickerConfirm: (pickedValue, pickedIndex) => {
                this.setState({
                    date:pickedValue
                });
                console.log('date', pickedValue, pickedIndex);
            },
            onPickerCancel: (pickedValue, pickedIndex) => {
                console.log('date', pickedValue, pickedIndex);
            },
            onPickerSelect: (pickedValue, pickedIndex) => {
                console.log('date', pickedValue, pickedIndex);
            }
        });
        Picker.show();
    }

    _showTimePicker() {
        let years = [],
            months = [],
            days = [],
            hours = [],
            minutes = [];

        for(let i=1;i<51;i++){
            years.push(i+1980);
        }
        for(let i=1;i<13;i++){
            months.push(i);
            hours.push(i);
        }
        for(let i=1;i<32;i++){
            days.push(i);
        }
        for(let i=1;i<61;i++){
            minutes.push(i);
        }
        let pickerData = [years, months, days, ['am', 'pm'], hours, minutes];
        let date = new Date();
        let selectedValue = [
            date.getFullYear(),
            date.getMonth()+1,
            date.getDate(),
            date.getHours() > 11 ? 'pm' : 'am',
            date.getHours() === 12 ? 12 : date.getHours()%12,
            date.getMinutes()
        ];
        Picker.init({
            pickerData,
            selectedValue,
            pickerTitleText:'请选择时间',
            pickerTitleColor: [51, 51, 51, 1],
            pickerCancelBtnColor: [51, 51, 51, 1],
            pickerConfirmBtnColor: [51, 51, 51, 1],
            pickerConfirmBtnText: '确定',
            pickerCancelBtnText: '取消',
            wheelFlex: [2, 1, 1, 2, 1, 1],
            onPickerConfirm: pickedValue => {
                let sel = `${pickedValue[0]}-${pickedValue[1]}-${pickedValue[2]}  ${pickedValue[4]}:${pickedValue[5]}`;
                this.setState({
                    time:sel
                });
                console.log('area', pickedValue);
            },
            onPickerCancel: pickedValue => {
                console.log('area', pickedValue);
            },
            onPickerSelect: pickedValue => {
                let targetValue = [...pickedValue];
                if(parseInt(targetValue[1]) === 2){
                    if(targetValue[0]%4 === 0 && targetValue[2] > 29){
                        targetValue[2] = 29;
                    }
                    else if(targetValue[0]%4 !== 0 && targetValue[2] > 28){
                        targetValue[2] = 28;
                    }
                }
                else if(targetValue[1] in {4:1, 6:1, 9:1, 11:1} && targetValue[2] > 30){
                    targetValue[2] = 30;
                    
                }
                // forbidden some value such as some 2.29, 4.31, 6.31...
                if(JSON.stringify(targetValue) !== JSON.stringify(pickedValue)){
                    // android will return String all the time，but we put Number into picker at first
                    // so we need to convert them to Number again
                    targetValue.map((v, k) => {
                        if(k !== 3){
                            targetValue[k] = parseInt(v);
                        }
                    });
                    Picker.select(targetValue);
                    pickedValue = targetValue;
                }
            }
        });
        Picker.show();
    }

    _toggle() {
        Picker.toggle();
    }

    _isPickerShow(){
        Picker.isPickerShow(status => {
            alert(status);
        });
    }

    render() {
        return (
            <View style={{height:'100%'}}>
                <RowLayout
                    tag = '日期选择'
                    lineColor = '#999'
                    content = {this.state.date}
                    showArrow
                    onClick = {() => {
                        this._showDatePicker();
                    }}
                />
                <RowLayout
                    tag = '时间选择'
                    lineColor = '#999'
                    content = {this.state.time}
                    showArrow
                    onClick = {() => {
                        this._showTimePicker();
                    }}
                />
                <RowLayout
                    tag = 'toggle()'
                    lineColor = '#999'
                    content = ''
                    showArrow
                    onClick = {() => {
                        this._toggle();
                    }}
                />
                <RowLayout
                    tag = 'isPickerShow()'
                    lineColor = '#999'
                    content = ''
                    showArrow
                    onClick = {() => {
                        this._isPickerShow();
                    }}
                />
                <TextInput 
                    placeholder="测试Picker与Input共存"
                    style={{
                        height: 40,
                        marginLeft: 20,
                        marginRight: 20,
                        marginTop: 10,
                        padding: 5
                    }}
                />
            </View>
        );
    }
}


//make this component available to the app
export default PickerViewDemo;