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

package/src/components/dateTimeSheet/index.tsx

@@ -0,0 +1,418 @@
+import {
+    useState,
+    useRef
+} from "react";
+import {
+    TouchableOpacity,
+    View
+} from "react-native";
+import type IDateTimeSheetProps from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import type {
+    IDateSelectorRef
+} from "../dateSelector/type";
+import type {
+    IMonthSelectorRef
+} from "../monthSelector/type";
+import type {
+    IYearSelectorRef
+} from "../yearSelector/type";
+import MonthSelector from "../monthSelector";
+import TimeSelector from "../timeSelector";
+import YearSelector from "../yearSelector";
+import DateSelector from "../dateSelector";
+import BottomSheet from "../bottomSheet";
+import CheckBox from "../checkBox";
+import Loading from "../loading";
+import Button from "../button";
+import Text from "../text";
+
+const DateTimeSheet = ({
+    isTimeSelectWorksWithCenterWhenTimePicker,
+    dateCalendarType: dateCalendarTypeProp,
+    multipleSelectMinimumRequiredDayCount,
+    localeBasedFirstDayOfWeek = true,
+    multipleSelectMinimumRequireMS,
+    isShowTodayIndicator = true,
+    isShowCalenderChangerTool,
+    dayOfWeekLength = "short",
+    LoadingIconComponentProp,
+    multipleSelectMaximumMS,
+    multipleSelectDayLimit,
+    monthOfYearLengthType,
+    selectMultipleObject,
+    isWorkWithRealtime,
+    isShowTools = true,
+    isWorkWithSeconds,
+    dateTimePickerKey,
+    bottomSheetProps,
+    bottomSheetRef,
+    customLocalize,
+    selectObject,
+    customTheme,
+    setIsActive,
+    pickerType,
+    dateRange,
+    maxChoice,
+    minChoice,
+    isLoading,
+    isActive,
+    dateRule,
+    variant,
+    maxDate,
+    minDate,
+    cancel,
+    clean,
+    title,
+    date,
+    ok
+}: IDateTimeSheetProps) => {
+    const {
+        radiuses,
+        borders,
+        spaces,
+        colors
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext(customLocalize);
+
+    const [
+        isSheetContentReady,
+        setIsSheetContentReady
+    ] = useState(false);
+
+    const [
+        dateCalendarType,
+        setDateCalendarType
+    ] = useState(dateCalendarTypeProp ?? "day");
+
+    const monthCalendarRef = useRef<IMonthSelectorRef>(null);
+    const yearCalendarRef = useRef<IYearSelectorRef>(null);
+    const dayCalendarRef = useRef<IDateSelectorRef>(null);
+
+    const {
+        calendarChangerToolContainer: calendarChangerToolContainerDynamicStyle,
+        calendarChangerToolButton: calendarChangerToolButtonDynamicStyle,
+        loadingContainer: loadingContainerDynamicStyle,
+        contentContainer: contentContainerDynamicStyle,
+        headerContainer: headerContainerDynamicStyle,
+        bottomContainer: bottomContainerDynamicStyle,
+        toolsContainer: toolsContainerDynamicStyle,
+        cancelButton: cancelButtonDynamicStyle,
+        headerTitle: headerTitleDynamicStyle,
+        okButton: okButtonDynamicStyle
+    } = useStyles({
+        radiuses,
+        borders,
+        spaces,
+        colors
+    });
+
+    const renderCalenderChangerTool = () => {
+        if(!isShowCalenderChangerTool) {
+            return null;
+        }
+
+        if(dateCalendarTypeProp) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.calendarChangerToolContainer,
+                calendarChangerToolContainerDynamicStyle
+            ]}
+        >
+            <TouchableOpacity
+                style={[
+                    stylesheet.calendarChangerToolButton,
+                    calendarChangerToolButtonDynamicStyle,
+                    dateCalendarType === "day" ? {
+                        backgroundColor: colors.content.container.primary
+                    } : null
+                ]}
+                onPress={() => {
+                    setDateCalendarType("day");
+                }}
+            >
+                <Text
+                    color={dateCalendarType === "day" ? "onPrimary" : undefined}
+                >
+                    {localize("daily")}
+                </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+                style={[
+                    stylesheet.calendarChangerToolButton,
+                    calendarChangerToolButtonDynamicStyle,
+                    dateCalendarType === "month" ? {
+                        backgroundColor: colors.content.container.primary
+                    } : null
+                ]}
+                onPress={() => {
+                    setDateCalendarType("month");
+                }}
+            >
+                <Text
+                    color={dateCalendarType === "month" ? "onPrimary" : undefined}
+                >
+                    {localize("monthly")}
+                </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+                style={[
+                    stylesheet.calendarChangerToolButton,
+                    calendarChangerToolButtonDynamicStyle,
+                    dateCalendarType === "year" ? {
+                        backgroundColor: colors.content.container.primary
+                    } : null
+                ]}
+                onPress={() => {
+                    setDateCalendarType("year");
+                }}
+            >
+                <Text
+                    color={dateCalendarType === "year" ? "onPrimary" : undefined}
+                >
+                    {localize("yearly")}
+                </Text>
+            </TouchableOpacity>
+        </View>;
+    };
+
+    const renderDateCalendar = () => {
+        if(pickerType === "time") {
+            return null;
+        }
+
+        if(dateCalendarType === "month") {
+            return <MonthSelector
+                multipleSelectMinimumRequiredDayCount={multipleSelectMinimumRequiredDayCount}
+                setIsSheetContentReady={setIsSheetContentReady}
+                multipleSelectDayLimit={multipleSelectDayLimit}
+                monthOfYearLengthType={monthOfYearLengthType}
+                selectMultipleObject={selectMultipleObject}
+                isShowTodayIndicator={isShowTodayIndicator}
+                selectObject={selectObject}
+                ref={monthCalendarRef}
+                dateRange={dateRange}
+                maxDate={maxDate}
+                minDate={minDate}
+                variant={variant}
+                date={date}
+            />;
+        }
+
+        if(dateCalendarType === "year") {
+            return <YearSelector
+                multipleSelectMinimumRequiredDayCount={multipleSelectMinimumRequiredDayCount}
+                setIsSheetContentReady={setIsSheetContentReady}
+                multipleSelectDayLimit={multipleSelectDayLimit}
+                selectMultipleObject={selectMultipleObject}
+                isShowTodayIndicator={isShowTodayIndicator}
+                selectObject={selectObject}
+                dateRange={dateRange}
+                ref={yearCalendarRef}
+                maxDate={maxDate}
+                minDate={minDate}
+                variant={variant}
+                date={date}
+            />;
+        }
+
+        return <DateSelector
+            multipleSelectMinimumRequiredDayCount={multipleSelectMinimumRequiredDayCount}
+            localeBasedFirstDayOfWeek={localeBasedFirstDayOfWeek}
+            setIsSheetContentReady={setIsSheetContentReady}
+            multipleSelectDayLimit={multipleSelectDayLimit}
+            selectMultipleObject={selectMultipleObject}
+            isShowTodayIndicator={isShowTodayIndicator}
+            dayOfWeekLength={dayOfWeekLength}
+            selectObject={selectObject}
+            dateRange={dateRange}
+            ref={dayCalendarRef}
+            maxDate={maxDate}
+            minDate={minDate}
+            variant={variant}
+            date={date}
+        />;
+    };
+
+    const renderBottomSheetContent = () => {
+        if(isLoading) {
+            return <View
+                style={[
+                    stylesheet.loadingContainer,
+                    loadingContainerDynamicStyle
+                ]}
+            >
+                {LoadingIconComponentProp ? <LoadingIconComponentProp
+                    color="emphasized"
+                    size={20}
+                /> : <Loading/>}
+            </View>;
+        }
+
+        return <View
+            style={[
+                stylesheet.contentContainer,
+                contentContainerDynamicStyle
+            ]}
+        >
+            {renderCalenderChangerTool()}
+            {renderDateCalendar()}
+            {
+                pickerType === "date" ? null : <TimeSelector
+                    isTimeSelectWorksWithCenterWhenTimePicker={isTimeSelectWorksWithCenterWhenTimePicker}
+                    multipleSelectMinimumRequireMS={multipleSelectMinimumRequireMS}
+                    multipleSelectMaximumMS={multipleSelectMaximumMS}
+                    setIsSheetContentReady={setIsSheetContentReady}
+                    selectMultipleObject={selectMultipleObject}
+                    isWorkWithSeconds={isWorkWithSeconds}
+                    selectObject={selectObject}
+                    pickerType={pickerType}
+                    dateRange={dateRange}
+                    maxDate={maxDate}
+                    minDate={minDate}
+                    variant={variant}
+                    date={date}
+                />
+            }
+        </View>;
+    };
+
+    const renderTools = () => {
+        if(!isShowTools) {
+            return null;
+        }
+
+        if(minChoice && maxChoice !== -1) {
+            return null;
+        }
+
+        let isAnySelected = false;
+
+        if(variant === "single" && date) {
+            isAnySelected = true;
+        }
+
+        if(variant === "range" && dateRange && (dateRange.start || dateRange.end)) {
+            isAnySelected = true;
+        }
+
+        if(variant === "rrule" && dateRule) {
+            isAnySelected = true;
+        }
+
+        return <View
+            style={[
+                stylesheet.toolsContainer,
+                toolsContainerDynamicStyle
+            ]}
+        >
+            {!minChoice ? <CheckBox
+                isChecked={isAnySelected ? "checked" : null}
+                title={localize("clean-selection")}
+                spreadBehaviour="free"
+                onPress={() => {
+                    clean();
+                }}
+            /> : null}
+            <Button
+                onPress={() => {
+                    if(monthCalendarRef.current) monthCalendarRef.current.changeCurrentYear(new Date());
+                    if(yearCalendarRef.current) yearCalendarRef.current.changeCurrentView(new Date());
+                    if(dayCalendarRef.current) dayCalendarRef.current.changeCurrentMonth(new Date());
+                }}
+                title={localize("go-to-today")}
+                spreadBehaviour="free"
+                size="small"
+            />
+        </View>;
+    };
+
+    const renderBottomSheetHeader = () => {
+        return <View
+            style={[
+                stylesheet.headerContainer,
+                headerContainerDynamicStyle
+            ]}
+        >
+            {title ? <Text
+                variant="titleMediumSize"
+                style={[
+                    headerTitleDynamicStyle
+                ]}
+            >
+                {title}
+            </Text> : null}
+            {renderTools()}
+        </View>;
+    };
+
+    const renderBottomSheetBottom = () => {
+        if(isWorkWithRealtime) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.bottomContainer,
+                bottomContainerDynamicStyle
+            ]}
+        >
+            <Button
+                title={localize("cancel")}
+                spreadBehaviour="stretch"
+                variant="outline"
+                type="neutral"
+                onPress={() => {
+                    cancel();
+                }}
+                style={{
+                    ...cancelButtonDynamicStyle
+                }}
+            />
+            <Button
+                spreadBehaviour="stretch"
+                title={localize("ok")}
+                onPress={() => {
+                    ok();
+                }}
+                style={{
+                    ...okButtonDynamicStyle
+                }}
+            />
+        </View>;
+    };
+
+    return <BottomSheet
+        {...bottomSheetProps}
+        key={`${dateTimePickerKey}-bottomsheet`}
+        isContentReady={isSheetContentReady}
+        customKey={dateTimePickerKey}
+        ref={bottomSheetRef}
+        isAutoHeight={true}
+        isActive={isActive}
+        renderBottom={() => {
+            return renderBottomSheetBottom();
+        }}
+        renderHeader={() => {
+            return renderBottomSheetHeader();
+        }}
+        onClosed={() => {
+            setIsActive(false);
+        }}
+    >
+        {renderBottomSheetContent()}
+    </BottomSheet>;
+};
+export default DateTimeSheet;

