@geotab/zenith 3.1.1-beta.6 → 3.2.0-beta.1

package/dist/dateInputRaw/utils/getLabel.js

@@ -1,12 +1,43 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.getLabel = void 0;
 const formatDate_1 = require("../../utils/formatDate");
+injectString("cs", "Pick a date", "Vyberte datum");
+injectString("da-DK", "Pick a date", "V\xE6lg en dato");
+injectString("de", "Pick a date", "Datum ausw\xE4hlen");
+injectString("en", "Pick a date", "Pick a date");
+injectString("es", "Pick a date", "Elegir una fecha");
+injectString("fi-FI", "Pick a date", "Valitse p\xE4iv\xE4m\xE4\xE4r\xE4");
+injectString("fr", "Pick a date", "Choisir une date");
+injectString("fr-FR", "Pick a date", "S\xE9lectionner une date");
+injectString("hu-HU", "Pick a date", "V\xE1lassz d\xE1tumot");
+injectString("id", "Pick a date", "Pilih tanggal");
+injectString("it", "Pick a date", "Scegliere una data");
+injectString("ja", "Pick a date", "\u65E5\u4ED8\u3092\u9078\u629E");
+injectString("ko-KR", "Pick a date", "\uB0A0\uC9DC \uC120\uD0DD");
+injectString("ms", "Pick a date", "Pilih tarikh");
+injectString("nb-NO", "Pick a date", "Velg en dato");
+injectString("nl", "Pick a date", "Kies een datum");
+injectString("pl", "Pick a date", "Wybierz dat\u0119");
+injectString("pt-BR", "Pick a date", "Escolha uma data");
+injectString("sk-SK", "Pick a date", "Vyber d\xE1tum");
+injectString("sv", "Pick a date", "V\xE4lj ett datum");
+injectString("th", "Pick a date", "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E27\u0E31\u0E19\u0E17\u0E35\u0E48");
+injectString("tr", "Pick a date", "Bir tarih se\xE7in");
+injectString("zh-Hans", "Pick a date", "\u9009\u62E9\u65E5\u671F");
+injectString("zh-TW", "Pick a date", "\u9078\u64C7\u65E5\u671F");
+injectString("en", "Date filter:", "Date filter:");
 const getLabel = (value, dateFormat, timeFormat, translate, toLocalDateTime, timeSelect, buttonLabel, buttonTitle) => {
-    if (!value) {
-        return buttonLabel ? buttonLabel : translate("Pick a date");
-    }
-    const format = timeSelect ? `${dateFormat} ${timeFormat}` : dateFormat;
-    return buttonTitle ? `${translate("Date filter:")} ${(0, formatDate_1.formatDate)(toLocalDateTime(value), format, translate)}` : (0, formatDate_1.formatDate)(toLocalDateTime(value), format, translate);
+  if (!value) {
+    return buttonLabel ? buttonLabel : translate("Pick a date");
+  }
+  const format = timeSelect ? `${dateFormat} ${timeFormat}` : dateFormat;
+  return buttonTitle ? `${translate("Date filter:")} ${(0, formatDate_1.formatDate)(toLocalDateTime(value), format, translate)}` : (0, formatDate_1.formatDate)(toLocalDateTime(value), format, translate);
 };
-exports.getLabel = getLabel;
+exports.getLabel = getLabel;

package/dist/dateRangeInner/dateRangeInner.js

@@ -1,8 +1,37 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+const {
+  injectString
+} = require("../utils/localization/translationsDictionary");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.TRANSLATIONS = exports.DateRangeInner = exports.CUSTOM_CALENDAR_ID = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const radioGroup_1 = require("../radioGroup/radioGroup");
+injectString("cs", "Custom", "Vlastn\xED");
+injectString("da-DK", "Custom", "Brugerdefineret");
+injectString("de", "Custom", "Individuell");
+injectString("en", "Custom", "Custom");
+injectString("es", "Custom", "Personalizado");
+injectString("fi-FI", "Custom", "Mukautettu");
+injectString("fr", "Custom", "Personnalis\xE9e");
+injectString("fr-FR", "Custom", "Personnalis\xE9");
+injectString("hu-HU", "Custom", "Egy\xE9ni");
+injectString("id", "Custom", "Kustom");
+injectString("it", "Custom", "Personalizza");
+injectString("ja", "Custom", "\u671F\u9593\u8A2D\u5B9A\u306E\u5909\u66F4");
+injectString("ko-KR", "Custom", "\uC0AC\uC6A9\uC790 \uC9C0\uC815");
+injectString("ms", "Custom", "Tersuai");
+injectString("nb-NO", "Custom", "Egendefinert");
+injectString("nl", "Custom", "Aangepast");
+injectString("pl", "Custom", "Niestandardowy");
+injectString("pt-BR", "Custom", "Personalizado");
+injectString("sk-SK", "Custom", "Vlastn\xE9");
+injectString("sv", "Custom", "Modifierad");
+injectString("th", "Custom", "\u0E01\u0E33\u0E2B\u0E19\u0E14\u0E40\u0E2D\u0E07");
+injectString("tr", "Custom", "\xD6zel");
+injectString("zh-Hans", "Custom", "\u5B9A\u5236");
+injectString("zh-TW", "Custom", "\u81EA\u8A02");
 const dateInputInner_1 = require("../dateInputInner/dateInputInner");
 const react_1 = require("react");
 const useLanguage_1 = require("../utils/localization/useLanguage");
