@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
59 lines (58 loc) • 3.78 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import { jsx as _jsx } from "react/jsx-runtime";
import { VuiPopover } from "../popover/Popover";
import { VuiTextInput } from "../form";
import { formatDate } from "../../utils";
import { useEffect, useState } from "react";
import { VuiCalendar } from "./Calendar";
export const VuiDateRangePicker = (_a) => {
var { setIsOpen, startDate, endDate, onChange, dateRangeProps, fullWidth, canClear, input } = _a, rest = __rest(_a, ["setIsOpen", "startDate", "endDate", "onChange", "dateRangeProps", "fullWidth", "canClear", "input"]);
const [initialStartDate, setInitialStartDate] = useState();
const [initialEndDate, setInitialEndDate] = useState();
// When the startDate or endDate props change, update the internal state.
useEffect(() => {
// Set hours, minutes, seconds, and milliseconds to zero to capture entire beginning of range.
setInitialStartDate(startDate ? new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate(), 0, 0, 0, 0) : undefined);
// Set hours, minutes, seconds, and milliseconds to end of the day to capture entire end of range.
setInitialEndDate(endDate ? new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate(), 23, 59, 59, 999) : undefined);
}, [startDate, endDate]);
const dateRangePicker = (_jsx(VuiCalendar, { isRange: true, startDate: initialStartDate, endDate: initialEndDate, onChange: (startDate, endDate) => {
setInitialStartDate(startDate);
setInitialEndDate(endDate);
}, placeholder: dateRangeProps === null || dateRangeProps === void 0 ? void 0 : dateRangeProps.placeholder, "data-testid": dateRangeProps === null || dateRangeProps === void 0 ? void 0 : dateRangeProps["data-testid"], onCancel: () => {
setInitialStartDate(startDate);
setInitialEndDate(endDate);
setIsOpen(false);
}, onReset: canClear
? () => {
setInitialStartDate(undefined);
setInitialEndDate(undefined);
}
: undefined }));
const humanizedStartDate = initialStartDate ? formatDate(initialStartDate) : "Unselected start date";
const humanizedEndDate = initialEndDate ? formatDate(initialEndDate) : "unselected end date";
const { "data-testid": testId } = rest, restProps = __rest(rest, ["data-testid"]);
const inputEl = input !== null && input !== void 0 ? input : (_jsx(VuiTextInput, { className: "vuiDateRangePickerInput", value: !initialStartDate && !initialEndDate ? "Select date range" : `${humanizedStartDate} to ${humanizedEndDate}`, fullWidth: fullWidth, "data-testid": testId }));
return (_jsx(VuiPopover, Object.assign({ setIsOpen: (isOpen) => {
if (isOpen) {
// Set temporary internal state to the provided values when opening the popover.
setInitialStartDate(startDate);
setInitialEndDate(endDate);
}
else {
// Commit internal state to the parent component when closing the popover.
onChange === null || onChange === void 0 ? void 0 : onChange(initialStartDate, initialEndDate);
}
setIsOpen(isOpen);
}, button: inputEl }, restProps, { children: dateRangePicker })));
};