expo-datepicker/lib/input.js

Simple date picker

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const item_1 = __importDefault(require("./modal/item"));
const styles_1 = __importDefault(require("./styles"));
function Input(props) {
    const { options, placeholder, onSelected, option, icon = null, fontStyle, style = {}, flex = 1, modalBackgroundColor, selectedColor, selectedTextColor, textStyleModal, borderColor, itemStyleModal, } = props;
    const [modalVisible, setModalVisible] = react_1.useState(false);
    const fadeAnim = react_1.useRef(new react_native_1.Animated.Value(0)).current;
    const slideSmoothAnim = react_1.useRef(new react_native_1.Animated.Value(0)).current;
    const containerAnim = react_1.useRef(new react_native_1.Animated.Value(48)).current;
    const labelAnimation = react_1.useRef(new react_native_1.Animated.Value(0)).current;
    const slideUp = () => {
        react_native_1.Animated.parallel([
            react_native_1.Animated.timing(slideSmoothAnim, {
                toValue: 0,
                duration: 200,
                useNativeDriver: false,
            }),
            react_native_1.Animated.timing(containerAnim, {
                toValue: 48,
                duration: 200,
                useNativeDriver: false,
            }),
            react_native_1.Animated.timing(fadeAnim, {
                toValue: 0,
                duration: 200,
                useNativeDriver: false,
            }),
            react_native_1.Animated.timing(labelAnimation, {
                toValue: 0,
                duration: 200,
                useNativeDriver: false,
            }),
        ]).start(({ finished }) => {
            if (finished) {
                setModalVisible(false);
            }
        });
    };
    const slideDown = () => {
        react_native_1.Animated.parallel([
            react_native_1.Animated.timing(slideSmoothAnim, {
                toValue: 300,
                duration: 200,
                useNativeDriver: false,
            }),
            react_native_1.Animated.timing(containerAnim, {
                toValue: 300,
                duration: 200,
                useNativeDriver: false,
            }),
            react_native_1.Animated.timing(fadeAnim, {
                toValue: 1,
                duration: 200,
                useNativeDriver: false,
            }),
            react_native_1.Animated.timing(labelAnimation, {
                toValue: 25,
                duration: 200,
                useNativeDriver: false,
            }),
        ]).start();
    };
    const renderItem = ({ item }) => (<item_1.default onPress={(value) => {
            onSelected(value);
            slideUp();
        }} current={option} option={item} value={item.value.toString()} label={item.label} selectedColor={selectedColor} selectedTextColor={selectedTextColor} textStyleModal={textStyleModal} itemStyleModal={itemStyleModal}/>);
    function sliceMonthInputText(month) {
        if (modalVisible)
            return month;
        if (month.length > 4)
            return `${month.substring(0, 4)}...`;
        return month;
    }
    return (<react_native_1.Animated.View style={{ height: containerAnim, flex }}>
      <react_native_1.View style={{ height: 48, paddingHorizontal: 2 }}>
        <react_native_1.TouchableWithoutFeedback onPress={() => {
            setModalVisible(true);
            slideDown();
        }} style={{ height: 48 }}>
          <react_native_1.View style={Object.assign(Object.assign({}, styles_1.default.input), style)}>
            <react_native_1.Animated.Text style={[
            styles_1.default.inputText,
            { marginBottom: labelAnimation },
            fontStyle,
        ]}>
              {sliceMonthInputText((option === null || option === void 0 ? void 0 : option.label) || placeholder)}
            </react_native_1.Animated.Text>
            <react_native_1.View style={{ position: "relative", backgroundColor: "black" }}/>

            {!modalVisible ? (<react_native_1.View style={{
                alignItems: "flex-end",
                position: "absolute",
                right: -5,
            }}>
                {icon}
              </react_native_1.View>) : null}
          </react_native_1.View>
        </react_native_1.TouchableWithoutFeedback>

        {modalVisible ? (<react_native_1.Animated.View style={[
                styles_1.default.modal,
                {
                    height: slideSmoothAnim,
                    opacity: fadeAnim,
                    backgroundColor: modalBackgroundColor,
                    borderColor,
                },
            ]}>
            <react_native_1.FlatList data={options} renderItem={renderItem} showsVerticalScrollIndicator={false} keyExtractor={(item) => item.value.toString()}/>
          </react_native_1.Animated.View>) : null}
      </react_native_1.View>
    </react_native_1.Animated.View>);
}
exports.default = Input;
//# sourceMappingURL=input.js.map