Feature: Time picker base structure completed.

siradakiler.txt

@@ -13,3 +13,5 @@
 * rrule sistemi.
 
 -> STATE CARD
+-> Chip
+-> Sticker

src/components/timeSelector/components/timeInput/index.tsx

@@ -0,0 +1,153 @@
+import {
+    type FC,
+    useRef
+} from "react";
+import {
+    TouchableOpacity
+} from "react-native";
+import type {
+    TimeInputCombinedProps
+} from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../../../core/hooks";
+import type {
+    UpdateDateRangeType
+} from "../../type";
+import moment from "moment";
+import NumericInput from "../../../numericInput";
+
+const TimeInput: FC<TimeInputCombinedProps> = ({
+    isWorkWith24HoursFormat = true,
+    selectMultipleObject,
+    setDateRangeValue,
+    selectObject,
+    setDateValue,
+    rangeType,
+    timeType,
+    maxDate,
+    minDate,
+    variant,
+    ...props
+}) => {
+    const {
+        typography,
+        radiuses
+    } = NCoreUIKitTheme.useContext();
+
+    const inputDebouncer = useRef<ReturnType<typeof setTimeout>>(null);
+
+    const {
+        container: containerDynamicStyle,
+        input: inputDynamicStyle
+    } = useStyles({
+        typography,
+        radiuses
+    });
+
+    return <TouchableOpacity
+        style={[
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        <NumericInput
+            {...props}
+            validation={(text) => {
+                let resp = true;
+
+                if(props.validation && !props.validation(text)) {
+                    return false;
+                }
+
+                const num = Number(text);
+
+                if(timeType === "hours") {
+                    if(num < 0) {
+                        resp = false;
+                    }
+
+                    if(isWorkWith24HoursFormat) {
+                        if(num > 23) {
+                            resp = false;
+                        }
+                    } else {
+                        if(num > 11) {
+                            resp = false;
+                        }
+                    }
+                } else {
+                    if(num < 0) {
+                        resp = false;
+                    }
+
+                    if(num > 59) {
+                        resp = false;
+                    }
+                }
+                console.log(0);
+                if(resp) {
+                    if(variant === "range") {
+                        const updateTime: UpdateDateRangeType = {
+                            rangeType: rangeType as "start" | "end"
+                        };
+                        console.log(1);
+                        updateTime[timeType] = Number(num);
+
+                        const nDRV = setDateRangeValue(updateTime);
+                        console.log(2, nDRV);
+                        if(minDate && nDRV && moment(nDRV[rangeType as "start" | "end"]).isBefore(minDate)) resp = false;
+
+                        if(maxDate && nDRV && moment(nDRV[rangeType as "start" | "end"]).isAfter(maxDate)) resp = false;
+                    } else {
+                        const nDV = setDateValue({
+                            [timeType]: Number(text)
+                        });
+
+                        if(minDate && nDV && moment(nDV).isBefore(minDate)) resp = false;
+
+                        if(maxDate && nDV && moment(nDV).isAfter(maxDate)) resp = false;
+                    }
+                }
+                console.log(resp);
+                return resp;
+            }}
+            onChangeText={(text) => {
+                if(inputDebouncer.current) {
+                    clearTimeout(inputDebouncer.current);
+                    inputDebouncer.current = null;
+                }
+
+                inputDebouncer.current = setTimeout(() => {{
+                    if(variant === "range") {
+                        const updateTime: UpdateDateRangeType = {
+                            rangeType: rangeType as "start" | "end"
+                        };
+
+                        updateTime[timeType] = Number(text);
+
+                        const nDRV = setDateRangeValue(updateTime);
+                        selectMultipleObject(nDRV);
+                    } else {
+                        const nDV = setDateValue({
+                            [timeType]: Number(text)
+                        });
+                        selectObject(nDV);
+                    }
+                }}, 500);
+            }}
+            inputStyle={[
+                stylesheet.input,
+                inputDynamicStyle
+            ]}
+            keyboardType="numeric"
+            textAlign="center"
+            numberOfLines={1}
+            maxLength={2}
+        />
+    </TouchableOpacity>;
+};
+export default TimeInput;

src/components/timeSelector/components/timeInput/stylesheet.ts

@@ -0,0 +1,38 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    TimeInputDynamicStyle
+} from "./type";
+import type {
+    Mutable
+} from "../../../../types";
+
+const stylesheet = StyleSheet.create({
+    container: {
+    },
+    input: {
+        textAlignVertical: "center",
+        verticalAlign: "middle",
+        textAlign: "center"
+    }
+});
+
+export const useStyles = ({
+    typography,
+    radiuses
+}: TimeInputDynamicStyle) => {
+    const styles = {
+        container: {
+            borderRadius: radiuses.actions
+        } as Mutable<ViewStyle>,
+        input: {
+            ...typography.titleMediumSize
+        } as Mutable<TextStyle>
+    };
+
+    return styles;
+};
+export default stylesheet;

src/components/timeSelector/components/timeInput/type.ts

@@ -0,0 +1,39 @@
+import type {
+    DateTimePickerDateRange,
+    DateTimePickerVariant
+} from "../../../dateTimePicker/type";
+import type INumericInputProps from "../../../numericInput/type";
+import type {
+    UpdateDateRangeType,
+    UpdateDateType
+} from "../../type";
+
+export type TimeInputDynamicStyle = {
+    typography: NCoreUIKit.ActivePalette["typography"];
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+};
+
+export type TimeInputCombinedProps = ITimeInputProps & Omit<INumericInputProps, "variant">;
+
+export type TimeInputTimeType = "hours" | "minutes" | "seconds";
+
+export type TimeInputRangeType = "start" | "end";
+
+interface ITimeInputProps {
+    setDateRangeValue: (props: UpdateDateRangeType) => DateTimePickerDateRange | undefined;
+    selectMultipleObject: (dateRange?: DateTimePickerDateRange) => void;
+    setDateValue: (props: UpdateDateType) => Date | undefined;
+    selectObject: (date?: Date) => void;
+    dateRange?: DateTimePickerDateRange;
+    isWorkWith24HoursFormat: boolean;
+    rangeType?: TimeInputRangeType;
+    variant: DateTimePickerVariant;
+    isWorkWithSeconds?: boolean;
+    timeType: TimeInputTimeType;
+    maxDate?: Date;
+    minDate?: Date;
+    date?: Date;
+};
+export type {
+    ITimeInputProps as default
+};

src/components/timeSelector/index.tsx

@@ -1,5 +1,7 @@
 import {
-    TouchableOpacity,
+    useEffect
+} from "react";
+import {
     View
 } from "react-native";
 import type ITimeSelectorProps from "./type";
@@ -10,18 +12,18 @@ import type {
 import stylesheet, {
     useStyles
 } from "./stylesheet";
+import TimeInput from "./components/timeInput";
 import {
     NCoreUIKitLocalize,
     NCoreUIKitTheme
 } from "../../core/hooks";
-import type INumericInputProps from "../numericInput/type";
 import {
     Fragment
 } from "react/jsx-runtime";
-import NumericInput from "../numericInput";
 import Text from "../text";
 
 const TimeSelector = ({
+    isWorkWith24HoursFormat = true,
     isWorkWithSeconds = false,
     setIsSheetContentReady,
     selectMultipleObject,
@@ -34,11 +36,7 @@ const TimeSelector = ({
     date
 }: ITimeSelectorProps) => {
     const {
-        typography,
-        radiuses,
-        borders,
-        spaces,
-        colors
+        spaces
     } = NCoreUIKitTheme.useContext();
 
     const {
@@ -48,20 +46,17 @@ const TimeSelector = ({
     const {
         inputsContainer: inputsContainerDynamicStyle,
         rangeContainer: rangeContainerDynamicStyle,
-        timeContainer: timeContainerDynamicStyle,
-        timeInput: timeInputDynamicStyle,
         container: containerDynamicStyle,
         colonText: colonTextDynamicStyle,
         timeTitle: timeTitleDynamicStyle
     } = useStyles({
-        pickerType,
-        typography,
-        radiuses,
-        borders,
-        colors,
         spaces
     });
 
+    useEffect(() => {
+        if(pickerType === "time") setIsSheetContentReady(true);
+    }, []);
+
     const setDateRangeValue = ({
         rangeType,
         seconds,
@@ -74,22 +69,22 @@ const TimeSelector = ({
 
         const newRangeDate = dateRange[rangeType] ? dateRange[rangeType] : new Date();
 
-        if(hours) {
+        if(hours !== undefined) {
             newRangeDate?.setHours(hours);
         }
 
-        if(minutes) {
+        if(minutes !== undefined) {
             newRangeDate?.setMinutes(minutes);
         }
 
-        if(seconds) {
+        if(seconds !== undefined) {
             newRangeDate?.setSeconds(seconds);
         }
 
         const newMultipleObject = dateRange;
         newMultipleObject[rangeType] = newRangeDate;
 
-        selectMultipleObject(newMultipleObject);
+        return newMultipleObject;
     };
 
     const setDateValue = ({
@@ -99,62 +94,19 @@ const TimeSelector = ({
     }: UpdateDateType) => {
         const newDate = date ? date : new Date();
 
-        if(hours) {
+        if(hours !== undefined) {
             newDate?.setHours(hours);
         }
 
-        if(minutes) {
+        if(minutes !== undefined) {
             newDate?.setMinutes(minutes);
         }
 
-        if(seconds) {
+        if(seconds !== undefined) {
             newDate?.setSeconds(seconds);
         }
 
-        selectObject(newDate);
-    };
-
-    const RenderTimeInput = ({
-        rangeType,
-        timeType,
-        ...props
-    }: INumericInputProps & {
-        timeType: "hours" | "minutes" | "seconds";
-        rangeType?: "start" | "end";
-    }) => {
-        return <TouchableOpacity
-            style={[
-                stylesheet.timeContainer,
-                timeContainerDynamicStyle
-            ]}
-        >
-            <NumericInput
-                {...props}
-                onChangeText={(text) => {
-                    if(variant === "range") {
-                        const updateTime: UpdateDateRangeType = {
-                            rangeType: rangeType as "start" | "end"
-                        };
-
-                        updateTime[timeType] = Number(text);
-
-                        setDateRangeValue(updateTime);
-                    } else {
-                        setDateValue({
-                            [timeType]: Number(text)
-                        });
-                    }
-                }}
-                inputStyle={[
-                    stylesheet.timeInput,
-                    timeInputDynamicStyle
-                ]}
-                keyboardType="numeric"
-                textAlign="center"
-                numberOfLines={1}
-                maxLength={2}
-            />
-        </TouchableOpacity>;
+        return newDate;
     };
 
     const renderTimeInputs = () => {
@@ -183,8 +135,16 @@ const TimeSelector = ({
                         }
                     ]}
                 >
-                    <RenderTimeInput
+                    <TimeInput
                         initialValue={dateRange?.start?.getHours().toString().padStart(2, "0")}
+                        isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                        selectMultipleObject={selectMultipleObject}
+                        setDateRangeValue={setDateRangeValue}
+                        setDateValue={setDateValue}
+                        selectObject={selectObject}
+                        variant={variant}
+                        maxDate={maxDate}
+                        minDate={minDate}
                         rangeType="start"
                         timeType="hours"
                     />
@@ -197,9 +157,17 @@ const TimeSelector = ({
                     >
                         :
                     </Text>
-                    <RenderTimeInput
+                    <TimeInput
                         initialValue={dateRange?.start?.getMinutes().toString().padStart(2, "0")}
+                        isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                        selectMultipleObject={selectMultipleObject}
+                        setDateRangeValue={setDateRangeValue}
+                        setDateValue={setDateValue}
+                        selectObject={selectObject}
                         timeType="minutes"
+                        variant={variant}
+                        maxDate={maxDate}
+                        minDate={minDate}
                         rangeType="start"
                     />
                     {
@@ -213,9 +181,17 @@ const TimeSelector = ({
                             >
                                 :
                             </Text>
-                            <RenderTimeInput
+                            <TimeInput
                                 initialValue={dateRange?.start?.getSeconds().toString().padStart(2, "0")}
+                                isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                                selectMultipleObject={selectMultipleObject}
+                                setDateRangeValue={setDateRangeValue}
+                                setDateValue={setDateValue}
+                                selectObject={selectObject}
                                 timeType="seconds"
+                                variant={variant}
+                                maxDate={maxDate}
+                                minDate={minDate}
                                 rangeType="start"
                             />
                         </Fragment> : null
@@ -236,8 +212,16 @@ const TimeSelector = ({
                         inputsContainerDynamicStyle
                     ]}
                 >
-                    <RenderTimeInput
+                    <TimeInput
                         initialValue={dateRange?.end?.getHours().toString().padStart(2, "0")}
+                        isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                        selectMultipleObject={selectMultipleObject}
+                        setDateRangeValue={setDateRangeValue}
+                        setDateValue={setDateValue}
+                        selectObject={selectObject}
+                        variant={variant}
+                        maxDate={maxDate}
+                        minDate={minDate}
                         timeType="hours"
                         rangeType="end"
                     />
@@ -250,9 +234,17 @@ const TimeSelector = ({
                     >
                         :
                     </Text>
-                    <RenderTimeInput
+                    <TimeInput
                         initialValue={dateRange?.end?.getMinutes().toString().padStart(2, "0")}
+                        isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                        selectMultipleObject={selectMultipleObject}
+                        setDateRangeValue={setDateRangeValue}
+                        setDateValue={setDateValue}
+                        selectObject={selectObject}
                         timeType="minutes"
+                        variant={variant}
+                        maxDate={maxDate}
+                        minDate={minDate}
                         rangeType="end"
                     />
                     {
@@ -266,9 +258,17 @@ const TimeSelector = ({
                             >
                                 :
                             </Text>
-                            <RenderTimeInput
+                            <TimeInput
                                 initialValue={dateRange?.end?.getSeconds().toString().padStart(2, "0")}
+                                isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                                selectMultipleObject={selectMultipleObject}
+                                setDateRangeValue={setDateRangeValue}
+                                setDateValue={setDateValue}
+                                selectObject={selectObject}
                                 timeType="seconds"
+                                variant={variant}
+                                maxDate={maxDate}
+                                minDate={minDate}
                                 rangeType="end"
                             />
                         </Fragment> : null
@@ -293,8 +293,16 @@ const TimeSelector = ({
                     inputsContainerDynamicStyle
                 ]}
             >
-                <RenderTimeInput
+                <TimeInput
                     initialValue={date?.getHours().toString().padStart(2, "0")}
+                    isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                    selectMultipleObject={selectMultipleObject}
+                    setDateRangeValue={setDateRangeValue}
+                    setDateValue={setDateValue}
+                    selectObject={selectObject}
+                    variant={variant}
+                    maxDate={maxDate}
+                    minDate={minDate}
                     timeType="hours"
                 />
                 <Text
@@ -306,9 +314,17 @@ const TimeSelector = ({
                 >
                     :
                 </Text>
-                <RenderTimeInput
+                <TimeInput
                     initialValue={date?.getMinutes().toString().padStart(2, "0")}
+                    isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                    selectMultipleObject={selectMultipleObject}
+                    setDateRangeValue={setDateRangeValue}
+                    setDateValue={setDateValue}
+                    selectObject={selectObject}
                     timeType="minutes"
+                    variant={variant}
+                    maxDate={maxDate}
+                    minDate={minDate}
                 />
                 {
                     isWorkWithSeconds ? <Fragment>
@@ -321,9 +337,17 @@ const TimeSelector = ({
                         >
                             :
                         </Text>
-                        <RenderTimeInput
+                        <TimeInput
                             initialValue={date?.getSeconds().toString().padStart(2, "0")}
+                            isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                            selectMultipleObject={selectMultipleObject}
+                            setDateRangeValue={setDateRangeValue}
+                            setDateValue={setDateValue}
+                            selectObject={selectObject}
                             timeType="seconds"
+                            variant={variant}
+                            maxDate={maxDate}
+                            minDate={minDate}
                         />
                     </Fragment> : null
                 }

src/components/timeSelector/stylesheet.ts

@@ -17,13 +17,6 @@ const stylesheet = StyleSheet.create({
     rangeContainer: {
         flexDirection: "column"
     },
-    timeContainer: {
-    },
-    timeInput: {
-        textAlignVertical: "center",
-        verticalAlign: "middle",
-        textAlign: "center"
-    },
     inputsContainer: {
         justifyContent: "flex-start",
         flexDirection: "row",
@@ -36,8 +29,6 @@ const stylesheet = StyleSheet.create({
 });
 
 export const useStyles = ({
-    typography,
-    radiuses,
     spaces
 }: TimeSelectorDynamicStyle) => {
     const styles = {
@@ -46,12 +37,6 @@ export const useStyles = ({
         } as Mutable<ViewStyle>,
         rangeContainer: {
         } as Mutable<ViewStyle>,
-        timeContainer: {
-            borderRadius: radiuses.actions
-        } as Mutable<ViewStyle>,
-        timeInput: {
-            ...typography.titleMediumSize
-        } as Mutable<TextStyle>,
         inputsContainer: {
             marginTop: spaces.spacingXs
         } as Mutable<ViewStyle>,

src/components/timeSelector/type.ts

@@ -9,12 +9,7 @@ import type {
 } from "../dateTimePicker/type";
 
 export type TimeSelectorDynamicStyle = {
-    typography: NCoreUIKit.ActivePalette["typography"];
-    radiuses: NCoreUIKit.ActivePalette["radiuses"];
-    borders: NCoreUIKit.ActivePalette["borders"];
     spaces: NCoreUIKit.ActivePalette["spaces"];
-    colors: NCoreUIKit.ActivePalette["colors"];
-    pickerType: DateTimePickerPickerType;
 };
 
 export type UpdateDateType = {
@@ -36,6 +31,7 @@ interface ITimeSelectorProps {
     pickerType: DateTimePickerPickerType;
     selectObject: (date?: Date) => void;
     dateRange?: DateTimePickerDateRange;
+    isWorkWith24HoursFormat?: boolean;
     variant: DateTimePickerVariant;
     isWorkWithSeconds?: boolean;
     maxDate?: Date;