@toptal/picasso-calendar 1.0.23 → 1.1.0
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/dist-package/src/Calendar/Calendar.d.ts +2 -0
- package/dist-package/src/Calendar/Calendar.d.ts.map +1 -1
- package/dist-package/src/Calendar/Calendar.js +9 -3
- package/dist-package/src/Calendar/Calendar.js.map +1 -1
- package/dist-package/src/Calendar/styles.d.ts +1 -1
- package/dist-package/src/Calendar/styles.d.ts.map +1 -1
- package/dist-package/src/Calendar/styles.js +21 -0
- package/dist-package/src/Calendar/styles.js.map +1 -1
- package/dist-package/src/CalendarDateSelector/CalendarDateSelector.d.ts +5 -0
- package/dist-package/src/CalendarDateSelector/CalendarDateSelector.d.ts.map +1 -0
- package/dist-package/src/CalendarDateSelector/CalendarDateSelector.js +17 -0
- package/dist-package/src/CalendarDateSelector/CalendarDateSelector.js.map +1 -0
- package/dist-package/src/CalendarDateSelector/index.d.ts +2 -0
- package/dist-package/src/CalendarDateSelector/index.d.ts.map +1 -0
- package/dist-package/src/CalendarDateSelector/index.js +2 -0
- package/dist-package/src/CalendarDateSelector/index.js.map +1 -0
- package/package.json +1 -1
- package/src/Calendar/Calendar.tsx +16 -1
- package/src/Calendar/__snapshots__/test.tsx.snap +8 -8
- package/src/Calendar/styles.ts +21 -0
- package/src/CalendarDateSelector/CalendarDateSelector.tsx +55 -0
- package/src/CalendarDateSelector/index.ts +1 -0
|
@@ -36,6 +36,8 @@ export interface Props extends BaseProps, Omit<React.HTMLAttributes<HTMLDivEleme
|
|
|
36
36
|
hasFooter?: boolean;
|
|
37
37
|
/** Number of months to display */
|
|
38
38
|
numberOfMonths?: CalendarMonthsAmount;
|
|
39
|
+
/** Display dropdown navigation between months and years (requires minDate and maxDate to be set) */
|
|
40
|
+
dropdownNavigation?: boolean;
|
|
39
41
|
}
|
|
40
42
|
export declare const Calendar: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
41
43
|
export default Calendar;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAYvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAG/D,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,SAAS,EACV,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAA;AAGd,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAYvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAG/D,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,SAAS,EACV,MAAM,SAAS,CAAA;AAChB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAItD,oBAAY,oBAAoB,GAAG,CAAC,GAAG,CAAC,CAAA;AAExC,MAAM,WAAW,KACf,SAAQ,SAAS,EACf,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,QAAQ,CAAC;IACnE,6CAA6C;IAC7C,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAA;IAC9C,iDAAiD;IACjD,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAA;IAC1D,wCAAwC;IACxC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,wCAAwC;IACxC,OAAO,CAAC,EAAE,IAAI,CAAA;IACd,gCAAgC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,mBAAmB,CAAA;IAC3B,mGAAmG;IACnG,WAAW,CAAC,EAAE,IAAI,CAAA;IAClB,2BAA2B;IAC3B,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC,0BAA0B;IAC1B,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,qDAAqD;IACrD,iBAAiB,CAAC,EAAE,iBAAiB,EAAE,CAAA;IACvC,0DAA0D;IAC1D,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,CAAA;IACxC,4BAA4B;IAC5B,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,gCAAgC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,kCAAkC;IAClC,cAAc,CAAC,EAAE,oBAAoB,CAAA;IACrC,oGAAoG;IACpG,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAC7B;AAcD,eAAO,MAAM,QAAQ,8EAgMnB,CAAA;AAIF,eAAe,QAAQ,CAAA"}
|
|
@@ -20,6 +20,7 @@ import { CalendarDay } from '../CalendarDay';
|
|
|
20
20
|
import { CalendarMonthHeader } from '../CalendarMonthHeader';
|
|
21
21
|
import CalendarContext from '../CalendarContext';
|
|
22
22
|
import { CalendarContainer } from '../CalendarContainer';
|
|
23
|
+
import { CalendarDateSelector } from '../CalendarDateSelector';
|
|
23
24
|
const useStyles = makeStyles(styles, { name: 'PicassoCalendar' });
|
|
24
25
|
const getDefaultNavigationMonth = (value, rangeModeIsEnabled) => value
|
|
25
26
|
? rangeModeIsEnabled
|
|
@@ -28,7 +29,7 @@ const getDefaultNavigationMonth = (value, rangeModeIsEnabled) => value
|
|
|
28
29
|
: undefined;
|
|
29
30
|
export const Calendar = forwardRef(function Calendar(props, ref) {
|
|
30
31
|
const classes = useStyles();
|
|
31
|
-
const { range = false, activeMonth, value, onChange, minDate, maxDate, disabledIntervals, indicatedIntervals, renderDay, renderMonthHeader, weekStartsOn = 1, hasFooter = false, renderRoot, numberOfMonths = 1 } = props, rest = __rest(props, ["range", "activeMonth", "value", "onChange", "minDate", "maxDate", "disabledIntervals", "indicatedIntervals", "renderDay", "renderMonthHeader", "weekStartsOn", "hasFooter", "renderRoot", "numberOfMonths"]);
|
|
32
|
+
const { range = false, activeMonth, value, onChange, minDate, maxDate, disabledIntervals, indicatedIntervals, renderDay, renderMonthHeader, weekStartsOn = 1, hasFooter = false, renderRoot, numberOfMonths = 1, dropdownNavigation = false } = props, rest = __rest(props, ["range", "activeMonth", "value", "onChange", "minDate", "maxDate", "disabledIntervals", "indicatedIntervals", "renderDay", "renderMonthHeader", "weekStartsOn", "hasFooter", "renderRoot", "numberOfMonths", "dropdownNavigation"]);
|
|
32
33
|
const [navigationMonth, setNavigationMonth] = useState(getDefaultNavigationMonth(value, range));
|
|
33
34
|
useEffect(() => {
|
|
34
35
|
setNavigationMonth(undefined);
|
|
@@ -89,6 +90,7 @@ export const Calendar = forwardRef(function Calendar(props, ref) {
|
|
|
89
90
|
}), [isWeekend, isIndicated, isTemporaryRangeMiddle, isTemporaryRangeEnd]);
|
|
90
91
|
const mobileScreen = useBreakpoint(['xs', 'sm']);
|
|
91
92
|
const shouldRenderMultipleMonths = numberOfMonths > 1 && !mobileScreen;
|
|
93
|
+
const shouldDisplayDropdownNavigation = dropdownNavigation && minDate && maxDate;
|
|
92
94
|
return (React.createElement("div", Object.assign({ ref: ref }, rest, { tabIndex: 0 }),
|
|
93
95
|
React.createElement(CalendarContext.Provider, { value: {
|
|
94
96
|
onDayMouseEnter: handleDayEnter,
|
|
@@ -102,11 +104,15 @@ export const Calendar = forwardRef(function Calendar(props, ref) {
|
|
|
102
104
|
// the change detection, so error is ignored
|
|
103
105
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
104
106
|
// @ts-ignore
|
|
105
|
-
onSelect: range ? handleRangeChange : handleSingleDateChange, fromDate: minDate, onMonthChange: month => setNavigationMonth(month), toDate: maxDate, numberOfMonths: shouldRenderMultipleMonths ? numberOfMonths : 1, disabled: disabledIntervalsFormatted, weekStartsOn: weekStartsOn, formatters: { formatWeekdayName: date => format(date, 'EEE') }, modifiers: modifiers, components: {
|
|
106
|
-
Caption:
|
|
107
|
+
onSelect: range ? handleRangeChange : handleSingleDateChange, fromDate: minDate, fromYear: minDate === null || minDate === void 0 ? void 0 : minDate.getFullYear(), toYear: maxDate === null || maxDate === void 0 ? void 0 : maxDate.getFullYear(), onMonthChange: month => setNavigationMonth(month), toDate: maxDate, numberOfMonths: shouldRenderMultipleMonths ? numberOfMonths : 1, disabled: disabledIntervalsFormatted, weekStartsOn: weekStartsOn, formatters: { formatWeekdayName: date => format(date, 'EEE') }, modifiers: modifiers, captionLayout: shouldDisplayDropdownNavigation ? 'dropdown' : undefined, components: {
|
|
108
|
+
Caption: shouldDisplayDropdownNavigation
|
|
109
|
+
? undefined
|
|
110
|
+
: CalendarMonthHeader,
|
|
107
111
|
Day: CalendarDay,
|
|
112
|
+
Dropdown: CalendarDateSelector,
|
|
108
113
|
}, classNames: {
|
|
109
114
|
months: shouldRenderMultipleMonths ? classes.months : undefined,
|
|
115
|
+
caption_dropdowns: classes.caption_dropdowns,
|
|
110
116
|
head: classes.head,
|
|
111
117
|
table: classes.table,
|
|
112
118
|
head_row: classes.head_row,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EACV,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAOrD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAExD,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAQhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;
|
|
1
|
+
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/Calendar/Calendar.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EACZ,UAAU,EACV,WAAW,EACX,SAAS,EACT,OAAO,EACP,QAAQ,GACT,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAOrD,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,SAAS,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AAExD,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC5D,OAAO,eAAe,MAAM,oBAAoB,CAAA;AAQhD,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAyC9D,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAA;AAExE,MAAM,yBAAyB,GAAG,CAChC,KAAsC,EACtC,kBAA2B,EAC3B,EAAE,CACF,KAAK;IACH,CAAC,CAAC,kBAAkB;QAClB,CAAC,CAAE,KAAuB,CAAC,CAAC,CAAC;QAC7B,CAAC,CAAE,KAAc;IACnB,CAAC,CAAC,SAAS,CAAA;AAEf,MAAM,CAAC,MAAM,QAAQ,GAAG,UAAU,CAAwB,SAAS,QAAQ,CACzE,KAAK,EACL,GAAG;IAEH,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAC3B,MAAM,EACJ,KAAK,GAAG,KAAK,EACb,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAO,EACP,OAAO,EACP,iBAAiB,EACjB,kBAAkB,EAClB,SAAS,EACT,iBAAiB,EACjB,YAAY,GAAG,CAAC,EAChB,SAAS,GAAG,KAAK,EACjB,UAAU,EACV,cAAc,GAAG,CAAC,EAClB,kBAAkB,GAAG,KAAK,KAExB,KAAK,EADJ,IAAI,UACL,KAAK,EAjBH,mOAiBL,CAAQ,CAAA;IAET,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CACpD,yBAAyB,CAAC,KAAK,EAAE,KAAK,CAAC,CACxC,CAAA;IAED,SAAS,CAAC,GAAG,EAAE;QACb,kBAAkB,CAAC,SAAS,CAAC,CAAA;IAC/B,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,KAAK,IAAI,KAAK;QACZ,CAAC,CAAC,EAAE,IAAI,EAAG,KAAuB,CAAC,CAAC,CAAC,EAAE,EAAE,EAAG,KAAuB,CAAC,CAAC,CAAC,EAAE;QACxE,CAAC,CAAC,SAAS,CACd,CAAA;IAED,MAAM,0BAA0B,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9C,OAAO,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YACzC,IAAI,EAAE,QAAQ,CAAC,KAAK;YACpB,EAAE,EAAE,QAAQ,CAAC,GAAG;SACjB,CAAC,CAAC,CAAA;IACL,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,CAAA;IAEvB,MAAM,CAAC,uBAAuB,EAAE,0BAA0B,CAAC,GACzD,QAAQ,CAAc,IAAI,CAAC,CAAA;IAC7B,MAAM,sBAAsB,GAAG,WAAW,CACxC,CAAC,IAAU,EAAE,EAAE;QACb,IAAI,CAAC,uBAAuB,IAAI,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,CAAA,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,EAAE,CAAA,EAAE;YACnE,OAAO,KAAK,CAAA;SACb;QAED,OAAO,CACL,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,IAAI,IAAI,GAAG,uBAAuB,CAAC;YAC1D,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,IAAI,IAAI,GAAG,uBAAuB,CAAC,CAC3D,CAAA;IACH,CAAC,EACD,CAAC,uBAAuB,EAAE,UAAU,CAAC,CACtC,CAAA;IAED,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,IAAU,EAAE,EAAE;QACb,IAAI,CAAC,uBAAuB,IAAI,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,CAAA,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,EAAE,CAAA,EAAE;YACnE,OAAO,KAAK,CAAA;SACb;QAED,OAAO,OAAO,CAAC,IAAI,EAAE,uBAAuB,CAAC,CAAA;IAC/C,CAAC,EACD,CAAC,uBAAuB,EAAE,UAAU,CAAC,CACtC,CAAA;IAED,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,IAAU,EAAE,EAAE,CACb,CAAC,kBAAkB,IAAI,EAAE,CAAC,CAAC,IAAI,CAC7B,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CAAC,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,GAAG,CACjD,EACH,CAAC,kBAAkB,CAAC,CACrB,CAAA;IAED,MAAM,sBAAsB,GAA6B,IAAI,CAAC,EAAE,CAC9D,IAAI,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAA;IAExB,6FAA6F;IAC7F,+FAA+F;IAC/F,sEAAsE;IACtE,MAAM,iBAAiB,GAA4B,CACjD,KAAK,EACL,WAAW,EACX,EAAE,YAAY,EAAE,aAAa,EAAE,EAC/B,EAAE;QACF,MAAM,kBAAkB,GAAG,OAAO,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,MAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,EAAE,CAAA,CAAC,CAAA;QAEtE,IAAI,aAAa,IAAI,kBAAkB,EAAE;YACvC,aAAa,CAAC;gBACZ,IAAI,EAAE,WAAW;gBACjB,EAAE,EAAE,SAAS;aACd,CAAC,CAAA;SACH;aAAM;YACL,0BAA0B,CAAC,IAAI,CAAC,CAAA;YAChC,aAAa,CAAC;gBACZ,IAAI,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI;gBACjB,EAAE,EAAE,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,EAAE;aACd,CAAC,CAAA;YAEF,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,MAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,EAAE,CAAA,EAAE;gBAC5B,QAAQ,CAAC,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC,CAAA;aACjC;SACF;IACH,CAAC,CAAA;IAED,MAAM,cAAc,GAAG,CAAC,IAAU,EAAE,EAAE,CACpC,KAAK,KAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,IAAI,CAAA,IAAI,0BAA0B,CAAC,IAAI,CAAC,CAAA;IAE/D,MAAM,SAAS,GAAG,OAAO,CACvB,GAAG,EAAE,CAAC,CAAC;QACL,OAAO,EAAE,SAAS;QAClB,SAAS,EAAE,WAAW;QACtB,oBAAoB,EAAE,sBAAsB;QAC5C,iBAAiB,EAAE,mBAAmB;KACvC,CAAC,EACF,CAAC,SAAS,EAAE,WAAW,EAAE,sBAAsB,EAAE,mBAAmB,CAAC,CACtE,CAAA;IAED,MAAM,YAAY,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAChD,MAAM,0BAA0B,GAAG,cAAc,GAAG,CAAC,IAAI,CAAC,YAAY,CAAA;IACtE,MAAM,+BAA+B,GACnC,kBAAkB,IAAI,OAAO,IAAI,OAAO,CAAA;IAE1C,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,IAAM,IAAI,IAAE,QAAQ,EAAE,CAAC;QAClC,oBAAC,eAAe,CAAC,QAAQ,IACvB,KAAK,EAAE;gBACL,eAAe,EAAE,cAAc;gBAC/B,UAAU;gBACV,SAAS;gBACT,iBAAiB;aAClB;YAED,oBAAC,iBAAiB,IAChB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,0BAA0B;gBAEtC,oBAAC,SAAS,IACR,QAAQ,QACR,eAAe,QACf,KAAK,EAAE,eAAe,IAAI,WAAW,EACrC,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,EAChC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK;oBACpC,gFAAgF;oBAChF,4CAA4C;oBAC5C,6DAA6D;oBAC7D,aAAa;oBACb,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,sBAAsB,EAC5D,QAAQ,EAAE,OAAO,EACjB,QAAQ,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAE,EAChC,MAAM,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,EAAE,EAC9B,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACjD,MAAM,EAAE,OAAO,EACf,cAAc,EAAE,0BAA0B,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAC/D,QAAQ,EAAE,0BAA0B,EACpC,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAC9D,SAAS,EAAE,SAAS,EACpB,aAAa,EACX,+BAA+B,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAE1D,UAAU,EAAE;wBACV,OAAO,EAAE,+BAA+B;4BACtC,CAAC,CAAC,SAAS;4BACX,CAAC,CAAC,mBAAmB;wBACvB,GAAG,EAAE,WAAW;wBAChB,QAAQ,EAAE,oBAAoB;qBAC/B,EACD,UAAU,EAAE;wBACV,MAAM,EAAE,0BAA0B,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;wBAC/D,iBAAiB,EAAE,OAAO,CAAC,iBAAiB;wBAC5C,IAAI,EAAE,OAAO,CAAC,IAAI;wBAClB,KAAK,EAAE,OAAO,CAAC,KAAK;wBACpB,QAAQ,EAAE,OAAO,CAAC,QAAQ;wBAC1B,SAAS,EAAE,OAAO,CAAC,SAAS;wBAC5B,GAAG,EAAE,OAAO,CAAC,GAAG;wBAChB,IAAI,EAAE,OAAO,CAAC,IAAI;wBAClB,OAAO,EAAE,OAAO,CAAC,OAAO;qBACzB;oBACD,2EAA2E;oBAC3E,SAAS,EAAC,gBAAgB,GAC1B,CACgB,CACK,CACvB,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAA;AAEjC,eAAe,QAAQ,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import type { Theme } from '@material-ui/core/styles';
|
|
2
|
-
declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "head" | "cell" | "table" | "row" | "head_row" | "head_cell" | "vhidden" | "months">;
|
|
2
|
+
declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "head" | "cell" | "table" | "row" | "caption_dropdowns" | "pointer_events" | "icon_wrapper" | "select" | "dropdown_label" | "head_row" | "head_cell" | "vhidden" | "months">;
|
|
3
3
|
export default _default;
|
|
4
4
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Calendar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAIxB,KAAK;AAAlC,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/Calendar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAIxB,KAAK;AAAlC,wBA6DI"}
|
|
@@ -4,6 +4,27 @@ export default ({ palette }) => createStyles({
|
|
|
4
4
|
head: {
|
|
5
5
|
display: 'block',
|
|
6
6
|
},
|
|
7
|
+
caption_dropdowns: {
|
|
8
|
+
display: 'flex',
|
|
9
|
+
gap: '1rem',
|
|
10
|
+
paddingBottom: '1rem',
|
|
11
|
+
},
|
|
12
|
+
pointer_events: {
|
|
13
|
+
pointerEvents: 'none',
|
|
14
|
+
},
|
|
15
|
+
icon_wrapper: { width: '24px', height: '24px' },
|
|
16
|
+
select: {
|
|
17
|
+
opacity: '0',
|
|
18
|
+
position: 'absolute',
|
|
19
|
+
fontSize: '0.875rem',
|
|
20
|
+
fontWeight: 400,
|
|
21
|
+
cursor: 'pointer',
|
|
22
|
+
},
|
|
23
|
+
dropdown_label: {
|
|
24
|
+
display: 'flex',
|
|
25
|
+
position: 'relative',
|
|
26
|
+
alignItems: 'center',
|
|
27
|
+
},
|
|
7
28
|
head_row: {
|
|
8
29
|
display: 'flex',
|
|
9
30
|
textAlign: 'center',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Calendar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;KACjB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;QACrB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;QACvB,aAAa,EAAE,WAAW;QAC1B,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;QACzB,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC;QACtB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC;KAC3B;IACD,SAAS,EAAE;QACT,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,GAAG;KAChB;IACD,KAAK,EAAE;QACL,aAAa,EAAE,KAAK;QACpB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACxB;IACD,GAAG,EAAE;QACH,OAAO,EAAE,MAAM;KAChB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,KAAK;KACjB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;KAChB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC;KACjB;CACF,CAAC,CAAA"}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/Calendar/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAA;AAE5C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE,OAAO;KACjB;IACD,iBAAiB,EAAE;QACjB,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,MAAM;QACX,aAAa,EAAE,MAAM;KACtB;IACD,cAAc,EAAE;QACd,aAAa,EAAE,MAAM;KACtB;IACD,YAAY,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;IAC/C,MAAM,EAAE;QACN,OAAO,EAAE,GAAG;QACZ,QAAQ,EAAE,UAAU;QACpB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,GAAG;QACf,MAAM,EAAE,SAAS;KAClB;IACD,cAAc,EAAE;QACd,OAAO,EAAE,MAAM;QACf,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,QAAQ;KACrB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE,MAAM;QACf,SAAS,EAAE,QAAQ;QACnB,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC;QACrB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC;QACvB,aAAa,EAAE,WAAW;QAC1B,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,KAAK;QACzB,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC;QACtB,aAAa,EAAE,GAAG,CAAC,MAAM,CAAC;KAC3B;IACD,SAAS,EAAE;QACT,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,KAAK;QAChB,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,GAAG;KAChB;IACD,KAAK,EAAE;QACL,aAAa,EAAE,KAAK;QACpB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,QAAQ;KACxB;IACD,GAAG,EAAE;QACH,OAAO,EAAE,MAAM;KAChB;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC;QACV,SAAS,EAAE,KAAK;KACjB;IACD,OAAO,EAAE;QACP,OAAO,EAAE,MAAM;KAChB;IACD,MAAM,EAAE;QACN,OAAO,EAAE,MAAM;QACf,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC;KACjB;CACF,CAAC,CAAA"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { DropdownProps } from 'react-day-picker';
|
|
3
|
+
declare const CalendarDateSelector: ({ children, caption, onChange, value, "aria-label": ariaLabel, }: DropdownProps) => JSX.Element;
|
|
4
|
+
export default CalendarDateSelector;
|
|
5
|
+
//# sourceMappingURL=CalendarDateSelector.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarDateSelector.d.ts","sourceRoot":"","sources":["../../../src/CalendarDateSelector/CalendarDateSelector.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAUrD,QAAA,MAAM,oBAAoB,qEAMvB,aAAa,gBAmCf,CAAA;AAED,eAAe,oBAAoB,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Typography } from '@toptal/picasso-typography';
|
|
3
|
+
import { Container } from '@toptal/picasso-container';
|
|
4
|
+
import { ArrowDropDown16 } from '@toptal/picasso-icons';
|
|
5
|
+
import { makeStyles } from '@material-ui/core/styles';
|
|
6
|
+
import styles from '../Calendar/styles';
|
|
7
|
+
const useStyles = makeStyles(styles, { name: 'PicassoCalendar' });
|
|
8
|
+
const CalendarDateSelector = ({ children, caption, onChange, value, 'aria-label': ariaLabel, }) => {
|
|
9
|
+
const classes = useStyles();
|
|
10
|
+
return (React.createElement("label", { "aria-label": ariaLabel, htmlFor: `month${caption}`, className: classes.dropdown_label },
|
|
11
|
+
React.createElement(Typography, { variant: 'heading', size: 'medium', color: 'black', weight: 'semibold' }, caption),
|
|
12
|
+
React.createElement(Container, { className: classes.icon_wrapper, flex: true, justifyContent: 'center', alignItems: 'center' },
|
|
13
|
+
React.createElement(ArrowDropDown16, { className: classes.pointer_events, color: 'darkGrey' })),
|
|
14
|
+
React.createElement("select", { name: `month${caption}`, className: classes.select, value: value, onChange: onChange }, children)));
|
|
15
|
+
};
|
|
16
|
+
export default CalendarDateSelector;
|
|
17
|
+
//# sourceMappingURL=CalendarDateSelector.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CalendarDateSelector.js","sourceRoot":"","sources":["../../../src/CalendarDateSelector/CalendarDateSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AACvD,OAAO,EAAE,UAAU,EAAc,MAAM,0BAA0B,CAAA;AAEjE,OAAO,MAAM,MAAM,oBAAoB,CAAA;AAEvC,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAA;AAExE,MAAM,oBAAoB,GAAG,CAAC,EAC5B,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,EACL,YAAY,EAAE,SAAS,GACT,EAAE,EAAE;IAClB,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,OAAO,CACL,6CACc,SAAS,EACrB,OAAO,EAAE,QAAQ,OAAO,EAAE,EAC1B,SAAS,EAAE,OAAO,CAAC,cAAc;QAEjC,oBAAC,UAAU,IACT,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,OAAO,EACb,MAAM,EAAC,UAAU,IAEhB,OAAO,CACG;QACb,oBAAC,SAAS,IACR,SAAS,EAAE,OAAO,CAAC,YAAY,EAC/B,IAAI,QACJ,cAAc,EAAC,QAAQ,EACvB,UAAU,EAAC,QAAQ;YAEnB,oBAAC,eAAe,IAAC,SAAS,EAAE,OAAO,CAAC,cAAc,EAAE,KAAK,EAAC,UAAU,GAAG,CAC7D;QACZ,gCACE,IAAI,EAAE,QAAQ,OAAO,EAAE,EACvB,SAAS,EAAE,OAAO,CAAC,MAAM,EACzB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,IAEjB,QAAQ,CACF,CACH,CACT,CAAA;AACH,CAAC,CAAA;AAED,eAAe,oBAAoB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/CalendarDateSelector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/CalendarDateSelector/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAA"}
|
package/package.json
CHANGED
|
@@ -32,6 +32,7 @@ import type {
|
|
|
32
32
|
} from './types'
|
|
33
33
|
import type { RenderRoot } from '../CalendarContainer'
|
|
34
34
|
import { CalendarContainer } from '../CalendarContainer'
|
|
35
|
+
import { CalendarDateSelector } from '../CalendarDateSelector'
|
|
35
36
|
|
|
36
37
|
export type CalendarMonthsAmount = 1 | 2
|
|
37
38
|
|
|
@@ -68,6 +69,8 @@ export interface Props
|
|
|
68
69
|
hasFooter?: boolean
|
|
69
70
|
/** Number of months to display */
|
|
70
71
|
numberOfMonths?: CalendarMonthsAmount
|
|
72
|
+
/** Display dropdown navigation between months and years (requires minDate and maxDate to be set) */
|
|
73
|
+
dropdownNavigation?: boolean
|
|
71
74
|
}
|
|
72
75
|
|
|
73
76
|
const useStyles = makeStyles<Theme>(styles, { name: 'PicassoCalendar' })
|
|
@@ -102,6 +105,7 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(function Calendar(
|
|
|
102
105
|
hasFooter = false,
|
|
103
106
|
renderRoot,
|
|
104
107
|
numberOfMonths = 1,
|
|
108
|
+
dropdownNavigation = false,
|
|
105
109
|
...rest
|
|
106
110
|
} = props
|
|
107
111
|
|
|
@@ -207,6 +211,8 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(function Calendar(
|
|
|
207
211
|
|
|
208
212
|
const mobileScreen = useBreakpoint(['xs', 'sm'])
|
|
209
213
|
const shouldRenderMultipleMonths = numberOfMonths > 1 && !mobileScreen
|
|
214
|
+
const shouldDisplayDropdownNavigation =
|
|
215
|
+
dropdownNavigation && minDate && maxDate
|
|
210
216
|
|
|
211
217
|
return (
|
|
212
218
|
<div ref={ref} {...rest} tabIndex={0}>
|
|
@@ -234,6 +240,8 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(function Calendar(
|
|
|
234
240
|
// @ts-ignore
|
|
235
241
|
onSelect={range ? handleRangeChange : handleSingleDateChange}
|
|
236
242
|
fromDate={minDate}
|
|
243
|
+
fromYear={minDate?.getFullYear()}
|
|
244
|
+
toYear={maxDate?.getFullYear()}
|
|
237
245
|
onMonthChange={month => setNavigationMonth(month)}
|
|
238
246
|
toDate={maxDate}
|
|
239
247
|
numberOfMonths={shouldRenderMultipleMonths ? numberOfMonths : 1}
|
|
@@ -241,12 +249,19 @@ export const Calendar = forwardRef<HTMLDivElement, Props>(function Calendar(
|
|
|
241
249
|
weekStartsOn={weekStartsOn}
|
|
242
250
|
formatters={{ formatWeekdayName: date => format(date, 'EEE') }}
|
|
243
251
|
modifiers={modifiers}
|
|
252
|
+
captionLayout={
|
|
253
|
+
shouldDisplayDropdownNavigation ? 'dropdown' : undefined
|
|
254
|
+
}
|
|
244
255
|
components={{
|
|
245
|
-
Caption:
|
|
256
|
+
Caption: shouldDisplayDropdownNavigation
|
|
257
|
+
? undefined
|
|
258
|
+
: CalendarMonthHeader,
|
|
246
259
|
Day: CalendarDay,
|
|
260
|
+
Dropdown: CalendarDateSelector,
|
|
247
261
|
}}
|
|
248
262
|
classNames={{
|
|
249
263
|
months: shouldRenderMultipleMonths ? classes.months : undefined,
|
|
264
|
+
caption_dropdowns: classes.caption_dropdowns,
|
|
250
265
|
head: classes.head,
|
|
251
266
|
table: classes.table,
|
|
252
267
|
head_row: classes.head_row,
|
|
@@ -86,53 +86,53 @@ exports[`Calendar renders 1`] = `
|
|
|
86
86
|
class="PicassoCalendar-head"
|
|
87
87
|
>
|
|
88
88
|
<tr
|
|
89
|
-
class="PicassoCalendar-head_row-
|
|
89
|
+
class="PicassoCalendar-head_row-10"
|
|
90
90
|
>
|
|
91
91
|
<th
|
|
92
92
|
aria-label="Monday"
|
|
93
|
-
class="PicassoCalendar-head_cell-
|
|
93
|
+
class="PicassoCalendar-head_cell-11"
|
|
94
94
|
scope="col"
|
|
95
95
|
>
|
|
96
96
|
Mon
|
|
97
97
|
</th>
|
|
98
98
|
<th
|
|
99
99
|
aria-label="Tuesday"
|
|
100
|
-
class="PicassoCalendar-head_cell-
|
|
100
|
+
class="PicassoCalendar-head_cell-11"
|
|
101
101
|
scope="col"
|
|
102
102
|
>
|
|
103
103
|
Tue
|
|
104
104
|
</th>
|
|
105
105
|
<th
|
|
106
106
|
aria-label="Wednesday"
|
|
107
|
-
class="PicassoCalendar-head_cell-
|
|
107
|
+
class="PicassoCalendar-head_cell-11"
|
|
108
108
|
scope="col"
|
|
109
109
|
>
|
|
110
110
|
Wed
|
|
111
111
|
</th>
|
|
112
112
|
<th
|
|
113
113
|
aria-label="Thursday"
|
|
114
|
-
class="PicassoCalendar-head_cell-
|
|
114
|
+
class="PicassoCalendar-head_cell-11"
|
|
115
115
|
scope="col"
|
|
116
116
|
>
|
|
117
117
|
Thu
|
|
118
118
|
</th>
|
|
119
119
|
<th
|
|
120
120
|
aria-label="Friday"
|
|
121
|
-
class="PicassoCalendar-head_cell-
|
|
121
|
+
class="PicassoCalendar-head_cell-11"
|
|
122
122
|
scope="col"
|
|
123
123
|
>
|
|
124
124
|
Fri
|
|
125
125
|
</th>
|
|
126
126
|
<th
|
|
127
127
|
aria-label="Saturday"
|
|
128
|
-
class="PicassoCalendar-head_cell-
|
|
128
|
+
class="PicassoCalendar-head_cell-11"
|
|
129
129
|
scope="col"
|
|
130
130
|
>
|
|
131
131
|
Sat
|
|
132
132
|
</th>
|
|
133
133
|
<th
|
|
134
134
|
aria-label="Sunday"
|
|
135
|
-
class="PicassoCalendar-head_cell-
|
|
135
|
+
class="PicassoCalendar-head_cell-11"
|
|
136
136
|
scope="col"
|
|
137
137
|
>
|
|
138
138
|
Sun
|
package/src/Calendar/styles.ts
CHANGED
|
@@ -7,6 +7,27 @@ export default ({ palette }: Theme) =>
|
|
|
7
7
|
head: {
|
|
8
8
|
display: 'block',
|
|
9
9
|
},
|
|
10
|
+
caption_dropdowns: {
|
|
11
|
+
display: 'flex',
|
|
12
|
+
gap: '1rem',
|
|
13
|
+
paddingBottom: '1rem',
|
|
14
|
+
},
|
|
15
|
+
pointer_events: {
|
|
16
|
+
pointerEvents: 'none',
|
|
17
|
+
},
|
|
18
|
+
icon_wrapper: { width: '24px', height: '24px' },
|
|
19
|
+
select: {
|
|
20
|
+
opacity: '0',
|
|
21
|
+
position: 'absolute',
|
|
22
|
+
fontSize: '0.875rem',
|
|
23
|
+
fontWeight: 400,
|
|
24
|
+
cursor: 'pointer',
|
|
25
|
+
},
|
|
26
|
+
dropdown_label: {
|
|
27
|
+
display: 'flex',
|
|
28
|
+
position: 'relative',
|
|
29
|
+
alignItems: 'center',
|
|
30
|
+
},
|
|
10
31
|
head_row: {
|
|
11
32
|
display: 'flex',
|
|
12
33
|
textAlign: 'center',
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import type { DropdownProps } from 'react-day-picker'
|
|
3
|
+
import { Typography } from '@toptal/picasso-typography'
|
|
4
|
+
import { Container } from '@toptal/picasso-container'
|
|
5
|
+
import { ArrowDropDown16 } from '@toptal/picasso-icons'
|
|
6
|
+
import { makeStyles, type Theme } from '@material-ui/core/styles'
|
|
7
|
+
|
|
8
|
+
import styles from '../Calendar/styles'
|
|
9
|
+
|
|
10
|
+
const useStyles = makeStyles<Theme>(styles, { name: 'PicassoCalendar' })
|
|
11
|
+
|
|
12
|
+
const CalendarDateSelector = ({
|
|
13
|
+
children,
|
|
14
|
+
caption,
|
|
15
|
+
onChange,
|
|
16
|
+
value,
|
|
17
|
+
'aria-label': ariaLabel,
|
|
18
|
+
}: DropdownProps) => {
|
|
19
|
+
const classes = useStyles()
|
|
20
|
+
|
|
21
|
+
return (
|
|
22
|
+
<label
|
|
23
|
+
aria-label={ariaLabel}
|
|
24
|
+
htmlFor={`month${caption}`}
|
|
25
|
+
className={classes.dropdown_label}
|
|
26
|
+
>
|
|
27
|
+
<Typography
|
|
28
|
+
variant='heading'
|
|
29
|
+
size='medium'
|
|
30
|
+
color='black'
|
|
31
|
+
weight='semibold'
|
|
32
|
+
>
|
|
33
|
+
{caption}
|
|
34
|
+
</Typography>
|
|
35
|
+
<Container
|
|
36
|
+
className={classes.icon_wrapper}
|
|
37
|
+
flex
|
|
38
|
+
justifyContent='center'
|
|
39
|
+
alignItems='center'
|
|
40
|
+
>
|
|
41
|
+
<ArrowDropDown16 className={classes.pointer_events} color='darkGrey' />
|
|
42
|
+
</Container>
|
|
43
|
+
<select
|
|
44
|
+
name={`month${caption}`}
|
|
45
|
+
className={classes.select}
|
|
46
|
+
value={value}
|
|
47
|
+
onChange={onChange}
|
|
48
|
+
>
|
|
49
|
+
{children}
|
|
50
|
+
</select>
|
|
51
|
+
</label>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export default CalendarDateSelector
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as CalendarDateSelector } from './CalendarDateSelector'
|