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

Vimeo Design System

'use strict';

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

var tslib_es6 = require('../../../../tslib.es6-3ec409b7.js');
var React = require('react');
var polished = require('polished');
var styled = require('styled-components');
var components_inputs_Dates_Calendar_CalendarDayLabel = require('./CalendarDayLabel.js');
require('../../../../color/colors.js');
require('../../../../typography/Paragraph/Paragraph.js');
require('../../../../typography/Paragraph/Paragraph.style.js');
require('../../../../typography/Text/Text.js');
require('../../../../typography/Text/Text.style.js');
require('../../../../typography/typography.js');
require('../../../../tokens/core.js');
require('../../../../tokens/color/index.js');
require('../../../../tokens/color/background/background.js');
require('../../../../tokens/util/readToken.js');
require('../../../../tokens/util/clamp.js');
require('../../../../tokens/color/format/format.js');
require('../../../../tokens/color/format/primary.js');
require('../../../../tokens/color/format/secondary.js');
require('../../../../tokens/color/format/tertiary.js');
require('../../../../tokens/color/rainbow/rainbow.js');
require('../../../../tokens/color/rainbow/conic/index.js');
require('../../../../tokens/color/rainbow/conic/sm.js');
require('../../../../tokens/color/rainbow/conic/xl.js');
require('../../../../tokens/color/rainbow/linear/index.js');
require('../../../../tokens/color/rainbow/linear/sm.js');
require('../../../../tokens/color/rainbow/linear/xl.js');
require('../../../../tokens/color/livestream/livestream.js');
require('../../../../tokens/color/status/status.js');
require('../../../../tokens/color/status/caution.js');
require('../../../../tokens/color/status/negative.js');
require('../../../../tokens/color/status/positive.js');
require('../../../../tokens/color/stroke/stroke.js');
require('../../../../tokens/color/surface/surface.js');
require('../../../../tokens/color/text/text.js');
require('../../../../tokens/util/round.js');
require('../../../../tokens/color/upsell/upsell.js');
require('../../../../tokens/color/upsell/sm.js');
require('../../../../tokens/color/upsell/xl.js');
require('../../../../tokens/color/upsell/new.js');
require('../../../../tokens/edge/edge.js');
require('../../../../tokens/space/space.js');
require('../../../../tokens/typography/index.js');
require('../../../../tokens/typography/size/size.js');
require('../../../../typography/Text/EditableText.js');
require('../../../../utils/HOCs/withIris.js');
require('../../../../utils/hooks/useLayoutStyles.js');
require('../../../../utils/DOM/geometry.js');
require('../../../../utils/css.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

function Day(_a) {
    var children = _a.children, className = _a.className, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, inactive = _a.inactive, pastMinDate = _a.pastMinDate, pastMaxDate = _a.pastMaxDate, date = _a.date, range = _a.range, draftRange = _a.draftRange;
    var isStart = isSameDate(date, range[0]) || isSameDate(date, draftRange[0]);
    var hasEnd = range[1] instanceof Date;
    var isEnd = isSameDate(date, range[1]) || isSameDate(date, draftRange[1]);
    var isTrack = isInDateRange(date, range);
    var isControl = isStart || isEnd;
    var handleClick = function (event) {
        if (!inactive && !pastMinDate && !pastMaxDate && onClick) {
            onClick(event);
        }
    };
    var handleMouseEnter = function (event) {
        if (!inactive && !pastMinDate && !pastMaxDate && onMouseEnter) {
            onMouseEnter(event);
        }
    };
    return (React__default["default"].createElement(CalendarGridItem, { className: className, onClick: handleClick, onMouseEnter: handleMouseEnter }, !inactive && (React__default["default"].createElement(components_inputs_Dates_Calendar_CalendarDayLabel.CalendarDayLabel, { isControl: isControl, isPast: pastMinDate || pastMaxDate, isTrack: isTrack, isStart: isStart && hasEnd, isEnd: isEnd }, children))));
}
var CalendarGridItem = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  position: relative;\n  flex: 0 0 calc(100% / 7);\n  width: calc(100% / 7);\n  padding: ", ";\n  text-align: center;\n  cursor: default;\n  font-size: ", ";\n  font-weight: 500;\n"], ["\n  position: relative;\n  flex: 0 0 calc(100% / 7);\n  width: calc(100% / 7);\n  padding: ", ";\n  text-align: center;\n  cursor: default;\n  font-size: ", ";\n  font-weight: 500;\n"])), polished.rem(1), polished.rem(14));
var DayStyled = styled__default["default"](Day)(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  margin-bottom: ", ";\n  &::before {\n    content: ' ';\n    display: block;\n    width: 100%;\n    height: 0;\n    padding-bottom: 100%;\n  }\n  cursor: ", ";\n"], ["\n  margin-bottom: ", ";\n  &::before {\n    content: ' ';\n    display: block;\n    width: 100%;\n    height: 0;\n    padding-bottom: 100%;\n  }\n  cursor: ", ";\n"])), polished.rem(4), function (props) {
    return props.onClick && !props.inactive ? 'pointer' : 'default';
});
var CalendarDay = React.memo(DayStyled, calendarDayEqual);
// Utility for comparing two date objects.
function isSameDate(a, b) {
    // if both dates are null we want to return true
    if (!(a && b)) {
        return a === b;
    }
    return (a.getFullYear() === b.getFullYear() &&
        a.getMonth() === b.getMonth() &&
        a.getDate() === b.getDate());
}
// Utility to determine if one date exists between two values of a range.
function isInDateRange(a, range) {
    var _a = tslib_es6.__read(range, 2), start = _a[0], end = _a[1];
    if (!(start && end)) {
        return false;
    }
    if (a > start && a < end) {
        return true;
    }
    return false;
}
// Generate the props that we want to watch for re renders
function generateCompareProps(day) {
    var date = day.date, range = day.range, draftRange = day.draftRange;
    var props = [];
    var i = 0;
    props[i++] =
        (isSameDate(date, range[0]) || isSameDate(date, draftRange[0])) &&
            range[1] instanceof Date; // isStart AND hasEnd
    props[i++] =
        isSameDate(date, range[1]) || isSameDate(date, draftRange[1]); // isEnd
    props[i++] = isInDateRange(date, range); // isTrack
    props[i++] = day.inactive;
    props[i++] = day.pastMinDate;
    props[i++] = day.pastMaxDate;
    return props;
}
// Determine if the previously rendered props differ enough to make a new render
function calendarDayEqual(prev, next) {
    var p = generateCompareProps(prev);
    var n = generateCompareProps(next);
    for (var i = 0; i < p.length; i++) {
        if (p[i] !== n[i]) {
            return false;
        }
    }
    // TODO fix generate compare props
    return false;
}
var templateObject_1, templateObject_2;

exports.CalendarDay = CalendarDay;
exports.CalendarGridItem = CalendarGridItem;