DefinitelyTyped/types/react-native-calendar-picker/react-native-calendar-picker-tests.tsx

import * as React from 'react';

import CalendarPicker, {
    DateChangedCallback,
    SwipeCallback,
    CustomDateStyle,
    DisabledDatesFunc,
} from 'react-native-calendar-picker';

const TestSimpleProps = () => (
    <CalendarPicker
        weekdays={['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']}
        months={[
            'Janeiro',
            'Fevereiro',
            'Março',
            'Abril',
            'Maio',
            'Junho',
            'Julho',
            'Agosto',
            'Setembro',
            'Outubro',
            'Novembro',
            'Dezembro',
        ]}
        startFromMonday
        allowRangeSelection
        previousTitle="string"
        nextTitle="string"
        selectedDayColor="string"
        selectedDayStyle={{ flex: 1 }}
        selectedDayTextColor="string"
        selectedRangeStartStyle={{ flex: 1 }}
        selectedRangeEndStyle={{ flex: 1 }}
        selectedRangeStyle={{ flex: 1 }}
        disabledDates={[new Date(), new Date()]}
        disabledDatesTextStyle={{ fontSize: 10 }}
        selectedStartDate={new Date()}
        selectedEndDate={new Date()}
        minRangeDuration={1}
        maxRangeDuration={2}
        todayBackgroundColor="string"
        todayTextStyle={{ fontSize: 10 }}
        textStyle={{ fontSize: 10 }}
        scaleFactor={3}
        minDate={new Date()}
        maxDate={new Date()}
        initialDate={new Date()}
        width={3}
        height={3}
        enableSwipe
        enableDateChange
        restrictMonthNavigation
        dayShape="circle"
        headingLevel={3}
        previousTitleStyle={{ fontSize: 10 }}
        nextTitleStyle={{ fontSize: 10 }}
        dayLabelsWrapper={{ flex: 1 }}
    />
);

const TestRangeDurations = () => {
    return (
        <CalendarPicker
            minRangeDuration={[
                { date: new Date(), minDuration: 4 },
                { date: new Date(), minDuration: 3 },
            ]}
            maxRangeDuration={[
                { date: new Date(), maxDuration: 4 },
                { date: new Date(), maxDuration: 3 },
            ]}
        />
    );
};

const TestDisabledDates = () => {
    const isDateDisabled: DisabledDatesFunc = date => date.day() % 2 === 1;
    return <CalendarPicker disabledDates={isDateDisabled} />;
};

const TestCustomDateStyle = () => {
    const onDateChange: DateChangedCallback = date => console.log(date.day());

    const customStyles: CustomDateStyle[] = [
        {
            date: new Date(),
            containerStyle: { flex: 1 },
            style: { flex: 1 },
            textStyle: { fontSize: 10 },
        },
        {
            date: '2020-10-10',
            style: { flex: 1 },
        },
    ];

    return <CalendarPicker customDatesStyles={customStyles} />;
};

const TestCallbacks = () => {
    const onDateChange: DateChangedCallback = date => console.log(date.day());

    return <CalendarPicker onDateChange={onDateChange} onMonthChange={onDateChange} />;
};

const TestRef = () => {
    const ref = React.useRef<CalendarPicker>();
    ref.current!.handleOnPressNext();
    ref.current!.handleOnPressPrevious();
    ref.current!.handleOnPressDay(3);
    ref.current!.resetSelections();
};

const TestDayOfWeekStyles = () => {
    return (
        <CalendarPicker
            allowRangeSelection
            previousTitle="<"
            previousTitleStyle={{ color: '#fff' }}
            nextTitle=">"
            nextTitleStyle={{ color: '#f00' }}
            dayLabelsWrapper={{
                borderBottomWidth: 0,
                borderTopWidth: 0,
            }}
            dayOfWeekStyles={{
                0: {
                    color: '#00f',
                    fontSize: 22,
                    fontWeight: 'bold',
                    backgroundColor: '#ff0',
                },
                5: {
                    color: '#000',
                    fontSize: 22,
                },
            }}
        />
    );
};

const TestSwipe = () => {
    const onSwipe: SwipeCallback = direction => {
        const b: boolean = direction === 'invalid'; // $ExpectError
        if (direction === 'SWIPE_RIGHT') console.log('swiped right');
    };
    return (
        <CalendarPicker
            swipeConfig={{ directionalOffsetThreshold: 3, velocityThreshold: 4 }}
            enableSwipe
            onSwipe={onSwipe}
        />
    );
};