@spaced-out/ui-design-system
Version:
Sense UI components library
243 lines (242 loc) • 10.3 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.DateRangeWrapper = void 0;
var React = _interopRequireWildcard(require("react"));
var _moment = _interopRequireDefault(require("moment"));
var _utils = require("../../utils");
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _dateRangePicker = require("../../utils/date-range-picker");
var _Button = require("../Button");
var _Card = require("../Card");
var _Dropdown = require("../Dropdown");
var _FocusManager = require("../FocusManager");
var _Icon = require("../Icon");
var _Text = require("../Text");
var _Calendar = require("./Calendar.js");
var _DateRangeWrapperModule = _interopRequireDefault(require("./DateRangeWrapper.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } // $FlowFixMe[untyped-import]
const CalendarHeader = _ref => {
let {
t,
date,
marker,
minDate,
maxDate,
setMonth,
rangeStartMonth,
rangeEndMonth,
onClickNext,
nextDisabled,
prevDisabled,
onClickPrevious
} = _ref;
const availableYears = (0, _utils.generateAvailableYears)({
marker,
minDate,
maxDate,
rangeStartMonth,
rangeEndMonth
});
const availableMonths = (0, _utils.getAvailableMonths)({
marker,
minDate,
maxDate,
rangeStartMonth,
rangeEndMonth,
t
});
const MONTHS = (0, _utils.getMonths)(t);
return /*#__PURE__*/React.createElement("div", {
className: _DateRangeWrapperModule.default.calendarHeader
}, /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Previous Month'),
size: "small",
name: "chevron-left",
className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
[_DateRangeWrapperModule.default.disabledIcon]: prevDisabled
}),
onClick: () => !prevDisabled && onClickPrevious(),
color: prevDisabled ? 'disabled' : 'secondary'
}), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
size: "small",
disabled: !availableMonths.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
menu: {
selectedKeys: [_moment.default.utc(date).month().toString()],
options: availableMonths
},
onChange: event => {
setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('M', event.key)));
},
dropdownInputText: MONTHS[_moment.default.utc(date).month()].label,
scrollMenuToBottom: true
}), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
disabled: !availableYears.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
menu: {
selectedKeys: [_moment.default.utc(date).year().toString()],
options: availableYears
},
size: "small",
onChange: event => {
setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('y', event.key)));
},
dropdownInputText: _moment.default.utc(date).year(),
scrollMenuToBottom: true
}), /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
size: "small",
ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Next Month'),
name: "chevron-right",
className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
[_DateRangeWrapperModule.default.disabledIcon]: nextDisabled
}),
onClick: () => !nextDisabled && onClickNext(),
color: nextDisabled ? 'disabled' : 'secondary'
}));
};
const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
let {
onApply,
onCancel,
handlers,
hoverDay,
minDate,
maxDate,
timezone,
dateRange,
rangeStartMonth,
setTimezone,
rangeEndMonth,
inHoverRange,
setRangeStartMonth,
setRangeEndMonth,
cardWrapperClass,
hideTimezone,
today,
startDateLabel,
endDateLabel,
t,
locale
} = _ref2;
const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
const handleApplyClick = () => {
const {
startDate,
endDate
} = dateRange;
const startDateUTC = startDate && (0, _dateRangePicker.addTimezoneStartOfDay)(startDate, timezone);
const endDateUTC = endDate && (0, _dateRangePicker.addTimezoneEndOfDay)(endDate, timezone);
onApply({
startDate,
endDate,
startDateUTC,
endDateUTC,
timezone
});
};
const {
onMonthNavigate
} = handlers;
const commonProps = {
inHoverRange,
handlers,
hoverDay,
dateRange,
minDate,
maxDate,
today,
t
};
return /*#__PURE__*/React.createElement(_FocusManager.FocusManager, null, /*#__PURE__*/React.createElement(_Card.Card, {
classNames: {
wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapper, cardWrapperClass)
},
ref: ref
}, /*#__PURE__*/React.createElement(_Card.CardHeader, {
className: _DateRangeWrapperModule.default.cardHeader
}, /*#__PURE__*/React.createElement(_Text.BodySmall, {
className: _DateRangeWrapperModule.default.selectedDate,
color: _Text.TEXT_COLORS.secondary
}, `${startDateLabel || (0, _dateRangePicker.getTranslation)(t, 'Start Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`), /*#__PURE__*/React.createElement(_Icon.Icon, {
name: "minus",
size: _Icon.ICON_SIZE.small,
type: _Icon.ICON_TYPE.regular,
color: _Text.TEXT_COLORS.secondary
}), /*#__PURE__*/React.createElement(_Text.BodySmall, {
className: _DateRangeWrapperModule.default.selectedDate,
color: _Text.TEXT_COLORS.secondary
}, `${endDateLabel || (0, _dateRangePicker.getTranslation)(t, 'End Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`)), /*#__PURE__*/React.createElement("div", {
className: _DateRangeWrapperModule.default.calendarMenuContainer
}, /*#__PURE__*/React.createElement(CalendarHeader, {
t: t,
marker: _utils.MARKERS.DATE_RANGE_START,
rangeStartMonth: rangeStartMonth,
rangeEndMonth: rangeEndMonth,
date: rangeStartMonth,
setMonth: setRangeStartMonth,
nextDisabled: !canNavigateCloser,
prevDisabled: (0, _dateRangePicker.isSameOrBefore)(rangeStartMonth, minDate, 'month'),
minDate: minDate,
maxDate: maxDate,
onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV)
}), /*#__PURE__*/React.createElement(CalendarHeader, {
t: t,
marker: _utils.MARKERS.DATE_RANGE_END,
rangeStartMonth: rangeStartMonth,
rangeEndMonth: rangeEndMonth,
date: rangeEndMonth,
setMonth: setRangeEndMonth,
nextDisabled: (0, _dateRangePicker.isSameOrAfter)(rangeEndMonth, maxDate, 'month'),
prevDisabled: !canNavigateCloser,
minDate: minDate,
maxDate: maxDate,
onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.NEXT),
onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV)
})), /*#__PURE__*/React.createElement(_Card.CardContent, {
className: _DateRangeWrapperModule.default.dateRangeCalendars
}, /*#__PURE__*/React.createElement(_Calendar.Calendar, _extends({
marker: _utils.MARKERS.DATE_RANGE_START,
value: rangeStartMonth
}, commonProps)), /*#__PURE__*/React.createElement("div", {
className: _DateRangeWrapperModule.default.divider
}), /*#__PURE__*/React.createElement(_Calendar.Calendar, _extends({
marker: _utils.MARKERS.DATE_RANGE_END,
value: rangeEndMonth
}, commonProps))), /*#__PURE__*/React.createElement(_Card.CardFooter, {
className: _DateRangeWrapperModule.default.cardFooter
}, /*#__PURE__*/React.createElement(_Card.CardTitle, {
className: _DateRangeWrapperModule.default.timezoneDropdownContainer
}, !hideTimezone && /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
menu: {
selectedKeys: [timezone],
options: (0, _utils.getTimezones)(t),
allowSearch: true,
virtualization: {
enable: true
},
staticLabels: {
SEARCH_PLACEHOLDER: `${(0, _dateRangePicker.getTranslation)(t, 'Search')}...`,
RESULT: (0, _dateRangePicker.getTranslation)(t, 'result'),
RESULTS: (0, _dateRangePicker.getTranslation)(t, 'results')
}
},
dropdownInputText: (0, _dateRangePicker.getTranslation)(t, _dateRangePicker.TIMEZONES[timezone]),
disabled: (0, _dateRangePicker.isAfter)(minDate, maxDate),
classNames: {
box: _DateRangeWrapperModule.default.timezoneDropdown
},
onChange: event => setTimezone(event.key),
size: "small"
})), /*#__PURE__*/React.createElement(_Card.CardActions, null, /*#__PURE__*/React.createElement(_Button.Button, {
type: "ghost",
onClick: onCancel,
size: "small"
}, (0, _dateRangePicker.getTranslation)(t, 'Cancel')), /*#__PURE__*/React.createElement(_Button.Button, {
onClick: handleApplyClick,
size: "small",
disabled: !(dateRange.startDate && dateRange.endDate)
}, (0, _dateRangePicker.getTranslation)(t, 'Apply'))))));
});