@react-form-fields/native-base/Select/index.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 useValidation_1 = require("@react-form-fields/core/hooks/useValidation");
var React = require("react");
var useFieldFlow_1 = require("../hooks/useFieldFlow");
var ThemeProvider_1 = require("../shared/ThemeProvider");
var Text_1 = require("../Text");
var Modal_1 = require("./Modal");
var nullCallback = function () { };
var FieldSelect = React.memo(function (props) {
    var label = props.label, options = props.options, value = props.value, onChange = props.onChange, formatValueDisplay = props.formatValueDisplay, otherProps = tslib_1.__rest(props, ["label", "options", "value", "onChange", "formatValueDisplay"]);
    var _a = React.useState(false), visible = _a[0], setVisibility = _a[1];
    var config = useConfigContext_1.default();
    config.select = config.select || {};
    var _b = useValidation_1.default(props), setDirty = _b.setDirty, showError = _b.showError, errorMessage = _b.errorMessage;
    useFieldFlow_1.default(props, React.useCallback(function () { }, []));
    var displayValue = React.useMemo(function () {
        var arrayValue = Array.isArray(value) ? value : [value];
        var selectedValues = options.filter(function (o) { return arrayValue.includes(o.value); });
        if (formatValueDisplay)
            return formatValueDisplay(selectedValues);
        return selectedValues.length > 3 ? selectedValues.length + " items" : selectedValues.map(function (o) { return o.label; }).join(', ');
    }, [value, options, formatValueDisplay]);
    var handlePress = React.useCallback(function () {
        setVisibility(true);
    }, []);
    var handleDone = React.useCallback(function (value) {
        onChange(value);
        config.validationOn === 'onChange' && setDirty(true);
        setVisibility(false);
    }, [config.validationOn, onChange, setDirty]);
    var handleDismiss = React.useCallback(function () {
        setVisibility(false);
    }, [setVisibility]);
    React.useEffect(function () { return function () { return setVisibility(false); }; }, []);
    var rightIcon = React.useMemo(function () { return props.rightIcon || config.select.icon || 'ios-arrow-down'; }, [
        config.select.icon,
        props.rightIcon
    ]);
    var rightIconAction = React.useMemo(function () { return (props.rightIcon ? props.rightIconAction : null) || handlePress; }, [
        handlePress,
        props.rightIcon,
        props.rightIconAction
    ]);
    return (React.createElement(ThemeProvider_1.default, null,
        React.createElement(Text_1.default, tslib_1.__assign({}, otherProps, { label: label, ref: null, value: displayValue, validation: null, errorMessage: showError ? errorMessage : null, onChange: nullCallback, flowIndex: null, tabIndex: null, editable: false, rightIcon: rightIcon, rightIconAction: rightIconAction, _onPress: handlePress, _onLabelPress: handlePress, _disabled: props.editable === false })),
        React.createElement(Modal_1.default, tslib_1.__assign({}, props, { ref: null, visible: visible, handleDismiss: handleDismiss, handleDone: handleDone }))));
});
exports.default = FieldSelect;
//# sourceMappingURL=index.js.map