@react-form-fields/native-base/Checkbox.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 FieldCheckbox = React.memo(function (props) {
    var onChange = props.onChange, label = props.label, helperText = props.helperText, value = props.value, marginBottom = props.marginBottom, 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');
    useFieldFlow_1.default(props, React.useCallback(function () { }, []));
    var onChangeHandler = React.useCallback(function () {
        config.validationOn === 'onChange' && setDirty(true);
        onChange(!value);
    }, [value, onChange, setDirty, config.validationOn]);
    var classes = React.useMemo(function () {
        return {
            checkbox: react_native_1.StyleSheet.flatten([styles.checkbox, extraPadding ? styles.checkboxPadding : null]),
            textContainer: react_native_1.StyleSheet.flatten([styles.textContainer, extraPadding ? styles.textContainerPadding : null]),
            row: react_native_1.StyleSheet.flatten([styles.row, extraPadding ? styles.rowPadding : null])
        };
    }, [extraPadding]);
    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(native_base_1.CheckBox, tslib_1.__assign({}, otherProps, { checked: value, style: classes.checkbox, onPress: onChangeHandler })),
                        React.createElement(react_native_1.View, { style: classes.textContainer }, typeof label === 'string' ? React.createElement(native_base_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
    },
    checkbox: {
        left: 0
    },
    checkboxPadding: {
        left: 16
    },
    row: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        paddingVertical: 8
    },
    rowPadding: {
        paddingVertical: 16
    },
    textContainer: {
        paddingLeft: 10
    },
    textContainerPadding: {
        paddingLeft: 25
    },
    text: {
        fontSize: 16
    }
});
FieldCheckbox.displayName = 'FieldCheckbox';
exports.default = FieldCheckbox;
//# sourceMappingURL=Checkbox.js.map