1
0
Fork 0

Added Statistics calculation

Statistics now show calculated values
This commit is contained in:
Techognito 2025-09-04 17:30:00 +02:00
parent fe87374e47
commit fc0f69dacb
2147 changed files with 141321 additions and 39 deletions

View file

@ -0,0 +1,18 @@
import * as React from 'react';
import { PickersCalendarHeaderProps } from "./PickersCalendarHeader.types.js";
type PickersCalendarHeaderComponent = ((props: PickersCalendarHeaderProps & React.RefAttributes<HTMLDivElement>) => React.JSX.Element) & {
propTypes?: any;
};
/**
* Demos:
*
* - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
* - [DateRangeCalendar](https://mui.com/x/react-date-pickers/date-range-calendar/)
* - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
*
* API:
*
* - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
*/
declare const PickersCalendarHeader: PickersCalendarHeaderComponent;
export { PickersCalendarHeader };

View file

@ -0,0 +1,277 @@
'use client';
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
const _excluded = ["slots", "slotProps", "currentMonth", "disabled", "disableFuture", "disablePast", "maxDate", "minDate", "onMonthChange", "onViewChange", "view", "reduceAnimations", "views", "labelId", "className", "classes", "timezone", "format"],
_excluded2 = ["ownerState"];
import * as React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import Fade from '@mui/material/Fade';
import { styled, useThemeProps } from '@mui/material/styles';
import useSlotProps from '@mui/utils/useSlotProps';
import composeClasses from '@mui/utils/composeClasses';
import IconButton from '@mui/material/IconButton';
import { usePickerAdapter, usePickerTranslations } from "../hooks/index.js";
import { PickersFadeTransitionGroup } from "../DateCalendar/PickersFadeTransitionGroup.js";
import { ArrowDropDownIcon } from "../icons/index.js";
import { PickersArrowSwitcher } from "../internals/components/PickersArrowSwitcher/index.js";
import { usePreviousMonthDisabled, useNextMonthDisabled } from "../internals/hooks/date-helpers-hooks.js";
import { getPickersCalendarHeaderUtilityClass, pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.js";
import { usePickerPrivateContext } from "../internals/hooks/usePickerPrivateContext.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const useUtilityClasses = classes => {
const slots = {
root: ['root'],
labelContainer: ['labelContainer'],
label: ['label'],
switchViewButton: ['switchViewButton'],
switchViewIcon: ['switchViewIcon']
};
return composeClasses(slots, getPickersCalendarHeaderUtilityClass, classes);
};
const PickersCalendarHeaderRoot = styled('div', {
name: 'MuiPickersCalendarHeader',
slot: 'Root'
})({
display: 'flex',
alignItems: 'center',
marginTop: 12,
marginBottom: 4,
paddingLeft: 24,
paddingRight: 12,
// prevent jumping in safari
maxHeight: 40,
minHeight: 40
});
const PickersCalendarHeaderLabelContainer = styled('div', {
name: 'MuiPickersCalendarHeader',
slot: 'LabelContainer'
})(({
theme
}) => _extends({
display: 'flex',
overflow: 'hidden',
alignItems: 'center',
cursor: 'pointer',
marginRight: 'auto'
}, theme.typography.body1, {
fontWeight: theme.typography.fontWeightMedium
}));
const PickersCalendarHeaderLabel = styled('div', {
name: 'MuiPickersCalendarHeader',
slot: 'Label'
})({
marginRight: 6
});
const PickersCalendarHeaderSwitchViewButton = styled(IconButton, {
name: 'MuiPickersCalendarHeader',
slot: 'SwitchViewButton'
})({
marginRight: 'auto',
variants: [{
props: {
view: 'year'
},
style: {
[`.${pickersCalendarHeaderClasses.switchViewIcon}`]: {
transform: 'rotate(180deg)'
}
}
}]
});
const PickersCalendarHeaderSwitchViewIcon = styled(ArrowDropDownIcon, {
name: 'MuiPickersCalendarHeader',
slot: 'SwitchViewIcon'
})(({
theme
}) => ({
willChange: 'transform',
transition: theme.transitions.create('transform'),
transform: 'rotate(0deg)'
}));
/**
* Demos:
*
* - [DateCalendar](https://mui.com/x/react-date-pickers/date-calendar/)
* - [DateRangeCalendar](https://mui.com/x/react-date-pickers/date-range-calendar/)
* - [Custom slots and subcomponents](https://mui.com/x/react-date-pickers/custom-components/)
*
* API:
*
* - [PickersCalendarHeader API](https://mui.com/x/api/date-pickers/pickers-calendar-header/)
*/
const PickersCalendarHeader = /*#__PURE__*/React.forwardRef(function PickersCalendarHeader(inProps, ref) {
const translations = usePickerTranslations();
const adapter = usePickerAdapter();
const props = useThemeProps({
props: inProps,
name: 'MuiPickersCalendarHeader'
});
const {
slots,
slotProps,
currentMonth: month,
disabled,
disableFuture,
disablePast,
maxDate,
minDate,
onMonthChange,
onViewChange,
view,
reduceAnimations,
views,
labelId,
className,
classes: classesProp,
timezone,
format = `${adapter.formats.month} ${adapter.formats.year}`
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const {
ownerState
} = usePickerPrivateContext();
const classes = useUtilityClasses(classesProp);
const SwitchViewButton = slots?.switchViewButton ?? PickersCalendarHeaderSwitchViewButton;
const switchViewButtonProps = useSlotProps({
elementType: SwitchViewButton,
externalSlotProps: slotProps?.switchViewButton,
additionalProps: {
size: 'small',
'aria-label': translations.calendarViewSwitchingButtonAriaLabel(view)
},
ownerState: _extends({}, ownerState, {
view
}),
className: classes.switchViewButton
});
const SwitchViewIcon = slots?.switchViewIcon ?? PickersCalendarHeaderSwitchViewIcon;
// The spread is here to avoid this bug mui/material-ui#34056
const _useSlotProps = useSlotProps({
elementType: SwitchViewIcon,
externalSlotProps: slotProps?.switchViewIcon,
ownerState,
className: classes.switchViewIcon
}),
switchViewIconProps = _objectWithoutPropertiesLoose(_useSlotProps, _excluded2);
const selectNextMonth = () => onMonthChange(adapter.addMonths(month, 1));
const selectPreviousMonth = () => onMonthChange(adapter.addMonths(month, -1));
const isNextMonthDisabled = useNextMonthDisabled(month, {
disableFuture,
maxDate,
timezone
});
const isPreviousMonthDisabled = usePreviousMonthDisabled(month, {
disablePast,
minDate,
timezone
});
const handleToggleView = () => {
if (views.length === 1 || !onViewChange || disabled) {
return;
}
if (views.length === 2) {
onViewChange(views.find(el => el !== view) || views[0]);
} else {
// switching only between first 2
const nextIndexToOpen = views.indexOf(view) !== 0 ? 0 : 1;
onViewChange(views[nextIndexToOpen]);
}
};
// No need to display more information
if (views.length === 1 && views[0] === 'year') {
return null;
}
const label = adapter.formatByString(month, format);
return /*#__PURE__*/_jsxs(PickersCalendarHeaderRoot, _extends({}, other, {
ownerState: ownerState,
className: clsx(classes.root, className),
ref: ref,
children: [/*#__PURE__*/_jsxs(PickersCalendarHeaderLabelContainer, {
role: "presentation",
onClick: handleToggleView,
ownerState: ownerState
// putting this on the label item element below breaks when using transition
,
"aria-live": "polite",
className: classes.labelContainer,
children: [/*#__PURE__*/_jsx(PickersFadeTransitionGroup, {
reduceAnimations: reduceAnimations,
transKey: label,
children: /*#__PURE__*/_jsx(PickersCalendarHeaderLabel, {
id: labelId,
ownerState: ownerState,
className: classes.label,
children: label
})
}), views.length > 1 && !disabled && /*#__PURE__*/_jsx(SwitchViewButton, _extends({}, switchViewButtonProps, {
children: /*#__PURE__*/_jsx(SwitchViewIcon, _extends({}, switchViewIconProps))
}))]
}), /*#__PURE__*/_jsx(Fade, {
in: view === 'day',
appear: !reduceAnimations,
enter: !reduceAnimations,
children: /*#__PURE__*/_jsx(PickersArrowSwitcher, {
slots: slots,
slotProps: slotProps,
onGoToPrevious: selectPreviousMonth,
isPreviousDisabled: isPreviousMonthDisabled,
previousLabel: translations.previousMonth,
onGoToNext: selectNextMonth,
isNextDisabled: isNextMonthDisabled,
nextLabel: translations.nextMonth
})
})]
}));
});
if (process.env.NODE_ENV !== "production") PickersCalendarHeader.displayName = "PickersCalendarHeader";
process.env.NODE_ENV !== "production" ? PickersCalendarHeader.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
/**
* Override or extend the styles applied to the component.
*/
classes: PropTypes.object,
className: PropTypes.string,
currentMonth: PropTypes.object.isRequired,
disabled: PropTypes.bool,
disableFuture: PropTypes.bool,
disablePast: PropTypes.bool,
/**
* Format used to display the date.
* @default `${adapter.formats.month} ${adapter.formats.year}`
*/
format: PropTypes.string,
/**
* Id of the calendar text element.
* It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
*/
labelId: PropTypes.string,
maxDate: PropTypes.object.isRequired,
minDate: PropTypes.object.isRequired,
onMonthChange: PropTypes.func.isRequired,
onViewChange: PropTypes.func,
reduceAnimations: PropTypes.bool.isRequired,
/**
* The props used for each component slot.
* @default {}
*/
slotProps: PropTypes.object,
/**
* Overridable component slots.
* @default {}
*/
slots: PropTypes.object,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
timezone: PropTypes.string.isRequired,
view: PropTypes.oneOf(['day', 'month', 'year']).isRequired,
views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'month', 'year']).isRequired).isRequired
} : void 0;
export { PickersCalendarHeader };

