@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
38 lines (37 loc) • 3.48 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, jsxs as _jsxs } from "react/jsx-runtime";
import ReactDatePicker from "react-datepicker";
import { VuiButtonSecondary } from "../button/ButtonSecondary";
import classNames from "classnames";
import { VuiFlexContainer } from "../flex/FlexContainer";
export const VuiCalendar = (_a) => {
var { isInline, isRange, startDate, endDate, onChange, onReset, onCancel, placeholder, showTimeSelect, timeIntervals, minDate, maxDate, minTime, maxTime, filterDate, filterTime, injectTimes } = _a, rest = __rest(_a, ["isInline", "isRange", "startDate", "endDate", "onChange", "onReset", "onCancel", "placeholder", "showTimeSelect", "timeIntervals", "minDate", "maxDate", "minTime", "maxTime", "filterDate", "filterTime", "injectTimes"]);
const props = Object.assign(Object.assign(Object.assign(Object.assign({ inline: true, todayButton: "Today", placeholderText: placeholder !== null && placeholder !== void 0 ? placeholder : (isRange ? "Select date range" : "Select date") }, (minDate && { minDate })), (maxDate && { maxDate })), (filterDate && { filterDate })), (showTimeSelect && Object.assign(Object.assign(Object.assign(Object.assign({ showTimeSelect: true, timeIntervals: timeIntervals !== null && timeIntervals !== void 0 ? timeIntervals : 15, timeCaption: "Time" }, (minTime && { minTime })), (maxTime && { maxTime })), (filterTime && { filterTime })), (injectTimes && { injectTimes }))));
let calendar;
if (isRange) {
calendar = (_jsx(ReactDatePicker, Object.assign({ selectsRange: true, swapRange: true, selected: startDate, startDate: startDate, endDate: endDate, onChange: (dates) => {
var _a, _b;
onChange === null || onChange === void 0 ? void 0 : onChange((_a = dates === null || dates === void 0 ? void 0 : dates[0]) !== null && _a !== void 0 ? _a : undefined, (_b = dates === null || dates === void 0 ? void 0 : dates[1]) !== null && _b !== void 0 ? _b : undefined);
} }, props)));
}
else {
calendar = (_jsx(ReactDatePicker, Object.assign({ selected: startDate, onChange: (date) => {
onChange === null || onChange === void 0 ? void 0 : onChange(date !== null && date !== void 0 ? date : undefined);
} }, props)));
}
const classes = classNames("vuiDatePicker", {
"vuiDatePicker--inline": isInline
});
const actions = (onReset || onCancel) && (_jsxs(VuiFlexContainer, Object.assign({ className: "vuiDateRangePickerActions", spacing: "xxs" }, { children: [onReset && (_jsx(VuiButtonSecondary, Object.assign({ size: "xs", color: "neutral", onClick: onReset, "data-testid": "vuiDateRangePickerResetButton" }, { children: "Clear" }))), onCancel && (_jsx(VuiButtonSecondary, Object.assign({ size: "xs", color: "neutral", onClick: onCancel, "data-testid": "vuiDateRangePickerCancelButton" }, { children: "Cancel" })))] })));
return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [calendar, actions] })));
};