react-lightning-design-system
Version:
Salesforce Lightning Design System components built with React
413 lines (401 loc) • 14.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Datepicker = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _dayjs = _interopRequireDefault(require("dayjs"));
var _weekday = _interopRequireDefault(require("dayjs/plugin/weekday"));
var _localeData = _interopRequireDefault(require("dayjs/plugin/localeData"));
var _Button = require("./Button");
var _Select = require("./Select");
var _util = require("./util");
var _ComponentSettings = require("./ComponentSettings");
var _hooks = require("./hooks");
var _excluded = ["autoFocus", "className", "selectedDate", "minDate", "maxDate", "extensionRenderer", "elementRef", "onSelect", "onBlur", "onClose"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
/**
*
*/
_dayjs["default"].extend(_weekday["default"]);
_dayjs["default"].extend(_localeData["default"]);
/**
*
*/
function createCalendarObject(date, mnDate, mxDate) {
var minDate;
var maxDate;
var d = (0, _dayjs["default"])(date !== null && date !== void 0 ? date : null, 'YYYY-MM-DD');
if (!d.isValid()) {
d = (0, _dayjs["default"])((0, _util.getToday)(), 'YYYY-MM-DD');
}
if (mnDate) {
var minD = (0, _dayjs["default"])(mnDate, 'YYYY-MM-DD');
if (minD.isValid()) {
minDate = {
year: minD.year(),
month: minD.month(),
date: minD.date(),
value: minD.format('YYYY-MM-DD')
};
}
}
if (mxDate) {
var maxD = (0, _dayjs["default"])(mxDate, 'YYYY-MM-DD');
if (maxD.isValid()) {
maxDate = {
year: maxD.year(),
month: maxD.month(),
date: maxD.date(),
value: maxD.format('YYYY-MM-DD')
};
}
}
var year = d.year();
var month = d.month();
var first = (0, _dayjs["default"])(d).startOf('month').startOf('week');
var last = (0, _dayjs["default"])(d).endOf('month').endOf('week');
var weeks = [];
var days = [];
for (var dd = first; dd.isBefore(last); dd = dd.add(1, 'd')) {
days.push({
year: dd.year(),
month: dd.month(),
date: dd.date(),
value: dd.format('YYYY-MM-DD')
});
if (days.length === 7) {
weeks.push(days);
days = [];
}
}
var cal = {
year: year,
month: month,
weeks: weeks
};
if (minDate) {
cal.minDate = minDate;
}
if (maxDate) {
cal.maxDate = maxDate;
}
return cal;
}
function cancelEvent(e) {
e.preventDefault();
e.stopPropagation();
}
/**
*
*/
/**
*
*/
/**
*
*/
var DatepickerFilter = function DatepickerFilter(props) {
var cal = props.cal,
onMonthChange = props.onMonthChange,
onYearChange = props.onYearChange;
var onPrevMonth = (0, _hooks.useEventCallback)(function () {
return onMonthChange(-1);
});
var onNextMonth = (0, _hooks.useEventCallback)(function () {
return onMonthChange(1);
});
return /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-datepicker__filter slds-grid"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow"
}, /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-align-middle"
}, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
type: "icon-container",
icon: "left",
alt: "Previous Month",
onClick: onPrevMonth
})), /*#__PURE__*/_react["default"].createElement("h2", {
className: "slds-align-middle",
"aria-atomic": "false",
"aria-live": "polite"
}, _dayjs["default"].monthsShort()[cal.month]), /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-align-middle"
}, /*#__PURE__*/_react["default"].createElement(_Button.Button, {
type: "icon-container",
icon: "right",
alt: "Next Month",
onClick: onNextMonth
}))), /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-shrink-none"
}, /*#__PURE__*/_react["default"].createElement("label", {
className: "slds-assistive-text"
}, "Pick a Year"), /*#__PURE__*/_react["default"].createElement("div", {
className: "slds-select_container"
}, /*#__PURE__*/_react["default"].createElement(_Select.Select, {
value: cal.year,
onChange: onYearChange
}, new Array(11).join('_').split('_').map(function (a, i) {
var year = cal.year + i - 5;
return /*#__PURE__*/_react["default"].createElement(_Select.Option, {
key: year,
label: String(year),
value: year
});
})))));
};
/**
*
*/
/**
*
*/
var DatepickerDate = function DatepickerDate(props) {
var cal = props.cal,
selectedDate = props.selectedDate,
today = props.today,
date = props.date,
onDateKeyDown_ = props.onDateKeyDown,
onDateClick_ = props.onDateClick,
onDateFocus_ = props.onDateFocus;
var onDateKeyDown = (0, _hooks.useEventCallback)(function (e) {
onDateKeyDown_(date.value, e);
});
var onDateClick = (0, _hooks.useEventCallback)(function () {
onDateClick_(date.value);
});
var onDateFocus = (0, _hooks.useEventCallback)(function () {
onDateFocus_(date.value);
});
var selectable = true;
var enabled = date.year === cal.year && date.month === cal.month;
if (cal.minDate) {
var min = (0, _dayjs["default"])(date.value, 'YYYY-MM-DD').isAfter((0, _dayjs["default"])(cal.minDate.value, 'YYYY-MM-DD'));
selectable = selectable && min;
enabled = enabled && min;
}
if (cal.maxDate) {
var max = (0, _dayjs["default"])(date.value, 'YYYY-MM-DD').isBefore((0, _dayjs["default"])(cal.maxDate.value, 'YYYY-MM-DD'));
selectable = selectable && max;
enabled = enabled && max;
}
var selected = date.value === selectedDate;
var isToday = date.value === today;
var isAdjacentMonth = date.month !== cal.month;
var dateClassName = (0, _classnames["default"])({
'slds-is-selected': selected,
'slds-is-today': isToday,
'slds-day_adjacent-month': isAdjacentMonth || !enabled // Considering the meaning, applying this class to disabled dates isn't necesarrily correct.
});
return /*#__PURE__*/_react["default"].createElement("td", {
className: dateClassName,
role: "gridcell",
"aria-selected": selected,
"aria-current": isToday ? 'date' : undefined,
"aria-label": (0, _dayjs["default"])(date.value).format('D MMMM YYYY')
}, /*#__PURE__*/_react["default"].createElement("span", {
className: "slds-day",
tabIndex: selectable ? 0 : -1,
onClick: selectable ? onDateClick : undefined,
onKeyDown: selectable ? onDateKeyDown : undefined,
onFocus: enabled ? onDateFocus : cancelEvent,
"data-date-value": date.value
}, date.date));
};
/**
*
*/
/**
*
*/
var DatepickerMonth = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
var cal = props.cal,
selectedDate = props.selectedDate,
today = props.today,
onDateClick = props.onDateClick,
onDateFocus = props.onDateFocus,
onDateKeyDown = props.onDateKeyDown;
return /*#__PURE__*/_react["default"].createElement("table", {
ref: ref,
className: "slds-datepicker__month",
role: "grid"
}, /*#__PURE__*/_react["default"].createElement("thead", null, /*#__PURE__*/_react["default"].createElement("tr", null, _dayjs["default"].weekdaysMin(true).map(function (wd, i) {
return /*#__PURE__*/_react["default"].createElement("th", {
key: i
}, /*#__PURE__*/_react["default"].createElement("abbr", {
title: (0, _dayjs["default"])().weekday(i).format('ddd')
}, wd));
}))), /*#__PURE__*/_react["default"].createElement("tbody", null, cal.weeks.map(function (days, i) {
return /*#__PURE__*/_react["default"].createElement("tr", {
key: i
}, days.map(function (date, dayIndex) {
return /*#__PURE__*/_react["default"].createElement(DatepickerDate, {
key: date.value,
cal: cal,
date: date,
selectedDate: selectedDate,
today: today,
dayIndex: dayIndex,
onDateClick: onDateClick,
onDateFocus: onDateFocus,
onDateKeyDown: onDateKeyDown
});
}));
})));
});
/**
*
*/
var Datepicker = exports.Datepicker = function Datepicker(props) {
var autoFocus = props.autoFocus,
className = props.className,
selectedDate = props.selectedDate,
minDate = props.minDate,
maxDate = props.maxDate,
ExtensionRenderer = props.extensionRenderer,
elementRef_ = props.elementRef,
onSelect = props.onSelect,
onBlur_ = props.onBlur,
onClose = props.onClose,
rprops = (0, _objectWithoutProperties2["default"])(props, _excluded);
var _useState = (0, _react.useState)(),
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
focusDate = _useState2[0],
setFocusDate = _useState2[1];
var _useState3 = (0, _react.useState)(selectedDate),
_useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
targetDate = _useState4[0],
setTargetDate = _useState4[1];
var elRef = (0, _react.useRef)(null);
var elementRef = (0, _hooks.useMergeRefs)([elRef, elementRef_]);
var monthElRef = (0, _react.useRef)(null);
var onFocusDate = (0, _hooks.useEventCallback)(function (date) {
var el = monthElRef.current;
if (!el || !date) {
return;
}
var dateEl = el.querySelector(".slds-day[data-date-value=\"".concat(date, "\"]"));
if (dateEl) {
dateEl.focus();
}
});
var _useContext = (0, _react.useContext)(_ComponentSettings.ComponentSettingsContext),
getActiveElement = _useContext.getActiveElement;
var isFocusedInComponent = (0, _hooks.useEventCallback)(function () {
var nodeEl = elRef.current;
var targetEl = getActiveElement();
return (0, _util.isElInChildren)(nodeEl, targetEl);
});
(0, _react.useEffect)(function () {
setTargetDate(selectedDate);
}, [selectedDate]);
(0, _react.useEffect)(function () {
if (autoFocus) {
var _targetDate = selectedDate || (0, _util.getToday)();
setTimeout(function () {
onFocusDate(_targetDate);
}, 10);
}
}, [autoFocus, selectedDate, onFocusDate]);
(0, _react.useEffect)(function () {
if (focusDate && targetDate) {
onFocusDate(targetDate);
setFocusDate(false);
}
}, [focusDate, targetDate, onFocusDate]);
var onDateClick = (0, _hooks.useEventCallback)(function (date) {
onSelect === null || onSelect === void 0 || onSelect(date);
});
var onDateKeyDown = (0, _hooks.useEventCallback)(function (date, e) {
if (e.keyCode === 13 || e.keyCode === 32) {
// return / space
onDateClick(date);
e.preventDefault();
e.stopPropagation();
} else if (e.keyCode >= 37 && e.keyCode <= 40) {
var _d$format, _d;
// cursor key
var d;
if (e.keyCode === 37) {
d = (0, _dayjs["default"])(targetDate).add(-1, e.shiftKey ? 'months' : 'days');
} else if (e.keyCode === 39) {
// right arrow key
d = (0, _dayjs["default"])(targetDate).add(1, e.shiftKey ? 'months' : 'days');
} else if (e.keyCode === 38) {
// up arrow key
d = (0, _dayjs["default"])(targetDate).add(-1, e.shiftKey ? 'years' : 'weeks');
} else if (e.keyCode === 40) {
// down arrow key
d = (0, _dayjs["default"])(targetDate).add(1, e.shiftKey ? 'years' : 'weeks');
}
var newTargetDate = (_d$format = (_d = d) === null || _d === void 0 ? void 0 : _d.format('YYYY-MM-DD')) !== null && _d$format !== void 0 ? _d$format : targetDate;
setTargetDate(newTargetDate);
setFocusDate(true);
e.preventDefault();
e.stopPropagation();
}
});
var onDateFocus = (0, _hooks.useEventCallback)(function (date) {
if (targetDate !== date) {
setTimeout(function () {
setTargetDate(date);
}, 10);
}
});
var onYearChange = (0, _hooks.useEventCallback)(function (e) {
var newTargetDate = (0, _dayjs["default"])(targetDate).year(Number(e.target.value)).format('YYYY-MM-DD');
setTargetDate(newTargetDate);
});
var onMonthChange = (0, _hooks.useEventCallback)(function (month) {
var newTargetDate = (0, _dayjs["default"])(targetDate).add(month, 'months').format('YYYY-MM-DD');
setTargetDate(newTargetDate);
});
var onBlur = (0, _hooks.useEventCallback)(function (e) {
setTimeout(function () {
if (!isFocusedInComponent()) {
onBlur_ === null || onBlur_ === void 0 || onBlur_(e);
}
}, 10);
});
var onKeyDown = (0, _hooks.useEventCallback)(function (e) {
if (e.keyCode === 27) {
// ESC
onClose === null || onClose === void 0 || onClose();
}
});
var today = (0, _util.getToday)();
var cal = (0, _react.useMemo)(function () {
return createCalendarObject(targetDate, minDate, maxDate);
}, [targetDate, minDate, maxDate]);
var datepickerClassNames = (0, _classnames["default"])('slds-datepicker', className);
return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, rprops, {
className: datepickerClassNames,
ref: elementRef,
tabIndex: -1,
role: "dialog",
"aria-hidden": false,
onBlur: onBlur,
onKeyDown: onKeyDown
}), /*#__PURE__*/_react["default"].createElement(DatepickerFilter, {
cal: cal,
onMonthChange: onMonthChange,
onYearChange: onYearChange
}), /*#__PURE__*/_react["default"].createElement(DatepickerMonth, {
ref: monthElRef,
cal: cal,
selectedDate: selectedDate,
today: today,
onDateClick: onDateClick,
onDateFocus: onDateFocus,
onDateKeyDown: onDateKeyDown
}), ExtensionRenderer ? /*#__PURE__*/_react["default"].createElement(ExtensionRenderer, props) : undefined);
};
//# sourceMappingURL=Datepicker.js.map