@arkyn/components 3.0.1-beta.138 → 3.0.1-beta.140
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/bundle.css +1 -1
- package/dist/bundle.js +2479 -80782
- package/dist/components/audioPlayer/index.js +2 -2
- package/dist/components/calendar/_calendarProvider.d.ts +46 -0
- package/dist/components/calendar/_calendarProvider.d.ts.map +1 -0
- package/dist/components/calendar/_calendarProvider.js +52 -0
- package/dist/components/calendar/_viewService.d.ts +32 -0
- package/dist/components/calendar/_viewService.d.ts.map +1 -0
- package/dist/components/calendar/_viewService.js +179 -0
- package/dist/components/calendar/calendarContainer/index.d.ts +8 -0
- package/dist/components/calendar/calendarContainer/index.d.ts.map +1 -0
- package/dist/components/calendar/calendarContainer/index.js +6 -0
- package/dist/components/calendar/calendarHeader/index.d.ts +7 -0
- package/dist/components/calendar/calendarHeader/index.d.ts.map +1 -0
- package/dist/components/calendar/calendarHeader/index.js +13 -0
- package/dist/components/calendar/calendarTableBody/index.d.ts +4 -0
- package/dist/components/calendar/calendarTableBody/index.d.ts.map +1 -0
- package/dist/components/calendar/calendarTableBody/index.js +9 -0
- package/dist/components/calendar/calendarTableContainer/index.d.ts +8 -0
- package/dist/components/calendar/calendarTableContainer/index.d.ts.map +1 -0
- package/dist/components/calendar/calendarTableContainer/index.js +6 -0
- package/dist/components/calendar/calendarTableHeader/index.d.ts +4 -0
- package/dist/components/calendar/calendarTableHeader/index.d.ts.map +1 -0
- package/dist/components/calendar/calendarTableHeader/index.js +9 -0
- package/dist/components/calendar/calendarTableTd/index.d.ts +11 -0
- package/dist/components/calendar/calendarTableTd/index.d.ts.map +1 -0
- package/dist/components/calendar/calendarTableTd/index.js +15 -0
- package/dist/components/calendar/index.d.ts +88 -0
- package/dist/components/calendar/index.d.ts.map +1 -0
- package/dist/components/calendar/index.js +54 -0
- package/dist/components/cardTab/cardTabContainer/index.js +2 -2
- package/dist/components/cardTab/cardTabContext.d.ts +3 -3
- package/dist/components/cardTab/cardTabContext.d.ts.map +1 -1
- package/dist/components/cardTab/cardTabContext.js +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/dist/services/iconRenderer.d.ts.map +1 -1
- package/dist/services/iconRenderer.js +1 -1
- package/package.json +1 -1
- package/dist/bundle.umd.cjs +0 -3610
|
@@ -33,7 +33,7 @@ import "./styles.css";
|
|
|
33
33
|
* />
|
|
34
34
|
*/
|
|
35
35
|
function AudioPlayer(props) {
|
|
36
|
-
const { onPlayAudio, onPauseAudio, disabled, ...rest } = props;
|
|
36
|
+
const { onPlayAudio, onPauseAudio, disabled, style, ...rest } = props;
|
|
37
37
|
const [sliderValue, setSliderValue] = useSlider(0);
|
|
38
38
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
39
39
|
const [isDragging, setIsDragging] = useState(false);
|
|
@@ -110,6 +110,6 @@ function AudioPlayer(props) {
|
|
|
110
110
|
audioElement.removeEventListener("timeupdate", handleTimeUpdate);
|
|
111
111
|
};
|
|
112
112
|
}, []);
|
|
113
|
-
return (_jsxs("div", { className: "arkynAudioPlayer", children: [_jsx("audio", { ...rest, ref: audioReference, src: props.src, onEnded: handlePauseAudio }), _jsxs("button", { type: "button", disabled: disabled, onClick: handleToggleAudio, children: [isPlaying && _jsx(Pause, {}), !isPlaying && _jsx(Play, {})] }), _jsx("p", { children: formattedCurrentTime }), _jsx(Slider, { value: sliderValue, onChange: handleSliderChange, onDragging: setIsDragging, disabled: disabled }), _jsx("p", { children: formattedTotalTime })] }));
|
|
113
|
+
return (_jsxs("div", { className: "arkynAudioPlayer", style: style, children: [_jsx("audio", { ...rest, ref: audioReference, src: props.src, onEnded: handlePauseAudio }), _jsxs("button", { type: "button", disabled: disabled, onClick: handleToggleAudio, children: [isPlaying && _jsx(Pause, {}), !isPlaying && _jsx(Play, {})] }), _jsx("p", { children: formattedCurrentTime }), _jsx(Slider, { value: sliderValue, onChange: handleSliderChange, onDragging: setIsDragging, disabled: disabled }), _jsx("p", { children: formattedTotalTime })] }));
|
|
114
114
|
}
|
|
115
115
|
export { AudioPlayer };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { type ReactNode } from "react";
|
|
2
|
+
import { type CalendarMatrix } from "./_viewService";
|
|
3
|
+
type CalendarContextProps = {
|
|
4
|
+
valueDate: Date[];
|
|
5
|
+
viewDate: Date;
|
|
6
|
+
currentDate: string;
|
|
7
|
+
currentDay: string;
|
|
8
|
+
currentMonth: string;
|
|
9
|
+
currentYear: string;
|
|
10
|
+
listWeek: string[];
|
|
11
|
+
listMonths: {
|
|
12
|
+
label: string;
|
|
13
|
+
value: string;
|
|
14
|
+
}[];
|
|
15
|
+
listYears: {
|
|
16
|
+
label: string;
|
|
17
|
+
value: string;
|
|
18
|
+
}[];
|
|
19
|
+
listMatrix: CalendarMatrix;
|
|
20
|
+
changeDay: (day: number, month: number, year: number) => void;
|
|
21
|
+
changeMonth: (month: number) => void;
|
|
22
|
+
changeYear: (year: number) => void;
|
|
23
|
+
nextMonth: () => void;
|
|
24
|
+
previousMonth: () => void;
|
|
25
|
+
};
|
|
26
|
+
type SingleCalendarProviderProps = {
|
|
27
|
+
children: ReactNode;
|
|
28
|
+
calendarType: "single";
|
|
29
|
+
language?: string;
|
|
30
|
+
onChangeView?: (date: Date) => void;
|
|
31
|
+
defaultValue?: Date;
|
|
32
|
+
onChange?: (date: Date) => void;
|
|
33
|
+
};
|
|
34
|
+
type RangeCalendarProviderProps = {
|
|
35
|
+
children: ReactNode;
|
|
36
|
+
calendarType: "range";
|
|
37
|
+
language?: string;
|
|
38
|
+
onChangeView?: (date: Date) => void;
|
|
39
|
+
defaultValue?: [Date, Date];
|
|
40
|
+
onChange?: (date: [Date, Date]) => void;
|
|
41
|
+
};
|
|
42
|
+
type CalendarProviderProps = SingleCalendarProviderProps | RangeCalendarProviderProps;
|
|
43
|
+
declare function useCalendar(): CalendarContextProps;
|
|
44
|
+
declare function CalendarProvider(props: CalendarProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export { CalendarProvider, useCalendar };
|
|
46
|
+
//# sourceMappingURL=_calendarProvider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_calendarProvider.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/_calendarProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAe,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAElE,KAAK,oBAAoB,GAAG;IAC1B,SAAS,EAAE,IAAI,EAAE,CAAC;IAClB,QAAQ,EAAE,IAAI,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC9C,UAAU,EAAE,cAAc,CAAC;IAC3B,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9D,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,QAAQ,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACjC,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;CACzC,CAAC;AAEF,KAAK,qBAAqB,GACtB,2BAA2B,GAC3B,0BAA0B,CAAC;AAI/B,iBAAS,WAAW,yBAEnB;AAED,iBAAS,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,2CAqErD;AAED,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { createContext, useContext, useState } from "react";
|
|
3
|
+
import { ViewService } from "./_viewService";
|
|
4
|
+
const CalendarContext = createContext({});
|
|
5
|
+
function useCalendar() {
|
|
6
|
+
return useContext(CalendarContext);
|
|
7
|
+
}
|
|
8
|
+
function CalendarProvider(props) {
|
|
9
|
+
const language = props.language || "pt-BR";
|
|
10
|
+
const defaultValue = props.calendarType === "single"
|
|
11
|
+
? [props.defaultValue || new Date(), props.defaultValue || new Date()]
|
|
12
|
+
: props.defaultValue || [new Date(), new Date()];
|
|
13
|
+
const [viewDate, rawSetViewDate] = useState(new Date());
|
|
14
|
+
const [valueDate, rawSetValueDate] = useState(defaultValue);
|
|
15
|
+
const viewService = new ViewService();
|
|
16
|
+
function setValueDate(value) {
|
|
17
|
+
const normalizedValue = [
|
|
18
|
+
new Date(value[0]),
|
|
19
|
+
new Date(value[1]),
|
|
20
|
+
];
|
|
21
|
+
if (props.onChange && props.calendarType === "range") {
|
|
22
|
+
props.onChange(normalizedValue);
|
|
23
|
+
}
|
|
24
|
+
if (props.onChange && props.calendarType === "single") {
|
|
25
|
+
props.onChange(normalizedValue[0]);
|
|
26
|
+
}
|
|
27
|
+
rawSetValueDate(normalizedValue);
|
|
28
|
+
}
|
|
29
|
+
function setViewDate(date) {
|
|
30
|
+
if (props.onChangeView)
|
|
31
|
+
props.onChangeView(date);
|
|
32
|
+
rawSetViewDate(date);
|
|
33
|
+
}
|
|
34
|
+
return (_jsx(CalendarContext.Provider, { value: {
|
|
35
|
+
valueDate,
|
|
36
|
+
viewDate,
|
|
37
|
+
currentDate: viewDate.toLocaleDateString(language).slice(3),
|
|
38
|
+
currentDay: viewService.currentDay(viewDate),
|
|
39
|
+
currentMonth: viewService.currentMonth(viewDate),
|
|
40
|
+
currentYear: viewService.currentYear(viewDate),
|
|
41
|
+
listWeek: viewService.listWeek(language),
|
|
42
|
+
listMonths: viewService.listMonths(viewDate, language),
|
|
43
|
+
listYears: viewService.listYears(100),
|
|
44
|
+
listMatrix: viewService.listMatrix(viewDate, valueDate),
|
|
45
|
+
changeDay: (day, month, year) => viewService.changeDay(day, month, year, props.calendarType, valueDate, setValueDate, setViewDate),
|
|
46
|
+
changeMonth: (month) => viewService.changeMonth(month, viewDate, setViewDate),
|
|
47
|
+
changeYear: (year) => viewService.changeYear(year, viewDate, setViewDate),
|
|
48
|
+
nextMonth: () => viewService.nextMonth(viewDate, setViewDate),
|
|
49
|
+
previousMonth: () => viewService.previousMonth(viewDate, setViewDate),
|
|
50
|
+
}, children: props.children }));
|
|
51
|
+
}
|
|
52
|
+
export { CalendarProvider, useCalendar };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
type CalendarCell = {
|
|
2
|
+
day: number;
|
|
3
|
+
month: number;
|
|
4
|
+
year: number;
|
|
5
|
+
dayType: "checkedDay" | "middleDay" | "uncheckedDay";
|
|
6
|
+
dayOwner: "previous" | "current" | "next";
|
|
7
|
+
};
|
|
8
|
+
type CalendarMatrix = CalendarCell[][];
|
|
9
|
+
declare class ViewService {
|
|
10
|
+
currentDay(viewDate: Date): string;
|
|
11
|
+
currentMonth(viewDate: Date): string;
|
|
12
|
+
currentYear(viewDate: Date): string;
|
|
13
|
+
capitalize(text: string): string;
|
|
14
|
+
parseDayType(day: number, month: number, year: number, valueDate: [Date, Date]): "checkedDay" | "middleDay" | "uncheckedDay";
|
|
15
|
+
listWeek(language: string): string[];
|
|
16
|
+
listMonths(viewDate: Date, language: string): {
|
|
17
|
+
label: string;
|
|
18
|
+
value: string;
|
|
19
|
+
}[];
|
|
20
|
+
listYears(lastYears: number): {
|
|
21
|
+
label: string;
|
|
22
|
+
value: string;
|
|
23
|
+
}[];
|
|
24
|
+
listMatrix(viewDate: Date, valueDate: [Date, Date]): CalendarMatrix;
|
|
25
|
+
changeDay(day: number, month: number, year: number, calendarType: "single" | "range", valueDate: [Date, Date], setValueDate: (date: [Date, Date]) => void, setViewDate: (date: Date) => void): void;
|
|
26
|
+
changeMonth(month: number, viewDate: Date, setViewDate: (date: Date) => void): void;
|
|
27
|
+
changeYear(year: number, viewDate: Date, setViewDate: (date: Date) => void): void;
|
|
28
|
+
nextMonth(viewDate: Date, setViewDate: (date: Date) => void): void;
|
|
29
|
+
previousMonth(viewDate: Date, setViewDate: (date: Date) => void): void;
|
|
30
|
+
}
|
|
31
|
+
export { ViewService, type CalendarMatrix };
|
|
32
|
+
//# sourceMappingURL=_viewService.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"_viewService.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/_viewService.ts"],"names":[],"mappings":"AAEA,KAAK,YAAY,GAAG;IAClB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACrD,QAAQ,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;CAC3C,CAAC;AAEF,KAAK,cAAc,GAAG,YAAY,EAAE,EAAE,CAAC;AAEvC,cAAM,WAAW;IACf,UAAU,CAAC,QAAQ,EAAE,IAAI;IAIzB,YAAY,CAAC,QAAQ,EAAE,IAAI;IAI3B,WAAW,CAAC,QAAQ,EAAE,IAAI;IAI1B,UAAU,CAAC,IAAI,EAAE,MAAM;IAIvB,YAAY,CACV,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,GACtB,YAAY,GAAG,WAAW,GAAG,cAAc;IAmB9C,QAAQ,CAAC,QAAQ,EAAE,MAAM;IAiBzB,UAAU,CAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM;;;;IAe3C,SAAS,CAAC,SAAS,EAAE,MAAM;;;;IAS3B,UAAU,CAAC,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC;IAgElD,SAAS,CACP,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,QAAQ,GAAG,OAAO,EAChC,SAAS,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,EACvB,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,EAC1C,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;IAmDnC,WAAW,CACT,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,IAAI,EACd,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;IAOnC,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;IAM1E,SAAS,CAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;IAO3D,aAAa,CAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI;CAMhE;AAED,OAAO,EAAE,WAAW,EAAE,KAAK,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,179 @@
|
|
|
1
|
+
import { formatToCapitalizeFirstWordLetter } from "@arkyn/shared";
|
|
2
|
+
class ViewService {
|
|
3
|
+
currentDay(viewDate) {
|
|
4
|
+
return String(viewDate.getDate()).padStart(2, "0");
|
|
5
|
+
}
|
|
6
|
+
currentMonth(viewDate) {
|
|
7
|
+
return String(viewDate.getMonth() + 1).padStart(2, "0");
|
|
8
|
+
}
|
|
9
|
+
currentYear(viewDate) {
|
|
10
|
+
return String(viewDate.getFullYear());
|
|
11
|
+
}
|
|
12
|
+
capitalize(text) {
|
|
13
|
+
return formatToCapitalizeFirstWordLetter(text);
|
|
14
|
+
}
|
|
15
|
+
parseDayType(day, month, year, valueDate) {
|
|
16
|
+
const firstDateDay = valueDate[0].getDate();
|
|
17
|
+
const firstDateMonth = valueDate[0].getMonth();
|
|
18
|
+
const firstDateYear = valueDate[0].getFullYear();
|
|
19
|
+
const secondDateDay = valueDate[1].getDate();
|
|
20
|
+
const secondDateMonth = valueDate[1].getMonth();
|
|
21
|
+
const secondDateYear = valueDate[1].getFullYear();
|
|
22
|
+
const firstDate = new Date(firstDateYear, firstDateMonth, firstDateDay);
|
|
23
|
+
const secondDate = new Date(secondDateYear, secondDateMonth, secondDateDay);
|
|
24
|
+
const currentDate = new Date(year, month, day);
|
|
25
|
+
if (firstDate.getTime() === currentDate.getTime())
|
|
26
|
+
return "checkedDay";
|
|
27
|
+
if (secondDate.getTime() === currentDate.getTime())
|
|
28
|
+
return "checkedDay";
|
|
29
|
+
if (currentDate > firstDate && currentDate < secondDate)
|
|
30
|
+
return "middleDay";
|
|
31
|
+
return "uncheckedDay";
|
|
32
|
+
}
|
|
33
|
+
listWeek(language) {
|
|
34
|
+
const weekDays = [];
|
|
35
|
+
const firstSundayUtc = new Date(Date.UTC(2023, 0, 1));
|
|
36
|
+
for (let i = 0; i < 7; i++) {
|
|
37
|
+
const day = new Date(firstSundayUtc);
|
|
38
|
+
day.setUTCDate(firstSundayUtc.getUTCDate() + i);
|
|
39
|
+
const dayName = day.toLocaleDateString(language, {
|
|
40
|
+
weekday: "short",
|
|
41
|
+
timeZone: "UTC",
|
|
42
|
+
});
|
|
43
|
+
weekDays.push(dayName);
|
|
44
|
+
}
|
|
45
|
+
return weekDays;
|
|
46
|
+
}
|
|
47
|
+
listMonths(viewDate, language) {
|
|
48
|
+
const monthsByNavigatorLanguage = new Intl.DateTimeFormat(language, {
|
|
49
|
+
month: "long",
|
|
50
|
+
});
|
|
51
|
+
return Array.from({ length: 12 }, (_, i) => {
|
|
52
|
+
const date = new Date(viewDate.getFullYear(), i, 1);
|
|
53
|
+
const label = monthsByNavigatorLanguage.format(date);
|
|
54
|
+
return {
|
|
55
|
+
label: this.capitalize(label),
|
|
56
|
+
value: String(i).padStart(2, "0"),
|
|
57
|
+
};
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
listYears(lastYears) {
|
|
61
|
+
const currentYear = new Date().getFullYear();
|
|
62
|
+
return Array.from({ length: lastYears + 1 }, (_, i) => {
|
|
63
|
+
const year = currentYear - lastYears + i;
|
|
64
|
+
return { label: String(year), value: String(year) };
|
|
65
|
+
}).reverse();
|
|
66
|
+
}
|
|
67
|
+
listMatrix(viewDate, valueDate) {
|
|
68
|
+
const year = viewDate.getFullYear();
|
|
69
|
+
const monthIndex = viewDate.getMonth();
|
|
70
|
+
const firstDayOfMonth = new Date(year, monthIndex, 1);
|
|
71
|
+
const firstWeekday = firstDayOfMonth.getDay();
|
|
72
|
+
const daysInCurrentMonth = new Date(year, monthIndex + 1, 0).getDate();
|
|
73
|
+
const daysInPreviousMonth = new Date(year, monthIndex, 0).getDate();
|
|
74
|
+
const totalCells = Math.ceil((firstWeekday + daysInCurrentMonth) / 7) * 7;
|
|
75
|
+
const weeks = [];
|
|
76
|
+
let currentMonthDay = 1;
|
|
77
|
+
let nextMonthDay = 1;
|
|
78
|
+
for (let i = 0; i < totalCells; i++) {
|
|
79
|
+
const weekIndex = Math.floor(i / 7);
|
|
80
|
+
if (!weeks[weekIndex])
|
|
81
|
+
weeks[weekIndex] = [];
|
|
82
|
+
if (i < firstWeekday) {
|
|
83
|
+
const day = daysInPreviousMonth - (firstWeekday - i - 1);
|
|
84
|
+
const month = monthIndex === 0 ? 11 : monthIndex - 1;
|
|
85
|
+
const cellYear = monthIndex === 0 ? year - 1 : year;
|
|
86
|
+
weeks[weekIndex].push({
|
|
87
|
+
day,
|
|
88
|
+
month,
|
|
89
|
+
year: cellYear,
|
|
90
|
+
dayOwner: "previous",
|
|
91
|
+
dayType: this.parseDayType(day, month, cellYear, valueDate),
|
|
92
|
+
});
|
|
93
|
+
}
|
|
94
|
+
else if (currentMonthDay <= daysInCurrentMonth) {
|
|
95
|
+
weeks[weekIndex].push({
|
|
96
|
+
day: currentMonthDay,
|
|
97
|
+
month: monthIndex,
|
|
98
|
+
year: year,
|
|
99
|
+
dayOwner: "current",
|
|
100
|
+
dayType: this.parseDayType(currentMonthDay, monthIndex, year, valueDate),
|
|
101
|
+
});
|
|
102
|
+
currentMonthDay++;
|
|
103
|
+
}
|
|
104
|
+
else {
|
|
105
|
+
const month = monthIndex === 11 ? 0 : monthIndex + 1;
|
|
106
|
+
const cellYear = monthIndex === 11 ? year + 1 : year;
|
|
107
|
+
weeks[weekIndex].push({
|
|
108
|
+
day: nextMonthDay,
|
|
109
|
+
month,
|
|
110
|
+
year: cellYear,
|
|
111
|
+
dayOwner: "next",
|
|
112
|
+
dayType: this.parseDayType(nextMonthDay, month, cellYear, valueDate),
|
|
113
|
+
});
|
|
114
|
+
nextMonthDay++;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
return weeks;
|
|
118
|
+
}
|
|
119
|
+
changeDay(day, month, year, calendarType, valueDate, setValueDate, setViewDate) {
|
|
120
|
+
const normalizeDate = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
|
121
|
+
const newDate = normalizeDate(new Date(year, month, day));
|
|
122
|
+
setViewDate(newDate);
|
|
123
|
+
if (calendarType === "single") {
|
|
124
|
+
setValueDate([newDate, newDate]);
|
|
125
|
+
return;
|
|
126
|
+
}
|
|
127
|
+
let startDate = normalizeDate(valueDate[0]);
|
|
128
|
+
let endDate = normalizeDate(valueDate[1]);
|
|
129
|
+
const newDateTime = newDate.getTime();
|
|
130
|
+
const startDateTime = startDate.getTime();
|
|
131
|
+
const endDateTime = endDate.getTime();
|
|
132
|
+
if (newDateTime === startDateTime) {
|
|
133
|
+
setValueDate([newDate, newDate]);
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
if (newDateTime === endDateTime) {
|
|
137
|
+
setValueDate([newDate, newDate]);
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
if (newDate < startDate) {
|
|
141
|
+
setValueDate([newDate, endDate]);
|
|
142
|
+
return;
|
|
143
|
+
}
|
|
144
|
+
if (newDate > endDate) {
|
|
145
|
+
setValueDate([startDate, newDate]);
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
const distanceToStart = Math.abs(newDateTime - startDateTime);
|
|
149
|
+
const distanceToEnd = Math.abs(endDateTime - newDateTime);
|
|
150
|
+
if (distanceToStart <= distanceToEnd) {
|
|
151
|
+
setValueDate([newDate, endDate]);
|
|
152
|
+
return;
|
|
153
|
+
}
|
|
154
|
+
setValueDate([startDate, newDate]);
|
|
155
|
+
}
|
|
156
|
+
changeMonth(month, viewDate, setViewDate) {
|
|
157
|
+
const nextViewDate = new Date(viewDate);
|
|
158
|
+
nextViewDate.setMonth(month);
|
|
159
|
+
setViewDate(nextViewDate);
|
|
160
|
+
}
|
|
161
|
+
changeYear(year, viewDate, setViewDate) {
|
|
162
|
+
const nextViewDate = new Date(viewDate);
|
|
163
|
+
nextViewDate.setFullYear(year);
|
|
164
|
+
setViewDate(nextViewDate);
|
|
165
|
+
}
|
|
166
|
+
nextMonth(viewDate, setViewDate) {
|
|
167
|
+
const nextViewDate = new Date(viewDate);
|
|
168
|
+
nextViewDate.setDate(1);
|
|
169
|
+
nextViewDate.setMonth(nextViewDate.getMonth() + 1);
|
|
170
|
+
setViewDate(nextViewDate);
|
|
171
|
+
}
|
|
172
|
+
previousMonth(viewDate, setViewDate) {
|
|
173
|
+
const nextViewDate = new Date(viewDate);
|
|
174
|
+
nextViewDate.setDate(1);
|
|
175
|
+
nextViewDate.setMonth(nextViewDate.getMonth() - 1);
|
|
176
|
+
setViewDate(nextViewDate);
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
export { ViewService };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import "./styles.css";
|
|
3
|
+
type CalendarContainerProps = {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
};
|
|
6
|
+
declare function CalendarContainer({ children }: CalendarContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { CalendarContainer };
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/calendarContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,iBAAS,iBAAiB,CAAC,EAAE,QAAQ,EAAE,EAAE,sBAAsB,2CAE9D;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/calendarHeader/index.tsx"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AAEtB,KAAK,mBAAmB,GAAG;IACzB,SAAS,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAgEzD;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
3
|
+
import { Select } from "../../select";
|
|
4
|
+
import { useCalendar } from "../_calendarProvider";
|
|
5
|
+
import "./styles.css";
|
|
6
|
+
function CalendarHeader({ basicMode }) {
|
|
7
|
+
const calendar = useCalendar();
|
|
8
|
+
if (basicMode) {
|
|
9
|
+
return (_jsxs("div", { className: `arkynCalendarHeader`, children: [_jsx("button", { className: "arkynCalendarButton", onClick: () => calendar.previousMonth(), children: _jsx(ChevronLeft, {}) }), _jsx("p", { children: calendar.currentDate }), _jsx("button", { className: "arkynCalendarButton", onClick: () => calendar.nextMonth(), children: _jsx(ChevronRight, {}) })] }));
|
|
10
|
+
}
|
|
11
|
+
return (_jsxs("div", { className: `arkynCalendarHeader`, children: [_jsxs("div", { children: [_jsx("button", { className: "arkynCalendarButton", onClick: () => calendar.previousMonth(), children: _jsx(ChevronLeft, {}) }), _jsx("button", { className: "arkynCalendarButton", onClick: () => calendar.nextMonth(), children: _jsx(ChevronRight, {}) })] }), _jsxs("div", { children: [_jsx(Select, { name: "calendarMonth", variant: "underline", className: "calendarMonthSelect", value: calendar.currentMonth, options: calendar.listMonths, onChange: (value) => calendar.changeMonth(+value) }), _jsx(Select, { name: "calendarYear", variant: "underline", className: "calendarYearSelect", value: calendar.currentYear, options: calendar.listYears, onChange: (value) => calendar.changeYear(+value) })] })] }));
|
|
12
|
+
}
|
|
13
|
+
export { CalendarHeader };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/calendarTableBody/index.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,iBAAS,iBAAiB,4CAczB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useCalendar } from "../_calendarProvider";
|
|
3
|
+
import { CalendarTableTd } from "../calendarTableTd";
|
|
4
|
+
import "./styles.css";
|
|
5
|
+
function CalendarTableBody() {
|
|
6
|
+
const calendar = useCalendar();
|
|
7
|
+
return (_jsx("tbody", { className: "arkynCalendarTableBody", children: calendar.listMatrix.map((week, weekIndex) => (_jsx("tr", { children: week.map((props, dayIndex) => (_jsx(CalendarTableTd, { ...props }, dayIndex))) }, weekIndex))) }));
|
|
8
|
+
}
|
|
9
|
+
export { CalendarTableBody };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ReactNode } from "react";
|
|
2
|
+
import "./styles.css";
|
|
3
|
+
type CalendarTableContainerProps = {
|
|
4
|
+
children: ReactNode;
|
|
5
|
+
};
|
|
6
|
+
declare function CalendarTableContainer({ children }: CalendarTableContainerProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export { CalendarTableContainer };
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/calendarTableContainer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,cAAc,CAAC;AAEtB,KAAK,2BAA2B,GAAG;IACjC,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,iBAAS,sBAAsB,CAAC,EAAE,QAAQ,EAAE,EAAE,2BAA2B,2CAExE;AAED,OAAO,EAAE,sBAAsB,EAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/calendarTableHeader/index.tsx"],"names":[],"mappings":"AAEA,OAAO,cAAc,CAAC;AAEtB,iBAAS,mBAAmB,4CAY3B;AAED,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { formatToCapitalizeFirstWordLetter } from "@arkyn/shared";
|
|
3
|
+
import { useCalendar } from "../_calendarProvider";
|
|
4
|
+
import "./styles.css";
|
|
5
|
+
function CalendarTableHeader() {
|
|
6
|
+
const { listWeek } = useCalendar();
|
|
7
|
+
return (_jsx("thead", { className: "arkynCalendarTableHeader", children: _jsx("tr", { children: listWeek.map((day, index) => (_jsx("th", { children: formatToCapitalizeFirstWordLetter(day) }, index))) }) }));
|
|
8
|
+
}
|
|
9
|
+
export { CalendarTableHeader };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import "./styles.css";
|
|
2
|
+
type CalendarTableTdProps = {
|
|
3
|
+
day: number;
|
|
4
|
+
month: number;
|
|
5
|
+
year: number;
|
|
6
|
+
dayType: "checkedDay" | "middleDay" | "uncheckedDay";
|
|
7
|
+
dayOwner: "previous" | "current" | "next";
|
|
8
|
+
};
|
|
9
|
+
declare function CalendarTableTd(props: CalendarTableTdProps): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export { CalendarTableTd };
|
|
11
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/calendar/calendarTableTd/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,CAAC;AAEtB,KAAK,oBAAoB,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,YAAY,GAAG,WAAW,GAAG,cAAc,CAAC;IACrD,QAAQ,EAAE,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;CAC3C,CAAC;AAEF,iBAAS,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAwBnD;AAED,OAAO,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCalendar } from "../_calendarProvider";
|
|
3
|
+
import "./styles.css";
|
|
4
|
+
function CalendarTableTd(props) {
|
|
5
|
+
const { day, month, year, dayOwner, dayType } = props;
|
|
6
|
+
const { changeDay } = useCalendar();
|
|
7
|
+
function isToday() {
|
|
8
|
+
const today = new Date();
|
|
9
|
+
return (day === today.getDate() &&
|
|
10
|
+
month === today.getMonth() &&
|
|
11
|
+
year === today.getFullYear());
|
|
12
|
+
}
|
|
13
|
+
return (_jsx("td", { onClick: () => changeDay(day, month, year), className: `arkynCalendarTableTd ${dayOwner} ${dayType} ${isToday() ? "today" : ""}`, children: _jsxs("div", { className: "textGroup", children: [_jsx("span", {}), _jsx("p", { children: day })] }) }));
|
|
14
|
+
}
|
|
15
|
+
export { CalendarTableTd };
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Props for Calendar single-date selection mode.
|
|
3
|
+
*/
|
|
4
|
+
type SingleCalendarProps = {
|
|
5
|
+
/** Sets single-date selection mode. */
|
|
6
|
+
type: "single";
|
|
7
|
+
/**
|
|
8
|
+
* Defines the visual/behavioral variant.
|
|
9
|
+
* - `basic`: simplified header.
|
|
10
|
+
* - `complete`: full navigation experience.
|
|
11
|
+
*
|
|
12
|
+
* @default "complete"
|
|
13
|
+
*/
|
|
14
|
+
variant?: "basic" | "complete";
|
|
15
|
+
/** Initial selected date. */
|
|
16
|
+
defaultValue?: Date;
|
|
17
|
+
/** Callback fired when the selected date changes. */
|
|
18
|
+
onChange?: (date: Date) => void;
|
|
19
|
+
/** Callback fired when the view (month/year) changes. */
|
|
20
|
+
onChangeView?: (date: Date) => void;
|
|
21
|
+
};
|
|
22
|
+
/**
|
|
23
|
+
* Props for Calendar range selection mode.
|
|
24
|
+
*/
|
|
25
|
+
type RangeCalendarProps = {
|
|
26
|
+
/** Sets range selection mode. */
|
|
27
|
+
type: "range";
|
|
28
|
+
/**
|
|
29
|
+
* Defines the visual/behavioral variant.
|
|
30
|
+
* - `basic`: simplified header.
|
|
31
|
+
* - `complete`: full navigation experience.
|
|
32
|
+
*
|
|
33
|
+
* @default "complete"
|
|
34
|
+
*/
|
|
35
|
+
variant?: "basic" | "complete";
|
|
36
|
+
/** Initial selected range in `[start, end]` format. */
|
|
37
|
+
defaultValue?: [Date, Date];
|
|
38
|
+
/** Callback fired when the selected range changes. */
|
|
39
|
+
onChange?: (date: [Date, Date]) => void;
|
|
40
|
+
/** Callback fired when the view (month/year) changes. */
|
|
41
|
+
onChangeView?: (date: Date) => void;
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* Discriminated union of Calendar props.
|
|
45
|
+
*/
|
|
46
|
+
type CalendarProps = SingleCalendarProps | RangeCalendarProps;
|
|
47
|
+
/**
|
|
48
|
+
* Reusable calendar component with support for two selection modes:
|
|
49
|
+
* single date (`single`) and range (`range`).
|
|
50
|
+
*
|
|
51
|
+
* The component encapsulates calendar state and navigation rules through
|
|
52
|
+
* `CalendarProvider`, exposing a simple API for forms, filters,
|
|
53
|
+
* and scheduling flows.
|
|
54
|
+
*
|
|
55
|
+
* @param props Calendar properties (`single` or `range` mode).
|
|
56
|
+
* @returns Calendar UI structure with header and date grid.
|
|
57
|
+
*
|
|
58
|
+
* @example
|
|
59
|
+
* // Single-date selection
|
|
60
|
+
* <Calendar
|
|
61
|
+
* type="single"
|
|
62
|
+
* variant="complete"
|
|
63
|
+
* defaultValue={new Date()}
|
|
64
|
+
* onChange={(date) => {
|
|
65
|
+
* console.log("Selected date:", date);
|
|
66
|
+
* }}
|
|
67
|
+
* onChangeView={(viewDate) => {
|
|
68
|
+
* console.log("Current view:", viewDate);
|
|
69
|
+
* }}
|
|
70
|
+
* />
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* // Range selection
|
|
74
|
+
* <Calendar
|
|
75
|
+
* type="range"
|
|
76
|
+
* variant="basic"
|
|
77
|
+
* defaultValue={[new Date(2026, 5, 1), new Date(2026, 5, 15)]}
|
|
78
|
+
* onChange={([start, end]) => {
|
|
79
|
+
* console.log("Range:", start, end);
|
|
80
|
+
* }}
|
|
81
|
+
* onChangeView={(viewDate) => {
|
|
82
|
+
* console.log("Focused month:", viewDate);
|
|
83
|
+
* }}
|
|
84
|
+
* />
|
|
85
|
+
*/
|
|
86
|
+
declare function Calendar(props: CalendarProps): import("react/jsx-runtime").JSX.Element;
|
|
87
|
+
export { Calendar };
|
|
88
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/index.tsx"],"names":[],"mappings":"AAOA;;GAEG;AACH,KAAK,mBAAmB,GAAG;IACzB,uCAAuC;IACvC,IAAI,EAAE,QAAQ,CAAC;IACf;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/B,6BAA6B;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,KAAK,kBAAkB,GAAG;IACxB,iCAAiC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/B,uDAAuD;IACvD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAC5B,sDAAsD;IACtD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;IACxC,yDAAyD;IACzD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CACrC,CAAC;AAEF;;GAEG;AACH,KAAK,aAAa,GAAG,mBAAmB,GAAG,kBAAkB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,2CAsCrC;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { CalendarProvider } from "./_calendarProvider";
|
|
3
|
+
import { CalendarContainer } from "./calendarContainer";
|
|
4
|
+
import { CalendarHeader } from "./calendarHeader";
|
|
5
|
+
import { CalendarTableBody } from "./calendarTableBody";
|
|
6
|
+
import { CalendarTableContainer } from "./calendarTableContainer";
|
|
7
|
+
import { CalendarTableHeader } from "./calendarTableHeader";
|
|
8
|
+
/**
|
|
9
|
+
* Reusable calendar component with support for two selection modes:
|
|
10
|
+
* single date (`single`) and range (`range`).
|
|
11
|
+
*
|
|
12
|
+
* The component encapsulates calendar state and navigation rules through
|
|
13
|
+
* `CalendarProvider`, exposing a simple API for forms, filters,
|
|
14
|
+
* and scheduling flows.
|
|
15
|
+
*
|
|
16
|
+
* @param props Calendar properties (`single` or `range` mode).
|
|
17
|
+
* @returns Calendar UI structure with header and date grid.
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* // Single-date selection
|
|
21
|
+
* <Calendar
|
|
22
|
+
* type="single"
|
|
23
|
+
* variant="complete"
|
|
24
|
+
* defaultValue={new Date()}
|
|
25
|
+
* onChange={(date) => {
|
|
26
|
+
* console.log("Selected date:", date);
|
|
27
|
+
* }}
|
|
28
|
+
* onChangeView={(viewDate) => {
|
|
29
|
+
* console.log("Current view:", viewDate);
|
|
30
|
+
* }}
|
|
31
|
+
* />
|
|
32
|
+
*
|
|
33
|
+
* @example
|
|
34
|
+
* // Range selection
|
|
35
|
+
* <Calendar
|
|
36
|
+
* type="range"
|
|
37
|
+
* variant="basic"
|
|
38
|
+
* defaultValue={[new Date(2026, 5, 1), new Date(2026, 5, 15)]}
|
|
39
|
+
* onChange={([start, end]) => {
|
|
40
|
+
* console.log("Range:", start, end);
|
|
41
|
+
* }}
|
|
42
|
+
* onChangeView={(viewDate) => {
|
|
43
|
+
* console.log("Focused month:", viewDate);
|
|
44
|
+
* }}
|
|
45
|
+
* />
|
|
46
|
+
*/
|
|
47
|
+
function Calendar(props) {
|
|
48
|
+
const variant = props.variant || "complete";
|
|
49
|
+
if (props.type === "range") {
|
|
50
|
+
return (_jsx(CalendarProvider, { defaultValue: props.defaultValue, calendarType: "range", onChange: props.onChange, onChangeView: props.onChangeView, children: _jsxs(CalendarContainer, { children: [_jsx(CalendarHeader, { basicMode: variant.includes("basic") }), _jsxs(CalendarTableContainer, { children: [_jsx(CalendarTableHeader, {}), _jsx(CalendarTableBody, {})] })] }) }));
|
|
51
|
+
}
|
|
52
|
+
return (_jsx(CalendarProvider, { defaultValue: props.defaultValue, calendarType: "single", onChange: props.onChange, onChangeView: props.onChangeView, children: _jsxs(CalendarContainer, { children: [_jsx(CalendarHeader, { basicMode: variant.includes("basic") }), _jsxs(CalendarTableContainer, { children: [_jsx(CalendarTableHeader, {}), _jsx(CalendarTableBody, {})] })] }) }));
|
|
53
|
+
}
|
|
54
|
+
export { Calendar };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { CardTabProvider } from "../cardTabContext";
|
|
4
4
|
import "./styles.css";
|
|
5
5
|
/**
|
|
6
6
|
* CardTabContainer component - used as a wrapper for CardTabButton components to create tabbed navigation
|
|
@@ -83,6 +83,6 @@ function CardTabContainer(props) {
|
|
|
83
83
|
if (onChange)
|
|
84
84
|
onChange(value);
|
|
85
85
|
}
|
|
86
|
-
return (_jsx(
|
|
86
|
+
return (_jsx(CardTabProvider, { disabled: disabled, currentTab: currentTab, changeCurrentTab: changeCurrentTab, children: _jsx("nav", { className: className.trim(), ...rest, children: children }) }));
|
|
87
87
|
}
|
|
88
88
|
export { CardTabContainer };
|