expo-datepicker/lib/DatePicker.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 input_1 = __importDefault(require("./input"));
const months_1 = require("./const/months");
const days_1 = require("./const/days");
const years_1 = require("./const/years");
const styles_1 = __importDefault(require("./styles"));
const YEARS = years_1.getYears();
function getDaysInMonth(currMonth, currYear) {
    return new Date(currYear, currMonth, 0).getDate();
}
function DatePicker(props) {
    const { backgroundColor, borderColor = "#577C7D", containerStyle = {}, date = "", fontStyle = {}, icon, inputDayStyle, inputMonthStyle, inputStyle, inputYearStyle, itemStyleModal, modalBackgroundColor = "#FFF", onChange, selectedColor = "#6AA1A4", selectedTextColor = "#FFF", textStyleModal, } = props;
    const [month, setMonth] = react_1.useState();
    const [day, setDay] = react_1.useState();
    const [year, setYear] = react_1.useState();
    const currentDays = react_1.useMemo(() => {
        if (!year || !month)
            return [];
        const numberOfDays = getDaysInMonth(Number(month.value), Number(year.value));
        return days_1.getDays(numberOfDays);
    }, [year, month]);
    function fillDate(currDate) {
        let currDay = currDate.getUTCDate().toString();
        const currYear = YEARS.find((y) => y.value === currDate.getFullYear());
        const monthCurrent = months_1.Months.find((mon) => mon.value === currDate.getUTCMonth() + 1);
        if (Number(currDay) < 10) {
            currDay = `0${currDay}`;
        }
        const dayOption = {
            value: currDay,
            label: currDay,
        };
        setDay(dayOption);
        if (monthCurrent) {
            setMonth(monthCurrent);
        }
        if (currYear) {
            setYear(currYear);
        }
    }
    function valueChanged(name, currVal) {
        const currDay = name === "day" ? currVal : day;
        const currMonth = name === "month" ? currVal : month;
        const currYear = name === "year" ? currVal : year;
        const currDate = `${(currYear === null || currYear === void 0 ? void 0 : currYear.value) || ""}/${(currMonth === null || currMonth === void 0 ? void 0 : currMonth.value) || ""}/${(currDay === null || currDay === void 0 ? void 0 : currDay.value) || ""}`;
        if (onChange) {
            onChange(currDate);
        }
    }
    react_1.useEffect(() => {
        const dateFormated = date.replaceAll("/", "-");
        const currentDate = date ? new Date(dateFormated) : new Date();
        fillDate(currentDate);
    }, [date]);
    return (<react_native_1.View style={Object.assign(Object.assign({}, styles_1.default.datePickerContainer), containerStyle)}>
      <input_1.default placeholder="No Selected" options={months_1.Months} option={month || null} fontStyle={fontStyle} selectedColor={selectedColor} selectedTextColor={selectedTextColor} textStyleModal={textStyleModal} itemStyleModal={itemStyleModal} modalBackgroundColor={modalBackgroundColor} borderColor={borderColor} flex={3} style={Object.assign(Object.assign({
            backgroundColor,
            borderColor,
        }, inputStyle), inputMonthStyle)} onSelected={(value) => {
            setMonth(value);
            valueChanged("month", value);
        }} icon={icon}/>

      <input_1.default selectedColor={selectedColor} selectedTextColor={selectedTextColor} textStyleModal={textStyleModal} itemStyleModal={itemStyleModal} modalBackgroundColor={modalBackgroundColor} borderColor={borderColor} placeholder="No Selected" flex={1.5} style={Object.assign(Object.assign({
            backgroundColor,
            borderColor,
        }, inputStyle), inputDayStyle)} options={currentDays} option={day || null} fontStyle={fontStyle} onSelected={(value) => {
            setDay(value);
            valueChanged("day", value);
        }} icon={icon}/>

      <input_1.default selectedColor={selectedColor} selectedTextColor={selectedTextColor} textStyleModal={textStyleModal} itemStyleModal={itemStyleModal} modalBackgroundColor={modalBackgroundColor} borderColor={borderColor} placeholder="No Selected" flex={2} style={[
            {
                backgroundColor,
                borderColor,
            },
            inputStyle,
            inputYearStyle,
        ]} options={YEARS} option={year || null} fontStyle={fontStyle} onSelected={(value) => {
            setYear(value);
            valueChanged("year", value);
        }} icon={icon}/>
    </react_native_1.View>);
}
exports.default = DatePicker;
//# sourceMappingURL=DatePicker.js.map