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

package/esm/dateRangeInner/dateRangeInner.js

@@ -1,5 +1,5 @@
+import { injectString } from "../utils/localization/translationsDictionary";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { RadioGroup } from "../radioGroup/radioGroup";
 import { DateInputInner } from "../dateInputInner/dateInputInner";
 import { useCallback, useContext, useMemo } from "react";
 import { useLanguage } from "../utils/localization/useLanguage";
@@ -9,62 +9,171 @@ import { IconChevronRight } from "../icons/iconChevronRight";
 import { parseLabel } from "../dateRange/dateRange";
 import { normalizeDates } from "../filtersBar/components/filtersBarPeriodPicker/normalizeDates";
 import { classNames } from "../commonHelpers/classNames/classNames";
+import { RadioGroupRaw } from "../radioGroupRaw/radioGroupRaw";
+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");
 export const CUSTOM_CALENDAR_ID = "Custom";
-export const DateRangeInner = ({ id, options: optionsArg, selection, range = { from: undefined, to: undefined }, onOptionSelect, onCalendarSelect, timeSelect, disableFutureDates, disablePastDates, disableDatesAfter, disableDatesBefore, showMobileCalendar, setShowMobileCalendar }) => {
-    const { translate } = useLanguage();
-    const isMobileView = !!setShowMobileCalendar;
-    const { dateFormat, weekStartsOnSunday, toLocalDateTime } = useContext(userFormatContext);
-    const dateFormatter = (d) => formatDate(toLocalDateTime(d), dateFormat, translate);
-    const dateDeformatter = (d) => deformatDate(d, dateFormat, translate) || new Date("");
-    const isCalendarVisible = !!onCalendarSelect;
-    const calendarLabel = translate(CUSTOM_CALENDAR_ID);
-    const normalizedUnknownRange = useMemo(() => normalizeDates(undefined, undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter), [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates]);
-    const options = useMemo(() => optionsArg.map((opt) => (Object.assign(Object.assign({}, opt), (opt.hasSecondaryLabel ? { secondaryLabel: opt.getRange ? parseLabel(Object.assign({ label: opt.label }, opt.getRange()), dateFormat, translate, toLocalDateTime)
-            : 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 = useMemo(() => {
-        const handleButtonClick = () => {
-            setShowMobileCalendar && setShowMobileCalendar(true);
-            selection !== CUSTOM_CALENDAR_ID && onOptionSelect(CUSTOM_CALENDAR_ID);
-        };
-        const mobileCustomLabel = (label, secondaryLabel) => _jsxs("button", { type: "button", onClick: handleButtonClick, className: classNames(["zen-date-range-inner__mobile-custom-label", secondaryLabel === undefined ? "zen-date-range-inner__mobile-custom-label--no-secondary" : ""]), children: [_jsxs("div", { className: "zen-date-range-inner__range-label", children: [_jsx("div", { children: label }), secondaryLabel ? _jsx("div", { className: "zen-date-range-inner__label-secondary", children: secondaryLabel }) : null] }), _jsx("div", { className: "zen-date-range-inner__mobile-custom-icon-wrapper", children: _jsx(IconChevronRight, { size: "large" }) })] });
-        const getLabel = (mainLabel, secondaryLabel) => _jsxs("div", { className: "zen-date-range-inner__range-label", children: [_jsx("div", { children: mainLabel }), secondaryLabel ? _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 = useMemo(() => `${id}-calendar`, [id]);
-    const optionSelectHandler = useCallback(e => {
-        let selectedValue = e.target.value;
-        if (!selectedValue && e.target.classList.contains("zen-date-range-inner__mobile-custom-label")) {
-            selectedValue = CUSTOM_CALENDAR_ID;
-        }
-        onOptionSelect(selectedValue);
-    }, [onOptionSelect]);
-    const calendarSelectHandler = useCallback((selectedRange) => {
-        onCalendarSelect && onCalendarSelect(selectedRange);
-    }, [onCalendarSelect]);
-    const isMobileCalendar = isMobileView && showMobileCalendar;
-    const memoizedRadioGroup = useMemo(() => {
-        if (!isMobileView || !showMobileCalendar) {
-            return _jsx(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 _jsxs("div", { id: id, className: "zen-date-range-inner", children: [memoizedRadioGroup, isCalendarVisible && selection === CUSTOM_CALENDAR_ID && (!isMobileView || showMobileCalendar)
-                ? _jsx(_Fragment, { children: _jsx("div", { className: "zen-date-range-inner__calendar-wrapper", children: _jsx(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] });
+export const DateRangeInner = ({
+  id,
+  options: optionsArg,
+  selection,
+  range = {
+    from: undefined,
+    to: undefined
+  },
+  onOptionSelect,
+  onCalendarSelect,
+  timeSelect,
+  disableFutureDates,
+  disablePastDates,
+  disableDatesAfter,
+  disableDatesBefore,
+  showMobileCalendar,
+  setShowMobileCalendar
+}) => {
+  const {
+    translate
+  } = useLanguage();
+  const isMobileView = !!setShowMobileCalendar;
+  const {
+    dateFormat,
+    weekStartsOnSunday,
+    toLocalDateTime
+  } = useContext(userFormatContext);
+  const dateFormatter = d => formatDate(toLocalDateTime(d), dateFormat, translate);
+  const dateDeformatter = d => deformatDate(d, dateFormat, translate) || new Date("");
+  const isCalendarVisible = !!onCalendarSelect;
+  const calendarLabel = translate("Custom");
+  const normalizedUnknownRange = useMemo(() => normalizeDates(undefined, undefined, disableFutureDates, disablePastDates, disableDatesBefore, disableDatesAfter), [disableDatesAfter, disableDatesBefore, disableFutureDates, disablePastDates]);
+  const options = useMemo(() => optionsArg.map(opt => Object.assign(Object.assign({}, opt), opt.hasSecondaryLabel ? {
+    secondaryLabel: opt.getRange ? parseLabel(Object.assign({
+      label: opt.label
+    }, opt.getRange()), dateFormat, translate, toLocalDateTime) : 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 = useMemo(() => {
+    const handleButtonClick = () => {
+      setShowMobileCalendar && setShowMobileCalendar(true);
+      selection !== CUSTOM_CALENDAR_ID && onOptionSelect(CUSTOM_CALENDAR_ID);
+    };
+    const mobileCustomLabel = (label, secondaryLabel) => _jsxs("button", {
+      type: "button",
+      onClick: handleButtonClick,
+      className: classNames(["zen-date-range-inner__mobile-custom-label", secondaryLabel === undefined ? "zen-date-range-inner__mobile-custom-label--no-secondary" : ""]),
+      children: [_jsxs("div", {
+        className: "zen-date-range-inner__range-label",
+        children: [_jsx("div", {
+          children: label
+        }), secondaryLabel ? _jsx("div", {
+          className: "zen-date-range-inner__label-secondary",
+          children: secondaryLabel
+        }) : null]
+      }), _jsx("div", {
+        className: "zen-date-range-inner__mobile-custom-icon-wrapper",
+        children: _jsx(IconChevronRight, {
+          size: "large"
+        })
+      })]
+    });
+    const getLabel = (mainLabel, secondaryLabel) => _jsxs("div", {
+      className: "zen-date-range-inner__range-label",
+      children: [_jsx("div", {
+        children: mainLabel
+      }), secondaryLabel ? _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 = useMemo(() => `${id}-calendar`, [id]);
+  const optionSelectHandler = useCallback(e => {
+    let selectedValue = e.target.value;
+    if (!selectedValue && e.target.classList.contains("zen-date-range-inner__mobile-custom-label")) {
+      selectedValue = CUSTOM_CALENDAR_ID;
+    }
+    onOptionSelect(selectedValue);
+  }, [onOptionSelect]);
+  const calendarSelectHandler = useCallback(selectedRange => {
+    onCalendarSelect && onCalendarSelect(selectedRange);
+  }, [onCalendarSelect]);
+  const isMobileCalendar = isMobileView && showMobileCalendar;
+  const memoizedRadioGroup = useMemo(() => {
+    if (!isMobileView || !showMobileCalendar) {
+      return _jsx(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 _jsxs("div", {
+    id: id,
+    className: "zen-date-range-inner",
+    children: [memoizedRadioGroup, isCalendarVisible && selection === CUSTOM_CALENDAR_ID && (!isMobileView || showMobileCalendar) ? _jsx(_Fragment, {
+      children: _jsx("div", {
+        className: "zen-date-range-inner__calendar-wrapper",
+        children: _jsx(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]
+  });
 };
-export const TRANSLATIONS = [
-    "Custom Date",
-    "Custom Date and Time range",
-    "Today"
-];
+export const TRANSLATIONS = ["Custom Date", "Custom Date and Time range", "Today"];