@ntragas/pouncejstest
Version:
A collection of UI components from Panther labs
336 lines (289 loc) • 12.5 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Box = _interopRequireDefault(require("../Box"));
var _Presets = _interopRequireDefault(require("./Presets"));
var _Flex = _interopRequireDefault(require("../Flex"));
var _Button = _interopRequireDefault(require("../Button"));
var _DoubleTextInput = _interopRequireDefault(require("./DoubleTextInput"));
var _DateWrapper = _interopRequireDefault(require("../DateInput/DateWrapper"));
var _TimePicker = _interopRequireDefault(require("../DateInput/TimePicker"));
var _Month = _interopRequireDefault(require("../DateInput/Month"));
var _ClearButton = _interopRequireDefault(require("../DateInput/ClearButton"));
var _helpers = require("../../utils/helpers");
var _useEscapeKey = _interopRequireDefault(require("../../utils/useEscapeKey"));
var _usePrevious = _interopRequireDefault(require("../../utils/usePrevious"));
var _useOutsideClick = _interopRequireDefault(require("../../utils/useOutsideClick"));
var _useDisclosure2 = _interopRequireDefault(require("../../utils/useDisclosure"));
/**
* Converts the provided Dates into Dayjs objects, if they exist
*/
var datesToDayjs = function datesToDayjs(value, timezone) {
return [(0, _helpers.dateToDayjs)(value[0], timezone), (0, _helpers.dateToDayjs)(value[1], timezone)];
};
var areDatesUndefined = function areDatesUndefined(dates) {
return !!dates && dates.every(function (date) {
return !date;
});
};
var DateRangeInput = function DateRangeInput(_ref) {
var _ref$value = _ref.value,
value = _ref$value === void 0 ? [] : _ref$value,
_ref$format = _ref.format,
format = _ref$format === void 0 ? 'MM/DD/YYYY' : _ref$format,
_ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? '24h' : _ref$mode,
withTime = _ref.withTime,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
_ref$disableReset = _ref.disableReset,
disableReset = _ref$disableReset === void 0 ? false : _ref$disableReset,
withPresets = _ref.withPresets,
_ref$onChange = _ref.onChange,
onChange = _ref$onChange === void 0 ? _helpers.noop : _ref$onChange,
labelStart = _ref.labelStart,
alignment = _ref.alignment,
labelEnd = _ref.labelEnd,
placeholderStart = _ref.placeholderStart,
placeholderEnd = _ref.placeholderEnd,
_ref$timezone = _ref.timezone,
timezone = _ref$timezone === void 0 ? 'local' : _ref$timezone,
rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["value", "format", "mode", "withTime", "variant", "disableReset", "withPresets", "onChange", "labelStart", "alignment", "labelEnd", "placeholderStart", "placeholderEnd", "timezone"]);
var _useState = (0, _react.useState)(datesToDayjs(value, timezone)),
currentDateRange = _useState[0],
setCurrentRange = _useState[1];
var _useState2 = (0, _react.useState)(currentDateRange[0] || (0, _helpers.now)(timezone)),
currentMonth = _useState2[0],
setCurrentMonth = _useState2[1];
var _useDisclosure = (0, _useDisclosure2.default)(),
isOpen = _useDisclosure.isOpen,
open = _useDisclosure.open,
close = _useDisclosure.close;
var previousDateRange = (0, _usePrevious.default)(datesToDayjs(value, timezone));
var ref = _react.default.useRef(null);
var targetRef = _react.default.useRef(null);
var onCancel = (0, _react.useCallback)(function () {
setCurrentRange(datesToDayjs(value, timezone));
close();
}, [value, timezone, setCurrentRange, close]);
var resetLabel = _react.default.useMemo(function () {
return withTime ? 'Clear Dates & Time' : 'Clear Dates';
}, [withTime]);
var onApply = (0, _react.useCallback)(function (e) {
// To avoid inconsistent results round the start and end dates to the
// nearest minute (or day if the time picker is disabled)
var timeUnit = withTime ? 'minute' : 'day';
e.preventDefault();
onChange([currentDateRange[0] ? currentDateRange[0].startOf(timeUnit).toDate() : undefined, currentDateRange[1] ? currentDateRange[1].endOf(timeUnit).toDate() : undefined]);
close();
}, [close, onChange, currentDateRange]);
var onNextMonth = (0, _react.useCallback)(function (e) {
e.preventDefault();
var next = currentMonth.add(1, 'month');
setCurrentMonth(next);
}, [currentMonth, setCurrentMonth]);
var onPreviousMonth = (0, _react.useCallback)(function (e) {
e.preventDefault();
var next = currentMonth.subtract(1, 'month');
setCurrentMonth(next);
}, [currentMonth, setCurrentMonth]); // Close on ESC key presses
(0, _useEscapeKey.default)({
ref,
callback: onCancel,
disabled: !isOpen
}); // Close popover on clicks outside
(0, _useOutsideClick.default)({
refs: [ref, targetRef],
callback: onCancel,
disabled: !isOpen
});
var onDaySelect = (0, _react.useCallback)(function (dateChanged) {
if (!currentDateRange[0]) {
return setCurrentRange([dateChanged]);
}
var start = currentDateRange[0];
var end = currentDateRange[1];
if (!start) {
return setCurrentRange([dateChanged]);
}
if (!end) {
return setCurrentRange([start, dateChanged]);
}
if (dateChanged.isBefore(start, 'date') || start.isSame(end, 'date')) {
return setCurrentRange([dateChanged.hour(start.hour()).minute(start.minute())]);
}
if (dateChanged.isAfter(start, 'date') && dateChanged.isBefore(end, 'date')) {
return setCurrentRange([dateChanged.hour(start.hour()).minute(start.minute()), end]);
}
return setCurrentRange([start, dateChanged.hour(end.hour()).minute(end.minute())]);
}, [setCurrentRange, currentDateRange]);
var onClear = (0, _react.useCallback)(function () {
return setCurrentRange([undefined, undefined]);
}, [setCurrentRange]);
var isDisabled = _react.default.useMemo(function () {
if (areDatesUndefined(previousDateRange) && areDatesUndefined(currentDateRange)) {
return true;
}
if (currentDateRange[0] && !currentDateRange[1]) {
return true;
}
return currentDateRange.every(function (date, index) {
return date && previousDateRange && previousDateRange[index] && date.isSame(previousDateRange[index], withTime ? 'minute' : 'day');
});
}, [currentDateRange, previousDateRange]);
var onPresetSelect = (0, _react.useCallback)(function (_ref2) {
var start = _ref2[0],
end = _ref2[1];
setCurrentRange([start, end]);
}, [setCurrentRange]);
var onStartTimeUpdate = (0, _react.useCallback)(function (timeUpdated) {
return setCurrentRange([timeUpdated, currentDateRange[1]]);
}, [setCurrentRange, currentDateRange]);
var onEndTimeUpdate = (0, _react.useCallback)(function (timeUpdated) {
return setCurrentRange([currentDateRange[0], timeUpdated]);
}, [setCurrentRange, currentDateRange]);
var nextMonth = currentMonth.add(1, 'month');
return /*#__PURE__*/_react.default.createElement(_Box.default, {
position: "relative",
zIndex: 1,
ref: targetRef
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
onClick: open
}, /*#__PURE__*/_react.default.createElement(_DoubleTextInput.default, (0, _extends2.default)({}, rest, {
variant: variant,
from: currentDateRange[0] ? currentDateRange[0].format(format) : '',
to: currentDateRange[1] ? currentDateRange[1].format(format) : '',
labelFrom: labelStart,
labelTo: labelEnd,
placeholderFrom: placeholderStart,
placeholderTo: placeholderEnd,
onChangeFrom: _helpers.noop,
onChangeTo: _helpers.noop,
readOnly: true,
autoComplete: "off"
}))), /*#__PURE__*/_react.default.createElement(_Box.default, {
position: "absolute",
top: 2,
right: 3,
zIndex: 2
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
variant: "unstyled",
"aria-label": "Toggle picker",
size: "medium",
icon: "calendar",
onClick: isOpen ? onCancel : open
})), /*#__PURE__*/_react.default.createElement(_DateWrapper.default, {
ref: ref,
targetRef: targetRef,
alignment: alignment,
isExpanded: isOpen
}, /*#__PURE__*/_react.default.createElement(_Flex.default, null, withPresets && /*#__PURE__*/_react.default.createElement(_Presets.default, {
setCurrentMonth: setCurrentMonth,
timezone: timezone,
onSelect: onPresetSelect,
currentDateRange: currentDateRange
}), /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_Flex.default, {
align: "center",
justify: "space-between",
px: 4,
py: 22,
position: "relative"
}, /*#__PURE__*/_react.default.createElement(_Box.default, {
position: "absolute",
left: 4
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
size: "medium",
onClick: onPreviousMonth,
icon: "arrow-back",
"aria-label": "Go to previous month"
})), /*#__PURE__*/_react.default.createElement(_Box.default, {
as: "h4",
fontSize: "medium",
fontWeight: "bold",
width: "50%",
textAlign: "center"
}, currentMonth.format('MMMM YYYY')), /*#__PURE__*/_react.default.createElement(_Box.default, {
as: "h4",
fontSize: "medium",
fontWeight: "bold",
width: "50%",
textAlign: "center"
}, nextMonth.format('MMMM YYYY')), /*#__PURE__*/_react.default.createElement(_Box.default, {
position: "absolute",
right: 4
}, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
onClick: onNextMonth,
size: "medium",
icon: "arrow-forward",
"aria-label": "Go to next month"
}))), /*#__PURE__*/_react.default.createElement(_Box.default, {
px: 4,
pb: 4
}, /*#__PURE__*/_react.default.createElement(_Flex.default, {
spacing: 8
}, /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_Month.default, {
onDaySelect: onDaySelect,
daysSelected: currentDateRange,
year: currentMonth.year(),
month: currentMonth.month(),
timezone: timezone
})), /*#__PURE__*/_react.default.createElement(_Box.default, null, /*#__PURE__*/_react.default.createElement(_Month.default, {
onDaySelect: onDaySelect,
daysSelected: currentDateRange,
year: nextMonth.year(),
month: nextMonth.month(),
timezone: timezone
})))), withTime && /*#__PURE__*/_react.default.createElement(_Flex.default, {
align: "center",
justify: "space-between",
borderTop: "1px solid",
borderColor: "navyblue-300",
p: 4
}, /*#__PURE__*/_react.default.createElement(_TimePicker.default, {
label: "From Time",
mode: mode,
onTimeUpdate: onStartTimeUpdate,
date: currentDateRange[0],
timezone: timezone
}), /*#__PURE__*/_react.default.createElement(_TimePicker.default, {
mode: mode,
label: "To Time",
onTimeUpdate: onEndTimeUpdate,
date: currentDateRange[1],
timezone: timezone
})), /*#__PURE__*/_react.default.createElement(_Flex.default, {
align: "center",
spacing: 3,
justify: disableReset && 'center',
borderTop: "1px solid",
p: 3,
borderColor: "navyblue-300"
}, !disableReset && /*#__PURE__*/_react.default.createElement(_Box.default, {
align: "center",
justifySelf: "flex-start"
}, /*#__PURE__*/_react.default.createElement(_ClearButton.default, {
onClick: onClear
}, resetLabel)), /*#__PURE__*/_react.default.createElement(_Flex.default, {
align: "center",
justifySelf: !disableReset && 'flex-end',
ml: !disableReset && 'auto',
justify: "center",
spacing: 3
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: onCancel,
size: "medium",
variantColor: "gray"
}, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
disabled: isDisabled,
onClick: onApply,
size: "medium"
}, "Apply")))))));
};
var _default = /*#__PURE__*/_react.default.memo(DateRangeInput);
exports.default = _default;