@procore/core-react
Version:
React library of Procore Design Guidelines
432 lines (423 loc) • 16.6 kB
JavaScript
var _excluded = ["dueDateTime", "displayDate", "disabledDate", "onSelect", "selectedEnd", "selectedStart"],
_excluded2 = ["disabled", "isCurrentMonth", "isRangeEnd", "isRangeStart", "isToday", "onClick", "selected"],
_excluded3 = ["children", "label", "onSelect", "options", "selected"],
_excluded4 = ["dueDateTime", "displayDate", "disabledDate", "monthRef", "onNavigate", "onSelect", "selectedEnd", "selectedStart", "yearRef"];
function _objectDestructuringEmpty(t) { if (null == t) throw new TypeError("Cannot destructure " + 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); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { ChevronLeft, ChevronRight } from '@procore/core-icons/dist';
import { getStartDayOfTheWeek } from '@procore/globalization-toolkit';
import { isAfter, startOfDay } from 'date-fns';
import { range } from 'ramda';
import React from 'react';
import { Select as SelectBase } from '../Select/Select';
import { useDateTime } from '../_hooks/DateTime';
import { useI18nContext } from '../_hooks/I18n';
import { addSubcomponents } from '../_utils/addSubcomponents';
import { addMonths, format, getDates, getDayOfWeekLabel, getMonth, getMonthLabel, getMonthOptions, getRows, getYear, getYearOptions, isSameDay, isSameMonth, isWithinRange, subMonths, updateMonth, updateYear } from '../_utils/CalendarHelpers';
import { getFormatterLocale } from '../_utils/i18n';
import { StyledContainer, StyledDayCell, StyledDayHeaderCell, StyledNavigation, StyledPaginator, StyledSelect, StyledWeekRow } from './Calendar.styles';
function noop() {}
function returnFalse() {
return false;
}
/**
* @parent Calendar
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
* please use the parent as a self closing tag.
*
* AFTER `<Calendar onSelect />`
*/
export function Body(_ref) {
var dueDateTime_ = _ref.dueDateTime,
displayDate_ = _ref.displayDate,
disabledDate = _ref.disabledDate,
_ref$onSelect = _ref.onSelect,
onSelect_ = _ref$onSelect === void 0 ? noop : _ref$onSelect,
selectedEnd_ = _ref.selectedEnd,
selectedStart_ = _ref.selectedStart,
props = _objectWithoutProperties(_ref, _excluded);
var dateTime = useDateTime();
var displayDate = dateTime.shiftUtcToZonedTime(displayDate_) || dateTime.newDate();
var _useI18nContext = useI18nContext(),
locale = _useI18nContext.locale;
var formatterLocale = getFormatterLocale(locale);
var dates = getDates(displayDate, formatterLocale);
var dueDateTime = dateTime.shiftUtcToZonedTime(dueDateTime_);
var selectedEnd = dateTime.shiftUtcToZonedTime(selectedEnd_);
var selectedStart = dateTime.shiftUtcToZonedTime(selectedStart_);
var onSelect = function onSelect(day) {
onSelect_(dateTime.shiftZonedTimeToUtc(day, 'Calendar Body onSelect'));
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Weekdays, null), getRows(dates).map(function (row) {
return /*#__PURE__*/React.createElement(Week, {
key: "week-".concat(format(row[0], 'yyyy-MMMM-dddd'))
}, row.map(function (day) {
return /*#__PURE__*/React.createElement(Day, _extends({
"aria-label": dateTime.format(day, 'weekday-date', {
timeZone: undefined
}),
disabled: disabledDate && disabledDate(day, startOfDay(dateTime.newDate())),
isCurrentMonth: isSameMonth(day, displayDate),
isRangeEnd: selectedEnd && isSameDay(day, selectedEnd),
isRangeStart: selectedStart && isSameDay(day, selectedStart),
isToday: isSameDay(day, startOfDay(dateTime.newDate())),
key: "day-".concat(format(day, 'yyyy-MMMM-dddd')),
onClick: function onClick() {
return onSelect(day);
},
selected: isWithinRange(day, selectedStart, selectedEnd)
}, props), format(day, 'd'), dueDateTime && isSameDay(day, startOfDay(dueDateTime)) && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("em", {
style: isAfter(dateTime.newDate(), dueDateTime) ? {
color: 'red'
} : undefined
}, dateTime.format(dueDateTime_, 'time'))));
}));
}));
}
/**
* @parent Calendar
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
* please use the parent as a self closing tag.
*
* AFTER `<Calendar onSelect />`
*/
export var Container = /*#__PURE__*/React.forwardRef(function Container(props, ref) {
return /*#__PURE__*/React.createElement(StyledContainer, _extends({
ref: ref
}, props));
});
/**
* @parent Calendar
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
* please use the parent as a self closing tag.
*
* AFTER `<Calendar onSelect />`
*/
export var Day = /*#__PURE__*/React.forwardRef(function Day(_ref2, ref) {
var _ref2$disabled = _ref2.disabled,
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
_ref2$isCurrentMonth = _ref2.isCurrentMonth,
isCurrentMonth = _ref2$isCurrentMonth === void 0 ? false : _ref2$isCurrentMonth,
_ref2$isRangeEnd = _ref2.isRangeEnd,
isRangeEnd = _ref2$isRangeEnd === void 0 ? false : _ref2$isRangeEnd,
_ref2$isRangeStart = _ref2.isRangeStart,
isRangeStart = _ref2$isRangeStart === void 0 ? false : _ref2$isRangeStart,
_ref2$isToday = _ref2.isToday,
isToday = _ref2$isToday === void 0 ? false : _ref2$isToday,
onClick = _ref2.onClick,
_ref2$selected = _ref2.selected,
selected = _ref2$selected === void 0 ? false : _ref2$selected,
props = _objectWithoutProperties(_ref2, _excluded2);
return /*#__PURE__*/React.createElement(StyledDayCell, _extends({
"aria-current": isToday ? 'date' : undefined,
"aria-disabled": disabled || undefined,
"aria-selected": selected || undefined
}, props, {
onClick: disabled ? undefined : onClick,
ref: ref,
$disabled: disabled,
$selected: selected,
$isCurrentMonth: isCurrentMonth,
$isRangeStart: isRangeStart,
$isRangeEnd: isRangeEnd,
$isToday: isToday
}));
});
/**
* @parent Calendar
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
* please use the parent as a self closing tag.
*
* AFTER `<Calendar onSelect />`
*/
export var Navigation = /*#__PURE__*/React.forwardRef(function Navigation(props, ref) {
return /*#__PURE__*/React.createElement(StyledNavigation, _extends({}, props, {
ref: ref
}));
});
/**
* @parent Calendar
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
* please use the parent as a self closing tag.
*
* AFTER `<Calendar onSelect />`
*/
export var Next = /*#__PURE__*/React.forwardRef(function Next(_ref3, ref) {
var props = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
return /*#__PURE__*/React.createElement(StyledPaginator, _extends({}, props, {
ref: ref,
icon: /*#__PURE__*/React.createElement(ChevronRight, null),
variant: "tertiary"
}));
});
/**
* @parent Calendar
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
* please use the parent as a self closing tag.
*
* AFTER `<Calendar onSelect />`
*/
export var Prev = /*#__PURE__*/React.forwardRef(function Prev(props, ref) {
return /*#__PURE__*/React.createElement(StyledPaginator, _extends({}, props, {
ref: ref,
icon: /*#__PURE__*/React.createElement(ChevronLeft, null),
variant: "tertiary"
}));
});
/**
* @parent Calendar
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
* please use the parent as a self closing tag.
*
* AFTER `<Calendar onSelect />`
*/
export var Week = /*#__PURE__*/React.forwardRef(function Week(props, ref) {
return /*#__PURE__*/React.createElement(StyledWeekRow, _extends({
ref: ref
}, props));
});
/**
* @parent Calendar
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
* please use the parent as a self closing tag.
*
* AFTER `<Calendar onSelect />`
*/
export var Weekdays = /*#__PURE__*/React.forwardRef(function Weekdays(props, ref) {
var _useI18nContext2 = useI18nContext(),
locale = _useI18nContext2.locale;
var formatterLocale = getFormatterLocale(locale);
var startDayOfWeek = getStartDayOfTheWeek(formatterLocale);
return /*#__PURE__*/React.createElement(StyledWeekRow, _extends({
ref: ref,
"aria-hidden": "true"
}, props), range(startDayOfWeek, startDayOfWeek + 7).map(function (day) {
return /*#__PURE__*/React.createElement(StyledDayHeaderCell, {
key: "day-".concat(day)
}, getDayOfWeekLabel(day, formatterLocale));
}));
});
/**
* @parent Calendar
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release,
* please use the parent as a self closing tag.
*
* AFTER `<Calendar onSelect />`
*/
export var Select = /*#__PURE__*/React.forwardRef(function Select(_ref4, ref) {
var children = _ref4.children,
label = _ref4.label,
_onSelect = _ref4.onSelect,
_ref4$options = _ref4.options,
options = _ref4$options === void 0 ? [] : _ref4$options,
_ref4$selected = _ref4.selected,
selected = _ref4$selected === void 0 ? '' : _ref4$selected,
props = _objectWithoutProperties(_ref4, _excluded3);
return /*#__PURE__*/React.createElement(StyledSelect, null, /*#__PURE__*/React.createElement(SelectBase, _extends({}, props, {
block: true,
label: label,
onSelect: function onSelect(selection) {
_onSelect(selection.item);
},
optionsRef: ref,
tabIndex: 0
}), options.map(function (_ref5) {
var value = _ref5.value,
label = _ref5.label;
return /*#__PURE__*/React.createElement(SelectBase.Option, {
value: value,
selected: value === selected,
key: value
}, label);
})));
});
export var Calendar_ = /*#__PURE__*/React.forwardRef(function Calendar(_ref6, ref) {
var dueDateTime = _ref6.dueDateTime,
displayDate_ = _ref6.displayDate,
_ref6$disabledDate = _ref6.disabledDate,
disabledDate = _ref6$disabledDate === void 0 ? returnFalse : _ref6$disabledDate,
monthRef = _ref6.monthRef,
_ref6$onNavigate = _ref6.onNavigate,
onNavigate = _ref6$onNavigate === void 0 ? noop : _ref6$onNavigate,
_ref6$onSelect = _ref6.onSelect,
onSelect = _ref6$onSelect === void 0 ? noop : _ref6$onSelect,
selectedEnd = _ref6.selectedEnd,
selectedStart = _ref6.selectedStart,
yearRef = _ref6.yearRef,
props = _objectWithoutProperties(_ref6, _excluded4);
var i18n = useI18nContext();
var dateTime = useDateTime();
var formatterLocale = getFormatterLocale(i18n.locale);
var _useDateTime = useDateTime(),
newDate = _useDateTime.newDate,
shiftUtcToZonedTime = _useDateTime.shiftUtcToZonedTime;
var monthSelectRef = monthRef || /*#__PURE__*/React.createRef();
var yearSelectRef = yearRef || /*#__PURE__*/React.createRef();
var displayDate = shiftUtcToZonedTime(displayDate_) || newDate();
var nextNavigationDateLabel = i18n.t('core.calendar.navigationLabel', {
monthYear: dateTime.format(addMonths(displayDate, 1), 'date', {
month: 'long',
year: 'numeric',
day: undefined
})
});
var prevNavigationDateLabel = i18n.t('core.calendar.navigationLabel', {
monthYear: dateTime.format(subMonths(displayDate, 1), 'date', {
month: 'long',
year: 'numeric',
day: undefined
})
});
return /*#__PURE__*/React.createElement(Container, _extends({}, props, {
ref: ref
}), /*#__PURE__*/React.createElement(Navigation, null, /*#__PURE__*/React.createElement(Prev, {
"aria-label": prevNavigationDateLabel,
onClick: function onClick() {
return onNavigate(subMonths(displayDate, 1));
}
}), /*#__PURE__*/React.createElement(Select, {
options: getMonthOptions(formatterLocale),
label: getMonthLabel(getMonth(displayDate), formatterLocale),
onSelect: function onSelect(value) {
onNavigate(updateMonth(displayDate, value));
},
selected: getMonth(displayDate),
ref: monthSelectRef
}), /*#__PURE__*/React.createElement(Select, {
options: getYearOptions(displayDate),
label: String(getYear(displayDate)).padStart(4, '0'),
onSelect: function onSelect(value) {
onNavigate(updateYear(displayDate, value));
},
selected: getYear(displayDate),
ref: yearSelectRef
}), /*#__PURE__*/React.createElement(Next, {
"aria-label": nextNavigationDateLabel,
onClick: function onClick() {
return onNavigate(addMonths(displayDate, 1));
}
})), /*#__PURE__*/React.createElement(Body, {
dueDateTime: dueDateTime
// intentionally pass unshifted value. next component's responsibility to manage
,
displayDate: displayDate_,
disabledDate: disabledDate,
onSelect: onSelect,
selectedEnd: selectedEnd,
selectedStart: selectedStart
}));
});
Calendar_.displayName = 'Calendar';
Body.displayName = 'Calendar.Body';
Container.displayName = 'Calendar.Container';
Day.displayName = 'Calendar.Day';
Navigation.displayName = 'Calendar.Navigation';
Next.displayName = 'Calendar.Next';
Prev.displayName = 'Calendar.Prev';
Select.displayName = 'Calendar.Select';
Week.displayName = 'Calendar.Week';
Weekdays.displayName = 'Calendar.Weekdays';
export var Calendar = addSubcomponents({
/**
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
*
AFTER
```
<Calendar onSelect />
```
*/
Body: Body,
/**
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
*
AFTER
```
<Calendar onSelect />
```
*/
Container: Container,
/**
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
*
AFTER
```
<Calendar onSelect />
```
*/
Day: Day,
/**
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
*
AFTER
```
<Calendar onSelect />
```
*/
Navigation: Navigation,
/**
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
*
AFTER
```
<Calendar onSelect />
```
*/
Next: Next,
/**
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
*
AFTER
```
<Calendar onSelect />
```
*/
Prev: Prev,
/**
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
*
AFTER
```
<Calendar onSelect />
```
*/
Select: Select,
/**
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
*
AFTER
```
<Calendar onSelect />
```
*/
Week: Week,
/**
* @deprecatedSince 11.6.0
* @deprecated Subcomponents intended for internal library development. Export will be removed in a future release.
*
AFTER
```
<Calendar onSelect />
```
*/
Weekdays: Weekdays
}, Calendar_);
//# sourceMappingURL=Calendar.js.map