ublo-lib 1.34.2 → 1.34.4

package/es/common/components/image-with-loader/image-with-loader.module.css

@@ -8,5 +8,17 @@
   ) !important;
   background-size: 400% 400% !important;
   background-position: 0% 50%;
-  animation: loader-gradient 1.28s ease infinite;
+  animation: sliding-gradient 1.28s ease infinite;
+}
+
+@keyframes sliding-gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
 }

package/es/common/components/week-selector/week-selector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"week-selector.d.ts","sourceRoot":"","sources":["../../../../src/common/components/week-selector/week-selector.tsx"],"names":[],"mappings":"AAUA,KAAK,KAAK,GAAG;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;CAC3C,CAAC;AAKF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,cAAc,EACd,OAAO,GACR,EAAE,KAAK,2CAkNP"}
+{"version":3,"file":"week-selector.d.ts","sourceRoot":"","sources":["../../../../src/common/components/week-selector/week-selector.tsx"],"names":[],"mappings":"AAWA,KAAK,KAAK,GAAG;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,WAAW,GAAG,SAAS,GAAG,MAAM,CAAC;CAC3C,CAAC;AAOF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACnC,WAAW,EACX,cAAc,EACd,OAAO,GACR,EAAE,KAAK,2CAoPP"}

package/es/common/components/week-selector/week-selector.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import classNames from "classnames";
 import { motion } from "framer-motion";
 import getConfig from "next/config";
+import Tooltip from "dt-design-system/es/tooltip";
 import Button from "dt-design-system/es/button";
 import Select from "dt-design-system/es/select";
 import * as Icons from "dt-design-system/es/icons";
@@ -10,12 +11,14 @@ import * as Weeks from "./services/weeks";
 import styles from "./week-selector.module.css";
 const { publicRuntimeConfig } = getConfig();
 const { start, end } = publicRuntimeConfig.season;
+const MINIMIZED_STORAGE_KEY = "week-selector-minimized";
 export default function WeekSelector({ displayDate, setDisplayDate, cmsMode, }) {
     const constraintsRef = React.useRef(null);
     const scrollingAreaRef = React.useRef(null);
     const [yearOffset, setYearOffset] = React.useState(0);
     const [allowDrag, setAllowDrag] = React.useState(false);
     const [dragging, setDragging] = React.useState(false);
+    const [minimized, setMinimized] = React.useState(false);
     const christmasWeek = Weeks.getChristmasWeek(end, yearOffset);
     const christmasWeekYear = React.useRef(christmasWeek.getFullYear());
     React.useEffect(() => {
@@ -31,8 +34,20 @@ export default function WeekSelector({ displayDate, setDisplayDate, cmsMode, })
             }
         }
     }, [cmsMode, displayDate, scrollingAreaRef]);
+    React.useEffect(() => {
+        const minimized = window.localStorage.getItem(MINIMIZED_STORAGE_KEY);
+        setMinimized(minimized === "true");
+    }, []);
     if (cmsMode !== "connected")
         return null;
+    const minimize = () => {
+        setMinimized(true);
+        window.localStorage.setItem(MINIMIZED_STORAGE_KEY, "true");
+    };
+    const maximize = () => {
+        setMinimized(false);
+        window.localStorage.removeItem(MINIMIZED_STORAGE_KEY);
+    };
     const enableDrag = () => {
         setAllowDrag(true);
     };
@@ -76,6 +91,9 @@ export default function WeekSelector({ displayDate, setDisplayDate, cmsMode, })
     const classes = classNames(styles.selector, {
         [styles.dragging]: dragging,
     });
+    if (minimized) {
+        return (_jsx(Tooltip, { content: "Afficher le s\u00E9lecteur de date", contentProps: { side: "right" }, children: _jsx(Button, { className: styles.minimizedButton, onClick: maximize, children: _jsx(Icons.Calendar, {}) }) }));
+    }
     return (_jsx("div", { ref: constraintsRef, className: classes, children: _jsxs(motion.div, { animate: {
                 boxShadow: "var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12))",
             }, dragMomentum: false, drag: allowDrag, dragConstraints: constraintsRef, className: styles.container, whileDrag: {
@@ -86,7 +104,7 @@ export default function WeekSelector({ displayDate, setDisplayDate, cmsMode, })
                                 day: "2-digit",
                                 month: "2-digit",
                                 year: "numeric",
-                            }) }), _jsx(Select, { className: styles.seasonSelect, label: "Saison", options: seasons, value: yearOffset, onValueChange: (value) => setYearOffset(Number(value)), compact: true })] }), _jsxs("div", { className: styles.inner, children: [_jsx("div", { ref: scrollingAreaRef, className: styles.items, children: weeks.map((week) => {
+                            }) }), _jsx(Select, { className: styles.seasonSelect, label: "Saison", options: seasons, value: yearOffset, onValueChange: (value) => setYearOffset(Number(value)), compact: true }), _jsx(Tooltip, { content: "R\u00E9duire", children: _jsx(Button, { variant: "transparent", onClick: minimize, children: _jsx(Icons.MinusSquare, {}) }) })] }), _jsxs("div", { className: styles.inner, children: [_jsx("div", { ref: scrollingAreaRef, className: styles.items, children: weeks.map((week) => {
                                 const prevDate = Weeks.weekToDate(week - 1, end, yearOffset);
                                 const currDate = Weeks.weekToDate(week, end, yearOffset);
                                 const nextDate = Weeks.weekToDate(week + 1, end, yearOffset);

package/es/common/components/week-selector/week-selector.module.css

@@ -1,3 +1,14 @@
+.minimizedButton {
+  --ds-button-padding: 14px;
+  --ds-button-radius: 0 var(--ds-radius-400, 20px) var(--ds-radius-400, 20px) 0;
+  --ds-button-shadow: var(--ds-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12));
+
+  position: fixed;
+  left: 0;
+  bottom: 150px;
+  z-index: 1000;
+}
+
 .selector {
   position: fixed;
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ublo-lib",
-  "version": "1.34.2",
+  "version": "1.34.4",
   "peerDependencies": {
     "dt-design-system": "^3.8.5",
     "leaflet": "^1.9.1",