@ironsource/shared-ui 1.4.2-test.3 → 1.4.2-test.5

package/src/components/dateRange/DateRange.vue.js

@@ -0,0 +1,658 @@
+import { defineComponent, ref, computed, onMounted, onBeforeMount, onUnmounted, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, unref, toDisplayString, setBlockTracking, withDirectives, Fragment, renderList, createVNode, withCtx, createTextVNode, createCommentVNode, vShow, normalizeStyle } from 'vue';
+import { onClickOutside } from '@vueuse/core';
+import { useToggle } from '../../composables/useToggle.vue.js';
+import CalendarMonth from './CalendarMonth.vue.js';
+import dateServices from './DateServices.vue.js';
+import { typeToName, messagePerType, presetsList, formatError, mandatoryValuesError, navigatePrev, navigateNext } from './consts.vue.js';
+import Button from '../button/Button.vue.js';
+import '../button/IconButton.vue.js';
+import '../button/ScrollButton.vue.js';
+import '../typography/Heading.vue.js';
+import Text from '../typography/Text.vue.js';
+import { min, addDays, format } from 'date-fns';
+/* empty css                                                           */import _export_sfc from '../../../_virtual/plugin-vue_export-helper.vue.js';
+
+////import "../../DateRange.vue_vue_type_style_index_0_scoped_true_lang.css";
+const _hoisted_1 = ["id"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = {
+  key: 0,
+  class: "type-picker"
+};
+const _hoisted_4 = ["onClick"];
+const _hoisted_5 = {
+  key: 0,
+  class: "date-picker-menu"
+};
+const _hoisted_6 = ["id"];
+const _hoisted_7 = ["id"];
+const _hoisted_8 = ["onClick"];
+const _hoisted_9 = { class: "dropdown-rightTriangle" };
+const _hoisted_10 = { class: "type-message" };
+const _hoisted_11 = { class: "date-picker-calendar left-box" };
+const _hoisted_12 = { class: "buttons-cover" };
+const _hoisted_13 = { class: "range" };
+const numberOfMonths = 2;
+const _sfc_main = defineComponent({
+  __name: "DateRange",
+  props: {
+    range: {},
+    types: { default: () => ["date"] },
+    includeToday: { type: Boolean, default: true },
+    allowedDays: { default: null },
+    maxDaysInRange: { default: null },
+    datePresetList: { default: "date" },
+    regex: { default: () => /^(1[0-2]|0?[1-9])\/[\d]{1,2}\/[\d]{4}$/ },
+    dateFormat: { default: "mm/dd/yyyy" },
+    uniqueId: { default: Date.now() },
+    disabled: { type: Boolean, default: false },
+    initialType: { default: null },
+    openOnTop: { type: Boolean, default: false },
+    showPresets: { type: Boolean, default: true },
+    maxDate: { default: null }
+  },
+  emits: [
+    "rangeTypeChanged",
+    "currentDateChanged",
+    "rangeChanged",
+    "dateRangePresetNameChanged",
+    "opened",
+    "dismissed"
+  ],
+  setup(__props, { emit }) {
+    const props = __props;
+    const datePicker = ref(null);
+    const selectionStart = ref({ started: false, date: null });
+    const initialized = ref(false);
+    const textDates = ref({ from: null, to: null });
+    const currentMonths = ref({});
+    const displayedMonthsKeys = ref([]);
+    const datePresets = ref(null);
+    const selectedPreset = ref({});
+    const savedPreset = ref({});
+    const displayError = ref(false);
+    const rangeType = ref(null);
+    const selectedRange = ref(null);
+    const placement = ref("left");
+    const currentDate = ref(null);
+    const error = ref(null);
+    const presets = ref([]);
+    const maxAllowedDate = ref(null);
+    const [isOpen] = useToggle({ initialValue: false });
+    const popup = ref(null);
+    onClickOutside(popup, () => {
+      isOpen.value = false;
+    });
+    const createMonth = (month, year) => {
+      const parsedMonth = {
+        weeks: [],
+        days: {},
+        month,
+        year
+      };
+      let day;
+      let week;
+      const firstDay = new Date(year, month, 1);
+      const dayInWeek = firstDay.getDay();
+      let dayCounter = 1;
+      const now = new Date();
+      now.setHours(0, 0, 0, 0);
+      const maxDay = dateServices.daysInMonth(month, year);
+      for (let i = 0; i < 6; i++) {
+        week = [];
+        for (let j = 0; j < 7; j++) {
+          day = {};
+          if (i === 0) {
+            if (dayInWeek > 0 && j < dayInWeek) {
+              day.value = 0;
+            }
+          }
+          if (dayCounter > maxDay) {
+            day.value = 0;
+          }
+          if (!day.value && day.value !== 0) {
+            day.value = dayCounter;
+            dayCounter += 1;
+            parsedMonth.days[day.value] = day;
+            day.date = new Date(year, month, day.value);
+            if (now < day.date) {
+              day.isFuture = true;
+            } else if (day.date.getTime() === now.getTime()) {
+              day.isToday = true;
+              if (!props.includeToday) {
+                day.disabled = true;
+              }
+            }
+          }
+          week.push(day);
+        }
+        parsedMonth.weeks.push(week);
+      }
+      return parsedMonth;
+    };
+    const initMonths = () => {
+      let now = dateServices.getCurrentTimeUTC();
+      if (selectedRange.value && selectedRange.value.toEnd) {
+        now = selectedRange.value.toEnd;
+      } else if (props.range && props.range.to) {
+        now = props.range.to;
+      }
+      if (!currentMonths.value[`${now.getFullYear().toString()}_${now.getMonth().toString()}`]) {
+        currentMonths.value = {};
+        displayedMonthsKeys.value = [];
+        for (let i = 0; i < numberOfMonths; i++) {
+          const lastMonth = new Date(now);
+          lastMonth.setDate(1);
+          lastMonth.setMonth(now.getMonth() - i);
+          const key = `${lastMonth.getFullYear().toString()}_${lastMonth.getMonth().toString()}`;
+          currentMonths.value[key] = {
+            parsedMonth: createMonth(lastMonth.getMonth(), lastMonth.getFullYear()),
+            order: i
+          };
+          displayedMonthsKeys.value.unshift(key);
+        }
+      }
+    };
+    const changeType = (type, resetDate) => {
+      rangeType.value = type;
+      let presetType = type;
+      if (type === "date") {
+        presetType = props.datePresetList;
+      }
+      presets.value = presetsList[presetType];
+      if (resetDate) {
+        selectedRange.value = {
+          fromStart: null,
+          fromEnd: null,
+          toStart: null,
+          toEnd: null
+        };
+        textDates.value.from = "";
+        textDates.value.to = "";
+        selectionStart.value = { started: false, date: null };
+        selectedPreset.value = "custom";
+      }
+      emit("rangeTypeChanged", rangeType.value);
+    };
+    const presetChanged = (selectedObj) => {
+      selectedPreset.value = selectedObj.id;
+      initRange(datePresets.value[selectedObj.id].dates());
+      initMonths();
+    };
+    const initRange = (newValue, selectionNotCompleted = false) => {
+      let newRange = newValue;
+      if (!newValue || !newValue.from && !newValue.to) {
+        newRange = datePresets.value[presets.value[0]];
+      }
+      if (props.maxDaysInRange) {
+        maxAllowedDate.value = selectionNotCompleted ? addDays(newRange.from, props.maxDaysInRange) : null;
+      }
+      displayError.value = false;
+      if (!newRange.from || !newRange.to || !(newRange.from instanceof Date) || !(newRange.to instanceof Date)) {
+        error.value = formatError;
+        displayError.value = true;
+        return false;
+      }
+      if (newRange.from > newRange.to) {
+        error.value = `"From" date can't be bigger than "To" date`;
+        displayError.value = true;
+        return false;
+      }
+      selectedRange.value = getSelectedRangeByType(newRange);
+      textDates.value.from = format(
+        selectedRange.value.fromStart,
+        props.dateFormat
+      );
+      textDates.value.to = format(selectedRange.value.toEnd, props.dateFormat);
+      return true;
+    };
+    const setCurrentDate = () => {
+      if (selectedPreset.value === "custom") {
+        currentDate.value = dateServices.getDateRangeString(selectedRange.value);
+      } else {
+        currentDate.value = selectedPresetName.value;
+      }
+      emit("currentDateChanged", currentDate.value);
+    };
+    const apply = () => {
+      if (selectedRange.value.fromStart == null || selectedRange.value.toEnd == null) {
+        displayError.value = true;
+        error.value = mandatoryValuesError;
+        return;
+      }
+      const today = dateServices.getCurrentTimeUTC();
+      if (selectedRange.value.toEnd > today) {
+        selectedRange.value.toEnd = today;
+      }
+      setCurrentDate();
+      savedPreset.value = selectedPreset.value;
+      emit("rangeChanged", {
+        from: selectedRange.value.fromStart,
+        to: selectedRange.value.toEnd,
+        preset: savedPreset.value
+      });
+      toggle(false);
+    };
+    const getNavigation = (isFirst, isLast) => {
+      if (isFirst) {
+        return navigatePrev;
+      }
+      if (isLast) {
+        return navigateNext;
+      }
+      return null;
+    };
+    const navigationCallback = (direction) => {
+      let newMonth = null;
+      let newYear = null;
+      const maxOrder = numberOfMonths - 1;
+      let stringKey = "";
+      let lastMonth = null;
+      let firstMonth = null;
+      switch (direction) {
+        case navigateNext:
+          Object.keys(currentMonths.value).forEach((key) => {
+            const displayedMonth = currentMonths.value[key];
+            if (displayedMonth.order === 0) {
+              lastMonth = displayedMonth;
+            }
+            if (displayedMonth.order === maxOrder) {
+              displayedMonthsKeys.value.splice(
+                displayedMonthsKeys.value.indexOf(key),
+                1
+              );
+              delete currentMonths.value[key];
+            } else {
+              displayedMonth.order += 1;
+            }
+          });
+          newMonth = lastMonth.parsedMonth.month + 1;
+          newYear = lastMonth.parsedMonth.year;
+          if (newMonth > 11) {
+            newMonth = 0;
+            newYear += 1;
+          }
+          stringKey = `${newYear.toString()}_${newMonth.toString()}`;
+          currentMonths.value[stringKey] = {
+            parsedMonth: createMonth(newMonth, newYear),
+            order: 0
+          };
+          displayedMonthsKeys.value.push(stringKey);
+          break;
+        case navigatePrev:
+          Object.keys(currentMonths.value).forEach((key) => {
+            const displayedMonth = currentMonths.value[key];
+            if (displayedMonth.order === maxOrder) {
+              firstMonth = displayedMonth;
+            }
+            if (displayedMonth.order === 0) {
+              displayedMonthsKeys.value.splice(
+                displayedMonthsKeys.value.indexOf(key),
+                1
+              );
+              delete currentMonths.value[key];
+            } else {
+              displayedMonth.order -= 1;
+            }
+          });
+          newMonth = firstMonth.parsedMonth.month - 1;
+          newYear = firstMonth.parsedMonth.year;
+          if (newMonth < 0) {
+            newMonth = 11;
+            newYear -= 1;
+          }
+          stringKey = `${newYear.toString()}_${newMonth.toString()}`;
+          currentMonths.value[stringKey] = {
+            parsedMonth: createMonth(newMonth, newYear),
+            order: maxOrder
+          };
+          displayedMonthsKeys.value.unshift(stringKey);
+          break;
+      }
+    };
+    const getSelectedRangeByType = (dateRange) => {
+      let formattedDateRange;
+      switch (rangeType.value) {
+        case "week":
+          formattedDateRange = {
+            fromStart: dateServices.getFirstDayOfWeek(dateRange.from),
+            fromEnd: dateServices.getLastDayOfWeek(dateRange.from),
+            toStart: dateServices.getFirstDayOfWeek(dateRange.to),
+            toEnd: dateServices.getLastDayOfWeek(dateRange.to)
+          };
+          break;
+        case "month":
+          formattedDateRange = {
+            fromStart: new Date(
+              dateRange.from.getFullYear(),
+              dateRange.from.getMonth(),
+              1
+            ),
+            fromEnd: dateServices.getLastDayOfMonth(dateRange.from),
+            toStart: new Date(
+              dateRange.to.getFullYear(),
+              dateRange.to.getMonth(),
+              1
+            ),
+            toEnd: dateServices.getLastDayOfMonth(dateRange.to)
+          };
+          break;
+        case "date":
+        default:
+          formattedDateRange = {
+            fromStart: dateRange.from,
+            fromEnd: dateRange.from,
+            toStart: dateRange.to,
+            toEnd: dateRange.to
+          };
+          break;
+      }
+      return formattedDateRange;
+    };
+    const compareDates = (dateA, dateB) => {
+      return dateA.getUTCFullYear() === dateB.getUTCFullYear() && dateA.getUTCMonth() === dateB.getUTCMonth() && dateA.getUTCDate() === dateB.getUTCDate();
+    };
+    const determinePreset = (range) => {
+      let found = false;
+      const currentRange = {
+        from: new Date(range.from),
+        to: new Date(range.to)
+      };
+      currentRange.from.setHours(0, 0, 0, 0);
+      currentRange.to.setHours(0, 0, 0, 0);
+      const availablePresetKeys = presets.value.map((item) => item.id);
+      Object.keys(datePresets.value).forEach((key) => {
+        const dateRange = datePresets.value[key];
+        if (key !== "custom" && !found && availablePresetKeys.indexOf(key) !== -1) {
+          const presetRange = dateRange.dates();
+          presetRange.from.setHours(0, 0, 0, 0);
+          presetRange.to.setHours(0, 0, 0, 0);
+          if (compareDates(presetRange.from, currentRange.from) && compareDates(presetRange.to, currentRange.to)) {
+            selectedPreset.value = key;
+            found = true;
+          }
+        }
+      });
+      if (found) {
+        const presetItem = presets.value.find(
+          (preset) => preset.id === selectedPreset.value
+        );
+        emit("dateRangePresetNameChanged", presetItem.name);
+      } else {
+        emit("dateRangePresetNameChanged", null);
+        selectedPreset.value = "custom";
+      }
+      savedPreset.value = selectedPreset.value;
+    };
+    const selectionChanged = (day, month, year) => {
+      if (!selectionStart.value.started) {
+        selectedPreset.value = "custom";
+        selectionStart.value.started = true;
+        selectionStart.value.date = new Date(year, month, day.value);
+        initRange(
+          { from: selectionStart.value.date, to: selectionStart.value.date },
+          true
+        );
+      } else {
+        const endDate = new Date(year, month, day.value);
+        const startDate = selectionStart.value.date;
+        selectionStart.value.started = false;
+        selectionStart.value.date = null;
+        if (endDate < startDate) {
+          selectionChanged(day, month, year);
+        } else {
+          initRange({ from: startDate, to: endDate });
+        }
+      }
+    };
+    const checkPlacement = () => {
+      const position = datePicker.value.offsetLeft;
+      if (window.innerWidth - position > 930) {
+        return "left";
+      }
+      return "right";
+    };
+    const toggle = (dismiss = true) => {
+      isOpen.value = !isOpen.value;
+      if (isOpen.value) {
+        placement.value = checkPlacement();
+        initRange(props.range);
+        initMonths();
+        emit("opened");
+      } else {
+        initRange(props.range);
+        initMonths();
+        selectedPreset.value = savedPreset.value;
+        if (dismiss)
+          emit("dismissed");
+      }
+    };
+    const closeDatePicker = () => {
+      if (isOpen.value) {
+        toggle();
+      }
+    };
+    const initPresets = () => {
+      datePresets.value = dateServices.getPresetsFunctions(props.includeToday);
+      datePresets.value.custom = {
+        dates: () => props.range
+      };
+    };
+    const isCompact = computed(() => {
+      return (displayedMonthsKeys.value || []).reduce((res, monthKey) => {
+        const lastWeek = currentMonths.value[monthKey].parsedMonth.weeks[currentMonths.value[monthKey].parsedMonth.weeks.length - 1];
+        const hasDays = lastWeek.filter(
+          (item) => item.value !== 0
+        ).length;
+        return res && !hasDays;
+      }, true);
+    });
+    const init = () => {
+      if (!props.range)
+        return;
+      initialized.value = true;
+      changeType(props.initialType || props.types[0]);
+      initPresets();
+      determinePreset(props.range);
+      initRange(props.range);
+      initMonths();
+      setCurrentDate();
+    };
+    onMounted(() => {
+      init();
+    });
+    onBeforeMount(() => {
+      const keyupHandler = (e) => {
+        if (e.key === "Escape" && isOpen.value)
+          closeDatePicker();
+      };
+      document.addEventListener("keyup", keyupHandler);
+      onUnmounted(() => {
+        document.removeEventListener("keyup", keyupHandler);
+      });
+    });
+    watch(
+      () => props.range,
+      (newVal, oldVal) => {
+        if (newVal && newVal !== oldVal) {
+          if (initialized.value) {
+            determinePreset(newVal);
+            initRange(newVal);
+            setCurrentDate();
+          } else {
+            init();
+          }
+        }
+      }
+    );
+    watch(isOpen, (value) => {
+      if (!value) {
+        selectionStart.value.started = false;
+      }
+    });
+    const selectedPresetName = computed(() => {
+      const newSelectedPreset = presets.value.find(
+        (preset) => preset.id === selectedPreset.value
+      );
+      return newSelectedPreset ? newSelectedPreset.name : "";
+    });
+    const datePickerId = computed(() => `datepicker${props.uniqueId}`);
+    const getMaxAllowedDate = computed(() => {
+      const dates = [props.maxDate, maxAllowedDate.value].filter((date) => date);
+      return dates.length ? min(dates) : null;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: datePickerId.value,
+        ref_key: "datePicker",
+        ref: datePicker,
+        class: normalizeClass(["relative-wrap", { "date-range-disabled": _ctx.disabled }])
+      }, [
+        createElementVNode("div", {
+          class: "date-range-field",
+          onClick: _cache[1] || (_cache[1] = ($event) => toggle())
+        }, [
+          renderSlot(_ctx.$slots, "field", {
+            currentDate: currentDate.value,
+            isOpen: unref(isOpen)
+          }, () => [
+            createElementVNode("span", null, toDisplayString(currentDate.value), 1),
+            _cache[0] || (setBlockTracking(-1), _cache[0] = createElementVNode("div", { class: "small-triangle" }), setBlockTracking(1), _cache[0])
+          ], true)
+        ]),
+        withDirectives(createElementVNode("div", {
+          id: "datepickerPopup" + _ctx.uniqueId,
+          ref_key: "popup",
+          ref: popup,
+          class: normalizeClass(["pop-up", [
+            placement.value,
+            _ctx.openOnTop ? "open-on-top" : "",
+            !_ctx.showPresets ? "hide-presets" : ""
+          ]])
+        }, [
+          _ctx.types.length > 1 ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.types, (type) => {
+              return openBlock(), createElementBlock("span", {
+                key: type,
+                class: normalizeClass(["range-type", { "selected-range-type": rangeType.value === type }]),
+                onClick: ($event) => changeType(type, true)
+              }, [
+                createVNode(unref(Text), { size: "sm" }, {
+                  default: withCtx(() => [
+                    createTextVNode(toDisplayString(unref(typeToName)[type]), 1)
+                  ]),
+                  _: 2
+                }, 1024)
+              ], 10, _hoisted_4);
+            }), 128))
+          ])) : createCommentVNode("", true),
+          createElementVNode("div", {
+            class: normalizeClass(["flex", { "pop-up-content": _ctx.types.length > 1 }])
+          }, [
+            _ctx.showPresets ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              createElementVNode("div", {
+                id: "presets" + _ctx.uniqueId,
+                class: "preset-dropdown"
+              }, [
+                createElementVNode("ul", {
+                  id: "customDropDownList" + _ctx.uniqueId
+                }, [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(presets.value, (uic) => {
+                    return openBlock(), createElementBlock("li", {
+                      key: uic.id,
+                      class: normalizeClass({
+                        "selected-preset-container": selectedPreset.value === uic.id
+                      })
+                    }, [
+                      createElementVNode("div", {
+                        class: normalizeClass([{ "selected-preset": selectedPreset.value === uic.id }, "preset-element"]),
+                        onClick: ($event) => presetChanged(uic)
+                      }, [
+                        createVNode(unref(Text), { size: "sm" }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(uic["name"]), 1)
+                          ]),
+                          _: 2
+                        }, 1024)
+                      ], 10, _hoisted_8),
+                      withDirectives(createElementVNode("div", _hoisted_9, null, 512), [
+                        [vShow, uic.id === "custom"]
+                      ])
+                    ], 2);
+                  }), 128))
+                ], 8, _hoisted_7)
+              ], 8, _hoisted_6),
+              createElementVNode("div", _hoisted_10, toDisplayString(unref(messagePerType)[rangeType.value]), 1)
+            ])) : createCommentVNode("", true),
+            createElementVNode("div", {
+              class: "calendar-wrap",
+              style: normalizeStyle({ height: isCompact.value ? "336px" : "372px" })
+            }, [
+              createElementVNode("div", _hoisted_11, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(displayedMonthsKeys.value, (currMonth, index) => {
+                  return openBlock(), createElementBlock("div", { key: currMonth }, [
+                    createVNode(CalendarMonth, {
+                      id: _ctx.uniqueId,
+                      navigation: getNavigation(
+                        index === 0,
+                        index === displayedMonthsKeys.value.length - 1
+                      ),
+                      year: currentMonths.value[currMonth].parsedMonth.year,
+                      days: currentMonths.value[currMonth].parsedMonth.days,
+                      weeks: currentMonths.value[currMonth].parsedMonth.weeks,
+                      month: currentMonths.value[currMonth].parsedMonth.month,
+                      range: selectedRange.value,
+                      type: rangeType.value,
+                      "allowed-days": _ctx.allowedDays,
+                      "max-allowed-date": getMaxAllowedDate.value,
+                      onSelectionChanged: selectionChanged,
+                      onNavigation: navigationCallback
+                    }, null, 8, ["id", "navigation", "year", "days", "weeks", "month", "range", "type", "allowed-days", "max-allowed-date"])
+                  ]);
+                }), 128)),
+                createElementVNode("div", _hoisted_12, [
+                  createElementVNode("div", _hoisted_13, [
+                    renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+                  ]),
+                  withDirectives(createElementVNode("div", { class: "error" }, toDisplayString(error.value), 513), [
+                    [vShow, displayError.value]
+                  ]),
+                  _cache[2] || (setBlockTracking(-1), _cache[2] = createElementVNode("div", { class: "buttons" }, [
+                    createVNode(unref(Button), {
+                      id: "button-ok" + _ctx.uniqueId,
+                      size: "sm",
+                      class: "primary button small",
+                      onClick: ($event) => apply()
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(" Apply ")
+                      ]),
+                      _: 1
+                    }, 8, ["id", "onClick"]),
+                    createVNode(unref(Button), {
+                      id: "button-cancel" + _ctx.uniqueId,
+                      size: "sm",
+                      theme: "third",
+                      class: "button small border third transparent",
+                      onClick: ($event) => toggle()
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(" Cancel ")
+                      ]),
+                      _: 1
+                    }, 8, ["id", "onClick"])
+                  ]), setBlockTracking(1), _cache[2])
+                ])
+              ])
+            ], 4)
+          ], 2)
+        ], 10, _hoisted_2), [
+          [vShow, unref(isOpen)]
+        ])
+      ], 10, _hoisted_1);
+    };
+  }
+});
+var DateRange = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-46a2bd5d"]]);
+
+export { DateRange as default };