ublo-lib 1.24.3 → 1.25.0

package/es/lbm/components/lumiplan/pois.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import getConfig from "next/config";
 import Image from "next/image";
@@ -9,177 +8,287 @@ import Tooltip from "dt-design-system/es/tooltip";
 import Popover from "dt-design-system/es/popover";
 import Loader from "dt-design-system/es/loader";
 import * as Icons from "dt-design-system/es/icons";
-// import useWindowSizes from "ublo-lib/es/common/hooks/use-window-sizes";
 import useWindowSizes from "../../../common/hooks/use-window-sizes";
 import * as LiftsIcons from "./icons/lifts";
 import * as TrailIcons from "./icons/trails";
 import LinkIcon from "./icons/link";
 import T, { t } from "./i18n/translations";
 import css from "./pois.module.css";
+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 LIFT_ICONS = {
-    TRAIN: LiftsIcons.Teleski,
-    FUNICULAR: LiftsIcons.Teleski,
-    TRAM: LiftsIcons.Teleski,
-    CABRIOLET_GONDOLA: LiftsIcons.Telecabine,
-    GONDOLA: LiftsIcons.Telecabine,
-    COMBINED_CHAIR_GONDOLA_LIFT: LiftsIcons.Telecabine,
-    DETACHABLE_BUBBLE_CHAIRLIFT: LiftsIcons.Telecabine,
-    DETACHABLE_CHAIRLIFT: LiftsIcons.TelesiegeDebrayable,
-    CHAIRLIFT: LiftsIcons.Telesiege,
-    SURFACE_LIFT: LiftsIcons.Teleski,
-    MAGIC_CARPET: LiftsIcons.TapisRoulant,
-    ROPE_TOW: LiftsIcons.Teleski,
-    DEFAULT: LiftsIcons.Teleski,
+  TRAIN: LiftsIcons.Teleski,
+  FUNICULAR: LiftsIcons.Teleski,
+  TRAM: LiftsIcons.Teleski,
+  CABRIOLET_GONDOLA: LiftsIcons.Telecabine,
+  GONDOLA: LiftsIcons.Telecabine,
+  COMBINED_CHAIR_GONDOLA_LIFT: LiftsIcons.Telecabine,
+  DETACHABLE_BUBBLE_CHAIRLIFT: LiftsIcons.Telecabine,
+  DETACHABLE_CHAIRLIFT: LiftsIcons.TelesiegeDebrayable,
+  CHAIRLIFT: LiftsIcons.Telesiege,
+  SURFACE_LIFT: LiftsIcons.Teleski,
+  MAGIC_CARPET: LiftsIcons.TapisRoulant,
+  ROPE_TOW: LiftsIcons.Teleski,
+  DEFAULT: LiftsIcons.Teleski
 };
 const TRAIL_ICONS = {
-    BIKE_PARK: TrailIcons.VTT,
-    BOARDERCROSS: TrailIcons.BoarderCross,
-    BUMP_TRAIL: TrailIcons.ChampDeBosse,
-    COASTER: TrailIcons.LugeSurRail,
-    CROSS_COUNTRY_MOUNTAIN_BIKING: TrailIcons.BoarderCross,
-    CROSS_COUNTRY_SKIING: TrailIcons.SkiAlpin,
-    DOWNHILL_MOUNTAIN_BIKING: TrailIcons.VTT,
-    DOWNHILL_SKIING: TrailIcons.SkiAlpin,
-    EBIKE: TrailIcons.VTT,
-    ENDURO: TrailIcons.VTT,
-    FREERIDE_AREA_OFF_PIST: TrailIcons.SkiAlpin,
-    FREERIDE_SKI_ITINERARY: TrailIcons.SkiAlpin,
-    FUN_ZONE: TrailIcons.Freeride,
-    GATE: TrailIcons.Freeride,
-    GLADES: TrailIcons.Freeride,
-    ILLUMINATED_TRAIL: TrailIcons.PisteEclairee,
-    MULTI_USE_TRAIL: TrailIcons.Freeride,
-    MTB_ENDURO: TrailIcons.VTT,
-    PATH: TrailIcons.Pieton,
-    PEDESTRIAN: TrailIcons.Pieton,
-    ROUTE_OF_CROSS_COUNTRY: TrailIcons.SkiAlpin,
-    SKI_TOURING: TrailIcons.Freeride,
-    SLEDDING_HILL: TrailIcons.Luge,
-    SNOWPARK: TrailIcons.Snowpark,
-    SNOWPARK_LINE: TrailIcons.Snowpark,
-    SNOWSHOE: TrailIcons.Raquette,
-    SNOWTUBING: TrailIcons.Snowtubing,
-    TERRAIN_PARK: TrailIcons.Snowpark,
-    TERRAIN_PARK_US: TrailIcons.Snowpark,
-    TRAIL_RUNNING: TrailIcons.Pieton,
-    TREETOP_ADVENTURE_PARK: TrailIcons.Accrobranche,
-    TYROLEAN: TrailIcons.Tyrolienne,
-    VIDEO_ZONE: TrailIcons.Freeride,
-    UNDEF: TrailIcons.Freeride,
-    DEFAULT: TrailIcons.Freeride,
+  BIKE_PARK: TrailIcons.VTT,
+  BOARDERCROSS: TrailIcons.BoarderCross,
+  BUMP_TRAIL: TrailIcons.ChampDeBosse,
+  COASTER: TrailIcons.LugeSurRail,
+  CROSS_COUNTRY_MOUNTAIN_BIKING: TrailIcons.BoarderCross,
+  CROSS_COUNTRY_SKIING: TrailIcons.SkiAlpin,
+  DOWNHILL_MOUNTAIN_BIKING: TrailIcons.VTT,
+  DOWNHILL_SKIING: TrailIcons.SkiAlpin,
+  EBIKE: TrailIcons.VTT,
+  ENDURO: TrailIcons.VTT,
+  FREERIDE_AREA_OFF_PIST: TrailIcons.SkiAlpin,
+  FREERIDE_SKI_ITINERARY: TrailIcons.SkiAlpin,
+  FUN_ZONE: TrailIcons.Freeride,
+  GATE: TrailIcons.Freeride,
+  GLADES: TrailIcons.Freeride,
+  ILLUMINATED_TRAIL: TrailIcons.PisteEclairee,
+  MULTI_USE_TRAIL: TrailIcons.Freeride,
+  MTB_ENDURO: TrailIcons.VTT,
+  PATH: TrailIcons.Pieton,
+  PEDESTRIAN: TrailIcons.Pieton,
+  ROUTE_OF_CROSS_COUNTRY: TrailIcons.SkiAlpin,
+  SKI_TOURING: TrailIcons.Freeride,
+  SLEDDING_HILL: TrailIcons.Luge,
+  SNOWPARK: TrailIcons.Snowpark,
+  SNOWPARK_LINE: TrailIcons.Snowpark,
+  SNOWSHOE: TrailIcons.Raquette,
+  SNOWTUBING: TrailIcons.Snowtubing,
+  TERRAIN_PARK: TrailIcons.Snowpark,
+  TERRAIN_PARK_US: TrailIcons.Snowpark,
+  TRAIL_RUNNING: TrailIcons.Pieton,
+  TREETOP_ADVENTURE_PARK: TrailIcons.Accrobranche,
+  TYROLEAN: TrailIcons.Tyrolienne,
+  VIDEO_ZONE: TrailIcons.Freeride,
+  UNDEF: TrailIcons.Freeride,
+  DEFAULT: TrailIcons.Freeride
 };
