@vimeo/iris/components/inputs/Dates/Calendar/useDaysFromViewport.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');

function useDaysFromViewport(viewport) {
    return React.useMemo(function () {
        var days = [];
        // Generate the date objects for each day of the month, and push them
        // into our array.
        var year = viewport.getFullYear();
        var month = viewport.getMonth();
        // Figure out how many days we need to pad before our calendar.
        // This is done by getting the current day of the week, and we presume
        // that we want to display a full week as aour first row. For each
        // padded integer, we push a new date object into our array.
        var dayLeftPad = viewport.getDay() - 1;
        while (dayLeftPad >= 0) {
            var date = new Date(year, month, 1);
            date.setDate(-dayLeftPad);
            days.push(date);
            dayLeftPad--;
        }
        var daysInMonth = new Date(year, month + 1, 0).getDate();
        for (var i = 1; i <= daysInMonth; i++) {
            days.push(new Date(year, month, i));
        }
        // Figure out how many days we need to push in the end
        // Fills up grid up to 7 days * 6 weeks
        // This will create the same size calender for each month
        var lastDate = days[days.length - 1].getDate();
        var maxDays = 7 * 6;
        for (var i = 0; days.length < maxDays; i++) {
            var date = new Date(year, month, lastDate + i + 1);
            days.push(date);
        }
        return days;
    }, [viewport]);
}

exports.useDaysFromViewport = useDaysFromViewport;