View file

@ -0,0 +1,60 @@
import * as React from 'react';
import { SlotComponentProps } from '@mui/utils/types';
import IconButton from '@mui/material/IconButton';
import SvgIcon from '@mui/material/SvgIcon';
import { SxProps, Theme } from '@mui/material/styles';
import { ExportedPickersArrowSwitcherProps, PickersArrowSwitcherSlots, PickersArrowSwitcherSlotProps } from "../internals/components/PickersArrowSwitcher/index.js";
import { MonthValidationOptions } from "../internals/hooks/date-helpers-hooks.js";
import { PickerValidDate, DateView, PickerOwnerState } from "../models/index.js";
import { PickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.js";
export interface PickersCalendarHeaderSlots extends PickersArrowSwitcherSlots {
/**
* Button displayed to switch between different calendar views.
* @default IconButton
*/
switchViewButton?: React.ElementType;
/**
* Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is `year`.
* @default ArrowDropDown
*/
switchViewIcon?: React.ElementType;
}
export interface PickersCalendarHeaderSlotPropsOverrides {}
export interface PickersCalendarHeaderSlotProps extends PickersArrowSwitcherSlotProps {
switchViewButton?: SlotComponentProps<typeof IconButton, PickersCalendarHeaderSlotPropsOverrides, PickerOwnerState>;
switchViewIcon?: SlotComponentProps<typeof SvgIcon, PickersCalendarHeaderSlotPropsOverrides, PickerOwnerState>;
}
export interface PickersCalendarHeaderProps extends ExportedPickersArrowSwitcherProps, MonthValidationOptions {
/**
* Overridable component slots.
* @default {}
*/
slots?: PickersCalendarHeaderSlots;
/**
* The props used for each component slot.
* @default {}
*/
slotProps?: PickersCalendarHeaderSlotProps;
currentMonth: PickerValidDate;
disabled?: boolean;
views: readonly DateView[];
onMonthChange: (date: PickerValidDate) => void;
view: DateView;
reduceAnimations: boolean;
onViewChange?: (view: DateView) => void;
/**
* Id of the calendar text element.
* It is used to establish an `aria-labelledby` relationship with the calendar `grid` element.
*/
labelId?: string;
/**
* Override or extend the styles applied to the component.
*/
classes?: Partial<PickersCalendarHeaderClasses>;
className?: string;
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx?: SxProps<Theme>;
}
export type ExportedPickersCalendarHeaderProps = Pick<PickersCalendarHeaderProps, 'classes' | 'slots' | 'slotProps'>;

View file

@ -0,0 +1 @@
export {};

View file

@ -0,0 +1,4 @@
export { pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.js";
export type { PickersCalendarHeaderClassKey, PickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.js";
export { PickersCalendarHeader } from "./PickersCalendarHeader.js";
export type { PickersCalendarHeaderProps, PickersCalendarHeaderSlots, PickersCalendarHeaderSlotProps, ExportedPickersCalendarHeaderProps } from "./PickersCalendarHeader.types.js";

View file

@ -0,0 +1,2 @@
export { pickersCalendarHeaderClasses } from "./pickersCalendarHeaderClasses.js";
export { PickersCalendarHeader } from "./PickersCalendarHeader.js";

View file

@ -0,0 +1,15 @@
export interface PickersCalendarHeaderClasses {
/** Styles applied to the root element. */
root: string;
/** Styles applied to the label container element. */
labelContainer: string;
/** Styles applied to the label element. */
label: string;
/** Styles applied to the switch view button element. */
switchViewButton: string;
/** Styles applied to the switch view icon element. */
switchViewIcon: string;
}
export type PickersCalendarHeaderClassKey = keyof PickersCalendarHeaderClasses;
export declare const getPickersCalendarHeaderUtilityClass: (slot: string) => string;
export declare const pickersCalendarHeaderClasses: PickersCalendarHeaderClasses;

View file

@ -0,0 +1,4 @@
import generateUtilityClass from '@mui/utils/generateUtilityClass';
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
export const getPickersCalendarHeaderUtilityClass = slot => generateUtilityClass('MuiPickersCalendarHeader', slot);
export const pickersCalendarHeaderClasses = generateUtilityClasses('MuiPickersCalendarHeader', ['root', 'labelContainer', 'label', 'switchViewButton', 'switchViewIcon']);