reactstrap-date-picker
Version:
Reactstrap based, zero dependencies, date picker
109 lines (108 loc) • 4.47 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CalendarHeader = CalendarHeader;
var _react = _interopRequireWildcard(require("react"));
var _compareMonths = require("../util/compareMonths");
var _PickMonthDefault = _interopRequireDefault(require("./pickmonth/PickMonthDefault"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 && {}.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; }
function CalendarHeader(_ref) {
var {
previousButtonElement,
nextButtonElement,
pickMonthElement,
displayDate,
minDate,
maxDate,
onChange,
monthLabels
} = _ref;
var [displayingMinMonth, setDisplayingMinMonth] = (0, _react.useState)(false);
var [displayingMaxMonth, setDisplayingMaxMonth] = (0, _react.useState)(false);
var [title, setTitle] = (0, _react.useState)('');
var PickMonthElement = pickMonthElement;
(0, _react.useEffect)(() => {
if (displayDate == undefined) {
return;
}
if (!minDate) {
setDisplayingMinMonth(false);
} else {
setDisplayingMinMonth((0, _compareMonths.compareMonths)(displayDate, minDate));
}
if (!maxDate) {
setDisplayingMaxMonth(false);
} else {
setDisplayingMaxMonth((0, _compareMonths.compareMonths)(displayDate, maxDate));
}
try {
if (monthLabels) {
setTitle("".concat(monthLabels[displayDate.getMonth()], " ").concat(displayDate.getFullYear()));
}
} catch (e) {
console.error(e);
}
}, [displayDate, minDate, maxDate, monthLabels]);
var handleChangeMonthIncr = inc => {
var newDisplayDate = new Date(displayDate);
newDisplayDate.setMonth(newDisplayDate.getMonth() + inc, 1);
onChange(newDisplayDate);
};
var handleChangeMonth = m => {
var newDisplayDate = new Date(displayDate);
newDisplayDate.setMonth(m);
onChange(newDisplayDate);
};
var handleChangeYear = y => {
var newDisplayDate = new Date(displayDate);
newDisplayDate.setFullYear(y);
onChange(newDisplayDate);
};
return /*#__PURE__*/_react.default.createElement("div", {
className: "rdp-header text-center",
style: {
display: 'flex',
flexFlow: 'row',
flexWrap: 'nowrap'
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: "text-muted rdp-header-previous-wrapper",
onClick: () => handleChangeMonthIncr(-1),
style: {
cursor: 'pointer',
userSelect: 'none',
flexBasis: '1.25em',
alignSelf: 'center'
}
}, displayingMinMonth ? null : previousButtonElement), /*#__PURE__*/_react.default.createElement("div", {
className: "rdp-header-pick-month-wrapper",
style: {
flex: '1 1 auto'
}
}, PickMonthElement == null || PickMonthElement === 'none' ? /*#__PURE__*/_react.default.createElement("div", null, title) : PickMonthElement === 'default' ? /*#__PURE__*/_react.default.createElement(_PickMonthDefault.default, {
displayDate: displayDate,
monthLabels: monthLabels,
minDate: minDate,
maxDate: maxDate,
onChangeMonth: m => handleChangeMonth(m),
onChangeYear: y => handleChangeYear(y)
}) : /*#__PURE__*/_react.default.createElement(PickMonthElement, {
displayDate: displayDate,
minDate: minDate,
maxDate: maxDate,
onChangeMonth: m => handleChangeMonth(m),
onChangeYear: y => handleChangeYear(y)
})), /*#__PURE__*/_react.default.createElement("div", {
className: "text-muted rdp-header-next-wrapper",
onClick: () => handleChangeMonthIncr(+1),
style: {
cursor: 'pointer',
userSelect: 'none',
flexBasis: '1.25em',
alignSelf: 'center'
}
}, displayingMaxMonth ? null : nextButtonElement));
}