ncore-ui-kit 1.0.0-alpha.0

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

@@ -0,0 +1,172 @@
+import {
+    type FC
+} 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,
+    rangeValidation,
+    selectObject,
+    setDateValue,
+    rangeType,
+    timeType,
+    maxDate,
+    minDate,
+    variant,
+    ...props
+}) => {
+    const {
+        typography,
+        radiuses
+    } = NCoreUIKitTheme.useContext();
+
+    const {
+        container: containerDynamicStyle,
+        input: inputDynamicStyle
+    } = useStyles({
+        typography,
+        radiuses
+    });
+
+    return <TouchableOpacity
+        style={[
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        <NumericInput
+            {...props}
+            validation={(text, setText) => {
+                let resp = true;
+
+                if(props.validation && !props.validation(text, setText)) {
+                    return false;
+                }
+
+                const num = Number(text);
+
+                if(timeType === "hours") {
+                    if(num < 0) {
+                        setText("0");
+                        resp = false;
+                    }
+
+                    if(isWorkWith24HoursFormat) {
+                        if(num > 23) {
+                            setText("23");
+                            resp = false;
+                        }
+                    } else {
+                        if(num > 11) {
+                            setText("11");
+                            resp = false;
+                        }
+                    }
+                } else {
+                    if(num < 0) {
+                        setText("0");
+                        resp = false;
+                    }
+
+                    if(num > 59) {
+                        setText("59");
+                        resp = false;
+                    }
+                }
+
+                if(resp) {
+                    if(variant === "range") {
+                        const updateTime: UpdateDateRangeType = {
+                            rangeType: rangeType as "start" | "end"
+                        };
+
+                        updateTime[timeType] = Number(num);
+
+                        const nDRV = setDateRangeValue(updateTime);
+
+                        if(nDRV) {
+                            const nDRVMoment = moment(nDRV[rangeType as "start" | "end"]);
+
+                            if(minDate && nDRVMoment.isBefore(minDate)) {
+                                setText(moment(minDate).get(timeType).toString());
+                                resp = false;
+                            }
+
+                            if(maxDate && nDRVMoment.isAfter(maxDate)) {
+                                setText(moment(maxDate).get(timeType).toString());
+                                resp = false;
+                            }
+                            console.log("x:", resp);
+                            if(rangeValidation && !rangeValidation({
+                                rangeType: rangeType as "start" | "end",
+                                dateRangeValue: nDRV
+                            }, setText)) {
+                                resp = false;
+                            }
+                        }
+                    } else {
+                        const nDV = setDateValue({
+                            [timeType]: Number(text)
+                        });
+
+                        if(minDate && nDV && moment(nDV).isBefore(minDate)) {
+                            setText(moment(minDate).get(timeType).toString());
+                            resp = false;
+                        }
+
+                        if(maxDate && nDV && moment(nDV).isAfter(maxDate)) {
+                            setText(moment(maxDate).get(timeType).toString());
+                            resp = false;
+                        }
+                    }
+                }
+
+                return resp;
+            }}
+            onChangeText={(text) => {
+                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);
+                }
+            }}
+            inputStyle={[
+                stylesheet.input,
+                inputDynamicStyle
+            ]}
+            keyboardType="numeric"
+            textAlign="center"
+            numberOfLines={1}
+            maxLength={2}
+        />
+    </TouchableOpacity>;
+};
+export default TimeInput;

package/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;

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

@@ -0,0 +1,47 @@
+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;
+    rangeValidation?: (props: {
+        dateRangeValue: DateTimePickerDateRange;
+        rangeType: TimeInputRangeType;
+    }, setText: (text: string) => void) => boolean;
+    validation?: (
+        text: string,
+        setText: (text: string) => void
+    ) => boolean;
+    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
+};

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;