@@ -12,63 +41,148 @@ const iconChevronRight_1 = require("../icons/iconChevronRight");
 const dateRange_1 = require("../dateRange/dateRange");
 const normalizeDates_1 = require("../filtersBar/components/filtersBarPeriodPicker/normalizeDates");
 const classNames_1 = require("../commonHelpers/classNames/classNames");
+const radioGroupRaw_1 = require("../radioGroupRaw/radioGroupRaw");
 exports.CUSTOM_CALENDAR_ID = "Custom";
-const DateRangeInner = ({ id, options: optionsArg, selection, range = { from: undefined, to: undefined }, onOptionSelect, onCalendarSelect, timeSelect, disableFutureDates, disablePastDates, disableDatesAfter, disableDatesBefore, showMobileCalendar, setShowMobileCalendar }) => {
-    const { translate } = (0, useLanguage_1.useLanguage)();
-    const isMobileView = !!setShowMobileCalendar;
-    const { dateFormat, weekStartsOnSunday, toLocalDateTime } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
-    const dateFormatter = (d) => (0, formatDate_1.formatDate)(toLocalDateTime(d), dateFormat, translate);
-    const dateDeformatter = (d) => (0, formatDate_1.deformatDate)(d, dateFormat, translate) || new Date("");
-    const isCalendarVisible = !!onCalendarSelect;
-    const calendarLabel = translate(exports.CUSTOM_CALENDAR_ID);
-    const normalizedUnknownRange = (0, react_1.useMemo)(() => (0, normalizeDates_1.normalizeDates)(undefined, undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter), [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates]);
-    const options = (0, react_1.useMemo)(() => optionsArg.map((opt) => (Object.assign(Object.assign({}, opt), (opt.hasSecondaryLabel ? { secondaryLabel: opt.getRange ? (0, dateRange_1.parseLabel)(Object.assign({ label: opt.label }, opt.getRange()), dateFormat, translate, toLocalDateTime)
-            : (0, dateRange_1.parseLabel)({ label: "unknown", from: new Date(normalizedUnknownRange.from), to: new Date(normalizedUnknownRange.to) }, dateFormat, translate, toLocalDateTime) } : {})))), [optionsArg, dateFormat, translate, toLocalDateTime, normalizedUnknownRange.from, normalizedUnknownRange.to]);
-    const items = (0, react_1.useMemo)(() => {
-        const handleButtonClick = () => {
-            setShowMobileCalendar && setShowMobileCalendar(true);
-            selection !== exports.CUSTOM_CALENDAR_ID && onOptionSelect(exports.CUSTOM_CALENDAR_ID);
-        };
-        const mobileCustomLabel = (label, secondaryLabel) => (0, jsx_runtime_1.jsxs)("button", { type: "button", onClick: handleButtonClick, className: (0, classNames_1.classNames)(["zen-date-range-inner__mobile-custom-label", secondaryLabel === undefined ? "zen-date-range-inner__mobile-custom-label--no-secondary" : ""]), children: [(0, jsx_runtime_1.jsxs)("div", { className: "zen-date-range-inner__range-label", children: [(0, jsx_runtime_1.jsx)("div", { children: label }), secondaryLabel ? (0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-inner__label-secondary", children: secondaryLabel }) : null] }), (0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-inner__mobile-custom-icon-wrapper", children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, { size: "large" }) })] });
-        const getLabel = (mainLabel, secondaryLabel) => (0, jsx_runtime_1.jsxs)("div", { className: "zen-date-range-inner__range-label", children: [(0, jsx_runtime_1.jsx)("div", { children: mainLabel }), secondaryLabel ? (0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-inner__label-secondary", children: secondaryLabel }) : null] });
-        const optionsToPass = options.map(option => ({
-            id: option.id,
-            value: option.id,
-            children: isMobileView && option.id === "Custom" ? mobileCustomLabel(calendarLabel, option.secondaryLabel)
-                : getLabel(option.label, option.secondaryLabel),
-            key: option.id
-        }));
-        return optionsToPass;
-    }, [calendarLabel, isMobileView, onOptionSelect, options, selection, setShowMobileCalendar]);
-    const calendarId = (0, react_1.useMemo)(() => `${id}-calendar`, [id]);
-    const optionSelectHandler = (0, react_1.useCallback)(e => {
-        let selectedValue = e.target.value;
-        if (!selectedValue && e.target.classList.contains("zen-date-range-inner__mobile-custom-label")) {
-            selectedValue = exports.CUSTOM_CALENDAR_ID;
-        }
-        onOptionSelect(selectedValue);
-    }, [onOptionSelect]);
-    const calendarSelectHandler = (0, react_1.useCallback)((selectedRange) => {
-        onCalendarSelect && onCalendarSelect(selectedRange);
-    }, [onCalendarSelect]);
-    const isMobileCalendar = isMobileView && showMobileCalendar;
-    const memoizedRadioGroup = (0, react_1.useMemo)(() => {
-        if (!isMobileView || !showMobileCalendar) {
-            return (0, jsx_runtime_1.jsx)(radioGroup_1.RadioGroup
-            // className when there is a custom property in mobile view
-            , { 
-                // className when there is a custom property in mobile view
-                className: isCalendarVisible && isMobileView ? "zen-date-range-inner__radio-group--with-custom" : "", items: items, fullWidth: true, value: selection, name: `daterange__${id}`, direction: "vertical", type: "interactive", onChange: optionSelectHandler, selectItemOnFocus: false, wrappedInLabel: true });
-        }
-        return null;
-    }, [id, isCalendarVisible, isMobileView, items, optionSelectHandler, selection, showMobileCalendar]);
-    return (0, jsx_runtime_1.jsxs)("div", { id: id, className: "zen-date-range-inner", children: [memoizedRadioGroup, isCalendarVisible && selection === exports.CUSTOM_CALENDAR_ID && (!isMobileView || showMobileCalendar)
-                ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: "zen-date-range-inner__calendar-wrapper", children: (0, jsx_runtime_1.jsx)(dateInputInner_1.DateInputInner, { id: calendarId, value: range, onChange: calendarSelectHandler, dateFormat: dateFormat, dateFormatter: dateFormatter, dateDeformatter: dateDeformatter, startDayOfWeek: weekStartsOnSunday ? 0 : 1, disableFutureDates: disableFutureDates, disablePastDates: disablePastDates, disableDatesBefore: disableDatesBefore, disableDatesAfter: disableDatesAfter, dateRangeMode: true, selectTime: timeSelect, isMobileView: isMobileCalendar, requireSelection: true }) }) })
-                : null] });
+const DateRangeInner = ({
+  id,
+  options: optionsArg,
+  selection,
+  range = {
+    from: undefined,
+    to: undefined
+  },
+  onOptionSelect,
+  onCalendarSelect,
+  timeSelect,
+  disableFutureDates,
+  disablePastDates,
+  disableDatesAfter,
+  disableDatesBefore,
+  showMobileCalendar,
+  setShowMobileCalendar
+}) => {
+  const {
+    translate
+  } = (0, useLanguage_1.useLanguage)();
+  const isMobileView = !!setShowMobileCalendar;
+  const {
+    dateFormat,
+    weekStartsOnSunday,
+    toLocalDateTime
+  } = (0, react_1.useContext)(userFormatContext_1.userFormatContext);
+  const dateFormatter = d => (0, formatDate_1.formatDate)(toLocalDateTime(d), dateFormat, translate);
+  const dateDeformatter = d => (0, formatDate_1.deformatDate)(d, dateFormat, translate) || new Date("");
+  const isCalendarVisible = !!onCalendarSelect;
+  const calendarLabel = translate("Custom");
+  const normalizedUnknownRange = (0, react_1.useMemo)(() => (0, normalizeDates_1.normalizeDates)(undefined, undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter), [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates]);
+  const options = (0, react_1.useMemo)(() => optionsArg.map(opt => Object.assign(Object.assign({}, opt), opt.hasSecondaryLabel ? {
+    secondaryLabel: opt.getRange ? (0, dateRange_1.parseLabel)(Object.assign({
+      label: opt.label
+    }, opt.getRange()), dateFormat, translate, toLocalDateTime) : (0, dateRange_1.parseLabel)({
+      label: "unknown",
+      from: new Date(normalizedUnknownRange.from),
+      to: new Date(normalizedUnknownRange.to)
+    }, dateFormat, translate, toLocalDateTime)
+  } : {})), [optionsArg, dateFormat, translate, toLocalDateTime, normalizedUnknownRange.from, normalizedUnknownRange.to]);
+  const items = (0, react_1.useMemo)(() => {
+    const handleButtonClick = () => {
+      setShowMobileCalendar && setShowMobileCalendar(true);
+      selection !== exports.CUSTOM_CALENDAR_ID && onOptionSelect(exports.CUSTOM_CALENDAR_ID);
+    };
+    const mobileCustomLabel = (label, secondaryLabel) => (0, jsx_runtime_1.jsxs)("button", {
+      type: "button",
+      onClick: handleButtonClick,
+      className: (0, classNames_1.classNames)(["zen-date-range-inner__mobile-custom-label", secondaryLabel === undefined ? "zen-date-range-inner__mobile-custom-label--no-secondary" : ""]),
+      children: [(0, jsx_runtime_1.jsxs)("div", {
+        className: "zen-date-range-inner__range-label",
+        children: [(0, jsx_runtime_1.jsx)("div", {
+          children: label
+        }), secondaryLabel ? (0, jsx_runtime_1.jsx)("div", {
+          className: "zen-date-range-inner__label-secondary",
+          children: secondaryLabel
+        }) : null]
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-date-range-inner__mobile-custom-icon-wrapper",
+        children: (0, jsx_runtime_1.jsx)(iconChevronRight_1.IconChevronRight, {
+          size: "large"
+        })
+      })]
+    });
+    const getLabel = (mainLabel, secondaryLabel) => (0, jsx_runtime_1.jsxs)("div", {
+      className: "zen-date-range-inner__range-label",
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        children: mainLabel
+      }), secondaryLabel ? (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-date-range-inner__label-secondary",
+        children: secondaryLabel
+      }) : null]
+    });
+    const optionsToPass = options.map(option => ({
+      id: option.id,
+      value: option.id,
+      children: isMobileView && option.id === "Custom" ? mobileCustomLabel(calendarLabel, option.secondaryLabel) : getLabel(option.label, option.secondaryLabel),
+      key: option.id
+    }));
+    return optionsToPass;
+  }, [calendarLabel, isMobileView, onOptionSelect, options, selection, setShowMobileCalendar]);
+  const calendarId = (0, react_1.useMemo)(() => `${id}-calendar`, [id]);
+  const optionSelectHandler = (0, react_1.useCallback)(e => {
+    let selectedValue = e.target.value;
+    if (!selectedValue && e.target.classList.contains("zen-date-range-inner__mobile-custom-label")) {
+      selectedValue = exports.CUSTOM_CALENDAR_ID;
+    }
+    onOptionSelect(selectedValue);
+  }, [onOptionSelect]);
+  const calendarSelectHandler = (0, react_1.useCallback)(selectedRange => {
+    onCalendarSelect && onCalendarSelect(selectedRange);
+  }, [onCalendarSelect]);
+  const isMobileCalendar = isMobileView && showMobileCalendar;
+  const memoizedRadioGroup = (0, react_1.useMemo)(() => {
+    if (!isMobileView || !showMobileCalendar) {
+      return (0, jsx_runtime_1.jsx)(radioGroupRaw_1.RadioGroupRaw
+      // className when there is a custom property in mobile view
+      , {
+        // className when there is a custom property in mobile view
+        className: isCalendarVisible && isMobileView ? "zen-date-range-inner__radio-group--with-custom" : "",
+        items: items,
+        fullWidth: true,
+        value: selection,
+        name: `daterange__${id}`,
+        direction: "vertical",
+        type: "interactive",
+        onChange: optionSelectHandler,
+        selectItemOnFocus: false,
+        wrappedInLabel: true
+      });
+    }
+    return null;
+  }, [id, isCalendarVisible, isMobileView, items, optionSelectHandler, selection, showMobileCalendar]);
+  return (0, jsx_runtime_1.jsxs)("div", {
+    id: id,
+    className: "zen-date-range-inner",
+    children: [memoizedRadioGroup, isCalendarVisible && selection === exports.CUSTOM_CALENDAR_ID && (!isMobileView || showMobileCalendar) ? (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {
+      children: (0, jsx_runtime_1.jsx)("div", {
+        className: "zen-date-range-inner__calendar-wrapper",
+        children: (0, jsx_runtime_1.jsx)(dateInputInner_1.DateInputInner, {
+          id: calendarId,
+          value: range,
+          onChange: calendarSelectHandler,
+          dateFormat: dateFormat,
+          dateFormatter: dateFormatter,
+          dateDeformatter: dateDeformatter,
+          startDayOfWeek: weekStartsOnSunday ? 0 : 1,
+          disableFutureDates: disableFutureDates,
+          disablePastDates: disablePastDates,
+          disableDatesBefore: disableDatesBefore,
+          disableDatesAfter: disableDatesAfter,
+          dateRangeMode: true,
+          selectTime: timeSelect,
+          isMobileView: isMobileCalendar,
+          requireSelection: true
+        })
+      })
+    }) : null]
+  });
 };
 exports.DateRangeInner = DateRangeInner;
-exports.TRANSLATIONS = [
-    "Custom Date",
-    "Custom Date and Time range",
-    "Today"
-];
+exports.TRANSLATIONS = ["Custom Date", "Custom Date and Time range", "Today"];