package/src/components/dateTimeSheet/stylesheet.ts

@@ -0,0 +1,99 @@
+import {
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import {
+    type DateTimeSheetDynamicStyleType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+const stylesheet = StyleSheet.create({
+    contentContainer: {
+        flexDirection: "column"
+    },
+    headerContainer: {
+        flexDirection: "column",
+        width: "100%"
+    },
+    bottomContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    loadingContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        flex: 1
+    },
+    itemContentContainer: {
+        flex: 1
+    },
+    toolsContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    moreLoadingContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%"
+    },
+    calendarChangerToolContainer: {
+        alignSelf: "baseline",
+        flexDirection: "row"
+    },
+    calendarChangerToolButton: {
+    }
+});
+
+export const useStyles = ({
+    radiuses,
+    borders,
+    spaces,
+    colors
+}: DateTimeSheetDynamicStyleType) => {
+    const styles = {
+        contentContainer: {
+            paddingVertical: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        headerContainer: {
+            marginBottom: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        headerTitle: {
+        } as Mutable<ViewStyle>,
+        bottomContainer: {
+            marginTop: spaces.spacingSm,
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        cancelButton: {
+            marginRight: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        okButton: {
+            marginLeft: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        loadingContainer: {
+            padding: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        toolsContainer: {
+            marginTop: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        moreLoadingContainer: {
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        calendarChangerToolContainer: {
+            borderColor: colors.content.border.subtle,
+            marginBottom: spaces.spacingSm,
+            borderRadius: radiuses.actions,
+            borderWidth: borders.line
+        } as Mutable<ViewStyle>,
+        calendarChangerToolButton: {
+            paddingHorizontal: spaces.spacingSm,
+            paddingVertical: spaces.spacingSm,
+            borderRadius: radiuses.actions
+        } as Mutable<ViewStyle>
+    };
+
+    return styles;
+};
+export default stylesheet;

package/src/components/dateTimeSheet/type.ts

@@ -0,0 +1,98 @@
+import type {
+    SetStateAction,
+    Dispatch,
+    Ref
+} from "react";
+import {
+    type NCoreUIKitIcon
+} from "../../types";
+import type {
+    IBottomSheetRef
+} from "../bottomSheet/type";
+import type IBottomSheetProps from "../bottomSheet/type";
+import type {
+    RRule
+} from "rrule";
+import type {
+    DateTimePickerPickerType,
+    DateTimePickerDateRange,
+    DateTimePickerVariant,
+    DateCalendarType
+} from "../dateTimePicker/type";
+import type {
+    DayOfWeekLengthType
+} from "../dateSelector/type";
+import type {
+    MonthOfYearLengthType
+} from "../monthSelector/type";
+
+export type DateTimeSheetDynamicStyleType = {
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    borders: NCoreUIKit.ActivePalette["borders"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+};
+
+interface IDateTimeSheetProps {
+    selectMultipleObject:  (dateRange?: DateTimePickerDateRange) => void;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    isTimeSelectWorksWithCenterWhenTimePicker?: boolean;
+    setIsActive: Dispatch<SetStateAction<boolean>>;
+    multipleSelectMinimumRequiredDayCount?: number;
+    customLocalize?: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
+    };
+    monthOfYearLengthType?: MonthOfYearLengthType;
+    bottomSheetRef: Ref<IBottomSheetRef> | null;
+    selectDateRule: (dateRule?: RRule) => void;
+    LoadingIconComponentProp?: NCoreUIKitIcon;
+    multipleSelectMinimumRequireMS?: number;
+    dayOfWeekLength?: DayOfWeekLengthType;
+    pickerType: DateTimePickerPickerType;
+    localeBasedFirstDayOfWeek?: boolean;
+    isShowCalenderChangerTool?: boolean;
+    selectObject: (date?: Date) => void;
+    dateCalendarType?: DateCalendarType;
+    multipleSelectMaximumMS?: number;
+    multipleSelectDayLimit?: number;
+    isShowTodayIndicator?: boolean;
+    variant: DateTimePickerVariant;
+    isWorkWithRealtime: boolean;
+    isWorkWithSeconds?: boolean;
+    dateTimePickerKey: string;
+    bottomSheetProps?: Omit<
+        IBottomSheetProps,
+        "key" |
+        "customKey" |
+        "ref" |
+        "isActive" |
+        "renderBottom" |
+        "renderHeader" |
+        "onClose"
+    >;
+    isShowTools?: boolean;
+    cancel: () => void;
+    maxChoice?: number;
+    minChoice?: number;
+    isLoading: boolean;
+    clean: () => void;
+    isActive: boolean;
+    dateRule?: RRule;
+    maxDate?: Date;
+    minDate?: Date;
+    dateRange?: {
+        start?: Date;
+        end?: Date;
+    };
+    ok: () => void;
+    title?: string;
+    date?: Date;
+};
+export type {
+    IDateTimeSheetProps as default
+};