ncore-ui-kit 1.0.0-pre-alpha.0

package/src/components/monthSelector/index.tsx

@@ -0,0 +1,447 @@
+import {
+    useImperativeHandle,
+    useLayoutEffect,
+    forwardRef,
+    useEffect,
+    useState,
+    type Ref,
+    useRef
+} from "react";
+import {
+    TouchableOpacity,
+    type ViewStyle,
+    View
+} from "react-native";
+import type {
+    IMonthSelectorRef,
+    CalendarMonth
+} from "./type";
+import type IMonthSelectorProps from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import {
+    dateSelect
+} from "./util";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    NCoreUIKitToast
+} from "../../core/hooks";
+import {
+    type Mutable,
+    webStyle
+} from "../../types";
+import {
+    ChevronRight as ChevronRightIcon,
+    ChevronLeft as ChevronLeftIcon
+} from "lucide-react-native";
+import moment from "moment";
+import Text from "../text";
+
+const MONTH_LINES = [
+    [
+        0,
+        1,
+        2
+    ],
+    [
+        3,
+        4,
+        5
+    ],
+    [
+        6,
+        7,
+        8
+    ],
+    [
+        9,
+        10,
+        11
+    ]
+];
+
+const MonthSelector = ({
+    multipleSelectMinimumRequiredDayCount,
+    monthOfYearLengthType = "long",
+    isShowTodayIndicator = true,
+    viewDate: viewDateProp,
+    multipleSelectDayLimit,
+    setIsSheetContentReady,
+    selectMultipleObject,
+    selectObject,
+    dateRange,
+    maxDate,
+    minDate,
+    variant,
+    date
+}: IMonthSelectorProps, ref: Ref<IMonthSelectorRef>) => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const selectDate = dateSelect({
+        dateRange,
+        variant,
+        date
+    });
+
+    const [
+        viewDate,
+        setViewDate
+    ] = useState(viewDateProp ? viewDateProp : selectDate);
+
+    const [
+        yearMonths,
+        setYearMonths
+    ] = useState<Array<CalendarMonth>>([]);
+
+    const allSelectedMonths = useRef<Array<Date>>([]);
+
+    const {
+        nextPrevToolChevronButton: nextPrevToolChevronButtonDynamicStyle,
+        nextPrevToolContainer: nextPrevToolContainerDynamicStyle,
+        todayIndicator: todayIndicatorDynamicStyle,
+        day: dayDynamicStyle
+    } = useStyles({
+        radiuses,
+        borders,
+        colors,
+        spaces
+    });
+
+    useEffect(() => {
+        const allMonths = getMonthsOfViewYear({
+            tDate: viewDate
+        });
+
+        setYearMonths(allMonths);
+    }, [
+        dateRange,
+        viewDate,
+        date
+    ]);
+
+    useLayoutEffect(() => {
+        if(yearMonths && yearMonths.length) setIsSheetContentReady(true);
+    }, [
+        yearMonths
+    ]);
+
+    useEffect(() => {
+        if(viewDateProp) {
+            setViewDate(viewDateProp);
+        }
+    }, [viewDateProp]);
+
+    useImperativeHandle(
+        ref,
+        () => ({
+            changeCurrentYear: (date: Date) => {
+                setViewDate(date);
+            }
+        }),
+        []
+    );
+
+    const getMonthsOfViewYear = ({
+        tDate
+    }: {
+        tDate: Date
+    }): Array<CalendarMonth> => {
+        allSelectedMonths.current = [];
+
+        const targetDate = moment(new Date(tDate));
+
+        const startOfCalendar = targetDate.clone().startOf("year");
+
+        const months = monthOfYearLengthType === "short" ? moment.monthsShort() : moment.months();
+
+        const totalMonths = months.length;
+
+        const allMonths = Array.from({
+            length: totalMonths
+        }).map((_, index) => {
+            const currentMonth = startOfCalendar.clone().add(index, "months");
+
+            let isSelected = false;
+
+            if(variant === "single" && date) {
+                allSelectedMonths.current = [date];
+
+                if(moment(currentMonth).isSame(date, "month")) isSelected = true;
+            } else if(variant === "range" && dateRange && dateRange.start) {
+                if(dateRange.end) {
+                    allSelectedMonths.current = Array.from({
+                        length: moment(dateRange.end).diff(dateRange.start, "months") + 1
+                    }, (_, i) =>
+                        moment(dateRange.start).clone().add(i, "months").toDate()
+                    );
+
+                    if(moment(currentMonth).isBetween(dateRange.start, dateRange.end, "month", "[]")) isSelected = true;
+                } else if(moment(currentMonth).isSame(dateRange.start)) {
+                    allSelectedMonths.current = [dateRange.start];
+
+                    isSelected = true;
+                }
+            }
+
+            let isDisabled = false;
+
+            if(minDate && moment(currentMonth).isBefore(moment(minDate).startOf("month"))) {
+                isDisabled = true;
+            }
+
+            if(maxDate && moment(currentMonth).isAfter(moment(maxDate).endOf("month"))) {
+                isDisabled = true;
+            }
+
+            const monthNumber = currentMonth.month();
+
+            return {
+                originalIndex: allSelectedMonths.current.findIndex((month) => moment(currentMonth).isSame(month, "month")),
+                isCurrentYear: currentMonth.isSame(targetDate, "year"),
+                isToday: currentMonth.isSame(moment(), "month"),
+                title: months[monthNumber] as string,
+                monthNumber: monthNumber + 1,
+                monthOfYear: monthNumber,
+                date: currentMonth,
+                isDisabled,
+                isSelected
+            };
+        });
+
+        return allMonths;
+    };
+
+    const renderDay = ({
+        monthIndex,
+        monthItem
+    }: {
+        monthItem: CalendarMonth;
+        monthIndex: number;
+    }) => {
+        const isLastItemSelected = monthItem.isSelected && monthItem.originalIndex === allSelectedMonths.current.length - 1;
+        const isFirstItemSelected = monthItem.isSelected && monthItem.originalIndex === 0;
+
+        const selectionStyle: Array<Mutable<ViewStyle> | null> = [
+            isFirstItemSelected && allSelectedMonths.current.length > 1 ? {
+                borderBottomRightRadius: 0,
+                borderTopRightRadius: 0
+            } : null,
+            isLastItemSelected && allSelectedMonths.current.length > 1 ? {
+                borderBottomLeftRadius: 0,
+                borderTopLeftRadius: 0
+            } : null
+        ];
+
+        let dayTitleColor: keyof NCoreUIKit.TextContentColors = "mid";
+
+        if(monthItem.isSelected && !isLastItemSelected && !isFirstItemSelected) {
+            dayTitleColor = "emphasized";
+
+            selectionStyle.push({
+                borderBottomRightRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderTopRightRadius: 0,
+                borderTopLeftRadius: 0
+            });
+        } else if(monthItem.isSelected) {
+            dayTitleColor = "onPrimary";
+        }
+
+        if(!monthItem.isCurrentYear || monthItem.isDisabled) {
+            dayTitleColor = "disabled";
+        }
+
+        return <TouchableOpacity
+            disabled={!monthItem.isCurrentYear || monthItem.isDisabled}
+            key={`month-${monthIndex}`}
+            onPress={() => {
+                if(!monthItem.isCurrentYear) {
+                    return;
+                }
+
+                if(variant === "single") {
+                    const newDate = date as Date;
+
+                    newDate.setMonth(monthItem.date.toDate().getMonth());
+
+                    selectObject(newDate);
+                } else if(variant === "range") {
+                    if(!dateRange || !dateRange.start) {
+                        selectMultipleObject({
+                            start: new Date(monthItem.date.toDate().setHours(0, 0, 0)),
+                            end: undefined
+                        });
+                        return;
+                    }
+
+                    if(dateRange && moment(dateRange.start).isSame(monthItem.date, "month")) {
+                        selectMultipleObject({
+                            start: undefined,
+                            end: undefined
+                        });
+                        return;
+                    }
+
+                    if(dateRange && !dateRange.end) {
+                        if(multipleSelectDayLimit && moment(monthItem.date).diff(dateRange.start, "month") >= multipleSelectDayLimit) {
+                            NCoreUIKitToast.open({
+                                title: localize("maximum-selection-number-of-days-limit-exceeds")
+                            });
+                            return;
+                        }
+
+                        if(multipleSelectMinimumRequiredDayCount && moment(monthItem.date).diff(dateRange.start, "month") + 1 < multipleSelectMinimumRequiredDayCount) {
+                            NCoreUIKitToast.open({
+                                title: localize("minimum-selection-number-of-days-required-not-provided")
+                            });
+                            return;
+                        }
+
+                        if(moment(monthItem.date).isBefore(dateRange.start)) {
+                            selectMultipleObject({
+                                start: new Date(monthItem.date.toDate().setHours(0, 0, 0)),
+                                end: undefined
+                            });
+                        } else {
+                            selectMultipleObject({
+                                end: new Date(monthItem.date.toDate().setHours(23, 59, 59)),
+                                start: dateRange?.start
+                            });
+                        }
+                        return;
+                    }
+
+                    selectMultipleObject({
+                        start: monthItem.date.toDate(),
+                        end: undefined
+                    });
+                }
+            }}
+            style={[
+                stylesheet.day,
+                dayDynamicStyle,
+                monthItem.isSelected ? {
+                    backgroundColor: colors.content.container.primary,
+                    borderColor: colors.content.container.primary
+                } : null,
+                monthItem.isSelected && !isLastItemSelected && !isFirstItemSelected ? {
+                    backgroundColor: colors.content.container.emphasized,
+                    borderColor: colors.content.container.emphasized
+                } : null,
+                monthItem.isSelected && (monthItem.isDisabled || !monthItem.isCurrentYear) ? {
+                    opacity: 0.33
+                } : null,
+                ...selectionStyle
+            ]}
+        >
+            <Text
+                variant="labelLargeSize"
+                color={dayTitleColor}
+            >
+                {monthItem.title}
+            </Text>
+            {isShowTodayIndicator && monthItem.isToday ? <View
+                style={[
+                    stylesheet.todayIndicator,
+                    selectionStyle,
+                    todayIndicatorDynamicStyle,
+                    monthItem.isSelected ? {
+                        borderColor: colors.content.border.subtle
+                    } : null
+                ]}
+            /> : null}
+        </TouchableOpacity>;
+    };
+
+    const renderNextPrevTool = () => {
+        return <View
+            style={[
+                stylesheet.nextPrevToolContainer,
+                nextPrevToolContainerDynamicStyle
+            ]}
+        >
+            <TouchableOpacity
+                onPress={() => {
+                    const prevViewDate = moment(viewDate).clone().subtract(1, "years");
+                    setViewDate(prevViewDate.toDate());
+                }}
+                style={[
+                    nextPrevToolChevronButtonDynamicStyle
+                ]}
+            >
+                <ChevronLeftIcon
+                    color={colors.content.icon.default}
+                    size={26}
+                />
+            </TouchableOpacity>
+            <Text
+                variant="labelLargeSize"
+                color="high"
+            >
+                {moment(viewDate).format("YYYY")}
+            </Text>
+            <TouchableOpacity
+                onPress={() => {
+                    const nextViewDate = moment(viewDate).clone().add(1, "years");
+                    setViewDate(nextViewDate.toDate());
+                }}
+                style={[
+                    nextPrevToolChevronButtonDynamicStyle
+                ]}
+            >
+                <ChevronRightIcon
+                    color={colors.content.icon.default}
+                    size={26}
+                />
+            </TouchableOpacity>
+        </View>;
+    };
+
+    return <View
+        style={[
+            stylesheet.container
+        ]}
+    >
+        <View>
+            {renderNextPrevTool()}
+        </View>
+        <View
+            style={[
+                stylesheet.contentContainer
+            ]}
+        >
+            {yearMonths && yearMonths.length ? MONTH_LINES.map((mItem, mIndex) => {
+                const currentMonths = mItem.map(mI => yearMonths[mI]);
+
+                return <View
+                    key={`month-row-${mIndex}`}
+                    style={[
+                        stylesheet.rowContainer,
+                        webStyle({
+                            width: "100%"
+                        })
+                    ]}
+                >
+                    {currentMonths.map((monthItem, monthIndex) => {
+                        return renderDay({
+                            monthItem: monthItem as CalendarMonth,
+                            monthIndex
+                        });
+                    })}
+                </View>;
+            }) : null}
+        </View>
+    </View>;
+};
+export default forwardRef(MonthSelector);

