ublo-lib 1.31.43 → 1.31.44

package/es/esf/components/week-picker/week.js

@@ -1,50 +1,35 @@
 import * as React from "react";
 import classNames from "classnames";
 import { weekToDate, formatShortDate } from "./utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const Week = ({
-  week,
-  beginWeek,
-  endWeek,
-  selected,
-  onClick,
-  forceSeasonSwitch
-}) => {
-  const now = new Date();
-  const prevDate = weekToDate(week - 1, endWeek, forceSeasonSwitch);
-  const currDate = weekToDate(week, endWeek, forceSeasonSwitch);
-  const nextDate = weekToDate(week + 1, endWeek, forceSeasonSwitch);
-  const prevYear = prevDate.getFullYear();
-  const currYear = currDate.getFullYear();
-  const isPast = now.getTime() > nextDate.getTime();
-  const isFirst = week === beginWeek;
-  const isLast = week === endWeek;
-  const hasYearChanged = prevYear !== currYear;
-  const showYear = isFirst || hasYearChanged;
-  const weekClasses = classNames("week-picker__item", {
-    "week-picker__item--selected": selected === week,
-    "week-picker__item--past": isPast
-  });
-  const yearClasses = classNames("week-picker__year", {
-    "week-picker__year--changed": hasYearChanged
-  });
-  return _jsx("div", {
-    className: weekClasses,
-    onClick: onClick,
-    children: _jsxs("div", {
-      className: "week-picker__date",
-      children: [showYear && _jsx("span", {
-        className: yearClasses,
-        children: currYear
-      }), _jsx("span", {
-        className: "week-picker__item-from",
-        children: formatShortDate(currDate)
-      }), isLast && _jsx("span", {
-        className: "week-picker__item-to",
-        children: formatShortDate(nextDate)
-      })]
-    })
-  });
+const Week = ({ week, beginWeek, endWeek, selected, onClick, forceSeasonSwitch, }) => {
+    const now = new Date();
+    const prevDate = weekToDate(week - 1, endWeek, forceSeasonSwitch);
+    const currDate = weekToDate(week, endWeek, forceSeasonSwitch);
+    const nextDate = weekToDate(week + 1, endWeek, forceSeasonSwitch);
+    const prevYear = prevDate.getFullYear();
+    const currYear = currDate.getFullYear();
+    const isPast = now.getTime() > nextDate.getTime();
+    const isFirst = week === beginWeek;
+    const isLast = week === endWeek;
+    const hasYearChanged = prevYear !== currYear;
+    const showYear = isFirst || hasYearChanged;
+    const weekClasses = classNames("week-picker__item", {
+        "week-picker__item--selected": selected === week,
+        "week-picker__item--past": isPast,
+    });
+    const yearClasses = classNames("week-picker__year", {
+        "week-picker__year--changed": hasYearChanged,
+    });
+    return (<div className={weekClasses} onClick={onClick}>
+      <div className="week-picker__date">
+        {showYear && <span className={yearClasses}>{currYear}</span>}
+        <span className="week-picker__item-from">
+          {formatShortDate(currDate)}
+        </span>
+        {isLast && (<span className="week-picker__item-to">
+            {formatShortDate(nextDate)}
+          </span>)}
+      </div>
+    </div>);
 };
-export default Week;
+export default Week;

package/es/esf/components/week-picker-2/index.d.ts

@@ -0,0 +1,14 @@
+declare const _default: React.MemoExoticComponent<({ lang, start, end, setClosed, cmsMode, customMessages, noRoughValidation, force, forceSeasonSwitch, onChange, }: {
+    lang: any;
+    start: any;
+    end: any;
+    setClosed: any;
+    cmsMode: any;
+    customMessages: any;
+    noRoughValidation?: boolean;
+    force?: boolean;
+    forceSeasonSwitch?: boolean;
+    onChange: any;
+}) => React.JSX.Element>;
+export default _default;
+import * as React from "react";

package/es/esf/components/week-picker-2/index.js

@@ -1,277 +1,225 @@
 import * as React from "react";
-import { memo, useState, useEffect, useCallback, useRef, createRef } from "react";
+import { memo, useState, useEffect, useCallback, useRef, createRef, } from "react";
 import classNames from "classnames";
 import Week from "./week";
 import { weekToLongDate, weekToDate, formatDate } from "./utils";
 import messages from "./messages";
 import { useUbloContext } from "ublo/with-ublo";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const WEEK_STORAGE = "stayWeek";
 const LEFT = 0;
 const RIGHT = 1;
 const buildWeeks = (start, end) => {
-  const length = end - start;
-  const array = [];
-  for (let i = 0; i < length; i++) {
-    array.push(start + i);
-  }
-  return array;
+    const length = end - start;
+    const array = [];
+    for (let i = 0; i < length; i++) {
+        array.push(start + i);
+    }
+    return array;
 };
 const getFiltrableSections = () => Array.from(document.querySelectorAll("section[data-weeks]"));
 const removeSectionFilters = () => {
-  const filtrables = getFiltrableSections();
-  filtrables.forEach(section => {
-    if (section.originalDisplayStyle !== undefined && section.originalDisplayStyle !== "none") {
-      section.style.display = section.originalDisplayStyle;
-    } else {
-      section.style.removeProperty("display");
-    }
-    section.removeAttribute("data-full");
-  });
-};
-const filterSections = week => {
-  const search = String(week);
-  const filtrables = getFiltrableSections();
-  filtrables.forEach(section => {
-    const weeks = section.dataset.weeks.split(",").filter(week => week !== "");
-    const hasFullWeeks = section.hasAttribute("data-full-weeks");
-    const visible = weeks.length === 0 || weeks.includes(search);
-    if (section.originalDisplayStyle === undefined) {
-      section.originalDisplayStyle = section.style.display;
-    }
-    if (hasFullWeeks && visible) {
-      const fullWeeks = section.dataset.fullWeeks.split(",").filter(week => week !== "");
-      const isFull = fullWeeks.includes(search) && fullWeeks.every(week => weeks.includes(week));
-      if (isFull) {
-        section.setAttribute("data-full", "true");
-      } else {
+    const filtrables = getFiltrableSections();
+    filtrables.forEach((section) => {
+        if (section.originalDisplayStyle !== undefined &&
+            section.originalDisplayStyle !== "none") {
+            section.style.display = section.originalDisplayStyle;
+        }
+        else {
+            section.style.removeProperty("display");
+        }
         section.removeAttribute("data-full");
-      }
-    }
-    section.style.display = visible ? section.originalDisplayStyle : "none";
-  });
+    });
 };
-const WeekPicker = ({
-  lang,
-  start,
-  end,
-  setClosed,
-  cmsMode,
-  customMessages,
-  noRoughValidation = false,
-  force = false,
-  forceSeasonSwitch = false,
-  onChange
-}) => {
-  const {
-    path
-  } = useUbloContext();
-  const [isBrowser, setBrowser] = useState(false);
-  const [warn, setWarn] = useState(-1);
-  const [opened, setOpened] = useState(true);
-  const [selected, setSelected] = useState();
-  const previous = createRef();
-  const ref = useRef();
-  const mustFilterSections = cmsMode === undefined;
-  const texts = messages(lang, customMessages);
-  const weekPickerTitle = texts["week-picker-title"];
-  const weekPickedSelectedTitle = texts["week-picker-selected-title"];
-  const weekPickerWarn = texts["week-picker-warn"];
-  const weekPickerOk = texts["week-picker-ok"];
-  const weekPickerCancel = texts["week-picker-cancel"];
-  const weeks = buildWeeks(start, end);
-  const endWeek = weeks[weeks.length - 1];
-  const beginWeek = weeks[0];
-  const showDialog = force && selected === null;
-  const pickerClasses = classNames("week-picker", {
-    "week-picker--dialog-opened": showDialog && mustFilterSections,
-    "week-picker--inline": force,
-    "week-picker--editing": !mustFilterSections
-  });
-  const selectWeek = useCallback((week, force = false) => {
-    const hasCart = window.sessionStorage.cartId !== undefined;
-    if (force || !hasCart) {
-      if (previous.current !== undefined && previous.current !== null && previous.current !== week) {
-        window.sessionStorage.removeItem("cartId");
-      }
-      setWarn(-1);
-      setSelected(week);
-      previous.current = week;
-      if (mustFilterSections && week !== null && week !== undefined) {
-        filterSections(week, mustFilterSections);
-      } else {
-        removeSectionFilters();
-      }
-    } else {
-      setWarn(week);
-    }
-  }, [mustFilterSections]);
-  useEffect(() => {
-    if (!mustFilterSections) {
-      removeSectionFilters();
-    }
-  }, [mustFilterSections]);
-  useEffect(() => {
-    const stored = window.sessionStorage.getItem(WEEK_STORAGE);
-    selectWeek(stored !== null ? Number(stored) : null, true);
-    setBrowser(true);
-  }, [selectWeek, lang, path]);
-  useEffect(() => {
-    if (selected !== null && selected !== undefined) {
-      const stored = window.sessionStorage.getItem(WEEK_STORAGE);
-      const storedSelected = stored !== null ? Number(stored) : null;
-      if (storedSelected !== selected) {
-        window.sessionStorage.setItem(WEEK_STORAGE, selected);
-        const startDate = weekToDate(selected, endWeek, forceSeasonSwitch);
-        const endDate = weekToDate(selected + 1, endWeek, forceSeasonSwitch);
-        const range = {
-          from: formatDate(startDate),
-          to: formatDate(endDate)
-        };
-        window.sessionStorage.stay = JSON.stringify(range);
-        window.sessionStorage.Stay = JSON.stringify(range);
-        if (typeof onChange === "function") {
-          onChange(range);
+const filterSections = (week) => {
+    const search = String(week);
+    const filtrables = getFiltrableSections();
+    filtrables.forEach((section) => {
+        const weeks = section.dataset.weeks
+            .split(",")
+            .filter((week) => week !== "");
+        const hasFullWeeks = section.hasAttribute("data-full-weeks");
+        const visible = weeks.length === 0 || weeks.includes(search);
+        if (section.originalDisplayStyle === undefined) {
+            section.originalDisplayStyle = section.style.display;
         }
-        if (!noRoughValidation) {
-          window.sessionStorage.roughStay = true;
+        if (hasFullWeeks && visible) {
+            const fullWeeks = section.dataset.fullWeeks
+                .split(",")
+                .filter((week) => week !== "");
+            const isFull = fullWeeks.includes(search) &&
+                fullWeeks.every((week) => weeks.includes(week));
+            if (isFull) {
+                section.setAttribute("data-full", "true");
+            }
+            else {
+                section.removeAttribute("data-full");
+            }
         }
-      }
-    }
-  }, [selected, endWeek, noRoughValidation, forceSeasonSwitch, onChange]);
-  useEffect(() => {
-    const bar = ref.current;
-    if (selected === undefined || !bar) return;
-    const selectedItem = bar.querySelector(".week-picker__item--selected");
-    if (!selectedItem) return;
-    const {
-      clientWidth,
-      offsetLeft
-    } = selectedItem;
-    bar.scrollLeft = offsetLeft - clientWidth;
-  }, [selected]);
-  const scrollTo = direction => {
-    const bar = ref.current;
-    if (!bar) return;
-    const currentScroll = bar.scrollLeft;
-    if (direction === LEFT) {
-      bar.scrollLeft = currentScroll - 200;
-    }
-    if (direction === RIGHT) {
-      bar.scrollLeft = currentScroll + 200;
-    }
-  };
-  const select = week => () => {
-    selectWeek(week);
-    if (setClosed !== undefined) {
-      setClosed(week);
-    }
-  };
-  const selectAndClose = week => {
-    selectWeek(week);
-    setOpened(false);
-  };
-  return _jsxs(_Fragment, {
-    children: [_jsx("div", {
-      className: pickerClasses,
-      children: isBrowser && _jsxs(_Fragment, {
-        children: [_jsx("div", {
-          className: "week-picker__top",
-          children: _jsxs("div", {
-            className: "week-picker__text",
-            children: [_jsxs("div", {
-              className: "week-picker__controls",
-              children: [_jsx("button", {
-                className: "week-picker__control",
-                onClick: () => scrollTo(LEFT),
-                "aria-label": "Previous",
-                children: _jsx("svg", {
-                  viewBox: "0 0 24 24",
-                  width: "24",
-                  height: "24",
-                  children: _jsx("path", {
-                    d: "M20 3l-3-3L5 12l12 12 3-3-9-9 9-9z"
-                  })
-                })
-              }), _jsx("button", {
-                className: "week-picker__control",
-                onClick: () => scrollTo(RIGHT),
-                "aria-label": "Next",
-                children: _jsx("svg", {
-                  viewBox: "0 0 24 24",
-                  width: "24",
-                  height: "24",
-                  children: _jsx("path", {
-                    d: "M5 3l3-3 12 12L8 24l-3-3 9-9-9-9z"
-                  })
-                })
-              })]
-            }), selected === null && _jsx("div", {
-              className: "week-picker__title",
-              dangerouslySetInnerHTML: {
-                __html: weekPickerTitle
-              }
-            }), selected !== undefined && selected !== null && _jsx("div", {
-              className: "week-picker__title",
-              dangerouslySetInnerHTML: {
-                __html: `${weekPickedSelectedTitle} <span>${weekToLongDate(selected, endWeek, forceSeasonSwitch)}</span>`
-              }
-            })]
-          })
-        }), _jsxs("div", {
-          className: "week-picker__bottom",
-          children: [_jsx("div", {
-            ref: ref,
-            className: "week-picker__bar",
-            children: weeks.map(week => _jsx(Week, {
-              week: week,
-              beginWeek: beginWeek,
-              endWeek: endWeek,
-              selected: selected,
-              onClick: select(week),
-              forceSeasonSwitch: forceSeasonSwitch
-            }, week))
-          }), warn !== -1 && _jsx("div", {
-            className: "week-picker__warn",
-            children: _jsxs("div", {
-              className: "week-picker__warn-inner",
-              children: [_jsx("div", {
-                className: "week-picker__warn-text",
-                children: weekPickerWarn
-              }), _jsxs("div", {
-                className: "week-picker__warn-buttons",
-                children: [_jsx("button", {
-                  className: "week-picker__warn-button",
-                  onClick: () => setWarn(-1),
-                  children: weekPickerCancel
-                }), _jsx("button", {
-                  className: "week-picker__warn-button",
-                  onClick: () => selectWeek(warn, true),
-                  children: weekPickerOk
-                })]
-              })]
-            })
-          })]
-        })]
-      })
-    }), mustFilterSections && isBrowser && showDialog && opened && _jsx("div", {
-      className: "week-picker-popup",
-      children: _jsx("div", {
-        className: "week-picker-popup__inner",
-        children: _jsx("div", {
-          className: "week-picker-popup__content",
-          children: _jsx(WeekPicker, {
-            lang: lang,
-            start: start,
-            end: end,
-            setClosed: selectAndClose,
-            forceSeasonSwitch: forceSeasonSwitch
-          })
-        })
-      })
-    })]
-  });
+        section.style.display = visible ? section.originalDisplayStyle : "none";
+    });
+};
+const WeekPicker = ({ lang, start, end, setClosed, cmsMode, customMessages, noRoughValidation = false, force = false, forceSeasonSwitch = false, onChange, }) => {
+    const { path } = useUbloContext();
+    const [isBrowser, setBrowser] = useState(false);
+    const [warn, setWarn] = useState(-1);
+    const [opened, setOpened] = useState(true);
+    const [selected, setSelected] = useState();
+    const previous = createRef();
+    const ref = useRef();
+    const mustFilterSections = cmsMode === undefined;
+    const texts = messages(lang, customMessages);
+    const weekPickerTitle = texts["week-picker-title"];
+    const weekPickedSelectedTitle = texts["week-picker-selected-title"];
+    const weekPickerWarn = texts["week-picker-warn"];
+    const weekPickerOk = texts["week-picker-ok"];
+    const weekPickerCancel = texts["week-picker-cancel"];
+    const weeks = buildWeeks(start, end);
+    const endWeek = weeks[weeks.length - 1];
+    const beginWeek = weeks[0];
+    const showDialog = force && selected === null;
+    const pickerClasses = classNames("week-picker", {
+        "week-picker--dialog-opened": showDialog && mustFilterSections,
+        "week-picker--inline": force,
+        "week-picker--editing": !mustFilterSections,
+    });
+    const selectWeek = useCallback((week, force = false) => {
+        const hasCart = window.sessionStorage.cartId !== undefined;
+        if (force || !hasCart) {
+            if (previous.current !== undefined &&
+                previous.current !== null &&
+                previous.current !== week) {
+                window.sessionStorage.removeItem("cartId");
+            }
+            setWarn(-1);
+            setSelected(week);
+            previous.current = week;
+            if (mustFilterSections && week !== null && week !== undefined) {
+                filterSections(week, mustFilterSections);
+            }
+            else {
+                removeSectionFilters();
+            }
+        }
+        else {
+            setWarn(week);
+        }
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [mustFilterSections]);
+    useEffect(() => {
+        if (!mustFilterSections) {
+            removeSectionFilters();
+        }
+    }, [mustFilterSections]);
+    useEffect(() => {
+        const stored = window.sessionStorage.getItem(WEEK_STORAGE);
+        selectWeek(stored !== null ? Number(stored) : null, true);
+        setBrowser(true);
+    }, [selectWeek, lang, path]);
+    useEffect(() => {
+        if (selected !== null && selected !== undefined) {
+            const stored = window.sessionStorage.getItem(WEEK_STORAGE);
+            const storedSelected = stored !== null ? Number(stored) : null;
+            if (storedSelected !== selected) {
+                window.sessionStorage.setItem(WEEK_STORAGE, selected);
+                const startDate = weekToDate(selected, endWeek, forceSeasonSwitch);
+                const endDate = weekToDate(selected + 1, endWeek, forceSeasonSwitch);
+                const range = { from: formatDate(startDate), to: formatDate(endDate) };
+                window.sessionStorage.stay = JSON.stringify(range);
+                window.sessionStorage.Stay = JSON.stringify(range);
+                if (typeof onChange === "function") {
+                    onChange(range);
+                }
+                if (!noRoughValidation) {
+                    window.sessionStorage.roughStay = true;
+                }
+            }
+        }
+    }, [selected, endWeek, noRoughValidation, forceSeasonSwitch, onChange]);
+    useEffect(() => {
+        const bar = ref.current;
+        if (selected === undefined || !bar)
+            return;
+        const selectedItem = bar.querySelector(".week-picker__item--selected");
+        if (!selectedItem)
+            return;
+        const { clientWidth, offsetLeft } = selectedItem;
+        bar.scrollLeft = offsetLeft - clientWidth;
+    }, [selected]);
+    const scrollTo = (direction) => {
+        const bar = ref.current;
+        if (!bar)
+            return;
+        const currentScroll = bar.scrollLeft;
+        if (direction === LEFT) {
+            bar.scrollLeft = currentScroll - 200;
+        }
+        if (direction === RIGHT) {
+            bar.scrollLeft = currentScroll + 200;
+        }
+    };
+    const select = (week) => () => {
+        selectWeek(week);
+        if (setClosed !== undefined) {
+            setClosed(week);
+        }
+    };
+    const selectAndClose = (week) => {
+        selectWeek(week);
+        setOpened(false);
+    };
+    return (<>
+      <div className={pickerClasses}>
+        {isBrowser && (<>
+            <div className="week-picker__top">
+              <div className="week-picker__text">
+                <div className="week-picker__controls">
+                  <button className="week-picker__control" onClick={() => scrollTo(LEFT)} aria-label="Previous">
+                    <svg viewBox="0 0 24 24" width="24" height="24">
+                      <path d="M20 3l-3-3L5 12l12 12 3-3-9-9 9-9z"/>
+                    </svg>
+                  </button>
+                  <button className="week-picker__control" onClick={() => scrollTo(RIGHT)} aria-label="Next">
+                    <svg viewBox="0 0 24 24" width="24" height="24">
+                      <path d="M5 3l3-3 12 12L8 24l-3-3 9-9-9-9z"/>
+                    </svg>
+                  </button>
+                </div>
+                {selected === null && (<div className="week-picker__title" dangerouslySetInnerHTML={{ __html: weekPickerTitle }}/>)}
+                {selected !== undefined && selected !== null && (<div className="week-picker__title" dangerouslySetInnerHTML={{
+                    __html: `${weekPickedSelectedTitle} <span>${weekToLongDate(selected, endWeek, forceSeasonSwitch)}</span>`,
+                }}/>)}
+              </div>
+            </div>
+            <div className="week-picker__bottom">
+              <div ref={ref} className="week-picker__bar">
+                {weeks.map((week) => (<Week key={week} week={week} beginWeek={beginWeek} endWeek={endWeek} selected={selected} onClick={select(week)} forceSeasonSwitch={forceSeasonSwitch}/>))}
+              </div>
+              {warn !== -1 && (<div className="week-picker__warn">
+                  <div className="week-picker__warn-inner">
+                    <div className="week-picker__warn-text">
+                      {weekPickerWarn}
+                    </div>
+                    <div className="week-picker__warn-buttons">
+                      <button className="week-picker__warn-button" onClick={() => setWarn(-1)}>
+                        {weekPickerCancel}
+                      </button>
+                      <button className="week-picker__warn-button" onClick={() => selectWeek(warn, true)}>
+                        {weekPickerOk}
+                      </button>
+                    </div>
+                  </div>
+                </div>)}
+            </div>
+          </>)}
+      </div>
+      {mustFilterSections && isBrowser && showDialog && opened && (<div className="week-picker-popup">
+          <div className="week-picker-popup__inner">
+            <div className="week-picker-popup__content">
+              <WeekPicker lang={lang} start={start} end={end} setClosed={selectAndClose} forceSeasonSwitch={forceSeasonSwitch}/>
+            </div>
+          </div>
+        </div>)}
+    </>);
 };
-export default memo(WeekPicker);
+export default memo(WeekPicker);

package/es/esf/components/week-picker-2/messages.d.ts

@@ -0,0 +1,31 @@
+export default getMessage;
+declare function getMessage(lang: any, messages?: {
+    fr: {
+        "week-picker-title": string;
+        "week-picker-selected-title": string;
+        "week-picker-warn": string;
+        "week-picker-ok": string;
+        "week-picker-cancel": string;
+    };
+    en: {
+        "week-picker-title": string;
+        "week-picker-selected-title": string;
+        "week-picker-warn": string;
+        "week-picker-ok": string;
+        "week-picker-cancel": string;
+    };
+    es: {
+        "week-picker-title": string;
+        "week-picker-selected-title": string;
+        "week-picker-warn": string;
+        "week-picker-ok": string;
+        "week-picker-cancel": string;
+    };
+    nl: {
+        "week-picker-title": string;
+        "week-picker-selected-title": string;
+        "week-picker-warn": string;
+        "week-picker-ok": string;
+        "week-picker-cancel": string;
+    };
+}): any;