-const { publicRuntimeConfig } = getConfig();
-const { lumiplanApi } = publicRuntimeConfig;
+const {
+  publicRuntimeConfig
+} = getConfig();
+const {
+  lumiplanApi
+} = publicRuntimeConfig;
 const SPECIAL_TRAILS = {
-    "Labell'glisse": `${lumiplanApi}/pistes-ludiques/labell-glisse.png`,
-    Waouland: `${lumiplanApi}/pistes-ludiques/waouland.png`,
-    Opoualand: `${lumiplanApi}/pistes-ludiques/opoualand.png`,
-    "The Flying Donuts": `${lumiplanApi}/pistes-ludiques/flying-donuts.png`,
-    "Schlitte Mountain": `${lumiplanApi}/pistes-ludiques/schlitte-mountain.png`,
+  "Labell'glisse": `${lumiplanApi}/pistes-ludiques/labell-glisse.png`,
+  Waouland: `${lumiplanApi}/pistes-ludiques/waouland.png`,
+  Opoualand: `${lumiplanApi}/pistes-ludiques/opoualand.png`,
+  "The Flying Donuts": `${lumiplanApi}/pistes-ludiques/flying-donuts.png`,
+  "Schlitte Mountain": `${lumiplanApi}/pistes-ludiques/schlitte-mountain.png`
 };
