@geops/rvf-mobility-web-component 0.1.83 → 0.1.85

package/src/SearchLinesResults/SearchLinesResults.tsx

@@ -0,0 +1,106 @@
+import { cloneElement, toChildArray } from "preact";
+import { memo } from "preact/compat";
+import { useCallback, useContext, useMemo } from "preact/hooks";
+
+import { SearchContext } from "../Search/SearchBase";
+import SearchResult from "../SearchResult";
+import SearchResults from "../SearchResults";
+import SearchResultsHeader from "../SearchResultsHeader";
+import useI18n from "../utils/hooks/useI18n";
+import useSearchLines from "../utils/hooks/useSearchLines";
+
+import type { ReactElement } from "preact/compat";
+
+import type {
+  SearchResultsChildProps,
+  SearchResultsProps,
+} from "../SearchResults/SearchResults";
+import type { LnpLineInfo } from "../utils/hooks/useLnp";
+
+const defaultSort = (a: LnpLineInfo, b: LnpLineInfo) => {
+  if (a.long_name === b.long_name) {
+    return a.long_name < b.long_name ? 1 : -1;
+  }
+  return a.short_name < b.short_name ? 1 : -1;
+};
+
+function SearchLinesResults({
+  children,
+  filter,
+  resultClassName,
+  resultsClassName,
+  resultsContainerClassName,
+  sort = defaultSort,
+}: SearchResultsProps<LnpLineInfo>) {
+  const { open, query, setOpen, setSelectedQuery } = useContext(SearchContext);
+  const searchResponse = useSearchLines(query);
+
+  const { t } = useI18n();
+
+  const onSelectResult = useCallback(
+    (item: LnpLineInfo) => {
+      setSelectedQuery(item.short_name || item.long_name);
+      setOpen(false);
+    },
+    [setOpen, setSelectedQuery],
+  );
+
+  const results = useMemo(() => {
+    let rs = [...(searchResponse?.results || [])];
+
+    if (filter) {
+      rs = rs.filter(filter);
+    }
+
+    if (sort) {
+      rs = rs.sort(sort);
+    }
+    return rs;
+  }, [searchResponse, filter, sort]);
+
+  const searchResponseFiltered = useMemo(() => {
+    return {
+      ...searchResponse,
+      results,
+    };
+  }, [results, searchResponse]);
+
+  const showResults = useMemo(() => {
+    return open && !!results?.length;
+  }, [open, results]);
+
+  if (!showResults) {
+    return null;
+  }
+
+  return (
+    <>
+      <SearchResultsHeader>{t("search_lines_results")}</SearchResultsHeader>
+      <SearchResults
+        className={resultsContainerClassName}
+        resultsClassName={resultsClassName}
+        searchResponse={searchResponseFiltered}
+      >
+        {results.map((item: LnpLineInfo) => {
+          return (
+            <SearchResult className={resultClassName} key={item.short_name}>
+              {toChildArray(children).map(
+                (child: ReactElement<SearchResultsChildProps<LnpLineInfo>>) => {
+                  const onSelectItem = (itemm: LnpLineInfo, evt: Event) => {
+                    onSelectResult(itemm);
+                    child.props?.onSelectItem?.(itemm, evt);
+                  };
+                  return cloneElement(child, {
+                    item: item,
+                    onSelectItem,
+                  });
+                },
+              )}
+            </SearchResult>
+          );
+        })}
+      </SearchResults>
+    </>
+  );
+}
+export default memo(SearchLinesResults);

package/src/SearchLinesResults/index.tsx

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

package/src/SearchLnpStopsResult/SearchLnpStopsResult.tsx

@@ -0,0 +1,42 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { ButtonHTMLAttributes, PreactDOMAttributes } from "preact";
+
+import type { LnpStopInfo } from "../utils/hooks/useLnp";
+
+export type SearchLinesResultProps = {
+  className?: string;
+  item?: LnpStopInfo;
+  onSelectItem?: (line: LnpStopInfo) => void;
+} & ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function SearchLnpStopsResult({
+  className,
+  item,
+  onSelectItem,
+  ...props
+}: SearchLinesResultProps) {
+  const { linesNetworkPlanLayer } = useMapContext();
+  return (
+    <button
+      {...props}
+      className={twMerge(
+        "flex w-full cursor-pointer items-center gap-3 text-left",
+        className,
+      )}
+      onClick={() => {
+        linesNetworkPlanLayer?.setVisible(true);
+        onSelectItem?.(item);
+      }}
+    >
+      <div className="size-6"></div>
+      <div className="grow">{item?.long_name || item?.short_name}</div>
+    </button>
+  );
+}
+
+export default memo(SearchLnpStopsResult);

