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

package/src/components/timeSelector/index.tsx

@@ -0,0 +1,433 @@
+import {
+    useEffect
+} from "react";
+import {
+    View
+} from "react-native";
+import type {
+    TimeInputRangeType
+} from "./components/timeInput/type";
+import type ITimeSelectorProps from "./type";
+import type {
+    UpdateDateRangeType,
+    UpdateDateType
+} from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import TimeInput from "./components/timeInput";
+import {
+    NCoreUIKitLocalize,
+    NCoreUIKitTheme,
+    NCoreUIKitToast
+} from "../../core/hooks";
+import type {
+    DateTimePickerDateRange
+} from "../dateTimePicker/type";
+import moment from "moment";
+import {
+    Fragment
+} from "react/jsx-runtime";
+import Text from "../text";
+
+const TimeSelector = ({
+    isTimeSelectWorksWithCenterWhenTimePicker,
+    multipleSelectMinimumRequireMS,
+    isWorkWith24HoursFormat = true,
+    isWorkWithSeconds = false,
+    multipleSelectMaximumMS,
+    setIsSheetContentReady,
+    selectMultipleObject,
+    selectObject,
+    pickerType,
+    dateRange,
+    maxDate,
+    minDate,
+    variant,
+    date
+}: ITimeSelectorProps) => {
+    const {
+        spaces
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        localize
+    } = NCoreUIKitLocalize.useContext();
+
+    const {
+        inputsContainer: inputsContainerDynamicStyle,
+        rangeContainer: rangeContainerDynamicStyle,
+        container: containerDynamicStyle,
+        colonText: colonTextDynamicStyle,
+        timeTitle: timeTitleDynamicStyle
+    } = useStyles({
+        isTimeSelectWorksWithCenterWhenTimePicker,
+        pickerType,
+        spaces
+    });
+
+    useEffect(() => {
+        if(pickerType === "time") setIsSheetContentReady(true);
+    }, []);
+
+    const setDateRangeValue = ({
+        rangeType,
+        seconds,
+        minutes,
+        hours
+    }: UpdateDateRangeType) => {
+        if(!dateRange) {
+            return;
+        }
+
+        const newRangeDate = dateRange[rangeType] ? dateRange[rangeType] : new Date();
+
+        if(hours !== undefined) {
+            newRangeDate?.setHours(hours);
+        }
+
+        if(minutes !== undefined) {
+            newRangeDate?.setMinutes(minutes);
+        }
+
+        if(seconds !== undefined) {
+            newRangeDate?.setSeconds(seconds);
+        }
+
+        const newMultipleObject = dateRange;
+        newMultipleObject[rangeType] = newRangeDate;
+
+        return newMultipleObject;
+    };
+
+    const setDateValue = ({
+        seconds,
+        minutes,
+        hours
+    }: UpdateDateType) => {
+        const newDate = date ? date : new Date();
+
+        if(hours !== undefined) {
+            newDate?.setHours(hours);
+        }
+
+        if(minutes !== undefined) {
+            newDate?.setMinutes(minutes);
+        }
+
+        if(seconds !== undefined) {
+            newDate?.setSeconds(seconds);
+        }
+
+        return newDate;
+    };
+
+    const rangeValidation = ({
+        dateRangeValue,
+        rangeType
+    }: {
+        dateRangeValue: DateTimePickerDateRange;
+        rangeType: TimeInputRangeType;
+    }) => {
+        const start = rangeType === "start" ? dateRangeValue[rangeType] : dateRange?.start;
+        const end = rangeType === "end" ? dateRangeValue[rangeType] : dateRange?.end;
+
+        if(start && end) {
+            if(multipleSelectMinimumRequireMS && Math.abs(moment(end).diff(start, "milliseconds")) < multipleSelectMinimumRequireMS) {
+                NCoreUIKitToast.open({
+                    title: localize("selected-start-and-end-times-cannot-be-less-than-x-times-apart", [
+                        moment.duration(multipleSelectMinimumRequireMS).humanize()
+                    ])
+                });
+                return false;
+            }
+
+            if(multipleSelectMaximumMS && Math.abs(moment(end).diff(start, "milliseconds")) > multipleSelectMaximumMS) {
+                NCoreUIKitToast.open({
+                    title: localize("selected-start-and-end-times-cannot-exceed-x-intervals", [
+                        moment.duration(multipleSelectMaximumMS).humanize()
+                    ])
+                });
+                return false;
+            }
+
+            if(moment(end).isBefore(start)) {
+                NCoreUIKitToast.open({
+                    title: localize("selected-end-time-cannot-before-from-start-time")
+                });
+                return false;
+            }
+
+            if(moment(start).isAfter(end)) {
+                NCoreUIKitToast.open({
+                    title: localize("selected-start-time-cannot-after-then-end-time")
+                });
+                return false;
+            }
+        }
+
+        return true;
+    };
+
+    const renderTimeInputs = () => {
+        if(variant === "range") {
+            return <View
+                style={[
+                    stylesheet.rangeContainer,
+                    rangeContainerDynamicStyle
+                ]}
+            >
+                <Text
+                    variant="labelMediumSize"
+                    style={{
+                        ...stylesheet.timeTitle,
+                        ...timeTitleDynamicStyle
+                    }}
+                >
+                    {localize("start-time")}:
+                </Text>
+                <View
+                    style={[
+                        stylesheet.inputsContainer,
+                        inputsContainerDynamicStyle,
+                        {
+                            marginBottom: spaces.spacingMd
+                        }
+                    ]}
+                >
+                    <TimeInput
+                        initialValue={dateRange?.start?.getHours().toString().padStart(2, "0")}
+                        isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                        selectMultipleObject={selectMultipleObject}
+                        setDateRangeValue={setDateRangeValue}
+                        rangeValidation={rangeValidation}
+                        setDateValue={setDateValue}
+                        selectObject={selectObject}
+                        variant={variant}
+                        maxDate={maxDate}
+                        minDate={minDate}
+                        rangeType="start"
+                        timeType="hours"
+                    />
+                    <Text
+                        variant="titleMediumSize"
+                        style={{
+                            ...stylesheet.colonText,
+                            ...colonTextDynamicStyle
+                        }}
+                    >
+                        :
+                    </Text>
+                    <TimeInput
+                        initialValue={dateRange?.start?.getMinutes().toString().padStart(2, "0")}
+                        isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                        selectMultipleObject={selectMultipleObject}
+                        setDateRangeValue={setDateRangeValue}
+                        rangeValidation={rangeValidation}
+                        setDateValue={setDateValue}
+                        selectObject={selectObject}
+                        timeType="minutes"
+                        variant={variant}
+                        maxDate={maxDate}
+                        minDate={minDate}
+                        rangeType="start"
+                    />
+                    {
+                        isWorkWithSeconds ? <Fragment>
+                            <Text
+                                variant="titleMediumSize"
+                                style={{
+                                    ...stylesheet.colonText,
+                                    ...colonTextDynamicStyle
+                                }}
+                            >
+                                :
+                            </Text>
+                            <TimeInput
+                                initialValue={dateRange?.start?.getSeconds().toString().padStart(2, "0")}
+                                isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                                selectMultipleObject={selectMultipleObject}
+                                setDateRangeValue={setDateRangeValue}
+                                rangeValidation={rangeValidation}
+                                setDateValue={setDateValue}
+                                selectObject={selectObject}
+                                timeType="seconds"
+                                variant={variant}
+                                maxDate={maxDate}
+                                minDate={minDate}
+                                rangeType="start"
+                            />
+                        </Fragment> : null
+                    }
+                </View>
+                <Text
+                    variant="labelMediumSize"
+                    style={{
+                        ...stylesheet.timeTitle,
+                        ...timeTitleDynamicStyle
+                    }}
+                >
+                    {localize("end-time")}:
+                </Text>
+                <View
+                    style={[
+                        stylesheet.inputsContainer,
+                        inputsContainerDynamicStyle
+                    ]}
+                >
+                    <TimeInput
+                        initialValue={dateRange?.end?.getHours().toString().padStart(2, "0")}
+                        isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                        selectMultipleObject={selectMultipleObject}
+                        setDateRangeValue={setDateRangeValue}
+                        rangeValidation={rangeValidation}
+                        setDateValue={setDateValue}
+                        selectObject={selectObject}
+                        variant={variant}
+                        maxDate={maxDate}
+                        minDate={minDate}
+                        timeType="hours"
+                        rangeType="end"
+                    />
+                    <Text
+                        variant="titleMediumSize"
+                        style={{
+                            ...stylesheet.colonText,
+                            ...colonTextDynamicStyle
+                        }}
+                    >
+                        :
+                    </Text>
+                    <TimeInput
+                        initialValue={dateRange?.end?.getMinutes().toString().padStart(2, "0")}
+                        isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                        selectMultipleObject={selectMultipleObject}
+                        setDateRangeValue={setDateRangeValue}
+                        rangeValidation={rangeValidation}
+                        setDateValue={setDateValue}
+                        selectObject={selectObject}
+                        timeType="minutes"
+                        variant={variant}
+                        maxDate={maxDate}
+                        minDate={minDate}
+                        rangeType="end"
+                    />
+                    {
+                        isWorkWithSeconds ? <Fragment>
+                            <Text
+                                variant="titleMediumSize"
+                                style={{
+                                    ...stylesheet.colonText,
+                                    ...colonTextDynamicStyle
+                                }}
+                            >
+                                :
+                            </Text>
+                            <TimeInput
+                                initialValue={dateRange?.end?.getSeconds().toString().padStart(2, "0")}
+                                isWorkWith24HoursFormat={isWorkWith24HoursFormat}
+                                selectMultipleObject={selectMultipleObject}
+                                setDateRangeValue={setDateRangeValue}
+                                rangeValidation={rangeValidation}
+                                setDateValue={setDateValue}
+                                selectObject={selectObject}
+                                timeType="seconds"
+                                variant={variant}
+                                maxDate={maxDate}
+                                minDate={minDate}
+                                rangeType="end"
+                            />
+                        </Fragment> : null
+                    }
+                </View>
+            </View>;
+        }
+
+        return <View>
+            <Text
+                variant="labelMediumSize"
+                style={{
+                    ...stylesheet.timeTitle,
+                    ...timeTitleDynamicStyle
+                }}
+            >
+                {localize("end-time")}:
+            </Text>
+            <View
+                style={[
+                    stylesheet.inputsContainer,
+                    inputsContainerDynamicStyle
+                ]}
+            >
+                <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
+                    variant="titleMediumSize"
+                    style={{
+                        ...stylesheet.colonText,
+                        ...colonTextDynamicStyle
+                    }}
+                >
+                    :
+                </Text>
+                <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>
+                        <Text
+                            variant="titleMediumSize"
+                            style={{
+                                ...stylesheet.colonText,
+                                ...colonTextDynamicStyle
+                            }}
+                        >
+                            :
+                        </Text>
+                        <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
+                }
+            </View>
+        </View>;
+    };
+
+    return <View
+        style={[
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        {renderTimeInputs()}
+    </View>;
+};
+export default TimeSelector;

package/src/components/timeSelector/stylesheet.ts

@@ -0,0 +1,59 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    TimeSelectorDynamicStyle
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        width: "100%"
+    },
+    rangeContainer: {
+        flexDirection: "column"
+    },
+    inputsContainer: {
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    colonText: {
+    },
+    timeTitle: {
+    }
+});
+
+export const useStyles = ({
+    isTimeSelectWorksWithCenterWhenTimePicker,
+    pickerType,
+    spaces
+}: TimeSelectorDynamicStyle) => {
+    const styles = {
+        container: {
+            marginTop: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        rangeContainer: {
+        } as Mutable<ViewStyle>,
+        inputsContainer: {
+            marginTop: spaces.spacingXs
+        } as Mutable<ViewStyle>,
+        colonText: {
+            marginHorizontal: spaces.spacingXs
+        } as Mutable<TextStyle>,
+        timeTitle: {
+        } as Mutable<TextStyle>
+    };
+
+    if(pickerType === "time" && isTimeSelectWorksWithCenterWhenTimePicker) {
+        styles.inputsContainer.justifyContent = "center";
+        styles.rangeContainer.justifyContent = "center";
+    }
+
+    return styles;
+};
+export default stylesheet;

package/src/components/timeSelector/type.ts

@@ -0,0 +1,48 @@
+import type {
+    SetStateAction,
+    Dispatch
+} from "react";
+import type {
+    DateTimePickerPickerType,
+    DateTimePickerDateRange,
+    DateTimePickerVariant
+} from "../dateTimePicker/type";
+
+export type TimeSelectorDynamicStyle = {
+    isTimeSelectWorksWithCenterWhenTimePicker?: boolean;
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    pickerType: DateTimePickerPickerType;
+};
+
+export type UpdateDateType = {
+    minutes?: number;
+    seconds?: number;
+    hours?: number;
+};
+
+export type UpdateDateRangeType = {
+    rangeType: "start" | "end";
+    minutes?: number;
+    seconds?: number;
+    hours?: number;
+};
+
+interface ITimeSelectorProps {
+    selectMultipleObject: (dateRange?: DateTimePickerDateRange) => void;
+    setIsSheetContentReady: Dispatch<SetStateAction<boolean>>;
+    isTimeSelectWorksWithCenterWhenTimePicker?: boolean;
+    multipleSelectMinimumRequireMS?: number;
+    pickerType: DateTimePickerPickerType;
+    selectObject: (date?: Date) => void;
+    dateRange?: DateTimePickerDateRange;
+    isWorkWith24HoursFormat?: boolean;
+    multipleSelectMaximumMS?: number;
+    variant: DateTimePickerVariant;
+    isWorkWithSeconds?: boolean;
+    maxDate?: Date;
+    minDate?: Date;
+    date?: Date;
+};
+export type {
+    ITimeSelectorProps as default
+};