diff --git a/components/map/hooks/bounds.js b/components/map/hooks/bounds.js deleted file mode 100644 index a84be8bd2..000000000 --- a/components/map/hooks/bounds.js +++ /dev/null @@ -1,44 +0,0 @@ -import {useMemo, useContext, useState, useEffect, useCallback} from 'react' -import bbox from '@turf/bbox' - -import BalDataContext from '@/contexts/bal-data' -import MapContext from '@/contexts/map' -import {useRouter} from 'next/router' - -function useBounds(commune, voie, toponyme) { - const communeBounds = useMemo(() => commune.contour ? bbox(commune.contour) : null, [commune.contour]) - const {editingItem} = useContext(BalDataContext) - const {map, isTileSourceLoaded} = useContext(MapContext) - const [bounds, setBounds] = useState(communeBounds) - - const router = useRouter() - - const setBoundsItem = useCallback(item => { - if (map && item && item.trace) { - setBounds(bbox(item.trace)) - } else if (map && item && item.bbox) { - setBounds(item.bbox) - } - }, [map, setBounds]) - - useEffect(() => { // Get bounds on page load and when edit - const {idVoie, idToponyme} = router.query - const bounds = communeBounds - - if (isTileSourceLoaded) { - if (idVoie) { - setBoundsItem(voie) - } else if (idToponyme) { - setBoundsItem(toponyme) - } else if (editingItem) { - setBoundsItem(editingItem) - } else { - setBounds(bounds) - } - } - }, [communeBounds, router.query, isTileSourceLoaded, voie, toponyme, editingItem, setBoundsItem]) - - return bounds -} - -export default useBounds diff --git a/components/map/hooks/bounds.ts b/components/map/hooks/bounds.ts new file mode 100644 index 000000000..d6d7c5522 --- /dev/null +++ b/components/map/hooks/bounds.ts @@ -0,0 +1,65 @@ +import { useMemo, useContext, useState, useEffect, useCallback } from "react"; +import bbox from "@turf/bbox"; + +import BalDataContext from "@/contexts/bal-data"; +import MapContext from "@/contexts/map"; +import { useRouter } from "next/router"; +import { CommuneType } from "@/types/commune"; +import { Toponyme, Voie } from "@/lib/openapi"; + +function useBounds(commune: CommuneType, voie: Voie, toponyme: Toponyme) { + const communeBounds = useMemo( + () => (commune.contour ? bbox(commune.contour) : null), + [commune.contour] + ); + const { editingItem } = useContext(BalDataContext); + const { map, isTileSourceLoaded } = useContext(MapContext); + const [wasCenteredOnCommuneOnce, setWasCenteredOnCommuneOnce] = + useState(false); + const [bounds, setBounds] = useState(communeBounds); + + const router = useRouter(); + + const setBoundsItem = useCallback( + (item) => { + if (map && item && item.trace) { + setBounds(bbox(item.trace)); + } else if (map && item && item.bbox) { + setBounds(item.bbox); + } + }, + [map, setBounds] + ); + + useEffect(() => { + // Get bounds on page load and when edit + const { idVoie, idToponyme } = router.query; + const bounds = communeBounds; + + if (isTileSourceLoaded) { + if (idVoie) { + setBoundsItem(voie); + } else if (idToponyme) { + setBoundsItem(toponyme); + } else if (editingItem) { + setBoundsItem(editingItem); + } else if (!wasCenteredOnCommuneOnce) { + setBounds(bounds); + setWasCenteredOnCommuneOnce(true); + } + } + }, [ + communeBounds, + router.query, + isTileSourceLoaded, + voie, + toponyme, + editingItem, + setBoundsItem, + wasCenteredOnCommuneOnce, + ]); + + return bounds; +} + +export default useBounds; diff --git a/components/table-row/table-row-edit-shortcut.tsx b/components/table-row/table-row-edit-shortcut.tsx index b005864c3..2c9cb4b90 100644 --- a/components/table-row/table-row-edit-shortcut.tsx +++ b/components/table-row/table-row-edit-shortcut.tsx @@ -1,7 +1,7 @@ -import React, {useState} from 'react' -import {Pane, Table, EditIcon, Text} from 'evergreen-ui' +import React, { useState } from "react"; +import { Pane, Table, EditIcon, Text, Tooltip, Position } from "evergreen-ui"; -import LanguagePreview from '../bal/language-preview' +import LanguagePreview from "../bal/language-preview"; interface TableRowEditShortcutProps { label: string; @@ -12,31 +12,43 @@ interface TableRowEditShortcutProps { isSelectable: boolean; } -function TableRowEditShortcut({label, nomAlt, complement, colors = {}, isEditingEnabled, isSelectable}: TableRowEditShortcutProps) { - const [hovered, setHovered] = useState(false) +function TableRowEditShortcut({ + label, + nomAlt, + complement, + colors = {}, + isEditingEnabled, + isSelectable, +}: TableRowEditShortcutProps) { + const [hoveredEdit, setHoveredEdit] = useState(false); - return ( + const CellComponent = (