@vertisanpro/flowbite-react
Version:
Non-Official React components built for Flowbite and Tailwind CSS
23 lines (22 loc) • 1.38 kB
JavaScript
import { twMerge } from '@vertisanpro/tailwind-merge';
import React from 'react';
import { mergeDeep } from '../../../helpers/merge-deep';
import { useDatePickerContext } from '../DatepickerContext';
import { Views, getFormattedDate, isDateEqual, isDateInRange } from '../helpers';
export const DatepickerViewsMonth = ({ theme: customTheme = {} }) => {
const { theme: rootTheme, minDate, maxDate, selectedDate, viewDate, language, setViewDate, setView, } = useDatePickerContext();
const theme = mergeDeep(rootTheme.views.months, customTheme);
return (React.createElement("div", { className: theme.items.base }, [...Array(12)].map((_month, index) => {
const newDate = new Date(viewDate.getTime());
newDate.setMonth(index);
const month = getFormattedDate(language, newDate, { month: 'short' });
const isSelected = isDateEqual(selectedDate, newDate);
const isDisabled = !isDateInRange(newDate, minDate, maxDate);
return (React.createElement("button", { disabled: isDisabled, key: index, type: "button", className: twMerge(theme.items.item.base, isSelected && theme.items.item.selected, isDisabled && theme.items.item.disabled), onClick: () => {
if (isDisabled)
return;
setViewDate(newDate);
setView(Views.Days);
} }, month));
})));
};