@geops/rvf-mobility-web-component 0.1.86 → 0.1.89

package/src/ui/Input/Input.tsx

@@ -1,17 +1,24 @@
+import { forwardRef } from "preact/compat";
 import { twMerge } from "tailwind-merge";
 
 import type { InputHTMLAttributes, PreactDOMAttributes } from "preact";
 
-export type InputProps = { className?: string } & InputHTMLAttributes &
+export type InputProps = {
+  className?: string;
+  focusOnFirstRender?: boolean;
+} & InputHTMLAttributes &
   PreactDOMAttributes;
 
-function Input({ className, ...props }: InputProps) {
-  return (
-    <input
-      {...props}
-      className={twMerge("p-2 text-sm read-only:text-gray-400", className)}
-    />
-  );
-}
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        {...props}
+        className={twMerge("p-2 text-sm read-only:text-gray-400", className)}
+      />
+    );
+  },
+);
 
 export default Input;

package/src/ui/InputSearch/InputSearch.tsx

@@ -54,7 +54,7 @@ function InputSearch({
     <>
       <div
         className={twMerge(
-          "flex h-16 items-center gap-4 rounded-md bg-white p-4 pt-3.5 shadow",
+          "flex h-12 items-center gap-1 rounded-md bg-white p-3 shadow",
           className,
           withResultsClassName,
         )}
@@ -70,7 +70,7 @@ function InputSearch({
         </div>
         <div
           className={twMerge(
-            "@container/inputsearch flex grow items-center gap-2 border-b-2 border-solid",
+            "@container/inputsearch relative flex grow items-center gap-2 border-b-2 border-solid",
             inputContainerClassName,
           )}
         >
@@ -79,6 +79,7 @@ function InputSearch({
             className={twMerge(
               "h-8 w-1 grow overflow-hidden text-ellipsis placeholder:text-zinc-400",
               inputClassName,
+              inputProps?.value ? "pr-4" : "",
             )}
             type="text"
             {...(inputProps || {})}
@@ -86,7 +87,7 @@ function InputSearch({
           {!!inputProps.value && (
             <IconButton
               className={twMerge(
-                "flex size-4 items-center rounded-none border-none bg-transparent p-0 shadow-none",
+                "absolute right-0 flex h-full w-6 items-center rounded-none border-none bg-transparent p-0 px-1 shadow-none",
                 cancelButtonClassName,
               )}
               title={t("search_input_cancel")}

package/src/utils/hooks/useI18n.tsx

@@ -1,9 +1,10 @@
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
 
-import type { Rosetta } from "rosetta";
-
-export type I18NContextType = Rosetta<Record<string, string>>;
+export interface I18NContextType {
+  locale(lang?: string): string;
+  t: (id: string, templateValues?: Record<string, string>) => string;
+}
 
 export const I18nContext = createContext<I18NContextType>({
   t: (id: string, templateValues?: Record<string, string>) => {

package/src/utils/hooks/useMocoSituation.tsx

@@ -9,7 +9,7 @@ import type {
 } from "mobility-toolbox-js/types";
 
 function useMocoSituation(situationId?: string, params?: MocoExportParameters) {
-  const { lang, notificationsLayer } = useMapContext();
+  const { lang, notificationsLayer, previewNotifications } = useMapContext();
   const [situation, setSituation] = useState<SituationType>();
 
   const api: MocoAPI | undefined = useMemo(() => {
@@ -17,6 +17,14 @@ function useMocoSituation(situationId?: string, params?: MocoExportParameters) {
   }, [notificationsLayer]);
 
   useEffect(() => {
+    const previewSituation = previewNotifications?.find((item) => {
+      return item.id === situationId;
+    });
+    if (previewSituation) {
+      setSituation(previewSituation);
+      return;
+    }
+
     const abortController = new AbortController();
     api
       ?.exportById(situationId, {
@@ -46,7 +54,7 @@ function useMocoSituation(situationId?: string, params?: MocoExportParameters) {
     return () => {
       abortController.abort();
     };
-  }, [api, situationId, params, lang]);
+  }, [api, situationId, params, lang, previewNotifications]);
 
   return situation;
 }

package/src/utils/translations.ts

@@ -35,7 +35,7 @@ const translations: Translations = {
     [LAYERS_NAMES.notifications]: "Meldungen",
     [LAYERS_NAMES.pois]: "POIs",
     [LAYERS_NAMES.realtime]: "Echtzeit",
-    [LAYERS_NAMES.sharedMobility]: "Shared Mobility",
+    [LAYERS_NAMES.sharedMobility]: "Shared-Angebote",
     [LAYERS_NAMES.stations]: "Stationen",
     [LAYERS_NAMES.tarifzonen]: "Tarifzonen",
     [LAYERS_NAMES.verkaufsstellen]: "Verkaufsstellen",
@@ -62,7 +62,7 @@ const translations: Translations = {
     share_email_send: "E-Mail senden",
     share_image_save: "Bild speichern",
     share_menu_title: "Teilen",
-    stops_search_placeholder: "Haltestellen suchen",
+    stops_search_placeholder: "Haltestelle suchen",
     zoomin: "Hineinzoomen",
     zoomout: "Herauszoomen",
   },
@@ -97,7 +97,7 @@ const translations: Translations = {
     [LAYERS_NAMES.notifications]: "Notifications",
     [LAYERS_NAMES.pois]: "POIs",
     [LAYERS_NAMES.realtime]: "Realtime",
-    [LAYERS_NAMES.sharedMobility]: "Shared Mobility",
+    [LAYERS_NAMES.sharedMobility]: "Mobility offers",
     [LAYERS_NAMES.stations]: "Stations",
     [LAYERS_NAMES.tarifzonen]: "Tariff Zones",
     [LAYERS_NAMES.verkaufsstellen]: "Sales Outlets",
@@ -155,7 +155,7 @@ const translations: Translations = {
     [LAYERS_NAMES.notifications]: "Notifications",
     [LAYERS_NAMES.pois]: "POIs",
     [LAYERS_NAMES.realtime]: "Temps réel",
-    [LAYERS_NAMES.sharedMobility]: "Mobilité partagée",
+    [LAYERS_NAMES.sharedMobility]: "Offres de mobilité",
     [LAYERS_NAMES.stations]: "Stations",
     [LAYERS_NAMES.tarifzonen]: "Zones tarifaires",
     [LAYERS_NAMES.verkaufsstellen]: "Points de vente",
@@ -213,7 +213,7 @@ const translations: Translations = {
     [LAYERS_NAMES.notifications]: "Notifiche",
     [LAYERS_NAMES.pois]: "POI",
     [LAYERS_NAMES.realtime]: "In tempo reale",
-    [LAYERS_NAMES.sharedMobility]: "Mobilità condivisa",
+    [LAYERS_NAMES.sharedMobility]: "Offerte Mobility",
     [LAYERS_NAMES.stations]: "Stazioni",
     [LAYERS_NAMES.tarifzonen]: "Zone tariffarie",
     [LAYERS_NAMES.verkaufsstellen]: "Punti vendita",

package/src/utils/i18n.ts

@@ -1,7 +0,0 @@
-import rosetta from "rosetta";
-
-import translations from "./translations";
-
-const i18n = rosetta(translations);
-
-export default i18n;