@react-form-fields/native-base/Radio.js

Native Base Form Fields

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var useConfigContext_1 = require("@react-form-fields/core/hooks/useConfigContext");
var useMemoOtherProps_1 = require("@react-form-fields/core/hooks/useMemoOtherProps");
var useValidation_1 = require("@react-form-fields/core/hooks/useValidation");
var native_base_1 = require("native-base");
var React = require("react");
var react_native_1 = require("react-native");
var useFieldFlow_1 = require("./hooks/useFieldFlow");
var ErrorMessage_1 = require("./shared/ErrorMessage");
var ThemeProvider_1 = require("./shared/ThemeProvider");
var TouchableEffect_1 = require("./shared/TouchableEffect");
var FieldRadio = React.memo(function (props) {
    var onChange = props.onChange, label = props.label, helperText = props.helperText, value = props.value, marginBottom = props.marginBottom, radioValue = props.radioValue, extraPadding = props.extraPadding;
    var config = useConfigContext_1.default();
    var _a = useValidation_1.default(props), setDirty = _a.setDirty, showError = _a.showError, errorMessage = _a.errorMessage, isValid = _a.isValid;
    var otherProps = useMemoOtherProps_1.default(props, 'value', 'onChange', 'label', 'styleError', 'marginBottom', 'radioValue');
    useFieldFlow_1.default(props, React.useCallback(function () { }, []));
    var classes = React.useMemo(function () {
        return {
            radio: react_native_1.StyleSheet.flatten([styles.radio, extraPadding ? styles.radioPadding : null]),
            row: react_native_1.StyleSheet.flatten([styles.row, extraPadding ? styles.rowPadding : null])
        };
    }, [extraPadding]);
    var onChangeHandler = React.useCallback(function () {
        config.validationOn === 'onChange' && setDirty(true);
        onChange(radioValue);
    }, [onChange, setDirty, radioValue, config.validationOn]);
    return (React.createElement(ThemeProvider_1.default, null,
        React.createElement(react_native_1.View, { style: marginBottom ? styles.margin : null },
            React.createElement(TouchableEffect_1.default, { onPress: onChangeHandler, disabled: props.disabled },
                React.createElement(react_native_1.View, null,
                    React.createElement(react_native_1.View, { style: classes.row },
                        React.createElement(react_native_1.View, { style: classes.radio },
                            React.createElement(native_base_1.Radio, tslib_1.__assign({}, otherProps, { selected: value === radioValue, onPress: onChangeHandler }))),
                        React.createElement(react_native_1.View, { style: styles.textContainer }, typeof label === 'string' ? React.createElement(react_native_1.Text, { style: styles.text }, label) : label)),
                    React.createElement(ErrorMessage_1.default, { isValid: isValid, showError: showError, helperText: helperText, errorMessage: errorMessage }))))));
});
var styles = react_native_1.StyleSheet.create({
    margin: {
        marginBottom: 20
    },
    radio: {
        minWidth: 20,
        alignItems: 'center',
        justifyContent: 'center'
    },
    radioPadding: {
        paddingLeft: 16
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingVertical: 8
    },
    rowPadding: {
        paddingVertical: 16
    },
    textContainer: {
        flexGrow: 1,
        paddingLeft: 10
    },
    text: {
        fontSize: 16
    }
});
FieldRadio.displayName = 'FieldRadio';
exports.default = FieldRadio;
//# sourceMappingURL=Radio.js.map