-const Pois = React.forwardRef(({ pois }, ref) => {
-    const { lang } = useUbloContext();
-    const { width: windowWidth } = useWindowSizes();
-    const isMobile = windowWidth && windowWidth < 768;
-    if (pois === undefined) {
-        return (_jsx("div", { ref: ref, className: css.loader, children: _jsx(Loader, { variant: "overlay" }) }));
-    }
-    if (!pois) {
-        return null;
-    }
-    const flattenedPois = pois.reduce((acc, zone) => {
-        const { name, lifts = [], trails = [], activities = [], interconnections = [], } = zone;
-        const liftsWithSectorName = lifts.map((lift) => ({
-            ...lift,
-            sectorName: name,
-        }));
-        const trailsWithSectorName = trails.map((trail) => ({
-            ...trail,
-            sectorName: name,
-        }));
-        const activitiesWithSectorName = activities.map((activity) => ({
-            ...activity,
-            sectorName: name,
-        }));
-        const interconnectionsWithSectorName = interconnections.map((interconnection) => ({
-            ...interconnection,
-            sectorName: name,
-        }));
-        return [
-            ...interconnectionsWithSectorName,
-            ...acc,
-            ...liftsWithSectorName,
-            ...trailsWithSectorName,
-            ...activitiesWithSectorName,
-        ];
-    }, []);
-    if (!flattenedPois.length) {
-        return null;
-    }
-    return (_jsx("div", { className: css.pois, children: _jsx("div", { className: css.inner, children: pois.map((zone) => {
-                const { name, lifts = [], trails = [], activities = [], interconnections = [], } = zone;
-                const zonePois = [
-                    ...interconnections,
-                    ...lifts,
-                    ...trails,
-                    ...activities,
-                ];
-                if (!zonePois.length) {
-                    return null;
-                }
-                return (_jsxs("div", { className: css.zone, children: [_jsx("div", { className: css.zoneName, children: name }), _jsx("div", { className: css.list, children: zonePois.map(({ id, name, type, liftType, trailType, activityType, trailLevel, messagePoi, openingStatus, snowQuality, groomingStatus, openingTimesReal, openingTimesTh, }) => {
-                                const isLift = type === "SKI_LIFT";
-                                const isInterconnection = type === "LINK";
-                                const translationCode = isLift
-                                    ? `pois.lifts.${liftType}`
-                                    : `pois.trails.${trailType}`;
-                                const hasTrailLevel = trailLevel !== undefined &&
-                                    trailLevel !== "UNDEF" &&
-                                    trailLevel !== "YELLOW";
-                                const trailLevelLabel = hasTrailLevel
-                                    ? `(${t(lang, `pois.trail-levels.${trailLevel}`)})`
-                                    : null;
-                                const specialTrail = Object.keys(SPECIAL_TRAILS).find((key) => name?.toLowerCase()?.includes(key.toLowerCase()));
-                                const message = messagePoi?.data?.find(({ language }) => {
-                                    const _lang = lang === "fr" ? "fr_FR" : "en_US";
-                                    return language === _lang;
-                                });
-                                const hasGroomingStatus = groomingStatus !== undefined &&
-                                    groomingStatus !== "UNDEF";
-                                const hasSnowQuality = snowQuality !== undefined && snowQuality !== "UNDEF";
-                                const classes = classNames(css.poi, {
-                                    [css[trailLevel]]: hasTrailLevel,
-                                });
-                                let status = "CLOSED";
-                                if (openingStatus?.includes("DELAYED")) {
-                                    status = "DELAYED";
-                                }
-                                else if (openingStatus?.includes("STOPPED")) {
-                                    status = "STOPPED";
-                                }
-                                else if (openingStatus?.includes("FORECAST")) {
-                                    status = "FORECAST";
-                                }
-                                else if (openingStatus?.includes("OPEN")) {
-                                    status = "OPEN";
-                                }
-                                const statusCode = `pois.opening-statuses.${status}`;
-                                let Icon = isLift
-                                    ? LIFT_ICONS[liftType] || LIFT_ICONS.DEFAULT
-                                    : TRAIL_ICONS[activityType || trailType] ||
-                                        TRAIL_ICONS.DEFAULT;
-                                if (isInterconnection) {
-                                    Icon = LinkIcon;
-                                }
-                                const openingTimes = openingTimesReal || openingTimesTh;
-                                const isClosed = status === "CLOSED";
-                                const showOpeningTimes = !isClosed && openingTimes && openingTimes?.length > 0;
-                                return (_jsxs("div", { className: classes, children: [_jsx("div", { className: css.poiIcon, children: specialTrail ? (_jsx(Image, { src: SPECIAL_TRAILS[specialTrail], width: 50, height: 50, alt: specialTrail })) : (_jsx(Icon, {})) }), _jsxs("div", { className: css.poiInfo, children: [_jsxs("div", { className: css.poiHeader, children: [_jsx("span", { className: css.poiName, children: name }), _jsxs("span", { className: css.poiStatus, children: [_jsx(T, { id: statusCode }), showOpeningTimes && (_jsxs("div", { className: css.poiOpeningTimes, children: [openingTimes[0].beginTime, " -", " ", openingTimes[0].endTime] }))] })] }), _jsxs("div", { className: css.poiDetail, children: [isInterconnection && (_jsx("div", { className: css.poiDetailHeader, children: _jsx("b", { children: _jsx(T, { id: "interconnection" }) }) })), trailType !== "FUN_ZONE" &&
-                                                            activityType !== "FUN_ZONE" && (_jsxs("div", { className: css.poiDetailKind, children: [_jsx(T, { id: translationCode }), " ", trailLevelLabel] })), !isLift && (_jsxs("div", { className: css.poiTrailDetail, children: [hasGroomingStatus && (_jsx("div", { className: css.poiTrailDetailItem, children: _jsx(T, { id: `snow.grooming.states.${groomingStatus}` }) })), hasSnowQuality && (_jsxs("div", { className: css.poiTrailDetailItem, children: [_jsx(T, { id: "snow.snow-quality.title" }), " :", " ", _jsx(T, { id: `snow.snow-quality.states.${snowQuality}` })] }))] }))] })] }), _jsx("div", { className: css.poiMessage, children: message?.data && (_jsx(_Fragment, { children: isMobile ? (
-                                                // @ts-ignore
-                                                _jsx(Popover, { innerClassName: css.poiPopover, trigger: _jsx(Button, { variant: "transparent", children: _jsx(Icons.Info, {}) }), children: message.data })) : (_jsx(Tooltip, { content: message.data, children: _jsx(Button, { variant: "transparent", children: _jsx(Icons.Info, {}) }) })) })) })] }, id));
-                            }) })] }, name));
-            }) }) }));
+const Pois = React.forwardRef(({
+  pois
+}, ref) => {
+  const {
+    lang
+  } = useUbloContext();
+  const {
+    width: windowWidth
+  } = useWindowSizes();
+  const isMobile = windowWidth && windowWidth < 768;
+  if (pois === undefined) {
+    return _jsx("div", {
+      ref: ref,
+      className: css.loader,
+      children: _jsx(Loader, {
+        variant: "overlay"
+      })
+    });
+  }
+  if (!pois) {
+    return null;
+  }
+  const flattenedPois = pois.reduce((acc, zone) => {
+    const {
+      name,
+      lifts = [],
+      trails = [],
+      activities = [],
+      interconnections = []
+    } = zone;
+    const liftsWithSectorName = lifts.map(lift => ({
+      ...lift,
+      sectorName: name
+    }));
+    const trailsWithSectorName = trails.map(trail => ({
+      ...trail,
+      sectorName: name
+    }));
+    const activitiesWithSectorName = activities.map(activity => ({
+      ...activity,
+      sectorName: name
+    }));
+    const interconnectionsWithSectorName = interconnections.map(interconnection => ({
+      ...interconnection,
+      sectorName: name
+    }));
+    return [...interconnectionsWithSectorName, ...acc, ...liftsWithSectorName, ...trailsWithSectorName, ...activitiesWithSectorName];
+  }, []);
+  if (!flattenedPois.length) {
+    return null;
+  }
+  return _jsx("div", {
+    className: css.pois,
+    children: _jsx("div", {
+      className: css.inner,
+      children: pois.map(zone => {
+        const {
+          name,
+          lifts = [],
+          trails = [],
+          activities = [],
+          interconnections = []
+        } = zone;
+        const zonePois = [...interconnections, ...lifts, ...trails, ...activities];
+        if (!zonePois.length) {
+          return null;
+        }
+        return _jsxs("div", {
+          className: css.zone,
+          children: [_jsx("div", {
+            className: css.zoneName,
+            children: name
+          }), _jsx("div", {
+            className: css.list,
+            children: zonePois.map(({
+              id,
+              name,
+              type,
+              liftType,
+              trailType,
+              activityType,
+              trailLevel,
+              messagePoi,
+              openingStatus,
+              snowQuality,
+              groomingStatus,
+              openingTimesReal,
+              openingTimesTh
+            }) => {
+              const isLift = type === "SKI_LIFT";
+              const isInterconnection = type === "LINK";
+              const translationCode = isLift ? `pois.lifts.${liftType}` : `pois.trails.${trailType}`;
+              const hasTrailLevel = trailLevel !== undefined && trailLevel !== "UNDEF" && trailLevel !== "YELLOW";
+              const trailLevelLabel = hasTrailLevel ? `(${t(lang, `pois.trail-levels.${trailLevel}`)})` : null;
+              const specialTrail = Object.keys(SPECIAL_TRAILS).find(key => name?.toLowerCase()?.includes(key.toLowerCase()));
+              const message = messagePoi?.data?.find(({
+                language
+              }) => {
+                const _lang = lang === "fr" ? "fr_FR" : "en_US";
+                return language === _lang;
+              });
+              const hasGroomingStatus = groomingStatus !== undefined && groomingStatus !== "UNDEF";
+              const hasSnowQuality = snowQuality !== undefined && snowQuality !== "UNDEF";
+              const classes = classNames(css.poi, {
+                [css[trailLevel]]: hasTrailLevel
+              });
+              let status = "CLOSED";
+              if (openingStatus?.includes("DELAYED")) {
+                status = "DELAYED";
+              } else if (openingStatus?.includes("STOPPED")) {
+                status = "STOPPED";
+              } else if (openingStatus?.includes("FORECAST")) {
+                status = "FORECAST";
+              } else if (openingStatus?.includes("OPEN")) {
+                status = "OPEN";
+              }
+              const statusCode = `pois.opening-statuses.${status}`;
+              let Icon = isLift ? LIFT_ICONS[liftType] || LIFT_ICONS.DEFAULT : TRAIL_ICONS[activityType || trailType] || TRAIL_ICONS.DEFAULT;
+              if (isInterconnection) {
+                Icon = LinkIcon;
+              }
+              const openingTimes = openingTimesReal || openingTimesTh;
+              const isClosed = status === "CLOSED";
+              const showOpeningTimes = !isClosed && openingTimes && openingTimes?.length > 0;
+              return _jsxs("div", {
+                className: classes,
+                children: [_jsx("div", {
+                  className: css.poiIcon,
+                  children: specialTrail ? _jsx(Image, {
+                    src: SPECIAL_TRAILS[specialTrail],
+                    width: 50,
+                    height: 50,
+                    alt: specialTrail
+                  }) : _jsx(Icon, {})
+                }), _jsxs("div", {
+                  className: css.poiInfo,
+                  children: [_jsxs("div", {
+                    className: css.poiHeader,
+                    children: [_jsx("span", {
+                      className: css.poiName,
+                      children: name
+                    }), _jsxs("span", {
+                      className: css.poiStatus,
+                      children: [_jsx(T, {
+                        id: statusCode
+                      }), showOpeningTimes && _jsxs("div", {
+                        className: css.poiOpeningTimes,
+                        children: [openingTimes[0].beginTime, " -", " ", openingTimes[0].endTime]
+                      })]
+                    })]
+                  }), _jsxs("div", {
+                    className: css.poiDetail,
+                    children: [isInterconnection && _jsx("div", {
+                      className: css.poiDetailHeader,
+                      children: _jsx("b", {
+                        children: _jsx(T, {
+                          id: "interconnection"
+                        })
+                      })
+                    }), trailType !== "FUN_ZONE" && activityType !== "FUN_ZONE" && _jsxs("div", {
+                      className: css.poiDetailKind,
+                      children: [_jsx(T, {
+                        id: translationCode
+                      }), " ", trailLevelLabel]
+                    }), !isLift && _jsxs("div", {
+                      className: css.poiTrailDetail,
+                      children: [hasGroomingStatus && _jsx("div", {
+                        className: css.poiTrailDetailItem,
+                        children: _jsx(T, {
+                          id: `snow.grooming.states.${groomingStatus}`
+                        })
+                      }), hasSnowQuality && _jsxs("div", {
+                        className: css.poiTrailDetailItem,
+                        children: [_jsx(T, {
+                          id: "snow.snow-quality.title"
+                        }), " :", " ", _jsx(T, {
+                          id: `snow.snow-quality.states.${snowQuality}`
+                        })]
+                      })]
+                    })]
+                  })]
+                }), _jsx("div", {
+                  className: css.poiMessage,
+                  children: message?.data && _jsx(_Fragment, {
+                    children: isMobile ? _jsx(Popover, {
+                      innerClassName: css.poiPopover,
+                      trigger: _jsx(Button, {
+                        variant: "transparent",
+                        children: _jsx(Icons.Info, {})
+                      }),
+                      children: message.data
+                    }) : _jsx(Tooltip, {
+                      content: message.data,
+                      children: _jsx(Button, {
+                        variant: "transparent",
+                        children: _jsx(Icons.Info, {})
+                      })
+                    })
+                  })
+                })]
+              }, id);
+            })
+          })]
+        }, name);
+      })
+    })
+  });
 });
 Pois.displayName = "Pois";
-export default Pois;
+export default Pois;

package/es/lbm/components/lumiplan/resort-selector.js

@@ -1,42 +1,64 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import classNames from "classnames";
-// import useWindowSizes from "ublo-lib/es/common/hooks/use-window-sizes";
 import useWindowSizes from "../../../common/hooks/use-window-sizes";
 import Button from "dt-design-system/es/button";
 import css from "./resort-selector.module.css";
-export default function ResortSelector({ resorts, currentResortId, setCurrentResortId, }) {
-    const [showLeftShadow, setShowLeftShadow] = React.useState(false);
-    const [showRightShadow, setShowRightShadow] = React.useState(false);
-    const containerRef = React.useRef(null);
-    const scrollerRef = React.useRef(null);
-    const { width, height } = useWindowSizes();
-    const refreshShadows = React.useCallback(() => {
-        const container = containerRef.current;
-        const scroller = scrollerRef.current;
-        if (container && scroller) {
-            setShowLeftShadow(scroller.scrollLeft > 50);
-            const maxScroll = Math.round(scroller.scrollWidth) - Math.round(scroller.clientWidth);
-            setShowRightShadow(scroller.scrollLeft < maxScroll - 50);
-        }
-    }, []);
-    React.useEffect(() => {
-        refreshShadows();
-    }, [refreshShadows, width, height]);
-    if (!resorts || resorts.length < 2) {
-        return null;
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ResortSelector({
+  resorts,
+  currentResortId,
+  setCurrentResortId
+}) {
+  const [showLeftShadow, setShowLeftShadow] = React.useState(false);
+  const [showRightShadow, setShowRightShadow] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const scrollerRef = React.useRef(null);
+  const {
+    width,
+    height
+  } = useWindowSizes();
+  const refreshShadows = React.useCallback(() => {
+    const container = containerRef.current;
+    const scroller = scrollerRef.current;
+    if (container && scroller) {
+      setShowLeftShadow(scroller.scrollLeft > 50);
+      const maxScroll = Math.round(scroller.scrollWidth) - Math.round(scroller.clientWidth);
+      setShowRightShadow(scroller.scrollLeft < maxScroll - 50);
     }
-    const classes = classNames(css.selector, {
-        [css.leftShadow]: showLeftShadow,
-        [css.rightShadow]: showRightShadow,
-    });
-    return (_jsx("div", { ref: containerRef, className: classes, children: _jsx("div", { ref: scrollerRef, onScroll: refreshShadows, className: css.content, children: resorts.map(({ id, label }) => {
-                const classes = classNames(css.button, {
-                    [css.selected]: id === currentResortId,
-                });
-                const updateCurrentResort = () => {
-                    setCurrentResortId(id);
-                };
-                return (_jsx(Button, { className: classes, onClick: updateCurrentResort, children: label }, id));
-            }) }) }));
-}
+  }, []);
+  React.useEffect(() => {
+    refreshShadows();
+  }, [refreshShadows, width, height]);
+  if (!resorts || resorts.length < 2) {
+    return null;
+  }
+  const classes = classNames(css.selector, {
+    [css.leftShadow]: showLeftShadow,
+    [css.rightShadow]: showRightShadow
+  });
+  return _jsx("div", {
+    ref: containerRef,
+    className: classes,
+    children: _jsx("div", {
+      ref: scrollerRef,
+      onScroll: refreshShadows,
+      className: css.content,
+      children: resorts.map(({
+        id,
+        label
+      }) => {
+        const classes = classNames(css.button, {
+          [css.selected]: id === currentResortId
+        });
+        const updateCurrentResort = () => {
+          setCurrentResortId(id);
+        };
+        return _jsx(Button, {
+          className: classes,
+          onClick: updateCurrentResort,
+          children: label
+        }, id);
+      })
+    })
+  });
+}