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

package/src/components/dateTimePicker/stylesheet.ts

@@ -0,0 +1,252 @@
+import {
+    type ViewStyle,
+    type TextStyle,
+    StyleSheet
+} from "react-native";
+import {
+    type DateTimePickerDynamicStyleType,
+    type DateTimePickerTypes,
+    type DateTimePickerType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+export const DATE_TIME_PICKER_TYPE_STYLES: Record<
+    DateTimePickerType,
+    DateTimePickerTypes
+> = {
+    default: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "high",
+        inputColor: "mid",
+        iconColor: "mid"
+    },
+    danger: {
+        placeholderColor: "dangerLow",
+        hintTextIconColor: "danger",
+        focusBorderColor: "danger",
+        containerColor: "danger",
+        hintTextColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger",
+        inputColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        placeholderColor: "successLow",
+        hintTextIconColor: "success",
+        focusBorderColor: "success",
+        containerColor: "success",
+        hintTextColor: "success",
+        borderColor: "success",
+        titleColor: "success",
+        inputColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        placeholderColor: "warningLow",
+        hintTextIconColor: "warning",
+        focusBorderColor: "warning",
+        containerColor: "warning",
+        hintTextColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning",
+        inputColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        placeholderColor: "infoLow",
+        hintTextIconColor: "info",
+        focusBorderColor: "info",
+        containerColor: "info",
+        hintTextColor: "info",
+        borderColor: "info",
+        titleColor: "info",
+        inputColor: "info",
+        iconColor: "info"
+    },
+    question: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "mid",
+        inputColor: "mid",
+        iconColor: "mid"
+    }
+};
+
+export const getDateTimePickerType = ({
+    type
+}: {
+    type: DateTimePickerType;
+}) => {
+    const currentType = DATE_TIME_PICKER_TYPE_STYLES[type];
+
+    return currentType;
+};
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        boxSizing: "border-box"
+    },
+    contentContainer: {
+        boxSizing: "border-box",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        position: "relative",
+        minWidth: 250
+    },
+    content: {
+        flexShrink: 1,
+        width: "100%",
+        flex: 1
+    },
+    contentText: {
+        minHeight: 20
+    },
+    cleanButton: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        zIndex: 99
+    },
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {
+
+    },
+    icon: {
+        justifyContent: "center",
+        alignContent: "center",
+        alignItems: "center",
+        zIndex: 99
+    },
+    required: {
+    },
+    hintTextIcon: {
+    },
+    hintText: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    subTitle: {
+
+    },
+    overlay: {
+        position: "absolute",
+        zIndex: 98,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    rightIcon: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        zIndex: 99
+    }
+});
+
+export const useStyles = ({
+    spreadBehaviour,
+    inlineSpaces,
+    currentType,
+    isDisabled,
+    radiuses,
+    isActive,
+    borders,
+    colors,
+    spaces,
+    type
+}: DateTimePickerDynamicStyleType) => {
+    const styleType = type === "danger" ? "error" : type === "question" ? "neutral" : type;
+
+    const styles = {
+        container: {
+        } as Mutable<ViewStyle>,
+        contentContainer: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderColor: colors.content.container[currentType.containerColor],
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            borderRadius: radiuses.actions,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingMd,
+            borderWidth: borders.line
+        } as Mutable<ViewStyle>,
+        content: {
+
+        } as Mutable<ViewStyle>,
+        contentText: {
+
+        } as Mutable<TextStyle>,
+        cleanButton: {
+            marginLeft: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        titleContainer: {
+            marginBottom: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        title: {
+
+        } as Mutable<TextStyle>,
+        icon: {
+            marginRight: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        required: {
+            marginRight: inlineSpaces.required
+        } as Mutable<ViewStyle>,
+        hintTextIcon: {
+            marginRight: spaces.spacingXs
+        } as Mutable<ViewStyle>,
+        hintText: {
+            marginTop: spaces.spacingSm
+        } as Mutable<TextStyle>,
+        subTitle: {
+            marginLeft: inlineSpaces.subTitle
+        } as Mutable<TextStyle>,
+        overlay: {
+            borderRadius: radiuses.actions - 1
+        } as Mutable<ViewStyle>,
+        rightIcon: {
+            marginLeft: spaces.spacingSm
+        } as Mutable<ViewStyle>
+    };
+
+    if(isDisabled) {
+        const disableStyleType = styleType === "default" ? "neutral" : styleType;
+
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[disableStyleType];
+        styles.container.borderColor = colors.system.state.overlay.disabled[disableStyleType];
+    }
+
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+
+    if (spreadBehaviour === "stretch") {
+        styles.container.justifyContent = "center";
+        styles.container.width = "100%";
+    }
+
+    if(isActive) {
+        styles.contentContainer.borderColor = colors.content.border.emphasized;
+    }
+
+    return styles;
+};
+export default stylesheet;

package/src/components/dateTimePicker/type.ts

@@ -0,0 +1,214 @@
+import {
+    type ViewStyle
+} from "react-native";
+import {
+    type NCoreUIKitIcon
+} from "../../types";
+import type IBottomSheetProps from "../bottomSheet/type";
+import type {
+    RRule
+} from "rrule";
+import type {
+    DayOfWeekLengthType
+} from "../dateSelector/type";
+import type {
+    MonthOfYearLengthType
+} from "../monthSelector/type";
+
+export type IDateTimePickerRef = {
+    setDateRange: (dateRange: DateTimePickerDateRange) => void;
+    getValue: () => {
+        dateRange?: DateTimePickerDateRange;
+        dateRule?: RRule;
+        date?: Date;
+    };
+    setIsLoading: (state: boolean) => void;
+    setDateRule: (dateRule: RRule) => void;
+    setDate: (date: Date) => void;
+    cancel: () => void;
+    clean: () => void;
+    focus: () => void;
+    blur: () => void;
+    ok: () => void;
+};
+
+export type DateTimePickerDynamicStyleType = {
+    inlineSpaces: NCoreUIKit.ActivePalette["inlineSpaces"];
+    spreadBehaviour?: DateTimePickerSpreadBehaviour;
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    currentType: DateTimePickerTypes;
+    borders: NCoreUIKit.Borders;
+    type: DateTimePickerType;
+    isSearchable?: boolean;
+    isDisabled?: boolean;
+    isActive: boolean;
+    title?: string;
+    icon?: boolean;
+};
+
+export type DateTimePickerTypes = {
+    containerColor: keyof NCoreUIKit.ContainerContentColors;
+    focusBorderColor: keyof NCoreUIKit.BorderContentColors;
+    hintTextIconColor: keyof NCoreUIKit.IconContentColors;
+    placeholderColor: keyof NCoreUIKit.TextContentColors;
+    hintTextColor: keyof NCoreUIKit.TextContentColors;
+    borderColor: keyof NCoreUIKit.BorderContentColors;
+    inputColor: keyof NCoreUIKit.TextContentColors;
+    titleColor: keyof NCoreUIKit.TextContentColors;
+    iconColor: keyof NCoreUIKit.IconContentColors;
+};
+
+export type DateTimePickerType = "default" | "danger" | "warning" | "question" | "success" | "info";
+
+export type DateTimePickerSpreadBehaviour = "baseline" | "stretch" | "free";
+
+export type DateTimePickerPickerType = "date" | "time" | "date-time";
+
+export type DateTimePickerVariant = "single" | "range" | "rrule";
+
+export type DateTimePickerDateRange = {
+    start?: Date;
+    end?: Date;
+};
+
+export type DateTimePickerDateRangeResponse = {
+    start?: Date | string;
+    end?: Date | string;
+};
+
+export type DateCalendarType = "day" | "month" | "year";
+
+export type YearToken = "YYYY" | "YY";
+
+export type MonthToken = "MMMM" | "MMM" | "MM" | "M";
+
+export type DayToken = "dddd" | "ddd" | "DD" | "D";
+
+export type DateTokenCombination = `${YearToken}${Separator}${MonthToken}${Separator}${DayToken}` |
+    `${DayToken}${Separator}${MonthToken}${Separator}${YearToken}` |
+    `${MonthToken}${Separator}${DayToken}${Separator}${YearToken}`;
+
+export type Separator = "-" | "." | "/" | " ";
+
+export type TimeToken = "HH:mm" | "HH:mm:ss" | "hh:mm a";
+
+export type ValidTitleFormat = DateTokenCombination | `${DateTokenCombination} ${TimeToken}`;
+
+interface IDateTimePickerProps {
+    dateRangeTitle?: (dateRange: DateTimePickerDateRange | undefined) => string;
+    customDateTimeSheetTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    isTimeSelectWorksWithCenterWhenTimePicker?: boolean;
+    spreadBehaviour?: DateTimePickerSpreadBehaviour;
+    onChange?: (props: {
+        dateRange?: DateTimePickerDateRangeResponse,
+        date?: Date | string,
+        dateRule?: RRule
+    }) => void;
+    onOk?: (props: {
+        dateRange?: DateTimePickerDateRangeResponse,
+        date?: Date | string,
+        dateRule?: RRule
+    }) => void;
+    onCancel?: (props: {
+        dateRange?: DateTimePickerDateRangeResponse,
+        date?: Date | string,
+        dateRule?: RRule
+    }) => void;
+    multipleSelectMinimumRequiredDayCount?: number;
+    customDateTimeSheetLocalize?: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
+    };
+    customLocalize?: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
+    };
+    monthOfYearLengthType?: MonthOfYearLengthType;
+    initialDateRange?: DateTimePickerDateRange;
+    multipleSelectMinimumRequireMS?: number;
+    removeSelectValidation?: (props: {
+        dateRange?: DateTimePickerDateRange,
+        dateRule?: RRule,
+        date?: Date
+    }) => boolean;
+    selectValidation?: (props: {
+        dateRange?: DateTimePickerDateRange,
+        dateRule?: RRule,
+        date?: Date
+    }) => boolean;
+    isStartDateSelectionRequired?: boolean;
+    dayOfWeekLength?: DayOfWeekLengthType;
+    pickerType?: DateTimePickerPickerType;
+    isEndDateSelectionRequired?: boolean;
+    localeBasedFirstDayOfWeek?: boolean;
+    isShowCalenderChangerTool?: boolean;
+    dateCalendarType?: DateCalendarType;
+    hintTextContainerStyle?: ViewStyle;
+    renderLoadingIcon?: NCoreUIKitIcon;
+    contentContainerStyle?: ViewStyle;
+    multipleSelectMaximumMS?: number;
+    multipleSelectDayLimit?: number;
+    returnFormat?: ValidTitleFormat;
+    variant?: DateTimePickerVariant;
+    isShowTodayIndicator?: boolean;
+    titleFormat?: ValidTitleFormat;
+    isShowDateTimeTools?: boolean;
+    hintTextIconStyle?: ViewStyle;
+    hintTextIcon?: NCoreUIKitIcon;
+    isWorkWithRealtime?: boolean;
+    isShowHintTextIcon?: boolean;
+    isWorkWithSeconds?: boolean;
+    cleanIconStyle?: ViewStyle;
+    rightIconStyle?: ViewStyle;
+    rightIcon?: NCoreUIKitIcon;
+    dateTimeSheetProps?: Omit<
+        IBottomSheetProps,
+        "key" |
+        "customKey" |
+        "ref" |
+        "isAutoHeight" |
+        "isActive" |
+        "renderBottom" |
+        "renderHeader" |
+        "onClose"
+    >;
+    type?: DateTimePickerType;
+    isShowSubTitle?: boolean;
+    isCleanEnabled?: boolean;
+    contentStyle?: ViewStyle;
+    initialDateRule?: RRule;
+    isSearchable?: boolean;
+    iconStyle?: ViewStyle;
+    icon?: NCoreUIKitIcon;
+    placeholder?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    isOptional?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    initialDate?: Date;
+    customKey?: string;
+    maxChoice?: number;
+    minChoice?: number;
+    hintText?: string;
+    subTitle?: string;
+    style?: ViewStyle;
+    maxDate?: Date;
+    minDate?: Date;
+    title?: string;
+    id?: string;
+};
+export type {
+    IDateTimePickerProps as default
+};