react-day-picker 8.0.1 → 8.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -2
- package/dist/components/Caption/Caption.d.ts +2 -2
- package/dist/components/CaptionDropdowns/CaptionDropdowns.d.ts +5 -0
- package/dist/components/CaptionDropdowns/index.d.ts +1 -0
- package/dist/components/CaptionNavigation/CaptionNavigation.d.ts +5 -0
- package/dist/components/CaptionNavigation/index.d.ts +1 -0
- package/dist/components/Head/utils/getWeekdays.d.ts +3 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.esm.js +121 -95
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +123 -94
- package/dist/index.js.map +1 -1
- package/dist/react-day-picker.min.js +1 -1
- package/dist/types/DayPickerBase.d.ts +4 -0
- package/package.json +5 -5
- package/CHANGELOG.md +0 -26
package/README.md
CHANGED
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
DayPicker is a date picker component for [React](https://reactjs.org).
|
|
4
4
|
|
|
5
5
|
```bash
|
|
6
|
-
$ npm install react-day-picker date-fns
|
|
7
|
-
$
|
|
6
|
+
$ npm install react-day-picker date-fns # using npm
|
|
7
|
+
$ pnpm install react-day-picker date-fns # using pnpm
|
|
8
|
+
$ yarn add react-day-picker date-fns # using yarn
|
|
8
9
|
```
|
|
9
10
|
|
|
10
11
|
<a href="https://www.npmjs.com/package/react-day-picker">
|
|
@@ -13,7 +13,7 @@ export interface CaptionProps {
|
|
|
13
13
|
*/
|
|
14
14
|
export declare type CaptionLayout = 'dropdown' | 'buttons';
|
|
15
15
|
/**
|
|
16
|
-
* Render the caption of a month
|
|
17
|
-
*
|
|
16
|
+
* Render the caption of a month. The caption has a different layout when
|
|
17
|
+
* setting the [[DayPickerProps.captionLayout]] prop.
|
|
18
18
|
*/
|
|
19
19
|
export declare function Caption(props: CaptionProps): JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './CaptionDropdowns';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './CaptionNavigation';
|
|
@@ -3,4 +3,6 @@ import { Locale } from 'date-fns';
|
|
|
3
3
|
* Generate a series of 7 days, starting from the week, to use for formatting
|
|
4
4
|
* the weekday names (Monday, Tuesday, etc.).
|
|
5
5
|
*/
|
|
6
|
-
export declare function getWeekdays(locale?: Locale
|
|
6
|
+
export declare function getWeekdays(locale?: Locale,
|
|
7
|
+
/** The index of the first day of the week (0 - Sunday) */
|
|
8
|
+
weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): Date[];
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
export * from './DayPicker';
|
|
2
2
|
export * from './components/Button';
|
|
3
3
|
export * from './components/Caption';
|
|
4
|
+
export * from './components/CaptionDropdowns';
|
|
4
5
|
export * from './components/CaptionLabel';
|
|
6
|
+
export * from './components/CaptionNavigation';
|
|
5
7
|
export * from './components/Day';
|
|
6
8
|
export * from './components/DayContent';
|
|
7
9
|
export * from './components/Dropdown';
|
package/dist/index.esm.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useLayoutEffect, useEffect, useState, createContext, useContext, forwardRef, useRef } from 'react';
|
|
2
|
-
import { format, startOfDay, startOfMonth, isSameYear, setMonth, setYear, startOfYear, differenceInCalendarMonths, addMonths, isSameMonth, isBefore, startOfWeek, addDays, isSameDay, isAfter, differenceInCalendarDays, isDate, endOfMonth, addWeeks, endOfWeek, addYears, getUnixTime, getWeek, getWeeksInMonth, parse } from 'date-fns';
|
|
3
2
|
import enUS from 'date-fns/locale/en-US';
|
|
3
|
+
import { format, startOfDay, startOfMonth, isSameYear, setMonth, setYear, startOfYear, differenceInCalendarMonths, addMonths, isSameMonth, isBefore, startOfWeek, addDays, isSameDay, isAfter, differenceInCalendarDays, isDate, endOfMonth, addWeeks, endOfWeek, addYears, getUnixTime, getWeek, getWeeksInMonth, parse } from 'date-fns';
|
|
4
|
+
import isSameMonth$1 from 'date-fns/isSameMonth';
|
|
4
5
|
|
|
5
6
|
/*! *****************************************************************************
|
|
6
7
|
Copyright (c) Microsoft Corporation.
|
|
@@ -470,7 +471,8 @@ function DayPickerProvider(props) {
|
|
|
470
471
|
style: initialProps.style,
|
|
471
472
|
styles: __assign(__assign({}, defaults.styles), initialProps.styles),
|
|
472
473
|
toDate: toDate,
|
|
473
|
-
today: (_d = initialProps.today) !== null && _d !== void 0 ? _d : defaults.today
|
|
474
|
+
today: (_d = initialProps.today) !== null && _d !== void 0 ? _d : defaults.today,
|
|
475
|
+
weekStartsOn: initialProps.weekStartsOn
|
|
474
476
|
};
|
|
475
477
|
return (React.createElement(DayPickerContext.Provider, { value: value }, props.children));
|
|
476
478
|
}
|
|
@@ -553,63 +555,6 @@ function MonthsDropdown(props) {
|
|
|
553
555
|
return (React.createElement(DropdownComponent, { "aria-label": labelMonthDropdown(), className: classNames.dropdown_month, style: styles.dropdown_month, onChange: handleChange, value: props.displayMonth.getMonth(), caption: formatMonthCaption(props.displayMonth, { locale: locale }) }, dropdownMonths.map(function (m) { return (React.createElement("option", { key: m.getMonth(), value: m.getMonth() }, formatMonthCaption(m, { locale: locale }))); })));
|
|
554
556
|
}
|
|
555
557
|
|
|
556
|
-
/**
|
|
557
|
-
* Render the "previous month" button in the navigation.
|
|
558
|
-
*/
|
|
559
|
-
function IconLeft(props) {
|
|
560
|
-
return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
|
|
561
|
-
React.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
/**
|
|
565
|
-
* Render the "next month" button in the navigation.
|
|
566
|
-
*/
|
|
567
|
-
function IconRight(props) {
|
|
568
|
-
return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
|
|
569
|
-
React.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
|
|
570
|
-
}
|
|
571
|
-
|
|
572
|
-
/**
|
|
573
|
-
* Render a button HTML element applying the reset class name.
|
|
574
|
-
*/
|
|
575
|
-
var Button = forwardRef(function (props, ref) {
|
|
576
|
-
var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
|
|
577
|
-
var classNamesArr = [classNames.button_reset, classNames.button];
|
|
578
|
-
if (props.className) {
|
|
579
|
-
classNamesArr.push(props.className);
|
|
580
|
-
}
|
|
581
|
-
var className = classNamesArr.join(' ');
|
|
582
|
-
var style = __assign(__assign({}, styles.button_reset), styles.button);
|
|
583
|
-
if (props.style) {
|
|
584
|
-
Object.assign(style, props.style);
|
|
585
|
-
}
|
|
586
|
-
return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
|
|
587
|
-
});
|
|
588
|
-
|
|
589
|
-
/** A component rendering the navigation buttons or the drop-downs. */
|
|
590
|
-
function Navigation(props) {
|
|
591
|
-
var _a, _b;
|
|
592
|
-
var _c = useDayPicker(), dir = _c.dir, locale = _c.locale, classNames = _c.classNames, styles = _c.styles, _d = _c.labels, labelPrevious = _d.labelPrevious, labelNext = _d.labelNext, components = _c.components;
|
|
593
|
-
if (!props.nextMonth && !props.previousMonth) {
|
|
594
|
-
return React.createElement(React.Fragment, null);
|
|
595
|
-
}
|
|
596
|
-
var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
|
|
597
|
-
var previousClassName = [
|
|
598
|
-
classNames.nav_button,
|
|
599
|
-
classNames.nav_button_previous
|
|
600
|
-
].join(' ');
|
|
601
|
-
var nextLabel = labelNext(props.nextMonth, { locale: locale });
|
|
602
|
-
var nextClassName = [
|
|
603
|
-
classNames.nav_button,
|
|
604
|
-
classNames.nav_button_next
|
|
605
|
-
].join(' ');
|
|
606
|
-
var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
|
|
607
|
-
var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
|
|
608
|
-
return (React.createElement("div", { className: classNames.nav, style: styles.nav },
|
|
609
|
-
!props.hidePrevious && (React.createElement(Button, { "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
|
|
610
|
-
!props.hideNext && (React.createElement(Button, { "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
|
|
611
|
-
}
|
|
612
|
-
|
|
613
558
|
/**
|
|
614
559
|
* Render a dropdown to change the year. Take in account the `nav.fromDate` and
|
|
615
560
|
* `toDate` from context.
|
|
@@ -809,14 +754,99 @@ function useNavigation() {
|
|
|
809
754
|
}
|
|
810
755
|
|
|
811
756
|
/**
|
|
812
|
-
* Render
|
|
813
|
-
* The caption has a different layout when setting the [[DayPickerProps.captionLayout]] prop.
|
|
757
|
+
* Render a caption with the dropdowns to navigate between months and years.
|
|
814
758
|
*/
|
|
815
|
-
function
|
|
759
|
+
function CaptionDropdowns(props) {
|
|
760
|
+
var _a;
|
|
761
|
+
var _b = useDayPicker(), classNames = _b.classNames, styles = _b.styles, onMonthChange = _b.onMonthChange, components = _b.components;
|
|
762
|
+
var goToMonth = useNavigation().goToMonth;
|
|
763
|
+
var handleMonthChange = function (newMonth) {
|
|
764
|
+
goToMonth(newMonth);
|
|
765
|
+
onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
|
|
766
|
+
};
|
|
767
|
+
var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
|
|
768
|
+
var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
|
|
769
|
+
return (React.createElement("div", { className: classNames.caption_dropdowns, style: styles.caption_dropdowns },
|
|
770
|
+
React.createElement("div", { className: classNames.vhidden }, captionLabel),
|
|
771
|
+
React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
|
|
772
|
+
React.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
|
|
773
|
+
}
|
|
774
|
+
|
|
775
|
+
/**
|
|
776
|
+
* Render the "previous month" button in the navigation.
|
|
777
|
+
*/
|
|
778
|
+
function IconLeft(props) {
|
|
779
|
+
return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
|
|
780
|
+
React.createElement("path", { d: "M69.490332,3.34314575 C72.6145263,0.218951416 77.6798462,0.218951416 80.8040405,3.34314575 C83.8617626,6.40086786 83.9268205,11.3179931 80.9992143,14.4548388 L80.8040405,14.6568542 L35.461,60 L80.8040405,105.343146 C83.8617626,108.400868 83.9268205,113.317993 80.9992143,116.454839 L80.8040405,116.656854 C77.7463184,119.714576 72.8291931,119.779634 69.6923475,116.852028 L69.490332,116.656854 L18.490332,65.6568542 C15.4326099,62.5991321 15.367552,57.6820069 18.2951583,54.5451612 L18.490332,54.3431458 L69.490332,3.34314575 Z", fill: "currentColor", fillRule: "nonzero" })));
|
|
781
|
+
}
|
|
782
|
+
|
|
783
|
+
/**
|
|
784
|
+
* Render the "next month" button in the navigation.
|
|
785
|
+
*/
|
|
786
|
+
function IconRight(props) {
|
|
787
|
+
return (React.createElement("svg", __assign({ width: "16px", height: "16px", viewBox: "0 0 120 120" }, props),
|
|
788
|
+
React.createElement("path", { d: "M49.8040405,3.34314575 C46.6798462,0.218951416 41.6145263,0.218951416 38.490332,3.34314575 C35.4326099,6.40086786 35.367552,11.3179931 38.2951583,14.4548388 L38.490332,14.6568542 L83.8333725,60 L38.490332,105.343146 C35.4326099,108.400868 35.367552,113.317993 38.2951583,116.454839 L38.490332,116.656854 C41.5480541,119.714576 46.4651794,119.779634 49.602025,116.852028 L49.8040405,116.656854 L100.804041,65.6568542 C103.861763,62.5991321 103.926821,57.6820069 100.999214,54.5451612 L100.804041,54.3431458 L49.8040405,3.34314575 Z", fill: "currentColor" })));
|
|
789
|
+
}
|
|
790
|
+
|
|
791
|
+
/**
|
|
792
|
+
* Render a button HTML element applying the reset class name.
|
|
793
|
+
*/
|
|
794
|
+
var Button = forwardRef(function (props, ref) {
|
|
795
|
+
var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles;
|
|
796
|
+
var classNamesArr = [classNames.button_reset, classNames.button];
|
|
797
|
+
if (props.className) {
|
|
798
|
+
classNamesArr.push(props.className);
|
|
799
|
+
}
|
|
800
|
+
var className = classNamesArr.join(' ');
|
|
801
|
+
var style = __assign(__assign({}, styles.button_reset), styles.button);
|
|
802
|
+
if (props.style) {
|
|
803
|
+
Object.assign(style, props.style);
|
|
804
|
+
}
|
|
805
|
+
return (React.createElement("button", __assign({}, props, { ref: ref, type: "button", className: className, style: style })));
|
|
806
|
+
});
|
|
807
|
+
|
|
808
|
+
/** A component rendering the navigation buttons or the drop-downs. */
|
|
809
|
+
function Navigation(props) {
|
|
810
|
+
var _a, _b;
|
|
811
|
+
var _c = useDayPicker(), dir = _c.dir, locale = _c.locale, classNames = _c.classNames, styles = _c.styles, _d = _c.labels, labelPrevious = _d.labelPrevious, labelNext = _d.labelNext, components = _c.components;
|
|
812
|
+
if (!props.nextMonth && !props.previousMonth) {
|
|
813
|
+
return React.createElement(React.Fragment, null);
|
|
814
|
+
}
|
|
815
|
+
var previousLabel = labelPrevious(props.previousMonth, { locale: locale });
|
|
816
|
+
var previousClassName = [
|
|
817
|
+
classNames.nav_button,
|
|
818
|
+
classNames.nav_button_previous
|
|
819
|
+
].join(' ');
|
|
820
|
+
var nextLabel = labelNext(props.nextMonth, { locale: locale });
|
|
821
|
+
var nextClassName = [
|
|
822
|
+
classNames.nav_button,
|
|
823
|
+
classNames.nav_button_next
|
|
824
|
+
].join(' ');
|
|
825
|
+
var IconRightComponent = (_a = components === null || components === void 0 ? void 0 : components.IconRight) !== null && _a !== void 0 ? _a : IconRight;
|
|
826
|
+
var IconLeftComponent = (_b = components === null || components === void 0 ? void 0 : components.IconLeft) !== null && _b !== void 0 ? _b : IconLeft;
|
|
827
|
+
return (React.createElement("div", { className: classNames.nav, style: styles.nav },
|
|
828
|
+
!props.hidePrevious && (React.createElement(Button, { "aria-label": previousLabel, className: previousClassName, style: styles.nav_button_previous, disabled: !props.previousMonth, onClick: props.onPreviousClick }, dir === 'rtl' ? (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })))),
|
|
829
|
+
!props.hideNext && (React.createElement(Button, { "aria-label": nextLabel, className: nextClassName, style: styles.nav_button_next, disabled: !props.nextMonth, onClick: props.onNextClick }, dir === 'rtl' ? (React.createElement(IconLeftComponent, { className: classNames.nav_icon, style: styles.nav_icon })) : (React.createElement(IconRightComponent, { className: classNames.nav_icon, style: styles.nav_icon }))))));
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
/**
|
|
833
|
+
* Render a caption with a button-based navigation.
|
|
834
|
+
*/
|
|
835
|
+
function CaptionNavigation(props) {
|
|
816
836
|
var _a;
|
|
817
837
|
var _b;
|
|
818
|
-
var _c = useDayPicker(),
|
|
838
|
+
var _c = useDayPicker(), numberOfMonths = _c.numberOfMonths, onMonthChange = _c.onMonthChange, dir = _c.dir, components = _c.components;
|
|
819
839
|
var _d = useNavigation(), previousMonth = _d.previousMonth, nextMonth = _d.nextMonth, goToMonth = _d.goToMonth, displayMonths = _d.displayMonths;
|
|
840
|
+
var displayIndex = displayMonths.findIndex(function (month) {
|
|
841
|
+
return isSameMonth$1(props.displayMonth, month);
|
|
842
|
+
});
|
|
843
|
+
var isFirst = displayIndex === 0;
|
|
844
|
+
var isLast = displayIndex === displayMonths.length - 1;
|
|
845
|
+
if (dir === 'rtl') {
|
|
846
|
+
_a = [isFirst, isLast], isLast = _a[0], isFirst = _a[1];
|
|
847
|
+
}
|
|
848
|
+
var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
|
|
849
|
+
var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
|
|
820
850
|
var handlePreviousClick = function () {
|
|
821
851
|
if (!previousMonth)
|
|
822
852
|
return;
|
|
@@ -829,38 +859,32 @@ function Caption(props) {
|
|
|
829
859
|
goToMonth(nextMonth);
|
|
830
860
|
onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(nextMonth);
|
|
831
861
|
};
|
|
832
|
-
var handleMonthChange = function (newMonth) {
|
|
833
|
-
goToMonth(newMonth);
|
|
834
|
-
onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
|
|
835
|
-
};
|
|
836
|
-
var displayIndex = displayMonths.findIndex(function (month) {
|
|
837
|
-
return isSameMonth(props.displayMonth, month);
|
|
838
|
-
});
|
|
839
|
-
var isFirst = displayIndex === 0;
|
|
840
|
-
var isLast = displayIndex === displayMonths.length - 1;
|
|
841
|
-
if (dir === 'rtl') {
|
|
842
|
-
_a = [isFirst, isLast], isLast = _a[0], isFirst = _a[1];
|
|
843
|
-
}
|
|
844
|
-
var hideNext = numberOfMonths > 1 && (isFirst || !isLast);
|
|
845
|
-
var hidePrevious = numberOfMonths > 1 && (isLast || !isFirst);
|
|
846
862
|
var CaptionLabelComponent = (_b = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _b !== void 0 ? _b : CaptionLabel;
|
|
847
863
|
var captionLabel = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
|
|
848
|
-
|
|
864
|
+
return (React.createElement(React.Fragment, null,
|
|
865
|
+
captionLabel,
|
|
866
|
+
React.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
|
|
867
|
+
}
|
|
868
|
+
|
|
869
|
+
/**
|
|
870
|
+
* Render the caption of a month. The caption has a different layout when
|
|
871
|
+
* setting the [[DayPickerProps.captionLayout]] prop.
|
|
872
|
+
*/
|
|
873
|
+
function Caption(props) {
|
|
874
|
+
var _a;
|
|
875
|
+
var _b = useDayPicker(), classNames = _b.classNames, disableNavigation = _b.disableNavigation, styles = _b.styles, captionLayout = _b.captionLayout, components = _b.components;
|
|
876
|
+
var CaptionLabelComponent = (_a = components === null || components === void 0 ? void 0 : components.CaptionLabel) !== null && _a !== void 0 ? _a : CaptionLabel;
|
|
877
|
+
var caption;
|
|
849
878
|
if (disableNavigation) {
|
|
850
|
-
|
|
879
|
+
caption = (React.createElement(CaptionLabelComponent, { id: props.id, displayMonth: props.displayMonth }));
|
|
851
880
|
}
|
|
852
881
|
else if (captionLayout === 'dropdown') {
|
|
853
|
-
|
|
854
|
-
React.createElement("div", { className: classNames.vhidden }, captionLabel),
|
|
855
|
-
React.createElement(MonthsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth }),
|
|
856
|
-
React.createElement(YearsDropdown, { onChange: handleMonthChange, displayMonth: props.displayMonth })));
|
|
882
|
+
caption = (React.createElement(CaptionDropdowns, { displayMonth: props.displayMonth, id: props.id }));
|
|
857
883
|
}
|
|
858
884
|
else {
|
|
859
|
-
|
|
860
|
-
captionLabel,
|
|
861
|
-
React.createElement(Navigation, { displayMonth: props.displayMonth, hideNext: hideNext, hidePrevious: hidePrevious, nextMonth: nextMonth, previousMonth: previousMonth, onPreviousClick: handlePreviousClick, onNextClick: handleNextClick })));
|
|
885
|
+
caption = (React.createElement(CaptionNavigation, { displayMonth: props.displayMonth, id: props.id }));
|
|
862
886
|
}
|
|
863
|
-
return (React.createElement("div", { className: classNames.caption, style: styles.caption },
|
|
887
|
+
return (React.createElement("div", { className: classNames.caption, style: styles.caption }, caption));
|
|
864
888
|
}
|
|
865
889
|
|
|
866
890
|
/** Render the Footer component (empty as default).*/
|
|
@@ -877,8 +901,10 @@ function Footer() {
|
|
|
877
901
|
* Generate a series of 7 days, starting from the week, to use for formatting
|
|
878
902
|
* the weekday names (Monday, Tuesday, etc.).
|
|
879
903
|
*/
|
|
880
|
-
function getWeekdays(locale
|
|
881
|
-
|
|
904
|
+
function getWeekdays(locale,
|
|
905
|
+
/** The index of the first day of the week (0 - Sunday) */
|
|
906
|
+
weekStartsOn) {
|
|
907
|
+
var start = startOfWeek(new Date(), { locale: locale, weekStartsOn: weekStartsOn });
|
|
882
908
|
var days = [];
|
|
883
909
|
for (var i = 0; i < 7; i++) {
|
|
884
910
|
var day = addDays(start, i);
|
|
@@ -891,8 +917,8 @@ function getWeekdays(locale) {
|
|
|
891
917
|
* Render the Head component - i.e. the table head with the weekday names.
|
|
892
918
|
*/
|
|
893
919
|
function Head() {
|
|
894
|
-
var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
|
|
895
|
-
var weekdays = getWeekdays(locale);
|
|
920
|
+
var _a = useDayPicker(), classNames = _a.classNames, styles = _a.styles, showWeekNumber = _a.showWeekNumber, locale = _a.locale, weekStartsOn = _a.weekStartsOn, formatWeekdayName = _a.formatters.formatWeekdayName, labelWeekday = _a.labels.labelWeekday;
|
|
921
|
+
var weekdays = getWeekdays(locale, weekStartsOn);
|
|
896
922
|
return (React.createElement("thead", { style: styles.head, className: classNames.head },
|
|
897
923
|
React.createElement("tr", { style: styles.head_row, className: classNames.head_row },
|
|
898
924
|
showWeekNumber && (React.createElement("th", { scope: "col", style: styles.head_cell, className: classNames.head_cell })),
|
|
@@ -1234,7 +1260,6 @@ function isDateInterval(matcher) {
|
|
|
1234
1260
|
}
|
|
1235
1261
|
/** Returns true if `value` is a [[DateRange]] type. */
|
|
1236
1262
|
function isDateRange(value) {
|
|
1237
|
-
// TODO: Check if dates?!
|
|
1238
1263
|
return Boolean(value && typeof value === 'object' && 'from' in value);
|
|
1239
1264
|
}
|
|
1240
1265
|
/** Returns true if `value` is of type [[DateAfter]]. */
|
|
@@ -1930,10 +1955,11 @@ month, options) {
|
|
|
1930
1955
|
/** Render the table with the calendar. */
|
|
1931
1956
|
function Table(props) {
|
|
1932
1957
|
var _a, _b, _c;
|
|
1933
|
-
var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _d.styles, hideHead = _d.hideHead, fixedWeeks = _d.fixedWeeks, components = _d.components;
|
|
1958
|
+
var _d = useDayPicker(), locale = _d.locale, classNames = _d.classNames, styles = _d.styles, hideHead = _d.hideHead, fixedWeeks = _d.fixedWeeks, components = _d.components, weekStartsOn = _d.weekStartsOn;
|
|
1934
1959
|
var weeks = getMonthWeeks(props.displayMonth, {
|
|
1935
1960
|
useFixedWeeks: Boolean(fixedWeeks),
|
|
1936
|
-
locale: locale
|
|
1961
|
+
locale: locale,
|
|
1962
|
+
weekStartsOn: weekStartsOn
|
|
1937
1963
|
});
|
|
1938
1964
|
var HeadComponent = (_a = components === null || components === void 0 ? void 0 : components.Head) !== null && _a !== void 0 ? _a : Head;
|
|
1939
1965
|
var RowComponent = (_b = components === null || components === void 0 ? void 0 : components.Row) !== null && _b !== void 0 ? _b : Row;
|
|
@@ -2134,5 +2160,5 @@ function isDayPickerDefault(props) {
|
|
|
2134
2160
|
return props.mode === undefined || props.mode === 'default';
|
|
2135
2161
|
}
|
|
2136
2162
|
|
|
2137
|
-
export { Button, Caption, CaptionLabel, Day, DayContent, DayPicker, DayPickerContext, DayPickerProvider, Dropdown, FocusContext, FocusProvider, Footer, Head, IconDropdown, IconLeft, IconRight, InternalModifier, NavigationContext, NavigationProvider, RootProvider, Row, SelectMultipleContext, SelectMultipleProvider, SelectMultipleProviderInternal, SelectRangeContext, SelectRangeProvider, SelectRangeProviderInternal, SelectSingleContext, SelectSingleProvider, SelectSingleProviderInternal, WeekNumber, isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType, isDayPickerDefault, isDayPickerMultiple, isDayPickerRange, isDayPickerSingle, isMatch, useActiveModifiers, useDayPicker, useDayRender, useFocusContext, useInput, useNavigation, useSelectMultiple, useSelectRange, useSelectSingle };
|
|
2163
|
+
export { Button, Caption, CaptionDropdowns, CaptionLabel, CaptionNavigation, Day, DayContent, DayPicker, DayPickerContext, DayPickerProvider, Dropdown, FocusContext, FocusProvider, Footer, Head, IconDropdown, IconLeft, IconRight, InternalModifier, NavigationContext, NavigationProvider, RootProvider, Row, SelectMultipleContext, SelectMultipleProvider, SelectMultipleProviderInternal, SelectRangeContext, SelectRangeProvider, SelectRangeProviderInternal, SelectSingleContext, SelectSingleProvider, SelectSingleProviderInternal, WeekNumber, isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType, isDayPickerDefault, isDayPickerMultiple, isDayPickerRange, isDayPickerSingle, isMatch, useActiveModifiers, useDayPicker, useDayRender, useFocusContext, useInput, useNavigation, useSelectMultiple, useSelectRange, useSelectSingle };
|
|
2138
2164
|
//# sourceMappingURL=index.esm.js.map
|