@platformbuilders/react-native-ui/dist/components/DatePicker/index.js

Platform Builders Shared Components Library

import React, { useState, useCallback, useEffect } from 'react';
import { Animated } from 'react-native';
import FormError from '../FormError';
import { Label, BottomLine, DatePicker, DatePickerStyles, DatePickerStylesDark, LABEL_UPPER_STYLE, LABEL_LOWER_STYLE, } from './styles';
const DatePickerInput = ({ id, accessibility, label = '', error = '', dark = false, editable = true, value = '', testID = '', mode = 'date', androidMode = 'spinner', locale = 'pt-BR', format = 'DD/MM/YYYY', cancelBtnText = 'Cancelar', confirmBtnText = 'Confirmar', onDateChange = () => { }, maxDate, }) => {
    const [labelAnimatedStyle] = useState({
        top: new Animated.Value(LABEL_LOWER_STYLE.top),
        fontSize: new Animated.Value(LABEL_LOWER_STYLE.fontSize),
    });
    const [date, setDate] = useState('');
    const [isPlaceholder, setIsPlaceHolder] = useState(true);
    const execAnimation = useCallback(() => {
        const animations = Object.keys(LABEL_UPPER_STYLE).map((animationProp) => Animated.timing(labelAnimatedStyle[animationProp], {
            toValue: LABEL_UPPER_STYLE[animationProp],
            duration: 200,
            useNativeDriver: false,
        }));
        setIsPlaceHolder(false);
        Animated.parallel(animations).start();
    }, [Animated, labelAnimatedStyle]);
    const updateDate = useCallback((updatedDate) => {
        setDate(updatedDate);
        execAnimation();
        if (onDateChange) {
            onDateChange(updatedDate);
        }
    }, [onDateChange]);
    useEffect(() => {
        if (value) {
            execAnimation();
        }
    }, [value]);
    const customStyles = error
        ? Object.assign(Object.assign({}, DatePickerStyles), { dateInput: { borderColor: '#cc0000' } }) : dark
        ? DatePickerStylesDark
        : DatePickerStyles;
    return (React.createElement(FormError, { id: id, accessibility: accessibility, error: error },
        React.createElement(Label, { error: error || '', style: labelAnimatedStyle, isPlaceholder: isPlaceholder, dark: dark }, label),
        React.createElement(DatePicker, { mode: mode, androidMode: androidMode, locale: locale, placeholder: " ", format: format, editable: !editable, date: date, customStyles: customStyles, maxDate: maxDate, testID: testID, confirmBtnText: confirmBtnText, cancelBtnText: cancelBtnText, onDateChange: updateDate, showIcon: false, dark: dark }),
        React.createElement(BottomLine, { dark: dark })));
};
export default DatePickerInput;
//# sourceMappingURL=index.js.map