puppy-lib-components
Version:
A modern TypeScript React component library with generic UI components and football pickem domain components
22 lines (21 loc) • 2.75 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Popover, Box, Button } from '@mui/material';
import { Calendar } from './Calendar';
import { RangePositionIndicator } from './RangePositionIndicator';
export const DesktopPicker = ({ open, anchorEl, onClose, currentValue, rangePosition, onRangePositionChange, onDateChange, onAccept, onClear, calendars, clearable, minDate, maxDate, disableFuture, disablePast, shouldDisableDate, showDaysOutsideCurrentMonth, }) => {
const startDate = currentValue.start || new Date();
const endDate = currentValue.end || new Date();
// Calculate the second calendar date
const secondCalendarDate = calendars > 1 ?
new Date(startDate.getFullYear(), startDate.getMonth() + 1, 1) :
startDate;
return (_jsxs(Popover, { open: open, anchorEl: anchorEl, onClose: onClose, anchorOrigin: {
vertical: 'bottom',
horizontal: 'left',
}, transformOrigin: {
vertical: 'top',
horizontal: 'left',
}, PaperProps: {
sx: { p: 2, minWidth: calendars > 1 ? 600 : 300 }
}, children: [_jsx(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-start' }, children: _jsx(Box, { sx: { mb: 2, width: '100%' }, children: _jsx(RangePositionIndicator, { rangePosition: rangePosition, onRangePositionChange: onRangePositionChange }) }) }), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Calendar, { date: startDate, onDateChange: (date) => onDateChange(date, 0), selectedStart: currentValue.start, selectedEnd: currentValue.end, rangePosition: rangePosition, onRangePositionChange: onRangePositionChange, minDate: minDate, maxDate: maxDate, disableFuture: disableFuture, disablePast: disablePast, shouldDisableDate: shouldDisableDate, showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth }), calendars > 1 && (_jsx(Calendar, { date: secondCalendarDate, onDateChange: (date) => onDateChange(date, 1), selectedStart: currentValue.start, selectedEnd: currentValue.end, rangePosition: rangePosition, onRangePositionChange: onRangePositionChange, minDate: minDate, maxDate: maxDate, disableFuture: disableFuture, disablePast: disablePast, shouldDisableDate: shouldDisableDate, showDaysOutsideCurrentMonth: showDaysOutsideCurrentMonth }))] }), _jsxs(Box, { sx: { display: 'flex', justifyContent: 'flex-end', gap: 1, mt: 2 }, children: [clearable && (currentValue.start || currentValue.end) && (_jsx(Button, { onClick: onClear, size: "small", children: "Clear" })), _jsx(Button, { onClick: onClose, size: "small", children: "Cancel" }), _jsx(Button, { onClick: onAccept, variant: "contained", size: "small", disabled: !currentValue.start || !currentValue.end, children: "OK" })] })] }));
};