flowbite-react/dist/cjs/components/Datepicker/Views/Decades.cjs

Official React components built for Flowbite and Tailwind CSS

'use strict';

var jsxRuntime = require('react/jsx-runtime');
var tailwindMerge = require('tailwind-merge');
var mergeDeep = require('../../../helpers/merge-deep.cjs');
var DatepickerContext = require('../DatepickerContext.cjs');
var helpers = require('../helpers.cjs');

const DatepickerViewsDecades = ({ theme: customTheme = {} }) => {
  const { theme: rootTheme, selectedDate, viewDate, setViewDate, setView } = DatepickerContext.useDatePickerContext();
  const theme = mergeDeep.mergeDeep(rootTheme.views.decades, customTheme);
  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: theme.items.base, children: [...Array(12)].map((_year, index) => {
    const first = helpers.startOfYearPeriod(viewDate, 100);
    const year = first - 10 + index * 10;
    const firstDate = new Date(year, 0, 1);
    const lastDate = helpers.addYears(firstDate, 9);
    const isSelected = helpers.isDateInDecade(viewDate, year);
    const isDisabled = !helpers.isDateInRange(viewDate, firstDate, lastDate);
    return /* @__PURE__ */ jsxRuntime.jsx(
      "button",
      {
        disabled: isDisabled,
        type: "button",
        className: tailwindMerge.twMerge(
          theme.items.item.base,
          isSelected && theme.items.item.selected,
          isDisabled && theme.items.item.disabled
        ),
        onClick: () => {
          if (isDisabled)
            return;
          setViewDate(helpers.addYears(viewDate, year - selectedDate.getFullYear()));
          setView(helpers.Views.Years);
        },
        children: year
      },
      index
    );
  }) });
};

exports.DatepickerViewsDecades = DatepickerViewsDecades;
//# sourceMappingURL=Decades.cjs.map