Continue: DateSelector start.

example/package.json

@@ -18,6 +18,7 @@
         "expo-font": "~55.0.4",
         "expo-status-bar": "~55.0.4",
         "lucide-react-native": "^1.8.0",
+        "moment": "https://git.nibgat.space/nibgat-community/moment.git",
         "ncore-context": "^1.0.5",
         "react": "19.2.6",
         "react-dom": "19.2.6",
@@ -25,7 +26,8 @@
         "react-native-safe-area-context": "^5.7.0",
         "react-native-screens": "^4.24.0",
         "react-native-svg": "^15.15.3",
-        "react-native-web": "~0.21.0"
+        "react-native-web": "~0.21.0",
+        "rrule": "https://git.nibgat.space/nibgat-community/rrule.git"
     },
     "private": true,
     "devDependencies": {

src/components/dateSelector/index.tsx

@@ -0,0 +1,12 @@
+import {
+    View
+} from "react-native";
+
+const DateSelector = () => {
+
+
+    return <View>
+
+    </View>;
+};
+export default DateSelector;

src/components/dateSelector/stylesheet.ts

@@ -0,0 +1,19 @@
+import {
+    StyleSheet
+} from "react-native";
+import type {
+    DateSelectorDynamicStyle
+} from "./type";
+
+const stylesheet = StyleSheet.create({
+    container: {
+
+    }
+});
+
+export const useStyles = ({
+
+}: DateSelectorDynamicStyle) => {
+
+};
+export default stylesheet;

src/components/dateSelector/type.ts

@@ -0,0 +1,5 @@
+export type DateSelectorDynamicStyle = {
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+};

src/components/dateTimePicker/index.tsx

@@ -73,6 +73,7 @@ const DateTimePicker = ({
     isWorkWithRealtime = true,
     customDateTimeSheetTheme,
     isMultipleSelect = false,
+    pickerType = "date-time",
     isWorkWithRRule = false,
     icon: IconComponentProp,
     hintTextContainerStyle,
@@ -855,6 +856,7 @@ const DateTimePicker = ({
             bottomSheetProps={dateTimeSheetProps}
             isMultipleSelect={isMultipleSelect}
             isShowTools={isShowDateTimeTools}
+            isWorkWithRRule={isWorkWithRRule}
             selectDateRule={selectDateRule}
             bottomSheetRef={bottomSheetRef}
             selectObject={selectObject}
@@ -862,6 +864,7 @@ const DateTimePicker = ({
             setDateRange={setDateRange}
             setIsActive={setIsActive}
             setDateRule={setDateRule}
+            pickerType={pickerType}
             maxChoice={maxChoice}
             minChoice={minChoice}
             isLoading={isLoading}

src/components/dateTimePicker/type.ts

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

src/components/dateTimeSheet/index.tsx

@@ -27,6 +27,7 @@ const DateTimeSheet = ({
     dateTimePickerKey,
     isMultipleSelect,
     bottomSheetProps,
+    isWorkWithRRule,
     selectDateRule,
     bottomSheetRef,
     customLocalize,
@@ -36,6 +37,7 @@ const DateTimeSheet = ({
     setDateRule,
     customTheme,
     setIsActive,
+    pickerType,
     dateRange,
     maxChoice,
     minChoice,
@@ -92,108 +94,12 @@ const DateTimeSheet = ({
             </View>;
         }
 
-        const currentData = searchText && searchText.length ? searchedData : data;
-
         return <View
             style={[
                 contentContainerDynamicStyle
             ]}
         >
-            {
-                currentData.map((item: T & SelectedItem | SelectedItem, index: number) => {
-                    const isSelected = mainSelectedItems.findIndex((sI: SelectedItem) => {
-                        return sI.__key === item.__key;
-                    }) !== -1;
-
-                    if(renderItem) {
-                        return renderItem({
-                            key: keyExtractor(item as T & SelectedItem, index),
-                            onSelect: (sItem) => {
-                                selectObject(sItem);
-                            },
-                            selectedItems: mainSelectedItems,
-                            setIsMoreLoading,
-                            setIsLoading,
-                            isSelected,
-                            searchText,
-                            index,
-                            item,
-                            data
-                        });
-                    }
-
-                    let isDisabled = false;
-
-                    if(isMultipleSelect && !isSelected && maxChoice !== -1) {
-                        if(!maxChoice) {
-                            throw new Error("If you want to use the \"isMultipleSelect\" prop, you must be provide \"maxChoice\" prop.");
-                        }
 
-                        if(mainSelectedItems.length >= maxChoice) {
-                            isDisabled = true;
-                        }
-                    }
-
-                    return <TouchableOpacity
-                        key={keyExtractor(item as T & SelectedItem, index)}
-                        disabled={isDisabled}
-                        style={[
-                            stylesheet.itemContainer,
-                            itemContainerDynamicStyle,
-                            {
-                                marginTop: index === 0 ? 0 : spaces.spacingSm,
-                                position: "relative"
-                            }
-                        ]}
-                        onPress={() => {
-                            if(isDisabled) {
-                                return;
-                            }
-
-                            selectObject(item);
-                        }}
-                    >
-                        <View
-                            style={[
-                                stylesheet.itemContentContainer,
-                                {
-                                    zIndex: 99999
-                                }
-                            ]}
-                        >
-                            <Text
-                                color={isSelected ? "emphasized" : undefined}
-                            >{item.__title}</Text>
-                        </View>
-                        <View
-                            style={[
-                                stylesheet.checkIconContainer,
-                                checkIconContainerDynamicStyle
-                            ]}
-                        >
-                            {isSelected ?
-                                <CheckIcon
-                                    color={colors.content.icon.emphasized}
-                                    size={24}
-                                /> : null}
-                        </View>
-                        {isDisabled ? <View
-                            style={[
-                                {
-                                    backgroundColor: colors.system.disabled.content,
-                                    borderRadius: radiuses.actions,
-                                    position: "absolute",
-                                    zIndex: 99998,
-                                    bottom: 0,
-                                    right: 0,
-                                    left: 0,
-                                    top: 0
-                                }
-                            ]}
-                        /> : null}
-                    </TouchableOpacity>;
-                })
-            }
         </View>;
     };
 
@@ -202,12 +108,22 @@ const DateTimeSheet = ({
             return null;
         }
 
-        if(!isMultipleSelect) {
+        if(minChoice && maxChoice !== -1) {
             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
@@ -217,7 +133,7 @@ const DateTimeSheet = ({
             ]}
         >
             {!minChoice ? <CheckBox
-                isChecked={mainSelectedItems.length === 0 ? "checked" : null}
+                isChecked={isAnySelected ? "checked" : null}
                 title={localize("clean-all")}
                 spreadBehaviour="free"
                 onPress={() => {

src/components/dateTimeSheet/stylesheet.ts

@@ -3,7 +3,7 @@ import {
     StyleSheet
 } from "react-native";
 import {
-    type SelectSheetDynamicStyleType
+    type DateTimeSheetDynamicStyleType
 } from "./type";
 import type {
     Mutable
@@ -50,7 +50,7 @@ export const useStyles = ({
     radiuses,
     spaces,
     colors
-}: SelectSheetDynamicStyleType) => {
+}: DateTimeSheetDynamicStyleType) => {
     const styles = {
         contentContainer: {
             paddingVertical: spaces.spacingSm

src/components/dateTimeSheet/type.ts

@@ -15,14 +15,11 @@ import type {
 } from "rrule";
 import type {
     DateTimePickerDateRange,
+    DateTimePickerPickerType,
     DateTimePickerVariant
 } from "../dateTimePicker/type";
 
-export type ISelectSheetRef = {
-    open: () => void;
-};
-
-export type SelectSheetDynamicStyleType = {
+export type DateTimeSheetDynamicStyleType = {
     radiuses: NCoreUIKit.ActivePalette["radiuses"];
     spaces: NCoreUIKit.ActivePalette["spaces"];
     colors: NCoreUIKit.ActivePalette["colors"];
@@ -50,11 +47,13 @@ interface IDateTimeSheetProps {
         start?: Date;
         end?: Date;
     } | undefined>>;
+    pickerType: DateTimePickerPickerType;
     selectObject: (date?: Date) => void;
     variant: DateTimePickerVariant;
     isWorkWithRealtime: boolean;
     isMultipleSelect?: boolean;
     dateTimePickerKey: string;
+    isWorkWithRRule: boolean;
     bottomSheetProps?: Omit<
         IBottomSheetProps,
         "key" |

src/components/index.ts

@@ -102,10 +102,6 @@ export type {
     IDateTimePickerRef
 } from "./dateTimePicker/type";
 
-export type {
-
-} from "./dateTimeSheet/type";
-
 export {
     default as MarkdownViewer
 } from "./markdownViewer";

src/components/selectSheet/index.tsx

@@ -52,6 +52,7 @@ function SelectSheet<T>({
     minChoice,
     isLoading,
     selectAll,
+    customKey,
     cleanAll,
     isActive,
     cancel,
@@ -340,8 +341,8 @@ function SelectSheet<T>({
 
     return <BottomSheet
         {...bottomSheetProps}
+        key={customKey ? customKey : `${selectBoxKey}-bottomsheet`}
         scrollEndThreshold={moreLoadThreshold}
-        key={`${selectBoxKey}-bottomsheet`}
         customKey={selectBoxKey}
         ref={bottomSheetRef}
         isAutoHeight={true}

src/components/selectSheet/type.ts

@@ -91,6 +91,7 @@ interface ISelectSheetProps<T> {
     maxChoice?: number;
     minChoice?: number;
     searchText: string;
+    customKey?: string;
     isLoading: boolean;
     cancel: () => void;
     isActive: boolean;

yarn.lock

@@ -13218,6 +13218,7 @@ __metadata:
     expo-font: "npm:~55.0.4"
     expo-status-bar: "npm:~55.0.4"
     lucide-react-native: "npm:^1.8.0"
+    moment: "https://git.nibgat.space/nibgat-community/moment.git"
     ncore-context: "npm:^1.0.5"
     react: "npm:19.2.6"
     react-dom: "npm:19.2.6"
@@ -13228,6 +13229,7 @@ __metadata:
     react-native-screens: "npm:^4.24.0"
     react-native-svg: "npm:^15.15.3"
     react-native-web: "npm:~0.21.0"
+    rrule: "https://git.nibgat.space/nibgat-community/rrule.git"
   languageName: unknown
   linkType: soft