package/src/SearchLnpStopsResult/index.tsx

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

package/src/SearchLnpStopsResults/SearchLnpStopsResults.tsx

@@ -0,0 +1,106 @@
+import { cloneElement, toChildArray } from "preact";
+import { memo } from "preact/compat";
+import { useCallback, useContext, useMemo } from "preact/hooks";
+
+import { SearchContext } from "../Search/SearchBase";
+import SearchResult from "../SearchResult";
+import SearchResults from "../SearchResults";
+import SearchResultsHeader from "../SearchResultsHeader";
+import useI18n from "../utils/hooks/useI18n";
+import useSearchLnpStops from "../utils/hooks/useSearchLnpStops";
+
+import type { ReactElement } from "preact/compat";
+
+import type {
+  SearchResultsChildProps,
+  SearchResultsProps,
+} from "../SearchResults/SearchResults";
+import type { LnpStopInfo } from "../utils/hooks/useLnp";
+
+const defaultSort = (a: LnpStopInfo, b: LnpStopInfo) => {
+  if (a.long_name === b.long_name) {
+    return a.long_name < b.long_name ? 1 : -1;
+  }
+  return a.short_name < b.short_name ? 1 : -1;
+};
+
+function SearchLnpStopsResults({
+  children,
+  filter,
+  resultClassName,
+  resultsClassName,
+  resultsContainerClassName,
+  sort = defaultSort,
+}: SearchResultsProps<LnpStopInfo>) {
+  const { open, query, setOpen, setSelectedQuery } = useContext(SearchContext);
+  const searchResponse = useSearchLnpStops(query);
+
+  const { t } = useI18n();
+
+  const onSelectResult = useCallback(
+    (item: LnpStopInfo) => {
+      setSelectedQuery(item.short_name || item.long_name);
+      setOpen(false);
+    },
+    [setOpen, setSelectedQuery],
+  );
+
+  const results = useMemo(() => {
+    let rs = [...(searchResponse?.results || [])];
+
+    if (filter) {
+      rs = rs.filter(filter);
+    }
+
+    if (sort) {
+      rs = rs.sort(sort);
+    }
+    return rs;
+  }, [searchResponse, filter, sort]);
+
+  const searchResponseFiltered = useMemo(() => {
+    return {
+      ...searchResponse,
+      results,
+    };
+  }, [results, searchResponse]);
+
+  const showResults = useMemo(() => {
+    return open && !!results?.length;
+  }, [open, results]);
+
+  if (!showResults) {
+    return null;
+  }
+
+  return (
+    <>
+      <SearchResultsHeader>{t("search_stops_results")}</SearchResultsHeader>
+      <SearchResults
+        className={resultsContainerClassName}
+        resultsClassName={resultsClassName}
+        searchResponse={searchResponseFiltered}
+      >
+        {results.map((item: LnpStopInfo) => {
+          return (
+            <SearchResult className={resultClassName} key={item.short_name}>
+              {toChildArray(children).map(
+                (child: ReactElement<SearchResultsChildProps<LnpStopInfo>>) => {
+                  const onSelectItem = (itemm: LnpStopInfo, evt: Event) => {
+                    onSelectResult(itemm);
+                    child.props?.onSelectItem?.(itemm, evt);
+                  };
+                  return cloneElement(child, {
+                    item: item,
+                    onSelectItem,
+                  });
+                },
+              )}
+            </SearchResult>
+          );
+        })}
+      </SearchResults>
+    </>
+  );
+}
+export default memo(SearchLnpStopsResults);

package/src/SearchLnpStopsResults/index.tsx

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

package/src/SearchResult/SearchResult.tsx

@@ -0,0 +1,25 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type SearchResultProps = {
+  className?: string;
+} & HTMLAttributes<HTMLLIElement> &
+  PreactDOMAttributes;
+
+function SearchResult({ children, className, ...props }: SearchResultProps) {
+  return (
+    <li
+      {...props}
+      className={twMerge(
+        "border-b border-dashed border-slate-300 p-3 last:border-0",
+        className,
+      )}
+    >
+      {children}
+    </li>
+  );
+}
+
+export default memo(SearchResult);

package/src/SearchResult/index.tsx

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

