@geops/rvf-mobility-web-component 0.1.128 → 0.1.129

package/src/OverlayContent/OverlayContent.tsx

@@ -1,88 +0,0 @@
-import { twMerge } from "tailwind-merge";
-
-import ExportMenu from "../ExportMenu";
-import LayerTreeMenu from "../LayerTreeMenu";
-import OverlayDetails from "../OverlayDetails";
-import OverlayHeader from "../OverlayHeader";
-import Search from "../Search";
-import ShareMenu from "../ShareMenu";
-import useI18n from "../utils/hooks/useI18n";
-import useMapContext from "../utils/hooks/useMapContext";
-
-const contentClassName = `relative h-full overflow-x-hidden overflow-y-auto text-base bg-white`;
-
-function OverlayContent({
-  hasDetails,
-  hasLayerTree,
-  hasPrint,
-  hasSearch,
-  hasShare,
-}: {
-  hasDetails: boolean;
-  hasLayerTree: boolean;
-  hasPrint: boolean;
-  hasRealtime: boolean;
-  hasSearch: boolean;
-  hasShare: boolean;
-}) {
-  const {
-    isExportMenuOpen,
-    isLayerTreeOpen,
-    isSearchOpen,
-    isShareMenuOpen,
-    setIsExportMenuOpen,
-    setIsLayerTreeOpen,
-    setIsShareMenuOpen,
-  } = useMapContext();
-  const { t } = useI18n();
-
-  return (
-    <>
-      {hasDetails && <OverlayDetails />}
-      {hasPrint && isExportMenuOpen && (
-        <>
-          <OverlayHeader
-            onClose={() => {
-              setIsExportMenuOpen(false);
-            }}
-            title={t("print_menu_title")}
-          ></OverlayHeader>
-          <ExportMenu
-            className={twMerge(contentClassName, "flex flex-col gap-4 p-4")}
-          />
-        </>
-      )}
-      {hasLayerTree && isLayerTreeOpen && (
-        <>
-          <OverlayHeader
-            onClose={() => {
-              setIsLayerTreeOpen(false);
-            }}
-            title={t("layertree_menu_title")}
-          ></OverlayHeader>
-          <LayerTreeMenu
-            className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto px-4 py-2 text-base *:not-last:border-b"
-            treeItemProps={{ childContainerClassName: "*:not-last:border-b" }}
-          />
-        </>
-      )}
-      {hasShare && isShareMenuOpen && (
-        <>
-          <OverlayHeader
-            onClose={() => {
-              setIsShareMenuOpen(false);
-            }}
-            title={t("share_menu_title")}
-          ></OverlayHeader>
-          <ShareMenu className="h-full overflow-x-hidden overflow-y-auto p-4 text-base" />
-        </>
-      )}
-      {hasSearch && isSearchOpen && (
-        <>
-          <Search className="relative flex h-full flex-col overflow-x-hidden overflow-y-auto p-2 text-base" />
-        </>
-      )}
-    </>
-  );
-}
-export default OverlayContent;

package/src/OverlayContent/index.ts

@@ -1 +0,0 @@
-export { default } from "./OverlayContent";

package/src/OverlayDetails/OverlayDetails.tsx

