Tcomb-form-native: Close select after selecting an Option?

[compojoom]

Hi,

is it possible to close the select Picker after selecting an option? I couldn't find any info on this in the docs.

[jariwalabhavesh]

+1

[alvaromb]

Hi @compojoom!

In which platform? They work differently. Anyway, an automatic closing of any of the pickers would need a change in the templates, do you want to send a PR?

Ping me if you need further help with that!

[compojoom]

I gave up on this idea. I created a new modal date picker. When you click on the date a modal opens and you can select the date and have a close button. That works great.

[maacaro]

I have the same problem, I would close the select after selecting a option? any help?

[alvaromb]

Please if you feel this is an important feature, feel free to send us a PR and I will gladly review it.

Thanks!

[ZohraS]

+1

@compojoom Did you make that just by using the template system? I'm trying to do the same, and I'd be super grateful for some insight/tips/code snippets.

[compojoom]

As I said I gave up on the idea and I made a modal instead:

import React, {Component, PropTypes} from 'react';
import {View, Text, StyleSheet, TouchableOpacity, Modal, TouchableWithoutFeedback, DatePickerIOS} from 'react-native';

import * as constants from '../../styles/style';

import moment from 'moment';

class ModalDateComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isOpen: false
        };
    }

    render()
    {
        const locals = this.props.locals;
        const stylesheet = locals.stylesheet;
        var controlLabelStyle = stylesheet.controlLabel.normal;
        let touchableStyle = stylesheet.dateTouchable.normal;
        let datepickerStyle = stylesheet.datepicker.normal;
        let dateValueStyle = stylesheet.dateValue.normal;
        if (locals.hasError) {
            datepickerStyle = stylesheet.datepicker.error;
            dateValueStyle = stylesheet.dateValue.error;
        }
        let formattedValue = String(locals.value);

        if (locals.config) {
            if (locals.config.format) {
                formattedValue = locals.config.format(locals.value);
            }
        }

        let borderTopWidth = 1;
        if (locals.config.hideBorderTop) {
            borderTopWidth = 0;
        }

        var label = locals.label ? <Text style={controlLabelStyle}>{locals.label}</Text> : null;


        return (
            <View>
                <TouchableOpacity
                    style={{
                        justifyContent: 'center',
                        alignItems: 'center',
                        padding: 10,
                        paddingBottom: 0,
                        borderBottomWidth: 1,
                        borderTopWidth: borderTopWidth,
                        borderColor: constants.FJBORDERCOLOR
                    }}
                                  onPress={() => {
                                     this.setState({'isOpen': true});
                                  }}>
                    <Text>
                        {label}
                    </Text>
                    <Text style={dateValueStyle}>
                        {formattedValue}
                    </Text>
                </TouchableOpacity>
                <Modal animationType="fade" transparent={true}
                       visible={this.state.isOpen}
                       onRequestClose={() => {
                           alert("Modal has been closed.")
                       }}>


                    <View style={{
                        position: 'absolute',
                        top: 0, bottom: 0, right: 0, left: 0
                    }}>
                        <TouchableOpacity style={{
                            flex: 1,
                            zIndex: 1,
                            alignItems: 'center',
                            justifyContent: 'center',
                            backgroundColor: 'rgba(0,0,0,0.5)'
                        }}
                                          onPress={() => {
                                              this.setState({isOpen: !this.state.isOpen})
                                          }}>

                            <TouchableWithoutFeedback onPress={null}>
                                <View style={{
                                    zIndex: 2,
                                    padding: 15,
                                    width: 350,
                                    paddingTop: 20,
                                    borderRadius: 5,
                                    opacity: 1, backgroundColor: '#FFFFFF'
                                }}
                                >
                                    <DatePickerIOS
                                        ref="input"
                                        accessibilityLabel={locals.label}
                                        date={moment(locals.value).toDate()}
                                        maximumDate={locals.maximumDate}
                                        minimumDate={locals.minimumDate}
                                        minuteInterval={locals.minuteInterval}
                                        mode={locals.config.mode}
                                        onDateChange={(value) => locals.onChange(value)}
                                        timeZoneOffsetInMinutes={locals.timeZoneOffsetInMinutes}
                                        style={[datepickerStyle, {height: 216}]}
                                    />

                                    <TouchableOpacity
                                        style={{alignItems: 'center'}}
                                        onPress={() => {
                                        this.setState({isOpen: !this.state.isOpen})
                                    }}>
                                        <Text>Schließen</Text>
                                    </TouchableOpacity>
                                </View>
                            </TouchableWithoutFeedback>
                        </TouchableOpacity>
                    </View>
                </Modal>
            </View>
        );
    }
}

function modaldate(locals)
{
    var stylesheet = locals.stylesheet;

    var formGroupStyle = stylesheet.formGroup.normal;
    var formGroupStyleOuter = stylesheet.formGroupOuter.normal;

    return (
        <View style={formGroupStyleOuter}>
            <View style={formGroupStyle}>
                <ModalDateComponent locals={locals} />
            </View>
        </View>

    );
}

module.exports = modaldate;

That is a template, yes. You just import it where you do the options for your form and add it to the field that needs to use it:
template: ModalDate

[Vitaly-V]

It would be great to have this feature.

[jariwalabhavesh]

Hi @alvaromb
Need this feature in ios. (need to close picker after selecting options)
IN android it is opening in pop and closing on option selection

[zolrath]

I, too, was surprised to see that the iOS picker stayed open after selection. I'd think the same event that gets fired when you tap on the form field to close it would be fired when you tap on an option.

As is, I didn't think it actually performed the selection when I first tapped.

[alvaromb]

I would love to review a PR for this 😉

[zolrath]

Ask and you shall receive!