@vimeo/iris
Version:
Vimeo Design System
127 lines (124 loc) • 6.67 kB
JavaScript
import { a as __makeTemplateObject, _ as __read } from '../../../../tslib.es6-7f0e734f.js';
import React__default, { memo } from 'react';
import { rem } from 'polished';
import styled from 'styled-components';
import { CalendarDayLabel } from './CalendarDayLabel.esm.js';
import '../../../../color/colors.esm.js';
import '../../../../typography/Paragraph/Paragraph.esm.js';
import '../../../../typography/Paragraph/Paragraph.style.esm.js';
import '../../../../typography/Text/Text.esm.js';
import '../../../../typography/Text/Text.style.esm.js';
import '../../../../typography/typography.esm.js';
import '../../../../tokens/core.esm.js';
import '../../../../tokens/color/index.esm.js';
import '../../../../tokens/color/background/background.esm.js';
import '../../../../tokens/util/readToken.esm.js';
import '../../../../tokens/util/clamp.esm.js';
import '../../../../tokens/color/format/format.esm.js';
import '../../../../tokens/color/format/primary.esm.js';
import '../../../../tokens/color/format/secondary.esm.js';
import '../../../../tokens/color/format/tertiary.esm.js';
import '../../../../tokens/color/rainbow/rainbow.esm.js';
import '../../../../tokens/color/rainbow/conic/index.esm.js';
import '../../../../tokens/color/rainbow/conic/sm.esm.js';
import '../../../../tokens/color/rainbow/conic/xl.esm.js';
import '../../../../tokens/color/rainbow/linear/index.esm.js';
import '../../../../tokens/color/rainbow/linear/sm.esm.js';
import '../../../../tokens/color/rainbow/linear/xl.esm.js';
import '../../../../tokens/color/livestream/livestream.esm.js';
import '../../../../tokens/color/status/status.esm.js';
import '../../../../tokens/color/status/caution.esm.js';
import '../../../../tokens/color/status/negative.esm.js';
import '../../../../tokens/color/status/positive.esm.js';
import '../../../../tokens/color/stroke/stroke.esm.js';
import '../../../../tokens/color/surface/surface.esm.js';
import '../../../../tokens/color/text/text.esm.js';
import '../../../../tokens/util/round.esm.js';
import '../../../../tokens/color/upsell/upsell.esm.js';
import '../../../../tokens/color/upsell/sm.esm.js';
import '../../../../tokens/color/upsell/xl.esm.js';
import '../../../../tokens/color/upsell/new.esm.js';
import '../../../../tokens/edge/edge.esm.js';
import '../../../../tokens/space/space.esm.js';
import '../../../../tokens/typography/index.esm.js';
import '../../../../tokens/typography/size/size.esm.js';
import '../../../../typography/Text/EditableText.esm.js';
import '../../../../utils/HOCs/withIris.esm.js';
import '../../../../utils/hooks/useLayoutStyles.esm.js';
import '../../../../utils/DOM/geometry.esm.js';
import '../../../../utils/css.esm.js';
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.createElement(CalendarGridItem, { className: className, onClick: handleClick, onMouseEnter: handleMouseEnter }, !inactive && (React__default.createElement(CalendarDayLabel, { isControl: isControl, isPast: pastMinDate || pastMaxDate, isTrack: isTrack, isStart: isStart && hasEnd, isEnd: isEnd }, children))));
}
var CalendarGridItem = styled.div(templateObject_1 || (templateObject_1 = __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"])), rem(1), rem(14));
var DayStyled = styled(Day)(templateObject_2 || (templateObject_2 = __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"])), rem(4), function (props) {
return props.onClick && !props.inactive ? 'pointer' : 'default';
});
var CalendarDay = 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 = __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;
export { CalendarDay, CalendarGridItem };