@fluentui/react-northstar
Version:
A themable React component library.
409 lines (406 loc) • 20 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.datepickerCalendarClassName = exports.DatepickerCalendar = void 0;
var _times2 = _interopRequireDefault(require("lodash/times"));
var _map2 = _interopRequireDefault(require("lodash/map"));
var _invoke2 = _interopRequireDefault(require("lodash/invoke"));
var _find4 = _interopRequireDefault(require("lodash/find"));
var _accessibility = require("@fluentui/accessibility");
var _dateTimeUtilities = require("../../utils/date-time-utilities");
var _reactBindings = require("@fluentui/react-bindings");
var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes"));
var PropTypes = _interopRequireWildcard(require("prop-types"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("../../utils");
var _DatepickerCalendarGrid = require("./DatepickerCalendarGrid");
var _DatepickerCalendarGridRow = require("./DatepickerCalendarGridRow");
var _DatepickerCalendarHeader = require("./DatepickerCalendarHeader");
var _DatepickerCalendarCell = require("./DatepickerCalendarCell");
var _DatepickerCalendarCellButton = require("./DatepickerCalendarCellButton");
var _DatepickerCalendarHeaderCell = require("./DatepickerCalendarHeaderCell");
var _navigateToNewDate = require("./navigateToNewDate");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var datepickerCalendarClassName = 'ui-datepicker__calendar';
exports.datepickerCalendarClassName = datepickerCalendarClassName;
var normalizeDateInGrid = function normalizeDateInGrid(date) {
var result = new Date(date.getTime());
result.setDate(1);
return result;
};
/**
* A DatepickerCalendar is used to display dates in sematically grouped way.
*/
var DatepickerCalendar = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = (0, _reactBindings.useFluentContext)();
var _useTelemetry = (0, _reactBindings.useTelemetry)(DatepickerCalendar.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var className = props.className,
design = props.design,
styles = props.styles,
variables = props.variables,
calendarHeaderCell = props.calendarHeaderCell,
calendarCell = props.calendarCell,
calendarCellButton = props.calendarCellButton,
calendarGrid = props.calendarGrid,
calendarGridRow = props.calendarGridRow,
dateRangeType = props.dateRangeType,
header = props.header,
selectedDate = props.selectedDate,
navigatedDate = props.navigatedDate,
firstDayOfWeek = props.firstDayOfWeek,
today = props.today,
formatMonthDayYear = props.formatMonthDayYear,
formatMonthYear = props.formatMonthYear,
shortDays = props.shortDays,
days = props.days,
minDate = props.minDate,
maxDate = props.maxDate,
restrictedDates = props.restrictedDates;
var restrictedDatesOptions = {
minDate: minDate,
maxDate: maxDate,
restrictedDates: restrictedDates
};
var ElementType = (0, _reactBindings.getElementType)(props);
var unhandledProps = (0, _reactBindings.useUnhandledProps)(DatepickerCalendar.handledProps, props);
var updateNavigatedDate = function updateNavigatedDate(date) {
if (!!date) {
if (!shouldFocusInDayGrid) {
setShouldFocusInDayGrid(true);
}
setGridNavigatedDate(date);
}
};
var getA11yProps = (0, _reactBindings.useAccessibility)(props.accessibility, {
debugName: DatepickerCalendar.displayName,
actionHandlers: {
addWeek: function addWeek(e) {
e.preventDefault();
var newNavigatedDate = (0, _navigateToNewDate.navigateToNewDate)(gridNavigatedDate, 'Week', 1, restrictedDatesOptions, true);
updateNavigatedDate(newNavigatedDate);
},
subtractWeek: function subtractWeek(e) {
e.preventDefault();
var newNavigatedDate = (0, _navigateToNewDate.navigateToNewDate)(gridNavigatedDate, 'Week', -1, restrictedDatesOptions, true);
updateNavigatedDate(newNavigatedDate);
},
addDay: function addDay(e) {
e.preventDefault();
var newNavigatedDate = (0, _navigateToNewDate.navigateToNewDate)(gridNavigatedDate, 'Day', 1, restrictedDatesOptions, true);
updateNavigatedDate(newNavigatedDate);
},
subtractDay: function subtractDay(e) {
e.preventDefault();
var newNavigatedDate = (0, _navigateToNewDate.navigateToNewDate)(gridNavigatedDate, 'Day', -1, restrictedDatesOptions, true);
updateNavigatedDate(newNavigatedDate);
},
moveToStartOfWeek: function moveToStartOfWeek(e) {
e.preventDefault();
var targetDate = (0, _dateTimeUtilities.getStartDateOfWeek)(gridNavigatedDate, firstDayOfWeek);
var newNavigatedDate = (0, _navigateToNewDate.contstraintNavigatedDate)(gridNavigatedDate, targetDate, -1, restrictedDatesOptions, true);
updateNavigatedDate(newNavigatedDate);
},
moveToEndOfWeek: function moveToEndOfWeek(e) {
e.preventDefault();
var targetDate = (0, _dateTimeUtilities.getEndDateOfWeek)(gridNavigatedDate, firstDayOfWeek);
var newNavigatedDate = (0, _navigateToNewDate.contstraintNavigatedDate)(gridNavigatedDate, targetDate, -1, restrictedDatesOptions, true);
updateNavigatedDate(newNavigatedDate);
},
moveToStartOfColumn: function moveToStartOfColumn(e) {
var _find2;
e.preventDefault();
var targetDayOfWeek = gridNavigatedDate.getDay();
var targetDate = (_find2 = (0, _find4.default)(visibleGrid[0], function (day) {
return day.originalDate.getDay() === targetDayOfWeek;
})) == null ? void 0 : _find2.originalDate;
var newNavigatedDate = (0, _navigateToNewDate.contstraintNavigatedDate)(gridNavigatedDate, targetDate, -1, restrictedDatesOptions, true);
updateNavigatedDate(newNavigatedDate);
},
moveToEndOfColumn: function moveToEndOfColumn(e) {
var _find3;
e.preventDefault();
var targetDayOfWeek = gridNavigatedDate.getDay();
var targetDate = (_find3 = (0, _find4.default)(visibleGrid[visibleGrid.length - 1], function (day) {
return day.originalDate.getDay() === targetDayOfWeek;
})) == null ? void 0 : _find3.originalDate;
var newNavigatedDate = (0, _navigateToNewDate.contstraintNavigatedDate)(gridNavigatedDate, targetDate, -1, restrictedDatesOptions, true);
updateNavigatedDate(newNavigatedDate);
}
},
rtl: context.rtl
});
var _React$useState = React.useState(function () {
return new Date((navigatedDate || today || new Date()).getTime());
}),
gridNavigatedDate = _React$useState[0],
setGridNavigatedDate = _React$useState[1];
var _React$useState2 = React.useState(function () {
return normalizeDateInGrid(gridNavigatedDate);
}),
normalizedGridDate = _React$useState2[0],
setNormalizedGridDate = _React$useState2[1];
var _React$useState3 = React.useState(true),
shouldFocusInDayGrid = _React$useState3[0],
setShouldFocusInDayGrid = _React$useState3[1];
var _useStyles = (0, _reactBindings.useStyles)(DatepickerCalendar.displayName, {
className: datepickerCalendarClassName,
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
},
rtl: context.rtl
}),
classes = _useStyles.classes;
var visibleGrid = React.useMemo(function () {
var dayGridOptions = {
selectedDate: selectedDate,
navigatedDate: normalizedGridDate,
weeksToShow: props.weeksToShow,
firstDayOfWeek: props.firstDayOfWeek,
firstWeekOfYear: props.firstWeekOfYear,
dateRangeType: props.dateRangeType,
daysToSelectInDayView: props.daysToSelectInDayView,
today: props.today,
showWeekNumbers: props.showWeekNumbers,
workWeekDays: props.workWeekDays,
minDate: props.minDate,
maxDate: props.maxDate,
restrictedDates: props.restrictedDates
};
var grid = (0, _dateTimeUtilities.getDayGrid)(dayGridOptions);
return grid.slice(1, grid.length - 1); // slicing off first and last weeks, cause we don't use them for transitions
}, [selectedDate, normalizedGridDate, props]);
React.useEffect(function () {
var newNormalizedDate = normalizeDateInGrid(gridNavigatedDate);
if ((0, _dateTimeUtilities.compareDatePart)(newNormalizedDate, normalizedGridDate)) {
// Do not change the grid immediately the month changes but only once the date stops being visible.
var gridContainsNavigatedDate = visibleGrid.find(function (week) {
return week.find(function (day) {
return (0, _dateTimeUtilities.compareDatePart)(day.originalDate, gridNavigatedDate) === 0;
});
});
if (!gridContainsNavigatedDate) {
setNormalizedGridDate(newNormalizedDate);
}
}
}, [gridNavigatedDate, visibleGrid, normalizedGridDate]);
var dateFormatting = {
months: props.months,
shortMonths: props.shortMonths,
days: props.days,
shortDays: props.shortDays
};
var focusDateRef = React.useRef(null);
var changeMonth = function changeMonth(nextMonth) {
var newNavigatedDate = (0, _navigateToNewDate.navigateToNewDate)(normalizedGridDate, 'Month', nextMonth ? 1 : -1, restrictedDatesOptions, true);
if (!!newNavigatedDate) {
setGridNavigatedDate(newNavigatedDate);
setShouldFocusInDayGrid(false);
setNormalizedGridDate(normalizeDateInGrid(newNavigatedDate));
}
};
var prevMonthOutOfBounds = minDate ? (0, _dateTimeUtilities.compareDatePart)(minDate, (0, _dateTimeUtilities.getMonthStart)(normalizedGridDate)) >= 0 : false;
var nextMonthOutOfBounds = maxDate ? (0, _dateTimeUtilities.compareDatePart)((0, _dateTimeUtilities.getMonthEnd)(normalizedGridDate), maxDate) >= 0 : false;
React.useEffect(function () {
if (shouldFocusInDayGrid) {
var _focusDateRef$current;
(_focusDateRef$current = focusDateRef.current) == null ? void 0 : _focusDateRef$current.focus();
}
}, [gridNavigatedDate, normalizedGridDate, shouldFocusInDayGrid]);
var renderCell = function renderCell(day, content) {
return (0, _utils.createShorthand)(_DatepickerCalendarCell.DatepickerCalendarCell, calendarCell, {
defaultProps: function defaultProps() {
var _props$today;
return getA11yProps('calendarCell', {
content: content,
key: day.key,
selected: day.isSelected,
disabled: !day.isInBounds,
quiet: !day.isInMonth,
today: (0, _dateTimeUtilities.compareDates)(day.originalDate, (_props$today = props.today) != null ? _props$today : new Date())
});
}
});
};
var renderCellButton = function renderCellButton(day, dateRange) {
return (0, _utils.createShorthand)(_DatepickerCalendarCellButton.DatepickerCalendarCellButton, calendarCellButton, {
defaultProps: function defaultProps() {
var _props$today2;
return getA11yProps('calendarCell', {
content: day.date,
'aria-label': formatMonthDayYear(day.originalDate, dateFormatting),
selected: day.isSelected,
disabled: !day.isInBounds,
quiet: !day.isInMonth,
today: (0, _dateTimeUtilities.compareDates)(day.originalDate, (_props$today2 = props.today) != null ? _props$today2 : new Date())
});
},
overrideProps: function overrideProps(predefinedProps) {
return {
onFocus: function onFocus(e) {
setGridNavigatedDate(day.originalDate);
(0, _invoke2.default)(predefinedProps, 'onFocus', e, predefinedProps);
},
onClick: function onClick(e) {
(0, _invoke2.default)(props, 'onDateChange', e, Object.assign({}, props, {
value: day,
selectedDateRange: dateRangeType !== _dateTimeUtilities.DateRangeType.Day ? dateRange : [day]
}));
(0, _invoke2.default)(predefinedProps, 'onClick', e, predefinedProps);
},
ref: (0, _dateTimeUtilities.compareDates)(gridNavigatedDate, day.originalDate) ? focusDateRef : null
};
}
});
};
var renderWeekRow = function renderWeekRow(week) {
return (0, _map2.default)(week, function (day) {
return renderCell(day, renderCellButton(day, week));
});
};
var element = /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
className: classes.root,
ref: ref
}, unhandledProps)), (0, _utils.createShorthand)(_DatepickerCalendarHeader.DatepickerCalendarHeader, header, {
defaultProps: function defaultProps() {
return {
label: formatMonthYear(normalizedGridDate, dateFormatting),
'aria-label': formatMonthYear(normalizedGridDate, dateFormatting),
disabledNextButton: nextMonthOutOfBounds,
disabledPreviousButton: prevMonthOutOfBounds,
prevMonthAriaLabel: props.prevMonthAriaLabel,
nextMonthAriaLabel: props.nextMonthAriaLabel
};
},
overrideProps: function overrideProps(predefinedProps) {
return {
onPreviousClick: function onPreviousClick(e, data) {
changeMonth(false);
(0, _invoke2.default)(predefinedProps, 'onPreviousClick', e, data);
},
onNextClick: function onNextClick(e, data) {
changeMonth(true);
(0, _invoke2.default)(predefinedProps, 'onNextClick', e, data);
}
};
}
}), (0, _utils.createShorthand)(_DatepickerCalendarGrid.DatepickerCalendarGrid, calendarGrid, {
defaultProps: function defaultProps() {
return getA11yProps('calendarGrid', {
content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("thead", null, (0, _utils.createShorthand)(_DatepickerCalendarGridRow.DatepickerCalendarGridRow, calendarGridRow, {
defaultProps: function defaultProps() {
return getA11yProps('calendarGridRow', {
children: (0, _times2.default)(_dateTimeUtilities.DAYS_IN_WEEK, function (dayNumber) {
return (0, _utils.createShorthand)(_DatepickerCalendarHeaderCell.DatepickerCalendarHeaderCell, calendarHeaderCell, {
defaultProps: function defaultProps() {
return getA11yProps('calendarHeaderCell', {
'aria-label': days[(dayNumber + firstDayOfWeek) % _dateTimeUtilities.DAYS_IN_WEEK],
content: shortDays[(dayNumber + firstDayOfWeek) % _dateTimeUtilities.DAYS_IN_WEEK],
key: dayNumber
});
}
});
})
});
}
})), /*#__PURE__*/React.createElement("tbody", null, (0, _map2.default)(visibleGrid, function (week) {
return (0, _utils.createShorthand)(_DatepickerCalendarGridRow.DatepickerCalendarGridRow, calendarGridRow, {
defaultProps: function defaultProps() {
return getA11yProps('calendarGridRow', {
children: renderWeekRow(week),
isRowSelectionActive: dateRangeType === _dateTimeUtilities.DateRangeType.Week,
key: week[0].key
});
}
});
})))
});
}
}));
setEnd();
return element;
});
exports.DatepickerCalendar = DatepickerCalendar;
DatepickerCalendar.displayName = 'DatepickerCalendar';
DatepickerCalendar.propTypes = Object.assign({}, _utils.commonPropTypes.createCommon(), {
calendarCell: customPropTypes.itemShorthand,
calendarCellButton: customPropTypes.itemShorthand,
calendarHeaderCell: customPropTypes.itemShorthand,
header: customPropTypes.itemShorthand,
calendarGrid: customPropTypes.itemShorthand,
calendarGridRow: customPropTypes.itemShorthand,
onDateChange: PropTypes.func,
selectedDate: PropTypes.instanceOf(Date),
navigatedDate: PropTypes.instanceOf(Date),
minDate: PropTypes.instanceOf(Date),
maxDate: PropTypes.instanceOf(Date),
restrictedDates: PropTypes.arrayOf(PropTypes.instanceOf(Date)),
firstDayOfWeek: PropTypes.oneOf(Object.keys(_dateTimeUtilities.DayOfWeek).map(function (name) {
return _dateTimeUtilities.DayOfWeek[name];
})),
firstWeekOfYear: PropTypes.oneOf(Object.keys(_dateTimeUtilities.FirstWeekOfYear).map(function (name) {
return _dateTimeUtilities.FirstWeekOfYear[name];
})),
dateRangeType: PropTypes.oneOf(Object.keys(_dateTimeUtilities.DateRangeType).map(function (name) {
return _dateTimeUtilities.DateRangeType[name];
})),
daysToSelectInDayView: PropTypes.number,
today: PropTypes.instanceOf(Date),
showWeekNumbers: PropTypes.bool,
workWeekDays: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(_dateTimeUtilities.DayOfWeek).map(function (name) {
return _dateTimeUtilities.DayOfWeek[name];
}))),
weeksToShow: PropTypes.number,
formatDay: PropTypes.func,
formatYear: PropTypes.func,
formatMonthDayYear: PropTypes.func,
formatMonthYear: PropTypes.func,
parseDate: PropTypes.func,
months: PropTypes.arrayOf(PropTypes.string),
shortMonths: PropTypes.arrayOf(PropTypes.string),
days: PropTypes.arrayOf(PropTypes.string),
shortDays: PropTypes.arrayOf(PropTypes.string),
isRequiredErrorMessage: PropTypes.string,
invalidInputErrorMessage: PropTypes.string,
isOutOfBoundsErrorMessage: PropTypes.string,
openCalendarTitle: PropTypes.string,
inputPlaceholder: PropTypes.string,
prevMonthAriaLabel: PropTypes.string,
nextMonthAriaLabel: PropTypes.string,
prevYearAriaLabel: PropTypes.string,
nextYearAriaLabel: PropTypes.string,
prevYearRangeAriaLabel: PropTypes.string,
nextYearRangeAriaLabel: PropTypes.string,
monthPickerHeaderAriaLabel: PropTypes.string,
yearPickerHeaderAriaLabel: PropTypes.string,
closeButtonAriaLabel: PropTypes.string,
weekNumberFormatString: PropTypes.string,
selectedDateFormatString: PropTypes.string,
todayDateFormatString: PropTypes.string,
inputAriaLabel: PropTypes.string,
inputBoundedFormatString: PropTypes.string,
inputMinBoundedFormatString: PropTypes.string,
inputMaxBoundedFormatString: PropTypes.string
});
DatepickerCalendar.defaultProps = Object.assign({
accessibility: _accessibility.datepickerCalendarBehavior,
firstDayOfWeek: _dateTimeUtilities.DayOfWeek.Monday,
firstWeekOfYear: _dateTimeUtilities.FirstWeekOfYear.FirstDay,
dateRangeType: _dateTimeUtilities.DateRangeType.Day,
header: {},
calendarCell: {},
calendarCellButton: {},
calendarHeaderCell: {},
calendarGrid: {},
calendarGridRow: {}
}, _dateTimeUtilities.DEFAULT_CALENDAR_STRINGS);
DatepickerCalendar.handledProps = Object.keys(DatepickerCalendar.propTypes);
//# sourceMappingURL=DatepickerCalendar.js.map