@octopusdeploy/design-system-components
Version:
The design systems component library.
71 lines (70 loc) • 5.67 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DatePicker = DatePicker;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const date_fns_1 = require("date-fns");
const react_1 = require("react");
const Button_1 = require("../../Button");
const Dropdown_1 = require("../../Dropdown");
const Popover_1 = require("../../Popover");
const FormDescription_1 = require("../Primitives/FormDescription");
const Input_1 = require("../Primitives/Input");
const InputLabel_1 = __importDefault(require("../Primitives/InputLabel"));
const InputValidationMessage_1 = require("../Primitives/InputValidationMessage");
const DatePickerCalendar_1 = require("./DatePickerCalendar");
/**
* DatePicker component
* @remarks Rollout currently paused — do not use in new code until further notice.
* Use `<DeprecatedDatePicker>` instead.
* @see <DeprecatedDatePicker>
*/
function DatePicker({ value, onChange, label, description, validationMessage, disabled, hasRequiredMarker, hasOptionalMarker, hasDefaultMarker, popover, autoFocus, readOnly, name, startDateInMonths = 24, endDateInMonths = 24, disablePastDates, }) {
const baseId = (0, react_1.useId)();
const inputId = `datepicker-${name ? `${name}-` : ""}${baseId}`;
const inputContainerRef = (0, react_1.useRef)(null);
const [inputValue, setInputValue] = (0, react_1.useState)(value ? (0, date_fns_1.format)(value, "yyyy-MM-dd") : "");
const [selectedDate, setSelectedDate] = (0, react_1.useState)(value);
const [monthDisplayedInCalendar, setMonthDisplayedInCalendar] = (0, react_1.useState)(value);
const dropdownButtonState = (0, Dropdown_1.useDropdownButton)({ trapFocus: true, dropdownAriaRole: "dialog" });
const { isOpen, closeDropdown, setButtonRef, toggleDropdown, setDropdownRef, dropdownAttributes, buttonAriaAttributes } = dropdownButtonState;
const handleInputChange = (newValue) => {
setInputValue(newValue);
// Use value from props as reference date, so that the timezone information is preserved.
const parsedDate = (0, date_fns_1.parse)(newValue, "yyyy-MM-dd", value ?? new Date());
if ((0, date_fns_1.isValid)(parsedDate)) {
setSelectedDate(parsedDate);
setMonthDisplayedInCalendar(parsedDate);
onChange(parsedDate);
}
else {
setSelectedDate(undefined);
}
};
const toggleCalendar = () => {
toggleDropdown();
};
const handleSelectDateInPicker = (date) => {
onChange(date);
setSelectedDate(date);
setMonthDisplayedInCalendar(date);
setInputValue((0, date_fns_1.format)(date, "yyyy-MM-dd"));
closeDropdown({ moveFocusToButton: true });
};
const calendarButton = (0, jsx_runtime_1.jsx)(Button_1.Button, { ref: setButtonRef, importance: "ghost", icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.CalendarIcon, { size: 20 }), onClick: toggleCalendar, disabled: disabled || readOnly, accessibleName: "Toggle date picker's calendar", ...buttonAriaAttributes });
return ((0, jsx_runtime_1.jsxs)("div", { className: datePickerStyles.container, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { label: label, htmlFor: inputId, isDisabled: disabled, hasRequiredMarker: hasRequiredMarker, hasOptionalMarker: hasOptionalMarker, hasDefaultMarker: hasDefaultMarker, popover: popover }), description && (0, jsx_runtime_1.jsx)(FormDescription_1.FormDescription, { id: `${inputId}-description`, description: description, isDisabled: disabled })] }), (0, jsx_runtime_1.jsx)("div", { ref: inputContainerRef, children: (0, jsx_runtime_1.jsx)(Input_1.Input, { id: inputId, type: "text", value: inputValue, onChange: handleInputChange, disabled: disabled, required: hasRequiredMarker, readOnly: readOnly, autoFocus: autoFocus, name: name, placeholder: "YYYY-MM-DD", suffix: calendarButton, "aria-describedby": [description ? `${inputId}-description` : null, validationMessage ? `${inputId}-validation` : null].filter(Boolean).join(" ") || undefined, validationDisplayState: validationMessage ? "error" : "none" }) }), isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { placement: "bottom-start", anchorEl: inputContainerRef.current, open: isOpen, onClose: closeDropdown, elementId: dropdownAttributes.dropdownId, accessibleName: "Date picker calendar", accessibleRole: dropdownAttributes.dropdownAriaAttributes.role, children: (0, jsx_runtime_1.jsx)("div", { ref: setDropdownRef, children: (0, jsx_runtime_1.jsx)(DatePickerCalendar_1.DatePickerCalendar, { selected: selectedDate, onSelect: handleSelectDateInPicker, month: monthDisplayedInCalendar, onMonthChange: setMonthDisplayedInCalendar, startMonth: (0, date_fns_1.subMonths)(new Date(), startDateInMonths), endMonth: (0, date_fns_1.addMonths)(new Date(), endDateInMonths), disablePastDates: disablePastDates }) }) })), validationMessage && (0, jsx_runtime_1.jsx)(InputValidationMessage_1.InputValidationMessage, { message: validationMessage, displayState: "error", id: `${inputId}-validation` })] }));
}
const datePickerStyles = {
container: (0, css_1.css)({
display: "flex",
flexDirection: "column",
gap: design_system_tokens_1.space[8],
maxWidth: "37.5rem",
minWidth: "10.625rem",
}),
};