@geops/rvf-mobility-web-component 0.1.35 → 0.1.36

package/package.json

@@ -2,7 +2,7 @@
   "name": "@geops/rvf-mobility-web-component",
   "license": "UNLICENSED",
   "description": "Web components for rvf in the domains of mobility and logistics.",
-  "version": "0.1.35",
+  "version": "0.1.36",
   "homepage": "https://rvf-mobility-web-component-geops.vercel.app/",
   "type": "module",
   "main": "index.js",

package/src/RvfSearch/RvfSearch.tsx

@@ -0,0 +1,28 @@
+import { memo } from "preact/compat";
+import { useCallback } from "preact/hooks";
+
+import StopsSearch from "../StopsSearch";
+import centerOnStation from "../utils/centerOnStation";
+import { RVF_EXTENT_4326 } from "../utils/constants";
+import useMapContext from "../utils/hooks/useMapContext";
+
+function RvfSearch() {
+  const { apikey, map, stopsurl } = useMapContext();
+
+  const onSelect = useCallback(
+    (selected) => {
+      return centerOnStation(selected, map);
+    },
+    [map],
+  );
+
+  return (
+    <StopsSearch
+      apikey={apikey}
+      bbox={RVF_EXTENT_4326.join(",")}
+      onselect={onSelect}
+      url={stopsurl}
+    />
+  );
+}
+export default memo(RvfSearch);

package/src/RvfSearch/index.tsx

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

package/src/Search/index.tsx

@@ -1 +1 @@
-export { default } from "./Search";
+export { default } from "../RvfSearch";

package/src/StopsSearch/StopsSearch.tsx

@@ -10,9 +10,9 @@ import {
   useRef,
   useState,
 } from "preact/hooks";
-import { FaSearch } from "react-icons/fa";
-import { MdClose } from "react-icons/md";
 
+import Cancel from "../icons/Cancel";
+import Search from "../icons/Search";
 // @ts-expect-error tailwind must be added for the search web component
 import tailwind from "../style.css";
 import i18n from "../utils/i18n";
@@ -203,8 +203,8 @@ function StopsSearch({
         }
         ref={myRef}
       >
-        <div className={"flex items-center "}>
-          <FaSearch className="size-4" />
+        <div className={"flex items-center text-grey"}>
+          <Search className="size-4" />
         </div>
         <div className={"flex grow overflow-hidden border-b-2 border-solid"}>
           <input
@@ -234,13 +234,13 @@ function StopsSearch({
                 setResults(undefined);
               }}
             >
-              <MdClose className="size-4" />
+              <Cancel className="size-4 text-grey" />
             </button>
           )}
         </div>
       </div>
 
-      <div className="-mt-4px flex grow overflow-auto rounded-md rounded-t-none bg-white shadow">
+      <div className="flex grow overflow-auto rounded-md rounded-t-none bg-white shadow">
         {results && results.length === 0 && (
           <div
             className={

package/src/icons/Search/Search.tsx

@@ -0,0 +1,39 @@
+function Search({ ...props }) {
+  return (
+    <svg
+      height="24px"
+      version="1.1"
+      viewBox="0 0 24 24"
+      width="24px"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <title>iconfont/search</title>
+      <defs>
+        <polygon id="path-1" points="0 0 20 0 20 20 0 20"></polygon>
+      </defs>
+      <g
+        fill="none"
+        fillRule="evenodd"
+        id="iconfont/search"
+        stroke="none"
+        strokeWidth="1"
+      >
+        <g id="Group-3-Copy" transform="translate(2, 2)">
+          <mask fill="white" id="mask-2">
+            <use xlinkHref="#path-1"></use>
+          </mask>
+          <g id="Clip-2"></g>
+          <path
+            d="M14.0345333,13.8617333 C14.0025333,13.8864 13.9718667,13.9137333 13.9432,13.9430667 C13.9138667,13.9724 13.8865333,14.0030667 13.8632,14.0350667 C12.6038667,15.2517333 10.8892,15.9997333 8.99986667,15.9997333 C5.13386667,15.9997333 1.99986667,12.8657333 1.99986667,8.99973333 C1.99986667,5.13373333 5.13386667,1.99973333 8.99986667,1.99973333 C12.8658667,1.99973333 15.9998667,5.13373333 15.9998667,8.99973333 C15.9998667,10.8890667 15.2512,12.6037333 14.0345333,13.8617333 M19.7072,18.2930667 L16.0318667,14.6177333 C17.2632,13.0784 17.9998667,11.1250667 17.9998667,8.99973333 C17.9998667,4.02973333 13.9705333,-0.000266666667 8.99986667,-0.000266666667 C4.0292,-0.000266666667 -0.000133333333,4.02973333 -0.000133333333,8.99973333 C-0.000133333333,13.9704 4.0292,17.9997333 8.99986667,17.9997333 C11.1252,17.9997333 13.0785333,17.2637333 14.6178667,16.0317333 L18.2932,19.7070667 C18.6832,20.0977333 19.3165333,20.0977333 19.7072,19.7070667 C20.0978667,19.3164 20.0978667,18.6837333 19.7072,18.2930667"
+            fill="currentColor"
+            id="Fill-1"
+            mask="url(#mask-2)"
+          ></path>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default Search;

package/src/icons/Search/index.tsx

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

package/src/icons/Search/search.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>iconfont/search</title>
+    <defs>
+        <polygon id="path-1" points="0 0 20 0 20 20 0 20"></polygon>
+    </defs>
+    <g id="iconfont/search" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-3-Copy" transform="translate(2, 2)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <g id="Clip-2"></g>
+            <path d="M14.0345333,13.8617333 C14.0025333,13.8864 13.9718667,13.9137333 13.9432,13.9430667 C13.9138667,13.9724 13.8865333,14.0030667 13.8632,14.0350667 C12.6038667,15.2517333 10.8892,15.9997333 8.99986667,15.9997333 C5.13386667,15.9997333 1.99986667,12.8657333 1.99986667,8.99973333 C1.99986667,5.13373333 5.13386667,1.99973333 8.99986667,1.99973333 C12.8658667,1.99973333 15.9998667,5.13373333 15.9998667,8.99973333 C15.9998667,10.8890667 15.2512,12.6037333 14.0345333,13.8617333 M19.7072,18.2930667 L16.0318667,14.6177333 C17.2632,13.0784 17.9998667,11.1250667 17.9998667,8.99973333 C17.9998667,4.02973333 13.9705333,-0.000266666667 8.99986667,-0.000266666667 C4.0292,-0.000266666667 -0.000133333333,4.02973333 -0.000133333333,8.99973333 C-0.000133333333,13.9704 4.0292,17.9997333 8.99986667,17.9997333 C11.1252,17.9997333 13.0785333,17.2637333 14.6178667,16.0317333 L18.2932,19.7070667 C18.6832,20.0977333 19.3165333,20.0977333 19.7072,19.7070667 C20.0978667,19.3164 20.0978667,18.6837333 19.7072,18.2930667" id="Fill-1" fill="#000000" mask="url(#mask-2)"></path>
+        </g>
+    </g>
+</svg>