@vimeo/iris
Version:
Vimeo Design System
243 lines (236 loc) • 17.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../../../../tslib.es6-3ec409b7.js');
var React = require('react');
var styled = require('styled-components');
var components_inputs_Dates_Calendar_useDaysFromViewport = require('./useDaysFromViewport.js');
var components_inputs_Dates_Calendar_Calendar_state = require('../../../../Calendar.state-6346b28e.js');
var components_inputs_Dates_Calendar_CalendarDay = require('./CalendarDay.js');
var polished = require('polished');
var components_inputs_Dates_DateRange_translations = require('../DateRange/translations.js');
var typography_Header_Header = require('../../../../typography/Header/Header.js');
var color_colors = require('../../../../color/colors.js');
var utils_DOM_geometry = require('../../../../utils/DOM/geometry.js');
var icons_ui_ChevronLeft = require('../../../../icons/ui/ChevronLeft.js');
var icons_ui_ChevronRight = require('../../../../icons/ui/ChevronRight.js');
require('../DateRange/DateFormat.js');
require('./CalendarDayLabel.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/css.js');
require('../../../../typography/Header/Header.style.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);
var Calendar = function (_a) {
var onClick = _a.onClick, selected = _a.selected, minDate = _a.minDate, maxDate = _a.maxDate, _b = _a.backOnly, backOnly = _b === void 0 ? false : _b, _c = _a.forwardOnly, forwardOnly = _c === void 0 ? false : _c, backOnClick = _a.backOnClick, forwardOnClick = _a.forwardOnClick, isRange = _a.isRange, _d = _a.range, _e = _d === void 0 ? [null, null] : _d, _f = tslib_es6.__read(_e, 2), selectionStart = _f[0], selectionEnd = _f[1], _g = _a.hoverRange, _h = _g === void 0 ? [null, null] : _g, _j = tslib_es6.__read(_h, 2), hoverStart = _j[0], hoverEnd = _j[1], onMouseEnter = _a.onMouseEnter, _k = _a.translation, translation = _k === void 0 ? components_inputs_Dates_DateRange_translations.translations['en'] : _k, _l = _a.initialMonth, initialMonth = _l === void 0 ? new Date() : _l, props = tslib_es6.__rest(_a, ["onClick", "selected", "minDate", "maxDate", "backOnly", "forwardOnly", "backOnClick", "forwardOnClick", "isRange", "range", "hoverRange", "onMouseEnter", "translation", "initialMonth"]);
var date = initialMonth;
var DAY_LABELS = React.useMemo(function () { return Object.values(translation.daysAbbreviated); }, [translation.daysAbbreviated]);
var month = function (currentDate) {
var numericalMonth = currentDate.getMonth();
var numericalYear = currentDate.getFullYear();
var month = getMonthName(numericalMonth);
return "".concat(translation.months[month], " ").concat(numericalYear);
};
var initialViewportDate = new Date(date.getFullYear(), date.getMonth(), 1);
var initialStateWithMonth = tslib_es6.__assign(tslib_es6.__assign({}, components_inputs_Dates_Calendar_Calendar_state.initialState), { viewportDate: initialViewportDate });
var _m = tslib_es6.__read(React.useReducer(components_inputs_Dates_Calendar_Calendar_state.reducer, initialStateWithMonth), 2), state = _m[0], dispatch = _m[1];
var viewportDate = state.viewportDate;
// Memoize the start and end selections for our range as a tuple.
var range = React.useMemo(function () {
return [
hoverStart && hoverStart < selectionStart
? hoverStart
: selectionStart,
hoverEnd && hoverEnd > selectionEnd ? hoverEnd : selectionEnd,
];
}, [selectionStart, selectionEnd, hoverStart, hoverEnd]);
var _o = tslib_es6.__read(React.useState(0), 2), width = _o[0], setWidth = _o[1];
var actualDate = isRange ? initialMonth : viewportDate;
var days = components_inputs_Dates_Calendar_useDaysFromViewport.useDaysFromViewport(gotoMonth(actualDate, 0));
var resetMonth = function () {
// TODO make this work for date range?
var payload = new Date();
dispatch({ type: 'CHANGE_VIEWPORT', payload: payload });
};
var next = function () {
var payload = new Date(viewportDate.getFullYear(), viewportDate.getMonth() + 1, 1);
dispatch({ type: 'CHANGE_VIEWPORT', payload: payload });
};
var prev = function () {
var payload = new Date(viewportDate.getFullYear(), viewportDate.getMonth() - 1, 1);
dispatch({ type: 'CHANGE_VIEWPORT', payload: payload });
};
function select(date) {
var newMonth = date.getMonth() !== initialMonth.getMonth();
return function () {
if (newMonth)
dispatch({ type: 'SELECT_DATE', payload: date });
onClick(date);
};
}
var inCurrentMonth = function (date) {
return date.getMonth() === actualDate.getMonth();
};
var inCurrentYear = function (date) {
return date.getFullYear() === actualDate.getFullYear();
};
function isCurrentDate(date) {
var selectedDate = new Date(selected);
var sameDate = selectedDate.getDate() === date.getDate();
var sameMonth = inCurrentMonth(selectedDate);
var sameYear = inCurrentYear(selectedDate);
return sameDate && sameMonth && sameYear;
}
function handleClick(date) {
if (onClick) {
onClick(date);
}
}
function handleMouseOver(date) {
if (onMouseEnter) {
onMouseEnter(date);
}
}
function handleMouseOut() {
if (onMouseEnter) {
onMouseEnter(null);
}
}
var ref = React.useRef();
var maxMonth = new Date(actualDate.getFullYear(), actualDate.getMonth() + 1, 1);
var minMonth = new Date(actualDate.getFullYear(), actualDate.getMonth(), 1);
React.useLayoutEffect(function () { return setWidth(utils_DOM_geometry.geometry(ref.current).width); }, [setWidth]);
return (React__default["default"].createElement(Wrapper, tslib_es6.__assign({}, props, { onMouseOut: handleMouseOut }),
React__default["default"].createElement(MonthNav, null,
React__default["default"].createElement(MonthNavButton, { type: "button", "aria-label": "Previous", onClick: !forwardOnly
? backOnClick
? backOnClick
: prev
: undefined, inactive: minDate ? minMonth < minDate : undefined, hidden: forwardOnly },
React__default["default"].createElement(icons_ui_ChevronLeft.ChevronLeft, null)),
React__default["default"].createElement(MonthLabel, { size: "4", onClick: resetMonth }, month(actualDate)),
React__default["default"].createElement(MonthNavButton, { type: "button", "aria-label": "Next", onClick: !backOnly
? forwardOnClick
? forwardOnClick
: next
: undefined, inactive: maxDate ? maxMonth > maxDate : undefined, hidden: backOnly },
React__default["default"].createElement(icons_ui_ChevronRight.ChevronRight, null))),
React__default["default"].createElement(Days, { ref: ref, width: width },
DAY_LABELS.map(function (day, i) { return (React__default["default"].createElement(DayLabel, { size: width / 7, key: i }, day)); }),
days.map(function (day, i) {
var pastMinDate = minDate &&
new Date(day.toDateString()) <
new Date(minDate.toDateString());
var pastMaxDate = maxDate &&
new Date(day.toDateString()) >
new Date(maxDate.toDateString());
var inactive = day.getMonth() !== actualDate.getMonth() ||
day.getFullYear() !== actualDate.getFullYear();
if (isRange) {
return (React__default["default"].createElement(components_inputs_Dates_Calendar_CalendarDay.CalendarDay, { key: i, inactive: inactive, pastMinDate: pastMinDate, pastMaxDate: pastMaxDate, range: range, draftRange: [selectionStart, selectionEnd], date: day, onClick: function () { return handleClick(day); }, onMouseEnter: function () { return handleMouseOver(day); } }, String(day.getDate()).padStart(2, '0')));
}
return (React__default["default"].createElement(Day, { key: i, size: width / 7, onClick: !pastMinDate && !pastMaxDate ? select(day) : undefined, isCurrentDate: isCurrentDate(day), inCurrentMonth: inCurrentMonth(day), disabled: pastMinDate || pastMaxDate }, String(day.getDate()).padStart(2, '0')));
}))));
};
function getMonthName(month) {
switch (month) {
case 0:
return 'january';
case 1:
return 'february';
case 2:
return 'march';
case 3:
return 'april';
case 4:
return 'may';
case 5:
return 'june';
case 6:
return 'july';
case 7:
return 'august';
case 8:
return 'september';
case 9:
return 'october';
case 10:
return 'november';
case 11:
return 'december';
}
}
function gotoMonth(viewingMonth, i) {
return new Date(viewingMonth.getFullYear(), viewingMonth.getMonth() + i, 1);
}
var Wrapper = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
var MonthNav = styled__default["default"].div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n display: flex;\n position: relative;\n width: 100%;\n padding-top: 1rem;\n align-items: center;\n justify-content: center;\n"], ["\n display: flex;\n position: relative;\n width: 100%;\n padding-top: 1rem;\n align-items: center;\n justify-content: center;\n"])));
var MonthLabel = styled__default["default"](typography_Header_Header.Header)(templateObject_3 || (templateObject_3 = tslib_es6.__makeTemplateObject(["\n margin: 0;\n flex-grow: 2;\n text-align: center;\n padding: 0 0.5rem;\n color: ", ";\n cursor: pointer;\n"], ["\n margin: 0;\n flex-grow: 2;\n text-align: center;\n padding: 0 0.5rem;\n color: ", ";\n cursor: pointer;\n"])), function (_a) {
var theme = _a.theme;
return theme.content.color;
});
var MonthNavButton = styled__default["default"].button(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n width: 2rem;\n padding: 0;\n margin: 0 0.75rem;\n cursor: pointer;\n pointer-events: ", ";\n\n ", "\n\n * {\n fill: ", ";\n stroke-width: 1px;\n }\n"], ["\n width: 2rem;\n padding: 0;\n margin: 0 0.75rem;\n cursor: pointer;\n pointer-events: ", ";\n\n ", "\n\n * {\n fill: ", ";\n stroke-width: 1px;\n }\n"])), function (props) {
return props.inactive || props.hidden ? 'none' : 'default';
}, function (props) {
if (props.hidden) {
return styled.css(templateObject_4 || (templateObject_4 = tslib_es6.__makeTemplateObject(["\n opacity: 0;\n visibility: hidden;\n "], ["\n opacity: 0;\n visibility: hidden;\n "])));
}
}, function (props) {
return props.inactive
? polished.rgba(props.theme.content.color, 0.2)
: polished.rgba(props.theme.content.color, 0.75);
});
var Days = styled__default["default"].div(templateObject_6 || (templateObject_6 = tslib_es6.__makeTemplateObject(["\n display: flex;\n flex-flow: row wrap;\n align-items: flex-start;\n align-content: flex-start;\n padding: 0 0.5rem 0.5rem;\n height: ", ";\n width: 100%;\n"], ["\n display: flex;\n flex-flow: row wrap;\n align-items: flex-start;\n align-content: flex-start;\n padding: 0 0.5rem 0.5rem;\n height: ", ";\n width: 100%;\n"])), function (p) { return polished.rem(p.width); });
var Day = styled__default["default"].div(templateObject_9 || (templateObject_9 = tslib_es6.__makeTemplateObject(["\n position: relative;\n cursor: default;\n flex: 0 0 calc(100% / 7);\n width: calc(100% / 7);\n height: calc(100% / 7);\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n font-size: ", ";\n font-weight: 500;\n padding: 0.75rem 0.25rem;\n color: ", ";\n opacity: ", ";\n z-index: 0;\n background: transparent;\n\n &::after {\n content: '';\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ", ";\n border-radius: 50%;\n transition: 120ms ease-in-out;\n z-index: -1;\n }\n\n ", ";\n\n ", "\n"], ["\n position: relative;\n cursor: default;\n flex: 0 0 calc(100% / 7);\n width: calc(100% / 7);\n height: calc(100% / 7);\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n font-size: ", ";\n font-weight: 500;\n padding: 0.75rem 0.25rem;\n color: ", ";\n opacity: ", ";\n z-index: 0;\n background: transparent;\n\n &::after {\n content: '';\n pointer-events: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: ", ";\n border-radius: 50%;\n transition: 120ms ease-in-out;\n z-index: -1;\n }\n\n ", ";\n\n ", "\n"])), function (p) { return polished.rem(14 + (p.size > 45.8 && p.size / 7)); }, function (_a) {
var theme = _a.theme;
return theme.content.color;
}, function (p) { return (p.inCurrentMonth && !p.disabled ? 1 : 0.125); }, polished.rgba(color_colors.blue(500), 0), function (p) {
return p.isCurrentDate &&
p.inCurrentMonth &&
!p.disabled && styled.css(templateObject_7 || (templateObject_7 = tslib_es6.__makeTemplateObject(["\n color: ", ";\n\n &::after {\n background: ", ";\n }\n "], ["\n color: ", ";\n\n &::after {\n background: ", ";\n }\n "])), color_colors.white, polished.rgba(color_colors.blue(500), 1));
}, function (p) {
return !p.disabled && styled.css(templateObject_8 || (templateObject_8 = tslib_es6.__makeTemplateObject(["\n cursor: pointer;\n\n &:hover {\n color: ", ";\n\n &::after {\n background: ", ";\n }\n }\n "], ["\n cursor: pointer;\n\n &:hover {\n color: ", ";\n\n &::after {\n background: ", ";\n }\n }\n "])), color_colors.white, polished.rgba(color_colors.blue(500), 1));
});
var DayLabel = styled__default["default"](Day)(templateObject_10 || (templateObject_10 = tslib_es6.__makeTemplateObject(["\n font-weight: bold;\n opacity: 1;\n pointer-events: none;\n"], ["\n font-weight: bold;\n opacity: 1;\n pointer-events: none;\n"])));
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
exports.Calendar = Calendar;