@react-form-fields/native-base/Datepicker.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 React = require("react");
var react_native_modal_datetime_picker_1 = require("react-native-modal-datetime-picker");
var dateFormat_1 = require("./helpers/dateFormat");
var useFieldFlow_1 = require("./hooks/useFieldFlow");
var Text_1 = require("./Text");
var nullCallback = function () { };
var FieldDatepicker = React.memo(function (props) {
    var value = props.value, onChange = props.onChange, mode = props.mode, format = props.format, otherProps = tslib_1.__rest(props, ["value", "onChange", "mode", "format"]);
    var _a = React.useState(false), showPicker = _a[0], setShowPicker = _a[1];
    var fieldTextRef = React.useRef();
    var datePickerProps = useMemoOtherProps_1.default(props, 'value', 'onChange');
    var config = useConfigContext_1.default();
    config.date = config.date || {};
    var onFocusFlow = React.useCallback(function () { }, []);
    useFieldFlow_1.default(props, onFocusFlow);
    var handlePress = React.useCallback(function () {
        if (props.editable === false) {
            return;
        }
        setShowPicker(true);
    }, [props.editable]);
    var handleClear = React.useCallback(function () { return onChange(null); }, [onChange]);
    var handleConfirm = React.useCallback(function (value) {
        setShowPicker(false);
        config.validationOn === 'onChange' && fieldTextRef.current.setDirty(true);
        onChange(value);
    }, [onChange, setShowPicker, fieldTextRef, config.validationOn]);
    var onCancelHandler = React.useCallback(function () { return setShowPicker(false); }, [setShowPicker]);
    var rightIcon = React.useMemo(function () {
        if (props.rightIcon) {
            return props.rightIcon;
        }
        if (props.notClearable) {
            return null;
        }
        return config.date.clearIcon || 'md-close';
    }, [config.date.clearIcon, props.notClearable, props.rightIcon]);
    return (React.createElement(React.Fragment, null,
        React.createElement(Text_1.default, tslib_1.__assign({}, otherProps, { ref: fieldTextRef, value: value ? value.toISOString() : null, displayValue: dateFormat_1.dateFormat(value, mode || 'date', config, format), tabIndex: null, flowIndex: null, onChange: nullCallback, editable: false, rightIcon: value ? rightIcon : null, rightIconAction: props.rightIconAction || handleClear, _onLabelPress: handlePress, _onPress: handlePress, _disabled: props.editable === false })),
        React.createElement(react_native_modal_datetime_picker_1.default, tslib_1.__assign({ headerTextIOS: props.label, confirmTextIOS: config.date.labels.ok, cancelTextIOS: config.date.labels.cancel, locale: config.date.pickerLocale }, datePickerProps, { mode: mode, date: value || new Date(), isVisible: showPicker, onConfirm: handleConfirm, onCancel: onCancelHandler }))));
});
FieldDatepicker.displayName = 'FieldDatepicker';
exports.default = FieldDatepicker;
//# sourceMappingURL=Datepicker.js.map