@geops/rvf-mobility-web-component 0.1.46 → 0.1.47-beta.0

package/src/RvfIconButton/RvfIconButton.tsx

@@ -1,22 +1,23 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import { memo, SVGProps, useMemo } from "preact/compat";
+import { memo, useMemo } from "preact/compat";
 import { twMerge } from "tailwind-merge";
 
-import { RvfButtonProps, themes } from "../RvfButton/RvfButton";
+import { themes } from "../RvfButton/RvfButton";
+
+import type { SVGProps } from "preact/compat";
+
+import type { RvfButtonProps } from "../RvfButton/RvfButton";
 
 export type RvfIconButtonProps = {
   Icon?: (props: SVGProps<SVGSVGElement>) => preact.JSX.Element;
-} & JSX.ButtonHTMLAttributes<HTMLButtonElement> &
-  PreactDOMAttributes &
-  RvfButtonProps;
+} & RvfButtonProps;
 
 const baseClasses =
-  "flex  size-[32px] @sm/main:size-[36px] @md/main:size-[40px] p-[7px] items-center justify-center rounded-full border";
+  "flex  size-[32px] @sm/main:size-[36px] @md/main:size-[40px] p-[7px] items-center justify-center rounded-full border cursor-pointer disabled:cursor-default";
 
 function RvfIconButton({
   children,
   className,
+  href,
   Icon,
   selected = false,
   theme = "secondary",
@@ -24,10 +25,20 @@ function RvfIconButton({
 }: RvfIconButtonProps) {
   const classes = useMemo(() => {
     return twMerge(
-      `${baseClasses} ${themes[theme].classes}  ${selected ? themes[theme].selectedClasses : ""} ${className || ""}`,
+      baseClasses,
+      themes[theme].classes,
+      selected ? themes[theme].selectedClasses : "",
+      className,
     );
   }, [className, selected, theme]);
 
+  if (href) {
+    return (
+      <a className={classes} href={href} {...props}>
+        {children || <Icon height={"100%"} width={"100%"} />}
+      </a>
+    );
+  }
   return (
     <button className={classes} {...props}>
       {children || <Icon height={"100%"} width={"100%"} />}

package/src/RvfInputCopy/RvfInputCopy.tsx

@@ -1,9 +1,9 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { useRef, useState } from "preact/hooks";
 
 import Copy from "../icons/Copy";
-import RvfIconButton from "../RvfIconButton";
+import IconButton from "../ui/IconButton";
+
+import type { JSX, PreactDOMAttributes } from "preact";
 
 function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
   const [positionTooltip, setPositionTooltip] = useState<DOMRect>();
@@ -12,7 +12,7 @@ function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
 
   const handleCopyClick = (event) => {
     setPositionTooltip(event.currentTarget.getBoundingClientRect());
-    navigator.clipboard.writeText(window?.location.href).then(() => {
+    void navigator.clipboard.writeText(window?.location.href).then(() => {
       setIsTooltipShowed(true);
       setTimeout(() => {
         setIsTooltipShowed(false);
@@ -26,7 +26,7 @@ function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
   };
 
   return (
-    <div className="flex items-center text-grey">
+    <div className="text-grey flex items-center">
       <input
         className="h-7 w-full rounded-sm rounded-r-none border border-r-0 border-current p-1 leading-4 outline-none"
         onFocus={handleInputFocus}
@@ -35,14 +35,14 @@ function RvfInputCopy(props: JSX.InputHTMLAttributes & PreactDOMAttributes) {
         type="text"
         {...props}
       />
-      <RvfIconButton
+      <IconButton
         className="!size-7 rounded-l-none rounded-r-sm border-current"
         onClick={handleCopyClick}
       >
         <Copy />
-      </RvfIconButton>
+      </IconButton>
       <div
-        className={`fixed rounded-md bg-grey p-1 text-sm text-white ${isTooptipShowed ? "block" : "hidden"}`}
+        className={`bg-grey fixed rounded-md p-1 text-sm text-white ${isTooptipShowed ? "block" : "hidden"}`}
         style={{
           left: positionTooltip?.left - 30,
           top: positionTooltip?.top - 40,

package/src/RvfLayerTree/RvfLayerTree.tsx

@@ -1,4 +1,3 @@
-import { JSX, PreactDOMAttributes } from "preact";
 import { memo } from "preact/compat";
 import { useEffect, useReducer } from "preact/hooks";
 
@@ -7,7 +6,11 @@ import {
   LayersTreeDispatchContext,
 } from "./layersTreeContext";
 import layersTreeReducer from "./layersTreeReducer";
-import TreeItem, { TreeItemProps } from "./TreeItem/TreeItem";
+import TreeItem from "./TreeItem/TreeItem";
+
+import type { JSX, PreactDOMAttributes } from "preact";
+
+import type { TreeItemProps } from "./TreeItem/TreeItem";
 
 export type RvfLayerTreeProps = {
   layers: TreeItemProps[];

package/src/RvfLayerTree/TreeItem/TreeItem.tsx

@@ -1,21 +1,17 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
-import BaseLayer from "ol/layer/Base";
-import {
-  SVGProps,
-  useContext,
-  useEffect,
-  useId,
-  useState,
-} from "preact/compat";
+import { useContext, useEffect, useId, useState } from "preact/compat";
 
 import ArrowDown from "../../icons/ArrowDown";
 import ArrowUp from "../../icons/ArrowUp";
 import minusGrey from "../../icons/Minus/minus-grey.svg";
 import RvfCheckbox from "../../RvfCheckbox";
 import RvfRadioButton from "../../RvfRadioButton";
+import useLayerConfig from "../../utils/hooks/useLayerConfig";
 import { LayersTreeDispatchContext } from "../layersTreeContext";
 
+import type BaseLayer from "ol/layer/Base";
+import type { JSX, PreactDOMAttributes } from "preact";
+import type { SVGProps } from "preact/compat";
+
 export enum SelectionType {
   CHECKBOX = "checkbox",
   RADIO = "radio",
@@ -46,6 +42,7 @@ function TreeItem({
   const dispatch = useContext(LayersTreeDispatchContext);
   const inputId = useId();
   const buttonId = useId();
+  const layerConfig = useLayerConfig(layer.get("name"));
 
   useEffect(() => {
     if (isCollapsedOnControlClick) {
@@ -59,7 +56,7 @@ function TreeItem({
     if (isCollapsedOnControlClick && !isContainerVisible) {
       dispatch({
         payload: {
-          ...this["props"],
+          ...this.props,
           isControlChecked: true,
         },
         type: "SELECT_ITEM",
@@ -70,7 +67,7 @@ function TreeItem({
   const handleSelectionChange = (event) => {
     dispatch({
       payload: {
-        ...this["props"],
+        ...this.props,
         isControlChecked: event.target.checked,
       },
       type: "SELECT_ITEM",
@@ -78,14 +75,14 @@ function TreeItem({
   };
 
   const renderedLayers = childItems
-    .filter(({ title }) => {
-      return !!title;
+    .filter(({ title: titlee }) => {
+      return !!titlee;
     })
     .map((item, idx) => {
       return <TreeItem key={idx} {...item} />;
     });
 
-  if (!title) {
+  if (!title && !layerConfig.title) {
     return null;
   }
 
@@ -128,7 +125,7 @@ function TreeItem({
           className={`flex-1 cursor-pointer`}
           htmlFor={renderedLayers.length > 0 ? buttonId : inputId}
         >
-          {title}
+          {layerConfig.title || title}
         </label>
         {renderedLayers.length > 0 && (
           <button

package/src/RvfLayerTree/layersTreeReducer.ts

@@ -5,14 +5,6 @@ const ROOT = {
   parent: null,
 };
 
-const initTree = (tree) => {
-  const initializedTree = { ...ROOT };
-  initializedTree.childItems = tree;
-  mapNode(initializedTree.childItems, initializedTree);
-
-  return initializedTree;
-};
-
 const mapNode = (childItems, parent) => {
   for (const child of childItems) {
     child.parent = parent;
@@ -23,6 +15,14 @@ const mapNode = (childItems, parent) => {
   }
 };
 
+const initTree = (tree) => {
+  const initializedTree = { ...ROOT };
+  initializedTree.childItems = tree;
+  mapNode(initializedTree.childItems, initializedTree);
+
+  return initializedTree;
+};
+
 const findNodeInTree = (node, nodeToFind) => {
   if (node.id === nodeToFind.id) {
     return node;
@@ -38,16 +38,6 @@ const findNodeInTree = (node, nodeToFind) => {
   }
 };
 
-const setNewControlCheckedStatus = (tree, newItem) => {
-  const currentItem = findNodeInTree(tree, newItem);
-
-  if (currentItem) {
-    updateCheckedControlStatus(currentItem, newItem, false);
-  }
-
-  return { ...tree };
-};
-
 const updateCheckedControlStatus = (currentItem, newItem, isParentUpdate) => {
   if (newItem.isControlChecked) {
     if (newItem.selectionType === SelectionType.CHECKBOX) {
@@ -58,6 +48,7 @@ const updateCheckedControlStatus = (currentItem, newItem, isParentUpdate) => {
         child.isControlChecked = child.id === currentItem.id;
 
         if (!child.isControlChecked) {
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
           updateRadioChildNodes(child);
         }
       }
@@ -71,17 +62,31 @@ const updateCheckedControlStatus = (currentItem, newItem, isParentUpdate) => {
 
   // check all children
   if (currentItem.childItems.length && !isParentUpdate) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     updateChildNodes(currentItem);
   }
 
   // check all parents
+  // eslint-disable-next-line @typescript-eslint/no-use-before-define
   updateParentNodes(currentItem);
 };
 
+const setNewControlCheckedStatus = (tree, newItem) => {
+  const currentItem = findNodeInTree(tree, newItem);
+
+  if (currentItem) {
+    updateCheckedControlStatus(currentItem, newItem, false);
+  }
+
+  return { ...tree };
+};
+
 const updateChildNodes = (node) => {
   if (node.childItems[0].selectionType === SelectionType.RADIO) {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     updateRadioChildNodes(node);
   } else {
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
     updateCheckboxChildNodes(node);
   }
 };

package/src/RvfLayerTreeButton/RvfLayerTreeButton.tsx

@@ -1,13 +1,13 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo } from "preact/compat";
 import { useCallback } from "preact/hooks";
 
 import Stack from "../icons/Stack";
-import RvfIconButton from "../RvfIconButton";
+import IconButton from "../ui/IconButton";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
-export type RvfLayerTreeButtonProps = JSX.HTMLAttributes<HTMLButtonElement> &
+import type { HTMLAttributes, PreactDOMAttributes } from "preact";
+
+export type RvfLayerTreeButtonProps = HTMLAttributes<HTMLButtonElement> &
   PreactDOMAttributes;
 
 function RvfLayerTreeButton({ ...props }: RvfLayerTreeButtonProps) {
@@ -18,9 +18,9 @@ function RvfLayerTreeButton({ ...props }: RvfLayerTreeButtonProps) {
   }, [isLayerTreeOpen, setIsLayerTreeOpen]);
 
   return (
-    <RvfIconButton {...props} onClick={onClick} selected={isLayerTreeOpen}>
+    <IconButton {...props} onClick={onClick} selected={isLayerTreeOpen}>
       <Stack />
-    </RvfIconButton>
+    </IconButton>
   );
 }
 

package/src/RvfLineNetworkPlanLayer/RvfLineNetworkPlanLayer.tsx

@@ -1,5 +1,4 @@
 import { MaplibreStyleLayer } from "mobility-toolbox-js/ol";
-import { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
 import { memo } from "preact/compat";
 import { useEffect, useMemo } from "preact/hooks";
 
@@ -7,6 +6,8 @@ import { RVF_LAYERS_NAMES } from "../utils/constants";
 import useMapContext from "../utils/hooks/useMapContext";
 import useRvfContext from "../utils/hooks/useRvfContext";
 
+import type { MaplibreStyleLayerOptions } from "mobility-toolbox-js/ol/layers/MaplibreStyleLayer";
+
 function RvfLineNetworkPlanLayer(props: MaplibreStyleLayerOptions) {
   const { baseLayer, map } = useMapContext();
   const { setLineNetworkPlanLayer } = useRvfContext();

package/src/RvfLink/RvfLink.tsx

@@ -1,13 +1,13 @@
-import type { JSX, PreactDOMAttributes } from "preact";
-
 import { memo, useMemo } from "preact/compat";
 import { twMerge } from "tailwind-merge";
 
 import ArrowUpRight from "../icons/ArrowUpRight";
 
+import type { AnchorHTMLAttributes, PreactDOMAttributes } from "preact";
+
 export type RvfLinkProps = {
   theme?: "primary" | "secondary";
-} & JSX.AnchorHTMLAttributes<HTMLAnchorElement> &
+} & AnchorHTMLAttributes<HTMLAnchorElement> &
   PreactDOMAttributes;
 
 const baseClasses =
@@ -33,6 +33,7 @@ function RvfLink({
 }: RvfLinkProps) {
   const classes = useMemo(() => {
     return twMerge(
+      // eslint-disable-next-line @typescript-eslint/no-base-to-string, @typescript-eslint/restrict-template-expressions
       `${baseClasses} ${themes[theme].classes}  ${className || ""}`,
     );
   }, [className, theme]);