@vimeo/iris
Version:
Vimeo Design System
341 lines (334 loc) • 19.1 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../../../../tslib.es6-3ec409b7.js');
var React = require('react');
var components_inputs_Dates_Calendar_Calendar = require('../Calendar/Calendar.js');
var components_inputs_Dates_Calendar_Calendar_state = require('../../../../Calendar.state-6346b28e.js');
var components_inputs_Dates_DateRange_DateFormat = require('./DateFormat.js');
var components_inputs_Dates_DateRange_DateRange_style = require('./DateRange.style.js');
var components_inputs_Dates_DateRange_translations = require('./translations.js');
var components_inputs_Input_Input = require('../../Input/Input.js');
var utils_HOCs_withIris = require('../../../../utils/HOCs/withIris.js');
var color_colors = require('../../../../color/colors.js');
require('styled-components');
require('../Calendar/useDaysFromViewport.js');
require('../Calendar/CalendarDay.js');
require('polished');
require('../Calendar/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/hooks/useLayoutStyles.js');
require('../../../../utils/DOM/geometry.js');
require('../../../../utils/css.js');
require('../../../../typography/Header/Header.js');
require('../../../../typography/Header/Header.style.js');
require('../../../../icons/ui/ChevronLeft.js');
require('../../../../icons/ui/ChevronRight.js');
require('../../../Menu/Menu.js');
require('../../../Menu/Menu.style.js');
require('../../../Menu/Menu.minors.js');
require('../../../../icons/ui/ChevronDown.js');
require('../../../Button/Button.js');
require('../../../Button/Button.style.js');
require('../../../Button/Button.config.js');
require('../../../Button/FeaturedIcon.js');
require('../../../../themes/index.js');
require('../../../LoaderCircular/LoaderCircular.js');
require('../../../LoaderCircular/LoaderCircular.style.js');
require('../../../../utils/hooks/useDeprecate.js');
require('../../../../utils/general/mergeReactRefs.js');
require('../../Input/Text.js');
require('../../Input/Input.style.js');
require('../../Shared.js');
require('../../Input/useSuggestions.js');
require('../../Wrapper/Wrapper.js');
require('../../../PopOver/PopOver.js');
require('../../../PopOver/PopOver.style.js');
require('../../../PopOver/PopOver.error.js');
require('../../../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.js');
require('react-dom');
require('../../../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.style.js');
require('../../../../utils/hooks/usePortal_DEPRECATED/useMountAnimations.js');
require('../../../../utils/hooks/useIsomorphicEffect.js');
require('../../../../utils/DOM/getComputedStyles.js');
require('../../../../utils/DOM/animate.js');
require('../../../../utils/events/onEvent.js');
require('../../../../utils/hooks/usePortal_DEPRECATED/coordinates.js');
require('../../../../utils/hooks/usePortal_DEPRECATED/Anchor.js');
require('../../../../utils/hooks/useOutsideClick.js');
require('../../../../utils/DOM/SSR.js');
require('../../../../utils/DOM/createPortalOutlet.js');
require('../../../../utils/DOM/createElement.js');
require('../../Input/Mark.js');
require('../../../../utils/general/generateUID.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var DateRange = utils_HOCs_withIris.withIris(DateRangeComponent);
var dateFormat = components_inputs_Dates_DateRange_DateFormat.getDateFormat();
function DateRangeComponent(_a) {
var className = _a.className, endInputLabel = _a.endInputLabel, forwardRef = _a.forwardRef, maxDate = _a.maxDate, minDate = _a.minDate, onChange = _a.onChange, presets = _a.presets, maxDaysSelected = _a.maxDaysSelected, startInputLabel = _a.startInputLabel, onPresetClick = _a.onPresetClick, _b = _a.translation, translation = _b === void 0 ? components_inputs_Dates_DateRange_translations.translations['en'] : _b, defaultValue = _a.defaultValue;
var firstRender = React.useRef(true);
var initial = defaultValue
? tslib_es6.__assign(tslib_es6.__assign({}, components_inputs_Dates_Calendar_Calendar_state.initialState), { range: defaultValue, draft: defaultValue, viewportDate: defaultValue[0] }) : components_inputs_Dates_Calendar_Calendar_state.initialState;
var _c = tslib_es6.__read(React.useReducer(components_inputs_Dates_Calendar_Calendar_state.reducer, initial, components_inputs_Dates_Calendar_Calendar_state.init), 2), state = _c[0], dispatch = _c[1];
var _d = tslib_es6.__read(React.useState(''), 2), presetOption = _d[0], setPresetOption = _d[1];
// When our internal range value changes, if a callback for onChange is passed
// let's call that callback with our new value.
React.useEffect(function () {
if (onChange && !firstRender.current) {
onChange(state.range);
}
else {
firstRender.current = false;
}
}, [state.range, onChange]);
var startLabel = state.startLabel, startDateError = state.startDateError, endLabel = state.endLabel, endDateError = state.endDateError, _e = tslib_es6.__read(state.range, 2), rangeStart = _e[0], rangeEnd = _e[1], _f = tslib_es6.__read(state.draft, 2), draftStart = _f[0], draftEnd = _f[1], _g = tslib_es6.__read(state.hoverDraft, 2), hoverStart = _g[0], hoverEnd = _g[1], viewportDate = state.viewportDate, open = state.open;
var _h = tslib_es6.__read(React.useMemo(function () {
if (!maxDaysSelected ||
!Number.isInteger(maxDaysSelected) ||
!draftStart) {
return [minDate, maxDate];
}
var start = new Date(draftEnd ? draftEnd.getTime() : draftStart.getTime());
start.setDate(start.getDate() - maxDaysSelected);
var end = new Date(draftStart.getTime());
end.setDate(end.getDate() + maxDaysSelected);
if (minDate && minDate > start) {
start = minDate;
}
if (maxDate && maxDate < end) {
end = maxDate;
}
return [start, end];
}, [draftStart, draftEnd, minDate, maxDate, maxDaysSelected]), 2), minDateRange = _h[0], maxDateRange = _h[1];
// Get the viewport for the first calendar in our range picker.
var getDateForFirstCalendar = React.useMemo(function () {
var year = viewportDate.getFullYear();
var month = viewportDate.getMonth();
var dateForFirstCalendar = new Date();
dateForFirstCalendar.setFullYear(year, month - 1, 1);
return dateForFirstCalendar;
}, [viewportDate]);
// Derive the value for the input that represents our start date.
var startDateLabel = React.useMemo(function () {
if (typeof startLabel === 'string')
return startLabel;
if (hoverStart)
return components_inputs_Dates_DateRange_DateFormat.formatDate(hoverStart);
if (draftStart)
return components_inputs_Dates_DateRange_DateFormat.formatDate(draftStart);
if (!open && rangeStart)
return components_inputs_Dates_DateRange_DateFormat.formatDate(rangeStart);
return '';
}, [open, draftStart, startLabel, hoverStart, rangeStart]);
// Derive the value for the input that represents our end date.
var endDateLabel = React.useMemo(function () {
if (typeof endLabel === 'string')
return endLabel;
if (hoverEnd)
return components_inputs_Dates_DateRange_DateFormat.formatDate(hoverEnd);
if (draftEnd)
return components_inputs_Dates_DateRange_DateFormat.formatDate(draftEnd);
if (!open && rangeEnd)
return components_inputs_Dates_DateRange_DateFormat.formatDate(rangeEnd);
return '';
}, [open, draftEnd, endLabel, hoverEnd, rangeEnd]);
// Callback for going to the next month in our date range picker.
function handleGoForward() {
var viewportDate = state.viewportDate;
var payload = new Date(viewportDate.getFullYear(), viewportDate.getMonth() + 1, 1);
dispatch({ type: 'CHANGE_VIEWPORT', payload: payload });
}
// Callback for going to the previous month in our date range picker.
function handleGoBackward() {
var viewportDate = state.viewportDate;
var payload = new Date(viewportDate.getFullYear(), viewportDate.getMonth() - 1, 1);
dispatch({ type: 'CHANGE_VIEWPORT', payload: payload });
}
function handleKeyDown(event) {
event.stopPropagation();
switch (event.key) {
case 'Enter':
if (open) {
dispatch({ type: 'SAVE' });
}
else {
dispatch({ type: 'OPEN' });
}
break;
case 'Escape':
if (open) {
dispatch({ type: 'CLOSE' });
}
break;
}
}
function handleClick(payload) {
dispatch({ type: 'SELECT_DATE', payload: payload });
}
function handleHover(payload) {
dispatch({ type: 'HOVER_DATE', payload: payload });
}
var handleStartChange = function (event) {
dispatch({
type: 'CHANGE_START',
payload: {
label: event.currentTarget.value,
minDate: minDateRange,
},
});
};
var handleEndChange = function (event) {
dispatch({
type: 'CHANGE_END',
payload: {
label: event.currentTarget.value,
maxDate: maxDateRange,
},
});
};
var handleSelectPreset = function (preset) {
var payload = [];
var _a = getDates(), today = _a.today, yesterday = _a.yesterday;
setPresetOption(preset);
dispatch({ type: 'CLEAR' });
switch (typeof preset) {
case 'string':
if (preset === 'today')
payload.push(today);
if (preset === 'yesterday')
payload.push(yesterday);
if (preset === 'current month') {
var firstDayOfMonth = new Date();
firstDayOfMonth.setDate(1);
payload.push(firstDayOfMonth);
payload.push(new Date());
}
if (preset === 'last month') {
var firstDayOfLastMonth = new Date();
firstDayOfLastMonth.setDate(1);
firstDayOfLastMonth.setMonth(firstDayOfLastMonth.getMonth() - 1);
var lastDateOfLastMonth = new Date();
lastDateOfLastMonth.setDate(0);
payload.push(firstDayOfLastMonth);
payload.push(lastDateOfLastMonth);
}
break;
case 'number':
var date = new Date(new Date().setDate(new Date().getDate() + preset));
if (preset > 0) {
payload.push(today);
payload.push(date);
}
else {
payload.push(date);
payload.push(today);
}
break;
}
if (payload.length) {
dispatch({ type: 'SET_DATE_FROM_PRESET', payload: payload });
}
};
var getPresetLabel = function (preset) {
if (typeof preset === 'number') {
return preset < 0
? translation.lastDays(Math.abs(preset))
: translation.nextDays(preset);
}
else if (preset === 'current month') {
return components_inputs_Dates_DateRange_DateFormat.getMonthFromDate(new Date(), translation);
}
else if (preset === 'last month') {
var dateOfLastMonth = new Date();
dateOfLastMonth.setDate(1);
dateOfLastMonth.setMonth(dateOfLastMonth.getMonth() - 1);
return components_inputs_Dates_DateRange_DateFormat.getMonthFromDate(dateOfLastMonth, translation);
}
else if (preset === 'today') {
return translation.today;
}
else if (preset === 'yesterday') {
return translation.yesterday;
}
else if (preset === 'custom') {
return translation.custom;
}
return preset;
};
// Generate the styles to pin the portal to the parent node.
return (React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.DateRangeContainer, { ref: forwardRef },
presets ? (React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.Menu, { format: "basic", style: { borderRight: "1px solid ".concat(color_colors.slate(100)) } },
React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.Menu.Section, { title: translation.presets }, presets.map(function (preset, key) {
var label = getPresetLabel(preset);
return (React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.Menu.Item, { active: presetOption === preset, key: key, onClick: function () {
handleSelectPreset(preset);
if (Boolean(onPresetClick)) {
onPresetClick(preset);
}
}, style: { textTransform: 'capitalize' } }, label));
})))) : null,
React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.CalendarsContainer
// hidden={!open}
, {
// hidden={!open}
className: className },
React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.CalendarHeader, null,
React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.DateField, null,
React__default["default"].createElement(components_inputs_Input_Input.Input, { id: "start\u2013date", label: startInputLabel || translation.startDate, value: startDateLabel, onChange: handleStartChange, onKeyDown: handleKeyDown, placeholder: dateFormat, status: startDateError ? 'negative' : 'neutral', messages: { error: startDateError } })),
React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.DateField, null,
React__default["default"].createElement(components_inputs_Input_Input.Input, { id: "end-date", label: endInputLabel || translation.endDate, value: endDateLabel, onChange: handleEndChange, onKeyDown: handleKeyDown, placeholder: dateFormat, disabled: draftStart ? false : true, status: endDateError ? 'negative' : 'neutral', messages: { error: endDateError } }))),
React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.CalendarsBody, null,
React__default["default"].createElement(components_inputs_Dates_Calendar_Calendar.Calendar, { isRange: true, backOnly: true, backOnClick: handleGoBackward, initialMonth: getDateForFirstCalendar, minDate: minDateRange, maxDate: maxDateRange, range: [draftStart, draftEnd], hoverRange: [hoverStart, hoverEnd], selectionStart: hoverStart ? hoverStart : draftStart, selectionEnd: hoverEnd ? hoverEnd : draftEnd, onClick: handleClick, onMouseEnter: handleHover, translation: translation }),
React__default["default"].createElement(components_inputs_Dates_Calendar_Calendar.Calendar, { isRange: true, forwardOnly: true, forwardOnClick: handleGoForward, initialMonth: viewportDate, minDate: minDateRange, maxDate: maxDateRange, range: [draftStart, draftEnd], hoverRange: [hoverStart, hoverEnd], selectionStart: hoverStart ? hoverStart : draftStart, selectionEnd: hoverEnd ? hoverEnd : draftEnd, onClick: handleClick, onMouseEnter: handleHover, translation: translation })),
React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.CalendarsFooter, null,
React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.ClearButton, { hidden: draftEnd === null, size: "sm", format: "primary", variant: "minimal", onClick: function () { return void dispatch({ type: 'CLEAR' }); } }, translation.clear),
React__default["default"].createElement(components_inputs_Dates_DateRange_DateRange_style.ApplyButton, { disabled: !draftStart ||
!draftEnd ||
startDateError !== null ||
endDateError !== null, size: "sm", format: "secondary", onClick: function () { return void dispatch({ type: 'SAVE' }); } }, translation.apply)))));
}
function getDates() {
var today = new Date();
var yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
return { today: today, yesterday: yesterday };
}
exports.DateRange = DateRange;