pouncejs
Version:
A collection of UI components from Panther labs
255 lines (215 loc) • 9.12 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 _dayjs = _interopRequireDefault(require("dayjs"));
var _Box = _interopRequireDefault(require("../Box"));
var _Flex = _interopRequireDefault(require("../Flex"));
var _Button = _interopRequireDefault(require("../Button"));
var _Month = _interopRequireDefault(require("./Month"));
var _index = require("../../index");
var _DateWrapper = _interopRequireDefault(require("./DateWrapper"));
var _Heading = _interopRequireDefault(require("../Heading"));
var _TextInput = _interopRequireDefault(require("../TextInput"));
var _TimePicker = _interopRequireDefault(require("./TimePicker"));
var _ClearButton = _interopRequireDefault(require("./ClearButton"));
var _helpers = require("../../utils/helpers");
var _useDisclosure2 = _interopRequireDefault(require("../../utils/useDisclosure"));
var _useEscapeKey = _interopRequireDefault(require("../../utils/useEscapeKey"));
var _usePrevious = _interopRequireDefault(require("../../utils/usePrevious"));
var _useOutsideClick = _interopRequireDefault(require("../../utils/useOutsideClick"));
/**
* A component to help selecting dates in forms
*
* Apart from the props specified down below, you can pass any valid prop from the
* <a href="/#/TextInput">TextInput</a> component (i.e. placeholder, etc.)
*
* */
var DateInput = function DateInput(_ref) {
var value = _ref.value,
_ref$format = _ref.format,
format = _ref$format === void 0 ? 'MM/DD/YYYY' : _ref$format,
alignment = _ref.alignment,
withTime = _ref.withTime,
_ref$mode = _ref.mode,
mode = _ref$mode === void 0 ? '24h' : _ref$mode,
_ref$disableReset = _ref.disableReset,
disableReset = _ref$disableReset === void 0 ? false : _ref$disableReset,
_ref$variant = _ref.variant,
variant = _ref$variant === void 0 ? 'outline' : _ref$variant,
_ref$onChange = _ref.onChange,
onChange = _ref$onChange === void 0 ? _helpers.noop : _ref$onChange,
_ref$timezone = _ref.timezone,
timezone = _ref$timezone === void 0 ? 'local' : _ref$timezone,
rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["value", "format", "alignment", "withTime", "mode", "disableReset", "variant", "onChange", "timezone"]);
var ref = _react.default.useRef(null);
var targetRef = _react.default.useRef(null);
var _useState = (0, _react.useState)((0, _helpers.dateToDayjs)(value, timezone)),
currentDate = _useState[0],
setCurrentDate = _useState[1];
var _useState2 = (0, _react.useState)(currentDate || (0, _helpers.now)(timezone)),
currentMonth = _useState2[0],
setCurrentMonth = _useState2[1];
var resetLabel = _react.default.useMemo(function () {
return withTime ? 'Clear Date & Time' : 'Clear Date';
}, [withTime]);
var _useDisclosure = (0, _useDisclosure2.default)(),
isOpen = _useDisclosure.isOpen,
open = _useDisclosure.open,
close = _useDisclosure.close;
var previousDate = (0, _usePrevious.default)((0, _helpers.dateToDayjs)(value, timezone)); // Handles value & timezone updates outside of the component (i.e. a form has re-initialized or
// has updated its values as a result of an API call)
_react.default.useEffect(function () {
setCurrentDate((0, _helpers.dateToDayjs)(value, timezone));
}, [value, timezone]);
var isDisabled = _react.default.useMemo(function () {
if (_dayjs.default.isDayjs(currentDate) && _dayjs.default.isDayjs(previousDate)) {
return currentDate.isSame(previousDate, withTime ? 'minute' : 'day');
}
return currentDate === previousDate;
}, [currentDate, previousDate]);
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]);
var onCancel = (0, _react.useCallback)(function () {
setCurrentDate((0, _helpers.dateToDayjs)(value, timezone));
close();
}, [close, value, timezone, setCurrentDate]);
var onClear = (0, _react.useCallback)(function () {
return setCurrentDate((0, _helpers.dateToDayjs)(undefined));
}, [setCurrentDate]);
var onApply = (0, _react.useCallback)(function (e) {
e.preventDefault();
onChange(currentDate == null ? void 0 : currentDate.startOf(withTime ? 'minute' : 'day').toDate());
close();
}, [close, onChange, currentDate, disableReset]);
var onDaySelect = (0, _react.useCallback)(function (dateChanged) {
var updated = dateChanged;
if (currentDate) {
updated = (0, _dayjs.default)(currentDate).year(dateChanged.year()).month(dateChanged.month()).date(dateChanged.date());
}
setCurrentDate(updated);
}, [currentDate, setCurrentDate]);
var onTimeUpdate = (0, _react.useCallback)(function (timeUpdated) {
setCurrentDate(timeUpdated);
}, []); // Close on ESC key presses
(0, _useEscapeKey.default)({
ref: ref,
callback: onCancel,
disabled: !isOpen
}); // Close popover on clicks outside
(0, _useOutsideClick.default)({
refs: [ref, targetRef],
callback: onCancel,
disabled: !isOpen
});
return /*#__PURE__*/_react.default.createElement(_Box.default, {
position: "relative",
ref: targetRef
}, /*#__PURE__*/_react.default.createElement(_TextInput.default, (0, _extends2.default)({}, rest, {
variant: variant,
value: currentDate ? currentDate.format(format) : '',
onClick: open,
autoComplete: "off",
"aria-autocomplete": "none",
tabIndex: -1,
readOnly: true
})), /*#__PURE__*/_react.default.createElement(_Box.default, {
position: "absolute",
top: 2,
right: 3,
zIndex: 2
}, /*#__PURE__*/_react.default.createElement(_index.IconButton, {
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, {
align: "center",
justify: "space-between",
p: 4
}, /*#__PURE__*/_react.default.createElement(_index.IconButton, {
onClick: onPreviousMonth,
size: "medium",
icon: "arrow-back",
"aria-label": "Go to previous month"
}), /*#__PURE__*/_react.default.createElement(_Box.default, {
as: _Heading.default,
fontSize: "medium",
fontWeight: "bold",
tabIndex: "-1"
}, currentMonth.format('MMMM YYYY')), /*#__PURE__*/_react.default.createElement(_index.IconButton, {
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(_Month.default, {
onDaySelect: onDaySelect,
daysSelected: currentDate && [currentDate],
year: currentMonth.year(),
month: currentMonth.month(),
timezone: timezone
})), withTime && /*#__PURE__*/_react.default.createElement(_Flex.default, {
align: "center",
justify: "center",
borderTop: "1px solid",
borderColor: "navyblue-300",
p: 4
}, /*#__PURE__*/_react.default.createElement(_Flex.default, {
align: "center",
justify: "center",
spacing: 3
}, /*#__PURE__*/_react.default.createElement(_TimePicker.default, {
label: "Time",
mode: mode,
onTimeUpdate: onTimeUpdate,
timezone: timezone,
date: currentDate
}))), /*#__PURE__*/_react.default.createElement(_Flex.default, {
align: "center",
justify: "center",
borderTop: "1px solid",
borderColor: "navyblue-300"
}, /*#__PURE__*/_react.default.createElement(_Flex.default, {
align: "center",
justify: "center",
p: 3,
spacing: 3
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
onClick: onCancel,
size: "medium",
variantColor: "gray-500"
}, "Cancel"), /*#__PURE__*/_react.default.createElement(_Button.default, {
disabled: isDisabled,
onClick: onApply,
size: "medium"
}, "Apply"))), !disableReset && /*#__PURE__*/_react.default.createElement(_Flex.default, {
align: "center",
justify: "center",
pb: 3
}, /*#__PURE__*/_react.default.createElement(_ClearButton.default, {
onClick: onClear
}, resetLabel))));
};
var _default = /*#__PURE__*/_react.default.memo(DateInput);
exports.default = _default;