@@ -1,93 +0,0 @@
-import { memo } from "preact/compat";
-import { useMemo } from "preact/hooks";
-
-import FeatureDetails from "../FeatureDetails";
-import OverlayDetailsFooter from "../OverlayDetailsFooter";
-import OverlayDetailsHeader from "../OverlayDetailsHeader";
-import useMapContext from "../utils/hooks/useMapContext";
-
-/**
- * This component is responsible to display the informations about the selectedFeature prop
- * in the Overlay component.
- */
-function OverlayDetails() {
-  const {
-    featuresInfos,
-    linesIds,
-    linesNetworkPlanLayer,
-    notificationId,
-    notificationsLayer,
-    realtimeLayer,
-    selectedFeature,
-    setFeaturesInfos,
-    setLinesIds,
-    setNotificationId,
-    setStationId,
-    setTrainId,
-    stationId,
-    stationsLayer,
-    trainId,
-  } = useMapContext();
-
-  const featuresInfo = useMemo(() => {
-    return featuresInfos?.find((featureInfo) => {
-      return featureInfo?.features.includes(selectedFeature);
-    });
-  }, [featuresInfos, selectedFeature]);
-
-  const layer = useMemo(() => {
-    if (featuresInfo?.layer) {
-      return featuresInfo.layer;
-    }
-
-    if (trainId) {
-      return realtimeLayer;
-    }
-
-    if (stationId) {
-      return stationsLayer;
-    }
-
-    if (linesIds) {
-      return linesNetworkPlanLayer;
-    }
-
-    if (notificationId) {
-      return notificationsLayer;
-    }
-    return undefined;
-  }, [
-    featuresInfo?.layer,
-    trainId,
-    stationId,
-    linesIds,
-    notificationId,
-    realtimeLayer,
-    stationsLayer,
-    linesNetworkPlanLayer,
-    notificationsLayer,
-  ]);
-
-  return (
-    <>
-      <OverlayDetailsHeader
-        feature={selectedFeature}
-        layer={layer}
-        onClose={() => {
-          setFeaturesInfos(null);
-          setTrainId(null);
-          setStationId(null);
-          setLinesIds(null);
-          setNotificationId(null);
-        }}
-      />
-      <FeatureDetails
-        feature={selectedFeature}
-        featuresInfo={featuresInfo}
-        layer={layer}
-      />
-      <OverlayDetailsFooter feature={selectedFeature} layer={layer} />
-    </>
-  );
-}
-export default memo(OverlayDetails);

package/src/OverlayDetails/index.ts

@@ -1 +0,0 @@
-export { default } from "./OverlayDetails";

package/src/OverlayDetailsFooter/OverlayDetailsFooter.tsx

@@ -1,50 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import ArrowRight from "../icons/ArrowRight";
-import Button from "../ui/Button";
-import useLayerConfig from "../utils/hooks/useLayerConfig";
-
-import type { Feature } from "ol";
-import type BaseLayer from "ol/layer/Base";
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type OverlayDetailsFooterProps = {
-  className?: string;
-  feature?: Feature;
-  layer?: BaseLayer;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function OverlayDetailsFooter({
-  className,
-  feature,
-  layer,
-  ...props
-}: OverlayDetailsFooterProps) {
-  const layerConfig = useLayerConfig(layer?.get("name"));
-
-  if (!layerConfig?.link || layerConfig?.link?.show === false) {
-    return null;
-  }
-
-  let id = feature?.get("id");
-  const situationId = feature?.get("situationId");
-  if (situationId) {
-    id = situationId;
-  }
-  return (
-    <div {...props} className={twMerge("flex flex-row p-4", className)}>
-      <Button
-        href={layerConfig.link.href.replace("{{id}}", id)}
-        target="_blank"
-        theme="primary"
-      >
-        <span>{layerConfig.link.text || "Mehr erfahren"}</span>
-        <ArrowRight />
-      </Button>
-    </div>
-  );
-}
-
-export default memo(OverlayDetailsFooter);

package/src/OverlayDetailsFooter/index.tsx

@@ -1 +0,0 @@
-export { default } from "./OverlayDetailsFooter";

package/src/OverlayDetailsHeader/OverlayDetailsHeader.tsx

@@ -1,30 +0,0 @@
-import { memo } from "preact/compat";
-
-import OverlayHeader from "../OverlayHeader";
-import useI18n from "../utils/hooks/useI18n";
-import useLayerConfig from "../utils/hooks/useLayerConfig";
-
-import type { Feature } from "ol";
-import type BaseLayer from "ol/layer/Base";
-
-import type { OverlayHeaderProps } from "../OverlayHeader/OverlayHeader";
-
-export type OverlayDetailsHeaderProps = {
-  feature?: Feature;
-  layer?: BaseLayer;
-} & OverlayHeaderProps;
-
-function OverlayDetailsHeader({ layer, ...props }: OverlayDetailsHeaderProps) {
-  const { t } = useI18n();
-  const layerConfig = useLayerConfig(layer?.get("name"));
-  if (!layer) {
-    return null;
-  }
-  return (
-    <OverlayHeader
-      title={t(layerConfig?.title || "") || (layerConfig?.title ?? "")}
-      {...props}
-    ></OverlayHeader>
-  );
-}
-export default memo(OverlayDetailsHeader);

package/src/OverlayDetailsHeader/index.ts

@@ -1 +0,0 @@
-export { default } from "./OverlayDetailsHeader";

package/src/OverlayFooter/OverlayFooter.tsx

@@ -1,42 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import Cancel from "../icons/Cancel";
-import IconButton from "../ui/IconButton";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type OverlayFooterProps = {
-  className?: string;
-  onClose?: () => void;
-  title?: React.ReactNode;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function OverlayFooter({
-  children,
-  className,
-  onClose,
-  title,
-  ...props
-}: OverlayFooterProps) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        `flex flex-row items-center justify-between gap-2 border-b p-2 pl-4`,
-        className,
-      )}
-    >
-      {/* We set text-base so the clamp works on overlay container, not main */}
-      {children || <span className={"text-base font-bold"}>{title}</span>}
-      {onClose && (
-        <IconButton className={"!size-[32px] border-none"} onClick={onClose}>
-          <Cancel />
-        </IconButton>
-      )}
-    </div>
-  );
-}
-
-export default memo(OverlayFooter);

