flowbite-react
Version:
Official React components built for Flowbite and Tailwind CSS
1 lines • 4.34 kB
Source Map (JSON)
{"version":3,"file":"Days.mjs","sources":["../../../../../src/components/Datepicker/Views/Days.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { twMerge } from \"tailwind-merge\";\nimport { mergeDeep } from \"../../../helpers/merge-deep\";\nimport type { DeepPartial } from \"../../../types\";\nimport { useDatePickerContext } from \"../DatepickerContext\";\nimport { addDays, getFirstDayOfTheMonth, getFormattedDate, getWeekDays, isDateEqual, isDateInRange } from \"../helpers\";\n\nexport interface FlowbiteDatepickerViewsDaysTheme {\n header: {\n base: string;\n title: string;\n };\n items: {\n base: string;\n item: {\n base: string;\n selected: string;\n disabled: string;\n };\n };\n}\n\nexport interface DatepickerViewsDaysProps {\n theme?: DeepPartial<FlowbiteDatepickerViewsDaysTheme>;\n}\n\nexport const DatepickerViewsDays: FC<DatepickerViewsDaysProps> = ({ theme: customTheme = {} }) => {\n const {\n theme: rootTheme,\n weekStart,\n minDate,\n maxDate,\n viewDate,\n selectedDate,\n changeSelectedDate,\n language,\n } = useDatePickerContext();\n\n const theme = mergeDeep(rootTheme.views.days, customTheme);\n\n const weekDays = getWeekDays(language, weekStart);\n const startDate = getFirstDayOfTheMonth(viewDate, weekStart);\n\n return (\n <>\n <div className={theme.header.base}>\n {weekDays.map((day, index) => (\n <span key={index} className={theme.header.title}>\n {day}\n </span>\n ))}\n </div>\n <div className={theme.items.base}>\n {[...Array(42)].map((_date, index) => {\n const currentDate = addDays(startDate, index);\n const day = getFormattedDate(language, currentDate, { day: \"numeric\" });\n\n const isSelected = isDateEqual(selectedDate, currentDate);\n const isDisabled = !isDateInRange(currentDate, minDate, maxDate);\n\n return (\n <button\n disabled={isDisabled}\n key={index}\n type=\"button\"\n className={twMerge(\n theme.items.item.base,\n isSelected && theme.items.item.selected,\n isDisabled && theme.items.item.disabled,\n )}\n onClick={() => {\n if (isDisabled) return;\n\n changeSelectedDate(currentDate, true);\n }}\n >\n {day}\n </button>\n );\n })}\n </div>\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;AAMY,MAAC,mBAAmB,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,GAAG,EAAE,EAAE,KAAK;AACpE,EAAE,MAAM;AACR,IAAI,KAAK,EAAE,SAAS;AACpB,IAAI,SAAS;AACb,IAAI,OAAO;AACX,IAAI,OAAO;AACX,IAAI,QAAQ;AACZ,IAAI,YAAY;AAChB,IAAI,kBAAkB;AACtB,IAAI,QAAQ;AACZ,GAAG,GAAG,oBAAoB,EAAE,CAAC;AAC7B,EAAE,MAAM,KAAK,GAAG,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;AAC7D,EAAE,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AACpD,EAAE,MAAM,SAAS,GAAG,qBAAqB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AAC/D,EAAE,uBAAuB,IAAI,CAAC,QAAQ,EAAE,EAAE,QAAQ,EAAE;AACpD,oBAAoB,GAAG,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,qBAAqB,GAAG,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC;AAC9L,oBAAoB,GAAG,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,KAAK,CAAC,IAAI,EAAE,QAAQ,EAAE,CAAC,GAAG,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK;AAC7G,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;AACpD,MAAM,MAAM,GAAG,GAAG,gBAAgB,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC;AAC9E,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;AAChE,MAAM,MAAM,UAAU,GAAG,CAAC,aAAa,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AACvE,MAAM,uBAAuB,GAAG;AAChC,QAAQ,QAAQ;AAChB,QAAQ;AACR,UAAU,QAAQ,EAAE,UAAU;AAC9B,UAAU,IAAI,EAAE,QAAQ;AACxB,UAAU,SAAS,EAAE,OAAO;AAC5B,YAAY,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;AACjC,YAAY,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ;AACnD,YAAY,UAAU,IAAI,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ;AACnD,WAAW;AACX,UAAU,OAAO,EAAE,MAAM;AACzB,YAAY,IAAI,UAAU;AAC1B,cAAc,OAAO;AACrB,YAAY,kBAAkB,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAClD,WAAW;AACX,UAAU,QAAQ,EAAE,GAAG;AACvB,SAAS;AACT,QAAQ,KAAK;AACb,OAAO,CAAC;AACR,KAAK,CAAC,EAAE,CAAC;AACT,GAAG,EAAE,CAAC,CAAC;AACP;;;;"}