package/src/components/monthSelector/stylesheet.ts

@@ -0,0 +1,89 @@
+import {
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    MonthSelectorDynamicStyle
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        justifyContent: "space-between",
+        flexDirection: "column",
+        alignItems: "center"
+    },
+    columnContainer: {
+        justifyContent: "center",
+        flexDirection: "column",
+        alignItems: "center",
+        flexShrink: 1,
+        flex: 1
+    },
+    day: {
+        justifyContent: "center",
+        alignItems: "center",
+        position: "relative",
+        flexShrink: 1,
+        width: "100%",
+        flex: 1
+    },
+    todayIndicator: {
+        position: "absolute",
+        zIndex: 999
+    },
+    nextPrevToolContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flex: 1
+    },
+    rowContainer: {
+        flexDirection: "row"
+    }
+});
+
+export const useStyles = ({
+    radiuses,
+    borders,
+    spaces,
+    colors
+}: MonthSelectorDynamicStyle) => {
+    const styles = {
+        day: {
+            borderBottomRightRadius: radiuses.full,
+            borderBottomLeftRadius: radiuses.full,
+            borderTopRightRadius: radiuses.full,
+            borderTopLeftRadius: radiuses.full,
+            borderColor: "transparent",
+            borderWidth: borders.line,
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        todayIndicator: {
+            borderColor: colors.content.border.default,
+            borderBottomRightRadius: radiuses.full,
+            borderBottomLeftRadius: radiuses.full,
+            borderTopRightRadius: radiuses.full,
+            borderTopLeftRadius: radiuses.full,
+            borderWidth: borders.line,
+            bottom: spaces.spacingXs,
+            right: spaces.spacingXs,
+            left: spaces.spacingXs,
+            top: spaces.spacingXs
+        } as Mutable<ViewStyle>,
+        nextPrevToolContainer: {
+            marginBottom: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        nextPrevToolChevronButton: {
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>
+    };
+
+    return styles;
+};
+export default stylesheet;

package/src/components/monthSelector/type.ts

@@ -0,0 +1,59 @@
+import type {
+    SetStateAction,
+    Dispatch
+} from "react";
+import type {
+    DateTimePickerDateRange,
+    DateTimePickerVariant
+} from "../dateTimePicker/type";
+import type moment from "moment";
+
+export interface IMonthSelectorRef {
+    changeCurrentYear: (date: Date) => void;
+};
+
+export type MonthSelectorDynamicStyle = {
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    borders: NCoreUIKit.ActivePalette["borders"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+};
+
+export interface CalendarMonth {
+    isCurrentYear: boolean;
+    originalIndex: number;
+    isDisabled: boolean;
+    isSelected: boolean;
+    date: moment.Moment;
+    monthNumber: number;
+    monthOfYear: number;
+    isToday: boolean;
+    title: string;
+};
+
+export type MonthSelectInitialGeneratorType = {
+    dateRange?: DateTimePickerDateRange;
+    variant: DateTimePickerVariant;
+    date?: Date;
+};
+
+export type MonthOfYearLengthType = "short" | "long";
+
+interface IMonthSelectorProps {
+    selectMultipleObject: (dateRange?: DateTimePickerDateRange) => void;
+    setIsSheetContentReady: Dispatch<SetStateAction<boolean>>;
+    multipleSelectMinimumRequiredDayCount?: number;
+    monthOfYearLengthType?: MonthOfYearLengthType;
+    selectObject: (date?: Date) => void;
+    dateRange?: DateTimePickerDateRange;
+    multipleSelectDayLimit?: number;
+    isShowTodayIndicator?: boolean;
+    variant: DateTimePickerVariant;
+    viewDate?: Date;
+    maxDate?: Date;
+    minDate?: Date;
+    date?: Date;
+};
+export type {
+    IMonthSelectorProps as default
+};

package/src/components/monthSelector/util.ts

@@ -0,0 +1,20 @@
+import type {
+    MonthSelectInitialGeneratorType
+} from "./type";
+
+export const dateSelect = ({
+    dateRange,
+    variant,
+    date
+}: MonthSelectInitialGeneratorType): Date => {
+    if(variant === "single" && date) {
+        return date;
+    }
+
+    if(variant === "range" && dateRange && (dateRange.start || dateRange.end)) {
+        if(dateRange.start) return dateRange.start;
+        if(dateRange.end) return dateRange.end;
+    }
+
+    return new Date();
+};