Feature: Date Time Picker start.

example/src/pages/home/index.tsx

@@ -471,18 +471,20 @@ Burası alıntı metnidir.
         <SelectBox
             keyExtractor={(data, index) => `${data.t}-${index}`}
             titleExtractor={(data) => data.t}
+            initialSelectedItems={[{
+                __title: X[0]?.t as string,
+                __key: `${X[0]?.t}-0`
+            }]}
             subTitle="Deneme Subtitle"
             // isWorkWithRealtime={false}
-            hintText="Test deneme"
-            isShowSubTitle={true}
-            isMultipleSelect={true}
             isWorkWithRealtime={false}
+            spreadBehaviour="baseline"
+            isMultipleSelect={true}
+            isShowSubTitle={true}
+            hintText="Test deneme"
+            isCleanEnabled={true}
             maxChoice={-1}
             minChoice={0}
-            initialSelectedItems={[{
-                __title: X[0]?.t as string,
-                __key: `${X[0]?.t}-0`
-            }]}
             isSearchable={true}
             title="Deneme Box"
             isRequired={true}

src/components/bottomSheet/index.tsx

@@ -76,6 +76,7 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     ...props
 }, ref) => {
     const {
+        radiuses,
         colors,
         spaces
     } = NCoreUIKitTheme.useContext(customTheme);
@@ -718,6 +719,10 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
             {...panResponder.panHandlers}
             onLayout={onLayout}
             style={[
+                {
+                    borderTopStartRadius: radiuses.lg,
+                    borderTopEndRadius: radiuses.lg
+                },
                 style,
                 {
                     height: (isAutoHeight || !snapPoint) && !isMeasured ? "auto" : animatedHeight,

src/components/dateTimePicker/index.tsx

@@ -86,6 +86,7 @@ const DateTimePicker = ({
     isDisabled = false,
     onBlur: onBlurProp,
     dateTimeSheetProps,
+    variant = "single",
     hintTextIconStyle,
     initialDateRange,
     type = "default",
@@ -351,27 +352,100 @@ const DateTimePicker = ({
         }
     };
 
-    const selectObject = (selectedDate: Date) => {
+    const selectDateRule = (selectedDateRule?: RRule) => {
         if(isWorkWithRRule) {
-            // TODO: date rule.
-            console.log(0);
-        } else {
-            if(isMultipleSelect) {
-                // TODO: dateRange.
-                console.log(1);
+            if(selectedDateRule && selectedDateRule !== dateRule) {
+                if(selectValidation) {
+                    if(selectValidation({
+                        dateRule: selectedDateRule
+                    })) {
+                        if(isWorkWithRealtime) {
+                            setDateRule(selectedDateRule);
+                        } else {
+                            setTempDateRule(selectedDateRule);
+                        }
+                    }
+                } else {
+                    if(isWorkWithRealtime) {
+                        setDateRule(selectedDateRule);
+                    } else {
+                        setTempDateRule(selectedDateRule);
+                    }
+                }
             } else {
-                if(selectedDate === date) {
-                    if(removeSelectValidation) {
-                        if(removeSelectValidation({
-                            date
-                        })) {
-                            if(isWorkWithRealtime) {
-                                setDate(undefined);
-                            } else {
-                                setTempDate(undefined);
-                            }
+                if(removeSelectValidation) {
+                    if(removeSelectValidation({
+                        dateRule
+                    })) {
+                        setTempDateRule(undefined);
+                        setDateRule(undefined);
+                    }
+                } else {
+                    setTempDateRule(undefined);
+                    setDateRule(undefined);
+                }
+            }
+        }
+    };
+
+    const selectMultipleObject = (selectedDateRange?: {
+        start?: Date;
+        end?: Date;
+    }) => {
+        if(!isWorkWithRRule && isMultipleSelect) {
+            if(selectedDateRange) {
+                if(selectValidation) {
+                    if(selectValidation({
+                        dateRule
+                    })) {
+                        if(isWorkWithRealtime) {
+                            setDateRange({
+                                start: selectedDateRange.start,
+                                end: selectedDateRange.end
+                            });
+                        } else {
+                            setTempDateRange({
+                                start: selectedDateRange.start,
+                                end: selectedDateRange.end
+                            });
                         }
+                    }
+                } else {
+                    if(isWorkWithRealtime) {
+                        setDateRange({
+                            start: selectedDateRange.start,
+                            end: selectedDateRange.end
+                        });
                     } else {
+                        setTempDateRange({
+                            start: selectedDateRange.start,
+                            end: selectedDateRange.end
+                        });
+                    }
+                }
+            } else {
+                if(removeSelectValidation) {
+                    if(removeSelectValidation({
+                        dateRange: selectedDateRange
+                    })) {
+                        setTempDateRange(undefined);
+                        setDateRange(undefined);
+                    }
+                } else {
+                    setTempDateRange(undefined);
+                    setDateRange(undefined);
+                }
+            }
+        }
+    };
+
+    const selectObject = (selectedDate?: Date) => {
+        if(!isWorkWithRRule && !isMultipleSelect) {
+            if(selectedDate === date) {
+                if(removeSelectValidation) {
+                    if(removeSelectValidation({
+                        date
+                    })) {
                         if(isWorkWithRealtime) {
                             setDate(undefined);
                         } else {
@@ -379,23 +453,29 @@ const DateTimePicker = ({
                         }
                     }
                 } else {
-                    if(selectValidation) {
-                        if(selectValidation({
-                            date
-                        })) {
-                            if(isWorkWithRealtime) {
-                                setDate(selectedDate);
-                            } else {
-                                setTempDate(selectedDate);
-                            }
-                        }
+                    if(isWorkWithRealtime) {
+                        setDate(undefined);
                     } else {
+                        setTempDate(undefined);
+                    }
+                }
+            } else {
+                if(selectValidation) {
+                    if(selectValidation({
+                        date
+                    })) {
                         if(isWorkWithRealtime) {
                             setDate(selectedDate);
                         } else {
                             setTempDate(selectedDate);
                         }
                     }
+                } else {
+                    if(isWorkWithRealtime) {
+                        setDate(selectedDate);
+                    } else {
+                        setTempDate(selectedDate);
+                    }
                 }
             }
         }
@@ -769,22 +849,31 @@ const DateTimePicker = ({
             LoadingIconComponentProp={LoadingIconComponentProp}
             dateTimePickerKey={dateTimePickerKey.current}
             customLocalize={customDateTimeSheetLocalize}
+            selectMultipleObject={selectMultipleObject}
             isWorkWithRealtime={isWorkWithRealtime}
             customTheme={customDateTimeSheetTheme}
             bottomSheetProps={dateTimeSheetProps}
             isMultipleSelect={isMultipleSelect}
             isShowTools={isShowDateTimeTools}
+            selectDateRule={selectDateRule}
             bottomSheetRef={bottomSheetRef}
             selectObject={selectObject}
             setIsLoading={setIsLoading}
+            setDateRange={setDateRange}
             setIsActive={setIsActive}
+            setDateRule={setDateRule}
             maxChoice={maxChoice}
             minChoice={minChoice}
             isLoading={isLoading}
+            dateRange={dateRange}
+            dateRule={dateRule}
             isActive={isActive}
+            variant={variant}
+            setDate={setDate}
             cancel={cancel}
             clean={clean}
             title={title}
+            date={date}
             ok={ok}
         />
     </View>;

src/components/dateTimePicker/type.ts

@@ -52,6 +52,8 @@ export type DateTimePickerType = "default" | "danger" | "warning" | "question" |
 
 export type DateTimePickerSpreadBehaviour = "baseline" | "stretch" | "free";
 
+export type DateTimePickerVariant = "single" | "range" | "rrule";
+
 export type DateTimePickerDateRange = {
     start?: Date;
     end?: Date;
@@ -137,6 +139,7 @@ interface IDateTimePickerProps {
     >;
     dateRangeTitle?: (dateRange: DateTimePickerDateRange | undefined) => string;
     initialDateRange?: DateTimePickerDateRange;
+    variant?: DateTimePickerVariant;
     titleFormat?: ValidTitleFormat;
     isShowDateTimeTools?: boolean;
     isWorkWithRealtime?: boolean;

src/components/dateTimeSheet/index.tsx

@@ -21,24 +21,33 @@ import Text from "../text";
 
 const DateTimeSheet = ({
     LoadingIconComponentProp,
+    selectMultipleObject,
     isWorkWithRealtime,
     isShowTools = true,
     dateTimePickerKey,
     isMultipleSelect,
     bottomSheetProps,
+    selectDateRule,
     bottomSheetRef,
     customLocalize,
     setIsLoading,
     selectObject,
+    setDateRange,
+    setDateRule,
     customTheme,
     setIsActive,
+    dateRange,
     maxChoice,
     minChoice,
     isLoading,
     isActive,
+    dateRule,
+    setDate,
+    variant,
     cancel,
     clean,
     title,
+    date,
     ok
 }: IDateTimeSheetProps) => {
     const {

src/components/dateTimeSheet/type.ts

@@ -10,6 +10,17 @@ import type {
     IBottomSheetRef
 } from "../bottomSheet/type";
 import type IBottomSheetProps from "../bottomSheet/type";
+import type {
+    RRule
+} from "rrule";
+import type {
+    DateTimePickerDateRange,
+    DateTimePickerVariant
+} from "../dateTimePicker/type";
+
+export type ISelectSheetRef = {
+    open: () => void;
+};
 
 export type SelectSheetDynamicStyleType = {
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
@@ -18,20 +29,31 @@ export type SelectSheetDynamicStyleType = {
 };
 
 interface IDateTimeSheetProps {
-    selectObject: (date: Date) => void;
+    selectMultipleObject:  (dateRange?: DateTimePickerDateRange) => void;
+    setDateRule: Dispatch<SetStateAction<RRule | undefined>>;
     customTheme?: {
         gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
         sharpness?: keyof NCoreUIKit.SharpnessKey;
         paletteKey?: keyof NCoreUIKit.PaletteKey;
         themeKey?: keyof NCoreUIKit.ThemeKey;
     };
+    setDate: Dispatch<SetStateAction<Date | undefined>>;
+    setIsLoading: Dispatch<SetStateAction<boolean>>;
+    setIsActive: Dispatch<SetStateAction<boolean>>;
     customLocalize?: {
         activeLocale?: keyof NCoreUIKit.LocaleKey;
     };
-    setIsLoading: Dispatch<SetStateAction<boolean>>;
-    setIsActive: Dispatch<SetStateAction<boolean>>;
     bottomSheetRef: Ref<IBottomSheetRef> | null;
+    selectDateRule: (dateRule?: RRule) => void;
     LoadingIconComponentProp?: NCoreUIKitIcon;
+    setDateRange: Dispatch<SetStateAction<{
+        start?: Date;
+        end?: Date;
+    } | undefined>>;
+    selectObject: (date?: Date) => void;
+    variant: DateTimePickerVariant;
+    isWorkWithRealtime: boolean;
+    isMultipleSelect?: boolean;
     dateTimePickerKey: string;
     bottomSheetProps?: Omit<
         IBottomSheetProps,
@@ -44,17 +66,21 @@ interface IDateTimeSheetProps {
         "renderHeader" |
         "onClose"
     >;
-    isWorkWithRealtime: boolean;
-    isMultipleSelect?: boolean;
     isShowTools?: boolean;
+    cancel: () => void;
     maxChoice?: number;
     minChoice?: number;
     isLoading: boolean;
-    cancel: () => void;
-    isActive: boolean;
     clean: () => void;
+    isActive: boolean;
+    dateRule?: RRule;
+    dateRange?: {
+        start?: Date;
+        end?: Date;
+    };
     ok: () => void;
     title?: string;
+    date?: Date;
 };
 export type {
     IDateTimeSheetProps as default

src/components/index.ts

@@ -90,6 +90,22 @@ export {
     default as NotificationIndicator
 } from "./notificationIndicator";
 
+export {
+    default as DateTimePicker
+} from "./dateTimePicker";
+
+export {
+    default as DateTimeSheet
+} from "./dateTimeSheet";
+
+export type {
+    IDateTimePickerRef
+} from "./dateTimePicker/type";
+
+export type {
+
+} from "./dateTimeSheet/type";
+
 export {
     default as MarkdownViewer
 } from "./markdownViewer";

src/components/selectBox/index.tsx

@@ -565,11 +565,8 @@ function SelectBox<T>({
                 cleanButtonDynamicStyle
             ]}
             onPress={() => {
-                if(isWorkWithRealtime) {
-                    setSelectedItems([]);
-                } else {
-                    setTempSelectedItems([]);
-                }
+                setSelectedItems([]);
+                setTempSelectedItems([]);
             }}
         >
             <CleanIcon
@@ -699,6 +696,8 @@ function SelectBox<T>({
         return <Text
             variant="labelLargeSize"
             color={titleProps.color}
+            ellipsizeMode="tail"
+            numberOfLines={1}
             style={[
                 stylesheet.subTitle,
                 subTitleDynamicStyle
@@ -729,6 +728,8 @@ function SelectBox<T>({
                 {...titleProps}
                 variant={titleProps.variant}
                 color={titleProps.color}
+                ellipsizeMode="tail"
+                numberOfLines={1}
                 style={[
                     stylesheet.title,
                     titleDynamicStyle
@@ -744,6 +745,8 @@ function SelectBox<T>({
         if(!selectedItems.length) {
             return <Text
                 variant="labelLargeSize"
+                ellipsizeMode="tail"
+                numberOfLines={1}
                 style={[
                     stylesheet.contentText,
                     contentTextDynamicStyle
@@ -755,6 +758,8 @@ function SelectBox<T>({
 
         return <Text
             variant="labelLargeSize"
+            ellipsizeMode="tail"
+            numberOfLines={1}
             style={[
                 stylesheet.contentText,
                 contentTextDynamicStyle

src/components/selectBox/stylesheet.ts

@@ -108,7 +108,9 @@ const stylesheet = StyleSheet.create({
         minWidth: 250
     },
     content: {
-
+        flexShrink: 1,
+        width: "100%",
+        flex: 1
     },
     contentText: {
         minHeight: 20
@@ -145,6 +147,7 @@ const stylesheet = StyleSheet.create({
     },
     overlay: {
         position: "absolute",
+        display: "none",
         zIndex: 98,
         bottom: 0,
         right: 0,
@@ -199,7 +202,6 @@ export const useStyles = ({
             marginBottom: spaces.spacingSm
         } as Mutable<ViewStyle>,
         title: {
-
         } as Mutable<TextStyle>,
         icon: {
             marginRight: spaces.spacingSm
@@ -237,7 +239,9 @@ export const useStyles = ({
     }
 
     if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
         styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
         styles.container.width = "100%";
     }