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

package/lib/src/components/dateTimePicker/index.js

@@ -0,0 +1,591 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, forwardRef, useEffect, useState, useRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+import stylesheet, { getDateTimePickerType, useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme, NCoreUIKitToast } from "../../core/hooks";
+import {} from "../../types";
+import { RRule } from "rrule";
+import moment from "moment";
+import { BadgeQuestionMarkIcon, BadgeSuccessIcon, BadgeDangerIcon, BadgeAlertIcon, BadgeInfoIcon, CleanIcon } from "../../assets/svg";
+import { uuid } from "../../utils";
+import Text from "../text";
+import DateTimeSheet from "../dateTimeSheet";
+import { parseRRuleConfig } from "../../helpers";
+const DateTimePickerTypeIcon = {
+    "question": BadgeQuestionMarkIcon,
+    "success": BadgeSuccessIcon,
+    "warning": BadgeAlertIcon,
+    "danger": BadgeDangerIcon,
+    "info": BadgeInfoIcon
+};
+const DateTimePicker = ({ isTimeSelectWorksWithCenterWhenTimePicker = true, renderLoadingIcon: LoadingIconComponentProp, multipleSelectMinimumRequiredDayCount, isStartDateSelectionRequired = true, rightIcon: RightIconComponentProp, isEndDateSelectionRequired = true, localeBasedFirstDayOfWeek = true, isShowCalenderChangerTool = true, monthOfYearLengthType = "short", multipleSelectMinimumRequireMS, hintTextIcon: HintTextIconProp, spreadBehaviour = "baseline", customDateTimeSheetLocalize, isShowTodayIndicator = true, titleFormat = "DD MMM YYYY", isShowDateTimeTools = true, isShowHintTextIcon = false, isWorkWithRealtime = true, dayOfWeekLength = "short", isWorkWithSeconds = false, customDateTimeSheetTheme, pickerType = "date-time", multipleSelectMaximumMS, icon: IconComponentProp, hintTextContainerStyle, removeSelectValidation, isCleanEnabled = false, multipleSelectDayLimit, contentContainerStyle, subTitle = "Optional", isSearchable = false, onFocus: onFocusProp, isRequired = false, isDisabled = false, onBlur: onBlurProp, dateTimeSheetProps, variant = "single", hintTextIconStyle, dateCalendarType, initialDateRange, type = "default", selectValidation, initialDateRule, dateRangeTitle, customLocalize, rightIconStyle, isShowSubTitle, cleanIconStyle, maxChoice = -1, returnFormat, contentStyle, initialDate, customTheme, placeholder, isOptional, customKey, minChoice, iconStyle, onChange, hintText, onCancel, maxDate, minDate, style, title, onOk }, ref) => {
+    const { inlineSpaces, typography, radiuses, borders, spaces, colors } = NCoreUIKitTheme.useContext(customTheme);
+    const { rruleConfig, localize } = NCoreUIKitLocalize.useContext(customLocalize);
+    const bottomSheetRef = useRef(null);
+    const dateTimePickerKey = useRef(customKey ? customKey : uuid());
+    const currentType = getDateTimePickerType({
+        type
+    });
+    const styleType = type === "default" ? "neutral" : type === "question" ? "neutral" : type === "danger" ? "error" : type;
+    const [isActive, setIsActive] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [tempDate, setTempDate] = useState(initialDate);
+    const [date, setDate] = useState(initialDate);
+    const [tempDateRule, setTempDateRule] = useState(initialDateRule);
+    const [dateRule, setDateRule] = useState(initialDateRule);
+    const [dateRange, setDateRange] = useState(initialDateRange);
+    const [tempDateRange, setTempDateRange] = useState(initialDateRange);
+    const mainDateRange = isWorkWithRealtime ? dateRange : tempDateRange;
+    const mainDateRule = isWorkWithRealtime ? dateRule : tempDateRule;
+    const mainDate = isWorkWithRealtime ? date : tempDate;
+    const { contentContainer: contentContainerDynamicStyle, titleContainer: titleContainerDynamicStyle, hintTextIcon: hintTextIconDynamicStyle, contentText: contentTextDynamicStyle, cleanButton: cleanButtonDynamicStyle, rightIcon: rightIconDynamicStyle, container: containerDynamicStyle, hintText: hintTextDynamicStyle, required: requiredDynamicStyle, subTitle: subTitleDynamicStyle, overlay: overlayDynamicStyle, content: contentDynamicStyle, title: titleDynamicStyle, icon: iconDynamicStyle } = useStyles({
+        icon: IconComponentProp ? true : false,
+        spreadBehaviour,
+        inlineSpaces,
+        isSearchable,
+        currentType,
+        isDisabled,
+        isActive,
+        radiuses,
+        borders,
+        spaces,
+        colors,
+        title,
+        type
+    });
+    useImperativeHandle(ref, () => ({
+        setDateRange: (dateRange) => {
+            if (isWorkWithRealtime) {
+                setDateRange(dateRange);
+            }
+            else {
+                setTempDateRange(dateRange);
+            }
+        },
+        setDateRule: (dateRule) => {
+            if (isWorkWithRealtime) {
+                setDateRule(dateRule);
+            }
+            else {
+                setTempDateRule(dateRule);
+            }
+        },
+        setDate: (date) => {
+            if (isWorkWithRealtime) {
+                setDate(date);
+            }
+            else {
+                setTempDate(date);
+            }
+        },
+        setIsLoading: setIsLoading,
+        getValue: () => {
+            return {
+                dateRange,
+                dateRule,
+                date
+            };
+        },
+        cancel,
+        clean,
+        focus,
+        blur,
+        ok
+    }), [
+        dateRange,
+        dateRule,
+        date
+    ]);
+    useEffect(() => {
+        if (isActive) {
+            if (onFocus)
+                onFocus();
+        }
+        else {
+            if (!isWorkWithRealtime) {
+                setTempDateRange(undefined);
+                setTempDateRule(undefined);
+                setTempDate(undefined);
+            }
+            if (onBlur)
+                onBlur();
+        }
+    }, [
+        isActive
+    ]);
+    useEffect(() => {
+        if (onChange) {
+            const resp = getFormattedResponse();
+            onChange(resp);
+        }
+    }, [
+        tempDateRange,
+        tempDateRule,
+        dateRange,
+        dateRule,
+        tempDate,
+        date
+    ]);
+    const titleProps = {
+        color: currentType.titleColor,
+        variant: "bodyLargeSize"
+    };
+    const iconProps = {
+        size: Number(typography.labelLargeSize.fontSize) + 6,
+        color: currentType.iconColor
+    };
+    if (isDisabled) {
+        iconProps.color = "disabled";
+    }
+    const getFormattedResponse = () => {
+        if (returnFormat) {
+            const _date = date ? moment(date).format(returnFormat) : undefined;
+            const _dateRange = dateRange;
+            if (_dateRange && _dateRange.start) {
+                _dateRange.start = moment(_dateRange.start).format(returnFormat);
+            }
+            if (_dateRange && _dateRange.end) {
+                _dateRange.end = moment(_dateRange.end).format(returnFormat);
+            }
+            return {
+                dateRange: _dateRange,
+                date: _date,
+                dateRule
+            };
+        }
+        else {
+            return {
+                dateRange,
+                dateRule,
+                date
+            };
+        }
+    };
+    const blur = () => {
+        setIsActive(false);
+    };
+    const focus = () => {
+        if (!isWorkWithRealtime) {
+            setTempDateRange(dateRange);
+            setTempDateRule(dateRule);
+            setTempDate(date);
+        }
+        setIsActive(true);
+    };
+    const cancel = () => {
+        if (!isWorkWithRealtime) {
+            bottomSheetRef.current?.close(() => {
+                blur();
+            });
+            if (onCancel) {
+                const resp = getFormattedResponse();
+                onCancel(resp);
+            }
+        }
+    };
+    const ok = () => {
+        if (!isWorkWithRealtime) {
+            if (variant === "range") {
+                if (isStartDateSelectionRequired && (!tempDateRange || !tempDateRange.start)) {
+                    NCoreUIKitToast.open({
+                        title: localize("start-date-select-is-required")
+                    });
+                    return;
+                }
+                if (isEndDateSelectionRequired && (!tempDateRange || !tempDateRange.end)) {
+                    NCoreUIKitToast.open({
+                        title: localize("end-date-select-is-required")
+                    });
+                    return;
+                }
+                if (tempDateRange && tempDateRange.start && tempDateRange.end) {
+                    if (multipleSelectDayLimit && moment(tempDateRange.end).diff(tempDateRange.start, "days") >= multipleSelectDayLimit) {
+                        NCoreUIKitToast.open({
+                            title: localize("maximum-selection-number-of-days-limit-exceeds")
+                        });
+                        return;
+                    }
+                    if (multipleSelectMinimumRequiredDayCount && moment(tempDateRange.end).diff(tempDateRange.start, "days") + 1 < multipleSelectMinimumRequiredDayCount) {
+                        NCoreUIKitToast.open({
+                            title: localize("minimum-selection-number-of-days-required-not-provided")
+                        });
+                        return;
+                    }
+                }
+            }
+            setDateRange(tempDateRange);
+            setDateRule(tempDateRule);
+            setDate(tempDate);
+            bottomSheetRef.current?.close(() => {
+                blur();
+            });
+            if (onOk) {
+                const resp = getFormattedResponse();
+                onOk(resp);
+            }
+        }
+    };
+    const clean = () => {
+        setDateRange(undefined);
+        setDateRule(undefined);
+        setDate(undefined);
+        setTempDateRange(undefined);
+        setTempDateRule(undefined);
+        setTempDate(undefined);
+    };
+    const selectDateRule = (selectedDateRule) => {
+        if (variant === "rrule") {
+            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 (removeSelectValidation) {
+                    if (removeSelectValidation({
+                        dateRule
+                    })) {
+                        setTempDateRule(undefined);
+                        setDateRule(undefined);
+                    }
+                }
+                else {
+                    setTempDateRule(undefined);
+                    setDateRule(undefined);
+                }
+            }
+        }
+    };
+    const selectMultipleObject = (selectedDateRange) => {
+        if (variant === "range") {
+            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) => {
+        if (variant === "single") {
+            if (selectedDate === date) {
+                if (removeSelectValidation) {
+                    if (removeSelectValidation({
+                        date
+                    })) {
+                        if (isWorkWithRealtime) {
+                            setDate(undefined);
+                        }
+                        else {
+                            setTempDate(undefined);
+                        }
+                    }
+                }
+                else {
+                    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);
+                    }
+                }
+            }
+        }
+    };
+    const onFocus = () => {
+        if (onFocusProp)
+            onFocusProp();
+    };
+    const onBlur = () => {
+        if (onBlurProp)
+            onBlurProp();
+    };
+    const renderCleanButton = () => {
+        if (isDisabled) {
+            return null;
+        }
+        if (!isCleanEnabled) {
+            return null;
+        }
+        if (variant === "rrule") {
+            if (!mainDateRule)
+                return null;
+        }
+        else if (variant === "range") {
+            if (!dateRange)
+                return null;
+        }
+        else {
+            if (!date)
+                return null;
+        }
+        return _jsx(TouchableOpacity, { style: [
+                cleanIconStyle,
+                stylesheet.cleanButton,
+                cleanButtonDynamicStyle
+            ], onPress: () => {
+                setDateRange(undefined);
+                setDateRule(undefined);
+                setDate(undefined);
+                setTempDateRange(undefined);
+                setTempDateRule(undefined);
+                setTempDate(undefined);
+            }, children: _jsx(CleanIcon, { color: "mid", size: 20 }) });
+    };
+    const renderIcon = () => {
+        if (!IconComponentProp) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                iconStyle,
+                stylesheet.icon,
+                iconDynamicStyle
+            ], children: _jsx(IconComponentProp, { color: iconProps.color, size: iconProps.size }) });
+    };
+    const renderRightIcon = () => {
+        if (!RightIconComponentProp) {
+            return null;
+        }
+        if (isCleanEnabled) {
+            return null;
+        }
+        if (variant === "rrule") {
+            if (!mainDateRule)
+                return null;
+        }
+        else if (variant === "range") {
+            if (!mainDateRange)
+                return null;
+        }
+        else {
+            if (!mainDate)
+                return null;
+        }
+        return _jsx(View, { style: [
+                rightIconStyle,
+                stylesheet.rightIcon,
+                rightIconDynamicStyle
+            ], children: _jsx(RightIconComponentProp, { color: iconProps.color, size: iconProps.size }) });
+    };
+    const renderHintIcon = () => {
+        if (!isShowHintTextIcon) {
+            return null;
+        }
+        if (HintTextIconProp) {
+            return _jsx(HintTextIconProp, { color: isDisabled ? "disabled" : currentType.hintTextIconColor, size: 20, style: [
+                    hintTextIconStyle,
+                    stylesheet.hintTextIcon,
+                    hintTextIconDynamicStyle
+                ] });
+        }
+        const CurrentHintIcon = DateTimePickerTypeIcon[type === "default" ? "question" : type];
+        return _jsx(CurrentHintIcon, { customColor: isDisabled ? colors.system.state.content.disabled[styleType] : undefined, color: currentType.hintTextIconColor, size: 20, style: [
+                hintTextIconStyle,
+                stylesheet.hintTextIcon,
+                hintTextIconDynamicStyle
+            ] });
+    };
+    const renderHintText = () => {
+        if (!hintText) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                hintTextContainerStyle,
+                stylesheet.hintText,
+                hintTextDynamicStyle
+            ], children: [renderHintIcon(), _jsx(Text, { customColor: isDisabled ? colors.system.state.content.disabled[styleType] : undefined, color: currentType.hintTextColor, variant: "labelSmallSize", children: hintText })] });
+    };
+    const renderRequired = () => {
+        if (!isRequired) {
+            return null;
+        }
+        return _jsx(Text, { color: "danger", style: [
+                stylesheet.required,
+                requiredDynamicStyle
+            ], children: "*" });
+    };
+    const renderSubtitle = () => {
+        if (!isShowSubTitle && !isOptional) {
+            return null;
+        }
+        return _jsxs(Text, { variant: "labelLargeSize", color: titleProps.color, style: [
+                stylesheet.subTitle,
+                subTitleDynamicStyle
+            ], children: ["( ", isOptional ? localize("is-optional") : subTitle, " )"] });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsxs(TouchableOpacity, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], onPress: () => {
+                if (!isDisabled) {
+                    focus();
+                }
+            }, children: [renderRequired(), _jsx(Text, { ...titleProps, variant: titleProps.variant, color: titleProps.color, style: [
+                        stylesheet.title,
+                        titleDynamicStyle
+                    ], children: title }), renderSubtitle()] });
+    };
+    const renderDateValue = () => {
+        if (!date) {
+            return _jsx(Text, { variant: "labelLargeSize", numberOfLines: 1, style: [
+                    stylesheet.contentText,
+                    contentTextDynamicStyle
+                ], children: placeholder ? placeholder : localize("select-any-date") });
+        }
+        return _jsx(Text, { variant: "labelLargeSize", numberOfLines: 1, style: [
+                stylesheet.contentText,
+                contentTextDynamicStyle
+            ], children: moment(date).format(titleFormat) });
+    };
+    const renderDateRangeValue = () => {
+        if (!dateRange) {
+            return _jsx(Text, { variant: "labelLargeSize", numberOfLines: 1, style: [
+                    stylesheet.contentText,
+                    contentTextDynamicStyle
+                ], children: placeholder ? placeholder : localize("select-any-date") });
+        }
+        if (dateRangeTitle) {
+            return dateRangeTitle(dateRange);
+        }
+        return _jsxs(Text, { variant: "labelLargeSize", numberOfLines: 1, style: [
+                stylesheet.contentText,
+                contentTextDynamicStyle
+            ], children: [moment(dateRange.start).format(titleFormat), " - ", moment(dateRange.end).format(titleFormat)] });
+    };
+    const renderDateRuleValue = () => {
+        if (!dateRule) {
+            return _jsx(Text, { variant: "labelLargeSize", numberOfLines: 1, style: [
+                    stylesheet.contentText,
+                    contentTextDynamicStyle
+                ], children: placeholder ? placeholder : localize("select-any-date") });
+        }
+        return _jsx(Text, { variant: "labelLargeSize", numberOfLines: 1, style: [
+                stylesheet.contentText,
+                contentTextDynamicStyle
+            ], children: dateRule.toText(undefined, parseRRuleConfig(rruleConfig)) });
+    };
+    const renderValue = () => {
+        if (variant === "rrule") {
+            return renderDateRuleValue();
+        }
+        if (variant === "range") {
+            return renderDateRangeValue();
+        }
+        return renderDateValue();
+    };
+    const renderContent = () => {
+        return _jsx(View, { style: [
+                contentStyle,
+                stylesheet.content,
+                contentDynamicStyle
+            ], children: renderValue() });
+    };
+    const renderOverlay = () => {
+        return _jsx(View, { style: [
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ] });
+    };
+    return _jsxs(View, { style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [renderTitle(), _jsxs(TouchableOpacity, { disabled: isDisabled, style: [
+                    contentContainerStyle,
+                    stylesheet.contentContainer,
+                    contentContainerDynamicStyle
+                ], onPress: () => {
+                    if (!isDisabled) {
+                        focus();
+                    }
+                }, children: [renderOverlay(), renderIcon(), renderContent(), renderCleanButton(), renderRightIcon()] }), renderHintText(), _jsx(DateTimeSheet, { isTimeSelectWorksWithCenterWhenTimePicker: isTimeSelectWorksWithCenterWhenTimePicker, multipleSelectMinimumRequiredDayCount: multipleSelectMinimumRequiredDayCount, multipleSelectMinimumRequireMS: multipleSelectMinimumRequireMS, localeBasedFirstDayOfWeek: localeBasedFirstDayOfWeek, isShowCalenderChangerTool: isShowCalenderChangerTool, LoadingIconComponentProp: LoadingIconComponentProp, multipleSelectMaximumMS: multipleSelectMaximumMS, multipleSelectDayLimit: multipleSelectDayLimit, dateTimePickerKey: dateTimePickerKey.current, monthOfYearLengthType: monthOfYearLengthType, customLocalize: customDateTimeSheetLocalize, selectMultipleObject: selectMultipleObject, isShowTodayIndicator: isShowTodayIndicator, isWorkWithRealtime: isWorkWithRealtime, customTheme: customDateTimeSheetTheme, isWorkWithSeconds: isWorkWithSeconds, dateCalendarType: dateCalendarType, isShowTools: isShowDateTimeTools, dayOfWeekLength: dayOfWeekLength, bottomSheetRef: bottomSheetRef, selectDateRule: selectDateRule, selectObject: selectObject, setIsActive: setIsActive, bottomSheetProps: {
+                    isAutoHeight: true,
+                    ...dateTimeSheetProps
+                }, dateRange: mainDateRange, pickerType: pickerType, maxChoice: maxChoice, minChoice: minChoice, isLoading: isLoading, dateRule: dateRule, isActive: isActive, variant: variant, maxDate: maxDate, minDate: minDate, date: mainDate, cancel: cancel, clean: clean, title: title, ok: ok })] });
+};
+export default forwardRef(DateTimePicker);