package/src/SearchResults/SearchResults.tsx

@@ -0,0 +1,81 @@
+import { memo, useContext, useEffect, useId } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import { SearchContext } from "../Search/SearchBase";
+import useI18n from "../utils/hooks/useI18n";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+import type { SearchResponse } from "../utils/hooks/useSearchStops";
+
+export type SearchResultsProps<T> = {
+  className?: string;
+  filter?: (item: T) => boolean;
+  resultClassName?: string;
+  resultsClassName?: string;
+  resultsContainerClassName?: string;
+  searchResponse?: SearchResponse<T>;
+  sort?: (a: T, b: T) => number;
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+export interface SearchResultsChildProps<T> {
+  item: T;
+  onSelectItem?: (item: T, evt: Event) => void;
+}
+
+/**
+ * Results list of search.
+ */
+function SearchResults<T>({
+  children,
+  className,
+  resultsClassName,
+  searchResponse,
+  ...props
+}: SearchResultsProps<T>) {
+  const { t } = useI18n();
+  const id = useId();
+  const { setResults } = useContext(SearchContext);
+
+  // Notify parent about results change
+  useEffect(() => {
+    if (!searchResponse.isLoading) {
+      setResults(id, searchResponse?.results || []);
+    }
+    return () => {
+      setResults(id, []);
+    };
+  }, [searchResponse, id, setResults]);
+
+  if (!(searchResponse?.results?.length >= 0)) {
+    return null;
+  }
+
+  return (
+    <div className={twMerge("flex grow overflow-hidden", className)} {...props}>
+      {searchResponse.results.length === 0 && (
+        <div
+          className={twMerge(
+            "flex grow gap-3 border border-solid p-3 pt-2 text-zinc-400",
+            resultsClassName,
+          )}
+          style={{ border: 1 }}
+        >
+          <div className="size-6"></div>
+          <div>{t("search_no_results")}</div>
+        </div>
+      )}
+      {searchResponse.results.length > 0 && (
+        <ul
+          className={twMerge("grow overflow-y-auto", resultsClassName)}
+          style={{ border: 1 }} // without this th ul is displayed 1 px on the right
+        >
+          {children}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export default memo(SearchResults);

package/src/SearchResults/index.tsx

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

package/src/SearchResultsHeader/SearchResultsHeader.tsx

@@ -0,0 +1,36 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type SearchResultsHeaderProps = {
+  className?: string;
+  resultsClassName?: string;
+} & HTMLAttributes<HTMLDivElement> &
+  PreactDOMAttributes;
+
+/**
+ * Header of list of search results.
+ */
+function SearchResultsHeader({
+  children,
+  className,
+  ...props
+}: SearchResultsHeaderProps) {
+  if (!children) {
+    return null;
+  }
+  return (
+    <div
+      {...props}
+      className={twMerge(
+        "border-x bg-zinc-100 px-2 py-1 text-xs font-semibold",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default memo(SearchResultsHeader);

package/src/SearchResultsHeader/index.tsx

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

package/src/SearchStopsResult/SearchStopsResult.tsx

@@ -0,0 +1,43 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { ButtonHTMLAttributes, PreactDOMAttributes } from "preact";
+
+import type { StopsFeature } from "../utils/hooks/useSearchStops";
+
+export type SearchStopsResultProps = {
+  className?: string;
+  item?: StopsFeature;
+  onSelectItem?: (stop: StopsFeature, evt: MouseEvent) => void;
+} & ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function SearchStopsResult({
+  className,
+  item,
+  onSelectItem,
+  ...props
+}: SearchStopsResultProps) {
+  const { stationsLayer } = useMapContext();
+
+  return (
+    <button
+      className={twMerge(
+        "flex w-full cursor-pointer items-center gap-3 text-left",
+        className,
+      )}
+      onClick={(evt) => {
+        stationsLayer?.setVisible(true);
+        onSelectItem?.(item, evt);
+      }}
+      {...props}
+    >
+      <div className="size-6"></div>
+      <div className="grow">{item?.properties.name}</div>
+    </button>
+  );
+}
+
+export default memo(SearchStopsResult);

package/src/SearchStopsResult/index.tsx

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

package/src/SearchStopsResults/SearchStopsResults.tsx

@@ -0,0 +1,101 @@
+import { cloneElement, toChildArray } from "preact";
+import { memo } from "preact/compat";
+import { useCallback, useContext, useMemo } from "preact/hooks";
+
+import { SearchContext } from "../Search/SearchBase";
+import SearchResult from "../SearchResult";
+import SearchResults from "../SearchResults";
+import SearchResultsHeader from "../SearchResultsHeader";
+import useI18n from "../utils/hooks/useI18n";
+import useSearchStops from "../utils/hooks/useSearchStops";
+
+import type { ReactElement } from "preact/compat";
+
+import type {
+  SearchResultsChildProps,
+  SearchResultsProps,
+} from "../SearchResults/SearchResults";
+import type { StopsFeature } from "../utils/hooks/useSearchStops";
+
+function SearchStopsResults({
+  children,
+  filter,
+  resultClassName,
+  resultsClassName,
+  resultsContainerClassName,
+  sort,
+}: SearchResultsProps<StopsFeature>) {
+  const { open, query, setOpen, setSelectedQuery } = useContext(SearchContext);
+  const searchResponse = useSearchStops(query);
+
+  const { t } = useI18n();
+
+  const onSelectResult = useCallback(
+    (item: StopsFeature) => {
+      setSelectedQuery(item.properties.name);
+      setOpen(false);
+    },
+    [setOpen, setSelectedQuery],
+  );
+
+  const results = useMemo(() => {
+    let rs = [...(searchResponse?.results || [])];
+
+    if (filter) {
+      rs = rs.filter(filter);
+    }
+
+    if (sort) {
+      rs = rs.sort(sort);
+    }
+    return rs;
+  }, [searchResponse, filter, sort]);
+
+  const searchResponseFiltered = useMemo(() => {
+    return {
+      ...searchResponse,
+      results,
+    };
+  }, [results, searchResponse]);
+
+  const showResults = useMemo(() => {
+    return open && !!results?.length;
+  }, [open, results]);
+
+  if (!showResults) {
+    return null;
+  }
+
+  return (
+    <>
+      <SearchResultsHeader>{t("search_stops_results")}</SearchResultsHeader>
+      <SearchResults
+        className={resultsContainerClassName}
+        resultsClassName={resultsClassName}
+        searchResponse={searchResponseFiltered}
+      >
+        {results.map((item: StopsFeature) => {
+          return (
+            <SearchResult className={resultClassName} key={item.properties.uid}>
+              {toChildArray(children).map(
+                (
+                  child: ReactElement<SearchResultsChildProps<StopsFeature>>,
+                ) => {
+                  const onSelectItem = (itemm: StopsFeature, evt: Event) => {
+                    onSelectResult(itemm);
+                    child.props?.onSelectItem?.(itemm, evt);
+                  };
+                  return cloneElement(child, {
+                    item: item,
+                    onSelectItem,
+                  });
+                },
+              )}
+            </SearchResult>
+          );
+        })}
+      </SearchResults>
+    </>
+  );
+}
+export default memo(SearchStopsResults);

package/src/SearchStopsResults/index.tsx

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

package/src/SearchTrainsResult/SearchTrainsResult.tsx

@@ -0,0 +1,42 @@
+import { memo } from "preact/compat";
+import { twMerge } from "tailwind-merge";
+
+import RouteIcon from "../RouteIcon";
+import useMapContext from "../utils/hooks/useMapContext";
+
+import type { RealtimeRouteIdentifierMatch } from "mobility-toolbox-js/types";
+import type { ButtonHTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type SearchTrainsResultProps = {
+  className?: string;
+  item?: RealtimeRouteIdentifierMatch;
+  onSelectItem?: (item: RealtimeRouteIdentifierMatch, evt: MouseEvent) => void;
+} & ButtonHTMLAttributes<HTMLButtonElement> &
+  PreactDOMAttributes;
+
+function SearchTrainsResult({
+  className,
+  item,
+  onSelectItem,
+  ...props
+}: SearchTrainsResultProps) {
+  const { realtimeLayer } = useMapContext();
+  return (
+    <button
+      {...props}
+      className={twMerge(
+        "flex w-full cursor-pointer items-center gap-3 text-left",
+        className,
+      )}
+      onClick={(evt) => {
+        realtimeLayer?.setVisible(true);
+        onSelectItem?.(item, evt);
+      }}
+    >
+      <RouteIcon line={item.trains[0].line}></RouteIcon>
+      <div className="grow">{`${item.trains[0].line?.name} (${item.route_identifier})`}</div>
+    </button>
+  );
+}
+
+export default memo(SearchTrainsResult);

package/src/SearchTrainsResult/index.tsx

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