package/src/OverlayFooter/index.tsx

@@ -1 +0,0 @@
-export { default } from "./OverlayFooter";

package/src/OverlayHeader/OverlayHeader.tsx

@@ -1,44 +0,0 @@
-import { memo } from "preact/compat";
-import { twMerge } from "tailwind-merge";
-
-import Cancel from "../icons/Cancel";
-import IconButton from "../ui/IconButton";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-export type OverlayHeaderProps = {
-  onClose?: () => void;
-  title?: React.ReactNode;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-function OverlayHeader({
-  children,
-  className,
-  onClose,
-  title,
-  ...props
-}: OverlayHeaderProps) {
-  return (
-    <div
-      {...props}
-      className={twMerge(
-        `flex flex-row items-center justify-between gap-2 border-b p-2 pl-4`,
-        className as string,
-      )}
-    >
-      {/* We set text-base so the clamp works on overlay container, not main */}
-      {children || <span className={"text-base font-bold"}>{title}</span>}
-      {onClose && (
-        <IconButton
-          className={"!size-[32px] border-none shadow-none"}
-          onClick={onClose}
-        >
-          <Cancel />
-        </IconButton>
-      )}
-    </div>
-  );
-}
-
-export default memo(OverlayHeader);

package/src/OverlayHeader/index.tsx

@@ -1 +0,0 @@
-export { default } from "./OverlayHeader";

package/src/Permalink/Permalink.tsx

@@ -1,89 +0,0 @@
-import debounce from "lodash.debounce";
-import { getLayersAsFlatArray } from "mobility-toolbox-js/ol";
-import { unByKey } from "ol/Observable";
-import { memo } from "preact/compat";
-import { useCallback, useEffect } from "preact/hooks";
-
-import { LAYER_PROP_IS_EXPORTING } from "../utils/constants";
-import getPermalinkParameters from "../utils/getPermalinkParameters";
-import useMapContext from "../utils/hooks/useMapContext";
-import usePermalink from "../utils/hooks/usePermalink";
-
-import type { Map } from "ol";
-import type { EventsKey } from "ol/events";
-
-/**
- * This component keeps track of the map's state using URL search parameters: x,y,z or layers visibility.
- * WARNING: This component is not responsible for applying the url parameters, only for updating them.
- *
- */
-const Permalink = ({ replaceState = false }: { replaceState?: boolean }) => {
-  const { map, setPermalinkUrlSearchParams } = useMapContext();
-
-  const permalink = usePermalink();
-
-  // Update the search parameters when the map moves
-  const updatePermalink = useCallback(
-    (currentMap: Map) => {
-      // No update when exporting
-      if (map.get(LAYER_PROP_IS_EXPORTING)) {
-        return;
-      }
-      const currentUrlParams = new URLSearchParams(window.location.search);
-      const urlParams = getPermalinkParameters(currentMap, currentUrlParams);
-      setPermalinkUrlSearchParams(urlParams);
-    },
-    [map, setPermalinkUrlSearchParams],
-  );
-
-  // Replace the window url when permalink changes
-  useEffect(() => {
-    if (
-      replaceState &&
-      permalink &&
-      permalink !== window.location.href &&
-      !permalink.includes(encodeURIComponent("{{")) &&
-      !permalink.includes("{{")
-    ) {
-      window.history.replaceState(null, null, permalink);
-    }
-  }, [map, permalink, replaceState]);
-
-  useEffect(() => {
-    let moveEndKey: EventsKey;
-    let loadEndKey: EventsKey;
-    let changeVisibleKeys: EventsKey[];
-    const updatePermalinkDebounced = debounce(updatePermalink, 1000);
-
-    if (map) {
-      updatePermalinkDebounced(map);
-
-      // Update x,y,z in URL on moveend
-      moveEndKey = map?.on("moveend", (evt) => {
-        updatePermalinkDebounced(evt.map);
-      });
-
-      // Update layers in permalink on change:visible event
-      loadEndKey = map.once("loadend", (evt) => {
-        updatePermalinkDebounced(evt.map);
-        changeVisibleKeys = getLayersAsFlatArray(
-          evt.map.getLayers().getArray(),
-        ).map((layer) => {
-          return layer.on("change:visible", () => {
-            updatePermalinkDebounced(evt.map);
-          });
-        });
-      });
-    }
-
-    return () => {
-      unByKey(moveEndKey);
-      unByKey(loadEndKey);
-      unByKey(changeVisibleKeys);
-    };
-  }, [map, updatePermalink]);
-
-  return null;
-};
-
-export default memo(Permalink);

package/src/Permalink/index.tsx

@@ -1 +0,0 @@
-export { default } from "./Permalink";

package/src/PermalinkInput/PermalinkInput.tsx

@@ -1,33 +0,0 @@
-import { memo } from "preact/compat";
-
-import InputCopy from "../ui/InputCopy";
-import useI18n from "../utils/hooks/useI18n";
-import usePermalink from "../utils/hooks/usePermalink";
-
-import type { HTMLAttributes, PreactDOMAttributes } from "preact";
-
-import type { InputCopyProps } from "../ui/InputCopy/InputCopy";
-
-export type PermalinkInputProps = {
-  inputProps?: InputCopyProps;
-} & HTMLAttributes<HTMLDivElement> &
-  PreactDOMAttributes;
-
-const emptyProps = {}; // avoid re-rendering
-
-function PermalinkInput({
-  inputProps = emptyProps,
-  ...props
-}: PermalinkInputProps) {
-  const { t } = useI18n();
-  const permalink = usePermalink();
-
-  return (
-    <div {...props}>
-      <InputCopy value={permalink} {...inputProps} readonly={true} />
-      <p className="py-2">{t("permalink_input_hint")}</p>
-    </div>
-  );
-}
-
-export default memo(PermalinkInput);

package/src/PermalinkInput/index.tsx

@@ -1 +0,0 @@
-export { default } from "./PermalinkInput";