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

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

@@ -0,0 +1,704 @@
+"use strict";
+
+import { useImperativeHandle, forwardRef, useEffect, useState, useRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+import stylesheet, { getDateTimePickerType, useStyles } from "./stylesheet.js";
+import { NCoreUIKitLocalize, NCoreUIKitTheme, NCoreUIKitToast } from "../../core/hooks.js";
+import moment from "moment";
+import { BadgeQuestionMarkIcon, BadgeSuccessIcon, BadgeDangerIcon, BadgeAlertIcon, BadgeInfoIcon, CleanIcon } from "../../assets/svg/index.js";
+import { uuid } from "../../utils/index.js";
+import Text from "../text/index.js";
+import DateTimeSheet from "../dateTimeSheet/index.js";
+import { parseRRuleConfig } from "../../helpers/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 /*#__PURE__*/_jsx(TouchableOpacity, {
+      style: [cleanIconStyle, stylesheet.cleanButton, cleanButtonDynamicStyle],
+      onPress: () => {
+        setDateRange(undefined);
+        setDateRule(undefined);
+        setDate(undefined);
+        setTempDateRange(undefined);
+        setTempDateRule(undefined);
+        setTempDate(undefined);
+      },
+      children: /*#__PURE__*/_jsx(CleanIcon, {
+        color: "mid",
+        size: 20
+      })
+    });
+  };
+  const renderIcon = () => {
+    if (!IconComponentProp) {
+      return null;
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: [iconStyle, stylesheet.icon, iconDynamicStyle],
+      children: /*#__PURE__*/_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 /*#__PURE__*/_jsx(View, {
+      style: [rightIconStyle, stylesheet.rightIcon, rightIconDynamicStyle],
+      children: /*#__PURE__*/_jsx(RightIconComponentProp, {
+        color: iconProps.color,
+        size: iconProps.size
+      })
+    });
+  };
+  const renderHintIcon = () => {
+    if (!isShowHintTextIcon) {
+      return null;
+    }
+    if (HintTextIconProp) {
+      return /*#__PURE__*/_jsx(HintTextIconProp, {
+        color: isDisabled ? "disabled" : currentType.hintTextIconColor,
+        size: 20,
+        style: [hintTextIconStyle, stylesheet.hintTextIcon, hintTextIconDynamicStyle]
+      });
+    }
+    const CurrentHintIcon = DateTimePickerTypeIcon[type === "default" ? "question" : type];
+    return /*#__PURE__*/_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 /*#__PURE__*/_jsxs(View, {
+      style: [hintTextContainerStyle, stylesheet.hintText, hintTextDynamicStyle],
+      children: [renderHintIcon(), /*#__PURE__*/_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 /*#__PURE__*/_jsx(Text, {
+      color: "danger",
+      style: [stylesheet.required, requiredDynamicStyle],
+      children: "*"
+    });
+  };
+  const renderSubtitle = () => {
+    if (!isShowSubTitle && !isOptional) {
+      return null;
+    }
+    return /*#__PURE__*/_jsxs(Text, {
+      variant: "labelLargeSize",
+      color: titleProps.color,
+      style: [stylesheet.subTitle, subTitleDynamicStyle],
+      children: ["( ", isOptional ? localize("is-optional") : subTitle, " )"]
+    });
+  };
+  const renderTitle = () => {
+    if (!title) {
+      return null;
+    }
+    return /*#__PURE__*/_jsxs(TouchableOpacity, {
+      style: [stylesheet.titleContainer, titleContainerDynamicStyle],
+      onPress: () => {
+        if (!isDisabled) {
+          focus();
+        }
+      },
+      children: [renderRequired(), /*#__PURE__*/_jsx(Text, {
+        ...titleProps,
+        variant: titleProps.variant,
+        color: titleProps.color,
+        style: [stylesheet.title, titleDynamicStyle],
+        children: title
+      }), renderSubtitle()]
+    });
+  };
+  const renderDateValue = () => {
+    if (!date) {
+      return /*#__PURE__*/_jsx(Text, {
+        variant: "labelLargeSize",
+        numberOfLines: 1,
+        style: [stylesheet.contentText, contentTextDynamicStyle],
+        children: placeholder ? placeholder : localize("select-any-date")
+      });
+    }
+    return /*#__PURE__*/_jsx(Text, {
+      variant: "labelLargeSize",
+      numberOfLines: 1,
+      style: [stylesheet.contentText, contentTextDynamicStyle],
+      children: moment(date).format(titleFormat)
+    });
+  };
+  const renderDateRangeValue = () => {
+    if (!dateRange) {
+      return /*#__PURE__*/_jsx(Text, {
+        variant: "labelLargeSize",
+        numberOfLines: 1,
+        style: [stylesheet.contentText, contentTextDynamicStyle],
+        children: placeholder ? placeholder : localize("select-any-date")
+      });
+    }
+    if (dateRangeTitle) {
+      return dateRangeTitle(dateRange);
+    }
+    return /*#__PURE__*/_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 /*#__PURE__*/_jsx(Text, {
+        variant: "labelLargeSize",
+        numberOfLines: 1,
+        style: [stylesheet.contentText, contentTextDynamicStyle],
+        children: placeholder ? placeholder : localize("select-any-date")
+      });
+    }
+    return /*#__PURE__*/_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 /*#__PURE__*/_jsx(View, {
+      style: [contentStyle, stylesheet.content, contentDynamicStyle],
+      children: renderValue()
+    });
+  };
+  const renderOverlay = () => {
+    return /*#__PURE__*/_jsx(View, {
+      style: [stylesheet.overlay, overlayDynamicStyle]
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [style, stylesheet.container, containerDynamicStyle],
+    children: [renderTitle(), /*#__PURE__*/_jsxs(TouchableOpacity, {
+      disabled: isDisabled,
+      style: [contentContainerStyle, stylesheet.contentContainer, contentContainerDynamicStyle],
+      onPress: () => {
+        if (!isDisabled) {
+          focus();
+        }
+      },
+      children: [renderOverlay(), renderIcon(), renderContent(), renderCleanButton(), renderRightIcon()]
+    }), renderHintText(), /*#__PURE__*/_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 /*#__PURE__*/forwardRef(DateTimePicker);
+//# sourceMappingURL=index.js.map